Feat/#85 Header 컴포넌트 기능 추가 및 개선 (#87)

* feat: 로그인 여부 및 사용자 타입에 따라 Header 구성 변경

- 로그인 여부에 따라 로그인/로그아웃 버튼 표시
- 고용주인 경우 '채용공고 등록' 버튼 추가
- 로컬스토리지에서 사용자 정보를 가져와 반영

* feat: Header 네비게이션 기능 추가

- 로고 클릭 시 홈 화면으로 이동
- 로그인 버튼 클릭 시 로그인 페이지로 이동
- 채용공고 등록 버튼 클릭 시 구인글 업로드 페이지로 이동
- 프로필 이미지 클릭 시 마이페이지로 이동

public/mockServiceWorker.js

@@ -7,7 +7,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.5.2';
+const PACKAGE_VERSION = '2.6.0';
 const INTEGRITY_CHECKSUM = '07a8241b182f8a246a7cd39894799a9e';
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse');
 const activeClientIds = new Set();

src/features/layout/Header/components/LanguageFilter.tsx

@@ -1,8 +1,20 @@
 import theme from '@/assets/theme';
 import { Select, Icon, List } from '@/components/common';
 import useGlobalSelect from '@/components/common/Select/hooks/useGlobalSelect';
+import { responsiveStyle } from '@/utils/responsive';
 
-const triggerStyle = { minWidth: '80px', fontSize: '16px', fontWeight: '700', color: theme.palettes.blue };
+const triggerStyle = {
+  minWidth: '80px',
+  fontSize: '16px',
+  fontWeight: '700',
+  color: theme.palettes.blue,
+
+  ...responsiveStyle({
+    mobile: {
+      width: '100%',
+    },
+  }),
+};
 
 const languageOptions = [
   {

src/features/layout/Header/index.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 import Header from '.';
-import profileImage from '@assets/images/profile-image.svg';
 
 const meta: Meta<typeof Header> = {
   title: 'features/layout/Header',
@@ -13,5 +12,5 @@ export default meta;
 type Story = StoryObj<typeof Header>;
 
 export const Default: Story = {
-  render: () => <Header profileImage={profileImage} />,
+  render: () => <Header />,
 };

src/features/layout/Header/index.styles.ts

@@ -81,6 +81,7 @@ export const Nav = styled.nav<NavProps>`
     mobile: {
       flexDirection: 'column',
       alignItems: 'stretch',
+      textAlign: 'center',
     },
   })}
 

src/features/layout/Header/index.tsx

@@ -15,28 +15,80 @@ import {
   Nav,
 } from './index.styles';
 import { UserData } from '@/types';
+import { startTransition, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
 
-type Props = Pick<UserData, 'profileImage'>;
-
-export default function Header({ profileImage }: Props) {
+export default function Header() {
+  const navigate = useNavigate();
   const [menuOpen, toggleMenu] = useToggle();
+  const [user, setUser] = useState<UserData | null>(null);
+
+  useEffect(() => {
+    const userData = localStorage.getItem('user');
+
+    if (userData) {
+      setUser(JSON.parse(userData));
+    }
+  }, []);
+
+  const handleLogoClick = () => {
+    startTransition(() => {
+      navigate(ROUTE_PATH.HOME);
+    });
+  };
+
+  const handleLogin = () => {
+    navigate(ROUTE_PATH.AUTH.SIGN_IN);
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    setUser(null);
+    navigate(ROUTE_PATH.HOME);
+  };
+
+  const handlePostNotice = () => {
+    navigate(ROUTE_PATH.POST_NOTICE);
+  };
+
+  const handleProfileClick = () => {
+    if (user?.type === 'employer') {
+      navigate(ROUTE_PATH.MY_PAGE.EMPLOYER);
+    } else if (user?.type === 'employee') {
+      navigate(ROUTE_PATH.EMPLOYEE.EMPLOYEE_PAGE);
+    }
+  };
 
   return (
     <HeaderContainer>
       <Flex justifyContent="space-between" alignItems="center" css={flexStyle}>
-        <LogoImg />
+        <LogoImg onClick={handleLogoClick} />
         <Flex justifyContent="flex-end" css={menuIconStyle} onClick={toggleMenu}>
           {menuOpen ? <CloseIcon /> : <MenuIcon />}
         </Flex>
         <Nav open={menuOpen}>
           <LanguageFilter />
-          <Button design="outlined" style={commonButtonStyle}>
-            채용공고 등록
-          </Button>
-          <Flex justifyContent="center" alignItems="center">
-            <Image url={profileImage} size={{ width: '40px', height: '40px' }} css={imageStyle} />
-          </Flex>
-          <Button style={customButtonStyle}>로그아웃</Button>
+          {!user ? (
+            <Button style={customButtonStyle} onClick={handleLogin}>
+              로그인
+            </Button>
+          ) : (
+            <>
+              {user.type === 'employer' && (
+                <Button design="outlined" style={commonButtonStyle} onClick={handlePostNotice}>
+                  채용공고 등록
+                </Button>
+              )}
+              <Flex justifyContent="center" alignItems="center" onClick={handleProfileClick}>
+                <Image url={user.profileImage} size={{ width: '40px', height: '40px' }} css={imageStyle} />
+              </Flex>
+              <Button style={customButtonStyle} onClick={handleLogout}>
+                로그아웃
+              </Button>
+            </>
+          )}
         </Nav>
       </Flex>
     </HeaderContainer>

src/features/layout/index.tsx

@@ -1,17 +1,11 @@
 import { ReactNode } from 'react';
 import Footer from './Footer';
 import Header from './Header';
-import profileImage from '@assets/images/profile-image.svg';
-
-const initialData = {
-  type: 'employer',
-  profileImage: profileImage,
-};
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <>
-      <Header profileImage={initialData.profileImage} />
+      <Header />
       {children}
       <Footer />
     </>

src/types/index.d.ts

@@ -23,7 +23,7 @@ export type ForeignerData = {
 };
 
 export type UserData = {
-  type: string;
+  type: 'first' | 'employee' | 'employer';
   profileImage: string;
 };