✨ feat: header 컴포넌트 리팩토링 및 기능 추가#30

src/components/layout/header/logo.tsx

@@ -5,7 +5,14 @@ import Image from 'next/image';
 const Logo = () => {
   return (
     <div className={cn('relative h-[30px] w-[84px] shrink-0', 'tablet:h-[40px] tablet:w-[112px]')}>
-      <Image src={logo} alt='더 줄게' className='object-contain' fill priority />
+      <Image
+        src={logo}
+        alt='더 줄게'
+        className='object-contain'
+        fill
+        priority
+        sizes='(max-width: 744px) 84px, 112px'
+      />
     </div>
   );
 };

src/components/layout/header/nav.tsx

@@ -1,15 +1,44 @@
 import { Icon } from '@/components/ui';
+import useAuth from '@/hooks/useAuth';
 import { cn } from '@/lib/utils/cn';
+import { UserRole } from '@/types/user';
 import Link from 'next/link';
+import { ReactNode } from 'react';
+
+const NAV_CONFIG: Record<UserRole, ReactNode> = {
+  guest: (
+    <>
+      <Link href='/login'>로그인</Link>
+      <Link href='/signup'>회원가입</Link>
+    </>
+  ),
+  employee: (
+    <>
+      <Link href='/my-profile'>내 프로필</Link>
+    </>
+  ),
+  employer: (
+    <>
+      <Link href='/my-shop'>내 가게</Link>
+    </>
+  ),
+};
 
 const Nav = () => {
+  const { role, isLogin, logout } = useAuth();
+  const navRole: UserRole = !isLogin ? 'guest' : role === 'employer' ? 'employer' : 'employee';
+
   return (
-    <nav className={cn('flex shrink-0 gap-4 text-body-m font-bold', 'desktop:gap-10')}>
-      <Link href={`/`}>로그인</Link>
-      <Link href={`/`}>회원가입</Link>
-      <button>
-        <Icon iconName='notificationOff' iconSize='rg' bigScreenSize='md' ariaLabel='알림' />
-      </button>
+    <nav className={cn('flex shrink-0 items-center gap-4 text-body-m font-bold', 'desktop:gap-10')}>
+      {NAV_CONFIG[navRole]}
+      {isLogin && (
+        <>
+          <button onClick={logout}>로그아웃</button>
+          <button>
+            <Icon iconName='notificationOff' iconSize='rg' bigScreenSize='md' ariaLabel='알림' />
+          </button>
+        </>
+      )}
     </nav>
   );
 };

src/components/layout/header/searchBar.tsx

@@ -1,9 +1,28 @@
 import { Icon } from '@/components/ui';
 import { cn } from '@/lib/utils/cn';
+import { useRouter } from 'next/router';
+import { ChangeEvent, FormEvent, useState } from 'react';
+
+const SearchBar = ({ initValue = '' }) => {
+  const [keyword, setKeyword] = useState(initValue);
+  const router = useRouter();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => setKeyword(e.target.value);
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!keyword) {
+      router.push('/');
+      return;
+    }
+    return router.push(`/search?q=${keyword}`);
+  };
 
-const SearchBar = () => {
   return (
-    <div className={cn('relative order-1 w-full grow', 'tablet:order-none')}>
+    <form
+      className={cn('relative order-1 w-full grow', 'tablet:order-none')}
+      onSubmit={handleSubmit}
+    >
       <Icon
         iconName='search'
         iconSize='rg'
@@ -14,13 +33,15 @@ const SearchBar = () => {
         type='text'
         id='shopSearchKeyWord'
         name='shopSearchKeyWord'
+        value={keyword}
+        onChange={handleChange}
         className={cn(
           'w-full rounded-xl bg-gray-100 p-3 pl-10 text-body-s',
           'focus:outline-red-300'
         )}
-        placeholder='가게 이름으로 찾아보세요 '
+        placeholder='공고를 검색해보세요'
       />
-    </div>
+    </form>
   );
 };