feat: 검색 UI 추가

src/app/components/(main)/SearchComponent.tsx

@@ -0,0 +1,100 @@
+import search from '@images/search.png'
+import left from '@images/left.png'
+import Image from 'next/image'
+import Spacer from '../Spacer'
+import { categories } from '@/types/Categories'
+import { useState, useEffect } from 'react'
+import NewCourseItem from './NewCourseItem'
+import LayoutSpacer from '../LayoutSpacer'
+
+// TODO: 실제 데이터 및 로직 구현 필요
+export default function SearchComponent({
+  isSearch,
+  setIsSearch,
+}: {
+  isSearch: boolean
+  setIsSearch: (isSearch: boolean) => void
+}) {
+  useEffect(() => {
+    if (isSearch) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'unset'
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset'
+    }
+  }, [isSearch])
+
+  const [clickedCategory, setClickedCategory] = useState<number[]>([])
+  const handleCategoryClick = (id: number) => {
+    setClickedCategory((prev) =>
+      prev.includes(id)
+        ? prev.filter((categoryId) => categoryId !== id)
+        : [...prev, id]
+    )
+  }
+
+  return (
+    <div className='w-full'>
+      <div className='flex justify-between items-center'>
+        <button onClick={() => setIsSearch(false)}>
+          <Image alt='close' src={left} className='w-[30px] h-auto' />
+        </button>
+        <div
+          className={
+            isSearch
+              ? 'flex ml-[10px] w-full gap-[10px] bg-light-gray rounded-full px-[14px] py-[10px] items-center'
+              : 'hidden'
+          }
+        >
+          <Image alt='search' src={search} className='w-[15px] h-auto' />
+          <input
+            type='text'
+            className='bg-transparent flex h-full w-full focus:outline-none text-sub placeholder:text-sub placeholder:font-light'
+            placeholder='궁금한 지역 검색해보세요! 딱 맞는 코스만 골라드릴게요'
+          />
+        </div>
+      </div>
+      <div className='w-[375px] h-[calc(100vh-55px)] overflow-y-auto bg-white fixed z-[999] top-[55px]'>
+        <Spacer height={12} />
+        <div className='flex flex-col items-center'>
+          <p className='text-[12px] text-black opacity-50'>
+            원하는 태그를 눌러주세요. 더 자세히 알려드려요
+          </p>
+          <Spacer height={14} />
+          <div className='mt-[5px] justify-center inline-flex max-w-[306px] flex-wrap gap-[9px]'>
+            {categories.map((category) => (
+              <button
+                key={category.id}
+                className={`text-[13px] h-[28px] px-[15px] border border-container-blue rounded-full transition-all duration-200 cursor-pointer ${
+                  clickedCategory.includes(category.id)
+                    ? 'bg-container-blue text-white'
+                    : 'border-container-blue text-search-gray'
+                }`}
+                onClick={() => handleCategoryClick(category.id)}
+              >
+                {category.value}
+              </button>
+            ))}
+          </div>
+          <Spacer height={14} />
+          <Spacer height={8} className='bg-light-gray' />
+          <Spacer height={22} />
+          <div className='w-full px-[20px] flex flex-col gap-[15px]'>
+            <NewCourseItem />
+            <NewCourseItem />
+            <NewCourseItem />
+            <NewCourseItem />
+            <NewCourseItem />
+            <NewCourseItem />
+            <NewCourseItem />
+            <NewCourseItem />
+          </div>
+          <LayoutSpacer />
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/components/Footer.tsx

@@ -23,11 +23,7 @@ export default function Footer() {
   if (isLogin) return null
 
   return (
-    <footer
-      className={
-        'fixed bottom-0 shadow-custom max-w-[375px] text-gray-400 text-base bg-white flex w-full h-[60px] justify-around items-center'
-      }
-    >
+    <footer className='fixed bottom-0 shadow-custom max-w-[375px] text-gray-400 text-base bg-white flex w-full h-[60px] justify-around items-center'>
       <Link href='/' className='flex flex-col items-center mb-[5px]'>
         <Image
           src={isHome ? homePurple : home}

src/app/components/Header.tsx

@@ -6,31 +6,41 @@ import Image from 'next/image'
 import Link from 'next/link'
 import logo from '@images/logo.png'
 import { usePathname } from 'next/navigation'
+import { useState } from 'react'
+import SearchComponent from '@/app/components/(main)/SearchComponent'
 
 export default function Header() {
   const path = usePathname()
   const isLogin = path.includes('/login')
+  const [isSearch, setIsSearch] = useState(false)
 
   if (isLogin) return null
 
   return (
-    <>
-      <header className='max-w-[375px] bg-white w-full h-[55px] min-h-[55px] flex justify-between items-center px-4 border-b-[1px] border-b-header-line'>
-        <Link
-          href='/'
-          className='text-blue-800 text-3xl font-bold cursor-pointer'
-        >
-          <Image width={30} height={30} alt='logo' src={logo} />
+    <header className='max-w-[375px] relative bg-white w-full h-[55px] pr-[10px] min-h-[55px] flex justify-between items-center border-b-[1px] border-b-header-line'>
+      <Link
+        href='/'
+        className={`text-blue-800 text-3xl font-bold cursor-pointer pl-[10px] ${
+          isSearch ? 'hidden' : ''
+        }`}
+      >
+        <Image width={30} height={30} alt='logo' src={logo} />
+      </Link>
+      <div
+        className={
+          isSearch ? 'hidden' : 'flex items-center gap-[10px] right-[10px]'
+        }
+      >
+        <button onClick={() => setIsSearch(!isSearch)}>
+          <Image alt='search' src={search} className='w-24 h-auto' />
+        </button>
+        <Link href='/notifications'>
+          <Image alt='notification' src={noti} className='w-24 h-auto' />
         </Link>
-        <div className='flex items-center gap-[10px] right-[10px]'>
-          <Link href='/search'>
-            <Image alt='search' src={search} className='w-24 h-auto' />
-          </Link>
-          <Link href='/notifications'>
-            <Image alt='notification' src={noti} className='w-24 h-auto' />
-          </Link>
-        </div>
-      </header>
-    </>
+      </div>
+      {isSearch && (
+        <SearchComponent isSearch={isSearch} setIsSearch={setIsSearch} />
+      )}
+    </header>
   )
 }

tailwind.config.ts

@@ -17,6 +17,7 @@ const config: Config = {
         'container-light-blue': '#B3BAF1',
         'light-gray': '#F0F0F0',
         kakao: '#FFDC00',
+        'search-gray': '#747474',
       },
       fontSize: {
         headline: '20px',