[Feat] Header 컴포넌트 구현 (#36)

Author: 1jiwoo27

src/pages/home/home-page.tsx

@@ -1,7 +1,13 @@
 import * as styles from './home-page.css';
+import Header from '../../shared/components/header/header';
 
 const HomePage = () => {
-  return <div className={styles.title}>홈 페이지</div>;
+  return (
+    <>
+      <Header />
+      <div className={styles.title}>홈 페이지</div>
+    </>
+  );
 };
 
 export default HomePage;

src/shared/components/header/header.css.ts

@@ -0,0 +1,37 @@
+import { vars } from '../../../styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const headerContainer = style({
+  width: '100%',
+  height: '6.4rem',
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  background: 'white',
+  borderBottom: `1px solid ${vars.color.gray300}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  zIndex: 10,
+  padding: '0 10rem',
+});
+
+export const logo = style({
+  fontSize: '2.4rem',
+  fontWeight: 'bold',
+  color: vars.color.gray800,
+  cursor: 'pointer',
+  userSelect: 'none',
+});
+
+export const logout = style({
+  width: 'auto',
+  padding: '0',
+  border: 'none',
+  backgroundColor: 'transparent',
+  color: vars.color.gray800,
+  fontSize: vars.size.xs,
+  fontWeight: vars.weight.regular,
+  cursor: 'pointer',
+  userSelect: 'none',
+});

src/shared/components/header/header.tsx

@@ -0,0 +1,30 @@
+import * as styles from './header.css';
+import { useNavigate } from 'react-router-dom';
+import { logout } from '../../api/auth';
+
+const Header = () => {
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      localStorage.removeItem('accessToken');
+      navigate('/login', { replace: true });
+    } catch (e) {
+      console.error('Logout failed:', e);
+    }
+  };
+
+  return (
+    <div className={styles.headerContainer}>
+      <div className={styles.logo} onClick={() => navigate('/')}>
+        FINI
+      </div>
+      <button className={styles.logout} onClick={handleLogout}>
+        로그아웃
+      </button>
+    </div>
+  );
+};
+
+export default Header;