♻️ refactor: header 컴포넌트 리팩토링 및 logo 링크 추가 #30

src/components/layout/header/logo.tsx

@@ -1,19 +1,22 @@
 import logo from '@/assets/images/logo.svg';
 import { cn } from '@/lib/utils/cn';
 import Image from 'next/image';
+import Link from 'next/link';
 
 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
-        sizes='(max-width: 744px) 84px, 112px'
-      />
-    </div>
+    <h1 className={cn('h-[30px] w-[84px] shrink-0', 'tablet:h-[40px] tablet:w-[112px]')}>
+      <Link href='/' aria-label='홈으로 이동' className={cn('relative block h-full')}>
+        <Image
+          src={logo}
+          alt='더 줄게 로고'
+          className='object-contain'
+          fill
+          priority
+          sizes='(max-width: 744px) 84px, 112px'
+        />
+      </Link>
+    </h1>
   );
 };
 export default Logo;

src/components/layout/header/nav.tsx

@@ -3,38 +3,42 @@ 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>
-    </>
-  ),
+interface NavItems {
+  href: string;
+  label: string;
+}
+
+const NAV_ITEMS: Record<UserRole, NavItems[]> = {
+  guest: [
+    { href: '/login', label: '로그인' },
+    { href: '/signup', label: '회원가입' },
+  ],
+  employee: [{ href: '/my-profile', label: '내 프로필' }],
+  employer: [{ href: '/my-shop', label: '내 가게' }],
 };
 
+const getNavVariant = (isLogin: boolean, role: UserRole): UserRole =>
+  !isLogin ? 'guest' : role === 'employer' ? 'employer' : 'employee';
+
 const Nav = () => {
   const { role, isLogin, logout } = useAuth();
-  const navRole: UserRole = !isLogin ? 'guest' : role === 'employer' ? 'employer' : 'employee';
+  const navVariant = getNavVariant(isLogin, role);
 
   return (
     <nav className={cn('flex shrink-0 items-center gap-4 text-body-m font-bold', 'desktop:gap-10')}>
-      {NAV_CONFIG[navRole]}
+      {NAV_ITEMS[navVariant].map(({ href, label }) => (
+        <Link key={href} href={href}>
+          {label}
+        </Link>
+      ))}
+
       {isLogin && (
         <>
-          <button onClick={logout}>로그아웃</button>
-          <button>
+          <button type='button' onClick={logout}>
+            로그아웃
+          </button>
+          <button type='button' aria-label='알림 확인하기'>
             <Icon iconName='notificationOff' iconSize='rg' bigScreenSize='md' ariaLabel='알림' />
           </button>
         </>

src/components/layout/header/searchBar.tsx

@@ -15,11 +15,13 @@ const SearchBar = ({ initValue = '' }) => {
       router.push('/');
       return;
     }
-    return router.push(`/search?q=${keyword}`);
+    router.push({ pathname: '/search', query: { q: keyword } });
   };
 
   return (
     <form
+      role='search'
+      aria-label='공고 검색'
       className={cn('relative order-1 w-full grow', 'tablet:order-none')}
       onSubmit={handleSubmit}
     >
@@ -30,9 +32,12 @@ const SearchBar = ({ initValue = '' }) => {
         ariaLabel='검색'
       />
       <input
-        type='text'
-        id='shopSearchKeyWord'
-        name='shopSearchKeyWord'
+        type='search'
+        id='q'
+        name='q'
+        aria-label='검색어'
+        autoComplete='off'
+        enterKeyHint='search'
         value={keyword}
         onChange={handleChange}
         className={cn(