feat: header 파일 추가

Author: jisooooooooooo

src/shared/component/Layout/header/Header.css.ts

@@ -0,0 +1,90 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors } from '@/style/token/color.css';
+import { fonts } from '@/style/token/typography.css';
+
+export const header = style({
+  position: 'sticky',
+  top: 0,
+  zIndex: 100,
+  width: '100%',
+  backgroundColor: colors.bg_black01,
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+export const headerInner = style({
+  width: '100%',
+  maxWidth: '128rem',
+  padding: '1.5rem 8rem',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const logo = style({
+  color: colors.white01,
+  ...fonts.subtitle05,
+});
+
+export const navWrapper = style({
+  display: 'flex',
+  gap: '2rem',
+});
+
+export const navItem = style({
+  display: 'flex',
+  padding: '1.2rem 2rem',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexShrink: 0,
+  color: colors.grey6,
+  textAlign: 'center',
+  ...fonts.subtitle05,
+  background: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  whiteSpace: 'nowrap',
+  transition: 'color 0.2s',
+  selectors: {
+    '&:hover': {
+      color: colors.grey7,
+    },
+  },
+});
+
+export const navItemActive = style({
+  color: `${colors.grey11} !important`,
+  selectors: {
+    '&:hover': {
+      color: `${colors.grey11} !important`,
+    },
+  },
+});
+
+export const active = style({
+  color: colors.grey11,
+});
+
+export const profilePlaceholder = style({
+  width: '5rem',
+  height: '5rem',
+  borderRadius: '50%',
+  backgroundColor: colors.grey6,
+  flexShrink: 0,
+});
+
+export const loginButton = style({
+  color: colors.grey11,
+  textAlign: 'center',
+  ...fonts.subtitle05,
+  background: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  transition: 'color 0.2s',
+  selectors: {
+    '&:hover': {
+      color: colors.grey7,
+    },
+  },
+});

src/shared/component/Layout/header/Header.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import * as styles from './Header.css';
+
+import { PATH } from '@/route/path';
+
+const MENUS = [
+  { label: '나의 할 일', path: PATH.TODO },
+  { label: '나의 만다르트', path: PATH.MANDAL },
+  { label: '나의 히스토리', path: PATH.HISTORY },
+];
+
+const Header = () => {
+  const [activeMenu, setActiveMenu] = useState<string>(MENUS[0].label);
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const navigate = useNavigate();
+
+  const handleLogin = () => {
+    // 로그인 로직 추가하기
+    setIsLoggedIn(true);
+  };
+
+  const handleMenuClick = (menuLabel: string, path: string) => {
+    setActiveMenu(menuLabel);
+    navigate(path);
+  };
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.headerInner}>
+        <h1 className={styles.logo}>NINEDOT</h1>
+
+        <nav className={styles.navWrapper}>
+          {MENUS.map((menu) => (
+            <button
+              key={menu.label}
+              className={`${styles.navItem} ${activeMenu === menu.label ? styles.navItemActive : ''}`}
+              onClick={() => handleMenuClick(menu.label, menu.path)}
+              aria-current={activeMenu === menu.label ? 'page' : undefined}
+            >
+              {menu.label}
+            </button>
+          ))}
+        </nav>
+
+        {isLoggedIn ? (
+          <div className={styles.profilePlaceholder} />
+        ) : (
+          <button className={styles.loginButton} onClick={handleLogin}>
+            로그인
+          </button>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default Header;