Merge pull request #38 from SOPT-36-NINEDOT/feat/#36/layoutHeaderFooter

[Feat]: 임시 헤더 및 rem 값 수정

Author: jisooooooooooo

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

@@ -0,0 +1,58 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors } from '@/style/token/color.css';
+import { fonts } from '@/style/token/typography.css';
+
+export const header = style({
+  width: '100%',
+  backgroundColor: colors.bg_black01,
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+export const headerInner = style({
+  width: '100%',
+  maxWidth: '90rem',
+  padding: '0.94rem 5rem',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const logo = style({
+  color: colors.white01,
+  ...fonts.subtitle05,
+});
+
+export const navWrapper = style({
+  display: 'flex',
+  gap: '1.25rem',
+});
+
+export const navItem = style({
+  display: 'flex',
+  padding: '0.75rem 1.25rem',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexShrink: 0,
+  color: '#5A5E66', // 추후 토큰 색상으로 변경
+  textAlign: 'center',
+  ...fonts.subtitle05,
+  background: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  whiteSpace: 'nowrap',
+  transition: 'color 0.2s',
+});
+
+export const active = style({
+  color: '#FDFDFD',
+});
+
+export const profilePlaceholder = style({
+  width: '3.125rem',
+  height: '3.125rem',
+  borderRadius: '50%',
+  backgroundColor: '#5A5E66', // 추후 토큰 색상으로 변경
+  flexShrink: 0,
+});

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

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import * as styles from './Header.css';
+
+const MENUS = ['나의 할 일', '나의 만다르트', '나의 히스토리'];
+
+const Header = () => {
+  const [activeMenu, setActiveMenu] = useState<string>(MENUS[0]);
+
+  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}
+              className={`${styles.navItem} ${activeMenu === menu ? styles.active : ''}`}
+              onClick={() => setActiveMenu(menu)}
+              aria-current={activeMenu === menu ? 'page' : undefined}
+            >
+              {menu}
+            </button>
+          ))}
+        </nav>
+
+        <div className={styles.profilePlaceholder} />
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/shared/component/Layout/Layout.tsx

@@ -1,13 +1,11 @@
 import { Outlet } from 'react-router-dom';
 
+import Header from './Header/Header';
+
 const Layout = () => {
   return (
     <div>
-      {/* TODO: Header 컴포넌트 추가 */}
-      <header>
-        {/* 임시 헤더 */}
-        <h1>NINEDOT</h1>
-      </header>
+      <Header />
 
       <main>
         <Outlet />

src/style/global.css.ts

@@ -3,7 +3,7 @@ import { globalStyle } from '@vanilla-extract/css';
 import './reset.css.ts';
 
 globalStyle('html', {
-  fontSize: '62.5%',
+  fontSize: '100%',
 });
 
 globalStyle('body', {

src/style/token/typography.css.ts

@@ -1,96 +1,96 @@
 export const fonts = {
   display01: {
-    fontSize: '5.4rem',
+    fontSize: '3.375rem', // 54px
     fontWeight: '700',
     lineHeight: '140%',
   },
   display02: {
-    fontSize: '2.8rem',
+    fontSize: '1.75rem', // 28px
     fontWeight: '700',
     lineHeight: '140%',
   },
   title01: {
-    fontSize: '2.8rem',
+    fontSize: '1.75rem', // 28px
     fontWeight: '600',
     lineHeight: '140%',
   },
   title02: {
-    fontSize: '2.8rem',
+    fontSize: '1.75rem', // 28px
     fontWeight: '300',
     lineHeight: '140%',
   },
   title03: {
-    fontSize: '2.4rem',
+    fontSize: '1.5rem', // 24px
     fontWeight: '700',
     lineHeight: '140%',
   },
   title04: {
-    fontSize: '2.4rem',
+    fontSize: '1.5rem', // 24px
     fontWeight: '600',
     lineHeight: '140%',
   },
   subtitle01: {
-    fontSize: '2rem',
+    fontSize: '1.25rem', // 20px
     fontWeight: '700',
     lineHeight: '140%',
   },
   subtitle02: {
-    fontSize: '2rem',
+    fontSize: '1.25rem', // 20px
     fontWeight: '600',
     lineHeight: '140%',
   },
   subtitle03: {
-    fontSize: '2rem',
+    fontSize: '1.25rem', // 20px
     fontWeight: '500',
     lineHeight: '140%',
   },
   subtitle04: {
-    fontSize: '2rem',
+    fontSize: '1.25rem', // 20px
     fontWeight: '400',
     lineHeight: '140%',
   },
   subtitle05: {
-    fontSize: '1.8rem',
+    fontSize: '1.125rem', // 18px
     fontWeight: '700',
     lineHeight: '140%',
   },
   subtitle06: {
-    fontSize: '1.8rem',
+    fontSize: '1.125rem', // 18px
     fontWeight: '400',
     lineHeight: '140%',
   },
   body01: {
-    fontSize: '1.6rem',
+    fontSize: '1rem', // 16px
     fontWeight: '700',
     lineHeight: '140%',
   },
   body02: {
-    fontSize: '1.6rem',
+    fontSize: '1rem', // 16px
     fontWeight: '500',
     lineHeight: '140%',
   },
   body03: {
-    fontSize: '1.6rem',
+    fontSize: '1rem', // 16px
     fontWeight: '400',
     lineHeight: '140%',
   },
   body04: {
-    fontSize: '1.4rem',
+    fontSize: '0.875rem', // 14px
     fontWeight: '700',
     lineHeight: '140%',
   },
   body05: {
-    fontSize: '1.4rem',
+    fontSize: '0.875rem', // 14px
     fontWeight: '400',
     lineHeight: '140%',
   },
   caption01: {
-    fontSize: '1.2rem',
+    fontSize: '0.75rem', // 12px
     fontWeight: '700',
     lineHeight: '140%',
   },
   caption02: {
-    fontSize: '1.2rem',
+    fontSize: '0.75rem', // 12px
     fontWeight: '400',
     lineHeight: '140%',
   },