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

jisooooooooooo · web-flow · commit 89201a0d88cf · 2025-07-14T18:25:23.000+09:00
[Feat]: 헤더 구현
diff --git a/.nvmrc 2 b/.nvmrc 2
@@ -0,0 +1 @@
+20.0.0 
diff --git a/public/svg/ic_logo.svg b/public/svg/ic_logo.svg
@@ -0,0 +1,11 @@
+<svg width="162" height="24" viewBox="0 0 162 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.2189 1.66797V22.8332H18.3423L5.57927 9.60131V22.8332H1V1.66797H4.40988L16.9391 14.9867V1.66797H21.2189Z" fill="white"/>
+<path d="M57.2287 1.66797V22.8332H54.3521L41.589 9.60131V22.8332H37.0098V1.66797H40.4196L52.9488 14.9867V1.66797H57.2287Z" fill="white"/>
+<path d="M27.373 22.999V7.75H31.6997V22.999H27.373Z" fill="white"/>
+<path d="M27.373 6.00623V1.83984H31.6997V6.00623H27.373Z" fill="white"/>
+<path d="M156.344 22.9932V18.1602H161.17V22.9932H156.344Z" fill="white"/>
+<path d="M78.7599 23.0051H62.5703V1.83984H81.1251L80.6227 6.03815H66.9296V10.386H80.0392L79.5033 14.4106H66.9296V18.8647H79.2623L78.7599 23.0051Z" fill="white"/>
+<path d="M83.5391 23.0051L85.8379 1.83984H94.1659C101.772 1.83984 105.838 6.0671 105.838 13.5661C105.838 20.1097 100.808 23.0051 94.8077 23.0051H83.5391ZM88.353 19.0384H95.0265C98.9356 19.0384 101.724 17.4749 101.724 13.1318C101.724 8.29654 99.3902 5.86442 95.0265 5.86442H89.9222L88.353 19.0384Z" fill="white"/>
+<path d="M133.209 12.1587C133.209 17.9554 128.097 22.9985 120.812 22.9985C113.527 22.9985 108.414 17.9554 108.414 12.1587C108.414 5.84025 114.028 1 120.812 1C127.595 1 133.209 5.84025 133.209 12.1587ZM112.929 12.1587C112.929 15.6367 116.601 19.0278 120.812 19.0278C125.022 19.0278 128.628 15.6367 128.628 12.1587C128.628 8.36182 125.323 5.20261 120.812 5.20261C116.3 5.20261 112.929 8.36182 112.929 12.1587Z" fill="white"/>
+<path d="M134.875 1.83984H155.51L155.008 6.03815H147.352V23.0051H143.05V6.03815H134.875V1.83984Z" fill="white"/>
+</svg>
diff --git a/public/svg/ic_small_textdelete 2.svg b/public/svg/ic_small_textdelete 2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M4.16602 15.8346L15.8327 4.16797M4.16602 4.16797L15.8327 15.8346" stroke="#E3E4E5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/svg/ic_streaker_dot 2.svg b/public/svg/ic_streaker_dot 2.svg
@@ -0,0 +1,33 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_ii_1979_1516)">
+<rect width="36" height="36" rx="18" fill="url(#paint0_linear_1979_1516)"/>
+<foreignObject x="-4" y="-4" width="44" height="44"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_0_1979_1516_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="4" width="36" height="36" rx="18" fill="url(#paint1_linear_1979_1516)" fill-opacity="0.1"/>
+</g>
+<defs>
+<filter id="filter0_ii_1979_1516" x="-4.8" y="-4.8" width="45.6" height="45.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2.4" dy="2.4"/>
+<feGaussianBlur stdDeviation="1.2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1979_1516"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2.4" dy="-2.4"/>
+<feGaussianBlur stdDeviation="1.2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.582788 0 0 0 0 0.76 0 0 0 0 0.674348 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_1979_1516" result="effect2_innerShadow_1979_1516"/>
+</filter>
+<clipPath id="bgblur_0_1979_1516_clip_path" transform="translate(4 4)"><rect width="36" height="36" rx="18"/>
+</clipPath><linearGradient id="paint0_linear_1979_1516" x1="18" y1="0" x2="18" y2="36" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3E72F3"/>
+<stop offset="1" stop-color="#C3D9FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1979_1516" x1="18" y1="0" x2="18" y2="36" gradientUnits="userSpaceOnUse">
+<stop stop-color="#508FFF"/>
+<stop offset="1" stop-color="#8AB4FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/svg/ic_streaker_dot_default 2.svg b/public/svg/ic_streaker_dot_default 2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
+  <rect width="36" height="36" rx="18" fill="#282C33"/>
+</svg>
diff --git a/public/svg/ic_tomorrow 2.svg b/public/svg/ic_tomorrow 2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
+  <path d="M10.5 22.1654L18.6667 13.9987L10.5 5.83203" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 
diff --git a/public/svg/ic_yesterday 2.svg b/public/svg/ic_yesterday 2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
+<path d="M17.5 22.1654L9.33333 13.9987L17.5 5.83203" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/image/.gitkeep b/src/assets/image/.gitkeep
diff --git a/src/assets/svg/IcLogo.tsx b/src/assets/svg/IcLogo.tsx
@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+const SvgIcLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 162 24" {...props}>
+    <path
+      fill="#fff"
+      d="M21.219 1.668v21.165h-2.877L5.58 9.601v13.232H1V1.668h3.41l12.53 13.319V1.668zM57.229 1.668v21.165h-2.877L41.59 9.601v13.232h-4.58V1.668h3.41l12.53 13.319V1.668zM27.373 22.999V7.75H31.7v15.249zM27.373 6.006V1.84H31.7v4.166zM156.344 22.993V18.16h4.826v4.833zM78.76 23.005H62.57V1.84h18.555l-.502 4.198H66.93v4.348h13.11l-.537 4.025H66.93v4.454h12.332zM83.54 23.005 85.837 1.84h8.328c7.606 0 11.672 4.227 11.672 11.726 0 6.544-5.03 9.44-11.03 9.44zm4.813-3.967h6.674c3.909 0 6.697-1.563 6.697-5.906 0-4.835-2.334-7.268-6.698-7.268h-5.104zM133.209 12.159c0 5.796-5.112 10.84-12.397 10.84s-12.398-5.044-12.398-10.84C108.414 5.84 114.028 1 120.812 1s12.397 4.84 12.397 11.159m-20.28 0c0 3.478 3.672 6.869 7.883 6.869 4.21 0 7.816-3.391 7.816-6.87 0-3.796-3.305-6.955-7.816-6.955-4.512 0-7.883 3.159-7.883 6.956M134.875 1.84h20.635l-.502 4.198h-7.656v16.967h-4.302V6.038h-8.175z"
+    />
+  </svg>
+);
+export default SvgIcLogo;
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
@@ -3,6 +3,7 @@ export { default as IcCheckboxChecked } from './IcCheckboxChecked';
 export { default as IcCheckboxDefault } from './IcCheckboxDefault';
 export { default as IcDropdown } from './IcDropdown';
 export { default as IcLock } from './IcLock';
+export { default as IcLogo } from './IcLogo';
 export { default as IcMediumTextdelete } from './IcMediumTextdelete';
 export { default as IcModalDelete } from './IcModalDelete';
 export { default as IcPencil } from './IcPencil';
diff --git a/src/common/component/AiRecommendModal/AiRecommendModal.stories 2.tsx b/src/common/component/AiRecommendModal/AiRecommendModal.stories 2.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import AiRecommendModal from './AiRecommendModal';
+
+const meta = {
+  title: 'Common/AiRecommendModal',
+  component: AiRecommendModal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AiRecommendModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onClose: () => {},
+  },
+};
diff --git a/src/common/component/Button/Button 2.tsx b/src/common/component/Button/Button 2.tsx
@@ -0,0 +1,11 @@
+import * as styles from './Button.css';
+
+type MandalButtonProps = {
+  text: string;
+};
+
+const MandalButton = ({ text }: MandalButtonProps) => {
+  return <button className={styles.buttonContainer}>{text}</button>;
+};
+
+export default MandalButton;
diff --git a/src/common/component/ModifyTextField/index 2.ts b/src/common/component/ModifyTextField/index 2.ts
@@ -0,0 +1,2 @@
+export { default } from './ModifyTextField';
+export type { ModifyTextFieldProps, ModifyTextFieldVariant } from './ModifyTextField.types';
diff --git a/src/common/component/SignupTextField/SignupTextField.mock 2.ts b/src/common/component/SignupTextField/SignupTextField.mock 2.ts
@@ -0,0 +1,5 @@
+export const MOCK_SIGNUP_DATA = {
+  name: '신지수?((#((3ㅓ우렁',
+  email: 'sjsz0811@hanyang.ac.kr',
+  birth: '2002-08-11',
+};
diff --git a/src/common/component/SignupTextField/index 2.ts b/src/common/component/SignupTextField/index 2.ts
@@ -0,0 +1,2 @@
+export { default } from './SignupTextField';
+export * from './SignupTextField.types';
diff --git a/src/page/edit/Edit 2.tsx b/src/page/edit/Edit 2.tsx
@@ -0,0 +1,5 @@
+const Edit = () => {
+  return <div>수정하기 뷰</div>;
+};
+
+export default Edit;
diff --git a/src/page/history/StreakTrackerSection/StreakTrackerSection.css 2.ts b/src/page/history/StreakTrackerSection/StreakTrackerSection.css 2.ts
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const streakTrackerContainer = style({
+  display: 'flex',
+  gap: '2rem',
+});
diff --git a/src/page/history/sampleData/dayData 2.ts b/src/page/history/sampleData/dayData 2.ts
@@ -0,0 +1,4 @@
+export const dayData = {
+  title: '전체 목표',
+  progressDays: 1,
+};
diff --git a/src/page/history/type/StreakDataType 2.ts b/src/page/history/type/StreakDataType 2.ts
@@ -0,0 +1,14 @@
+export interface CompletedTodo {
+  id: number;
+  title: string;
+}
+
+export interface Streak {
+  streakDay: number;
+  completedTodoCount: number;
+  completedTodos: CompletedTodo[];
+}
+
+export interface StreakData {
+  streaks: Streak[];
+}
diff --git a/src/page/mandal/Mandal.css 2.ts b/src/page/mandal/Mandal.css 2.ts
@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+
+export const viewContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginTop: '8.7rem',
+  marginBottom: '10.8rem',
+  gap: '7.3rem',
+});
+
+export const entireContainer = style({
+  display: 'grid',
+  width: '95.4rem',
+  height: '95.4rem',
+  rowGap: '3rem',
+  columnGap: '3rem',
+  alignSelf: 'center',
+  gridTemplateRows: 'repeat(3, minmax(0, 1fr))',
+  gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+});
diff --git a/src/shared/component/Layout/layoutFooter/Footer.css.ts b/src/shared/component/Layout/layoutFooter/Footer.css.ts
@@ -2,12 +2,14 @@ import { style } from '@vanilla-extract/css';
 
 import { colors } from '@/style/token';
 import { fonts } from '@/style/token/typography.css';
+import { zIndex } from '@/style/token/zIndex.css';
 
 export const footerContainer = style({
   display: 'flex',
   flexDirection: 'column',
   height: '15.1rem',
   padding: '4rem 0',
+  zIndex: zIndex.layout,
   justifyContent: 'center',
   alignItems: 'center',
   borderTop: `2px solid ${colors.grey1}`,
diff --git a/src/shared/component/Layout/layoutHeader/Header.css.ts b/src/shared/component/Layout/layoutHeader/Header.css.ts
@@ -7,7 +7,7 @@ import { zIndex } from '@/style/token/zIndex.css';
 export const header = style({
   position: 'sticky',
   top: 0,
-  zIndex: zIndex.header,
+  zIndex: zIndex.layout,
   width: '100%',
   backgroundColor: colors.bg_black01,
   display: 'flex',
@@ -16,16 +16,16 @@ export const header = style({
 
 export const headerInner = style({
   width: '100%',
-  maxWidth: '128rem',
-  padding: '1.5rem 8rem',
+  padding: '2.8rem 8rem',
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
+  height: '8rem',
 });
 
-export const logo = style({
-  color: colors.white01,
-  ...fonts.subtitle05,
+export const logoImage = style({
+  height: '2.4rem',
+  flexShrink: 0,
 });
 
 export const navWrapper = style({
diff --git a/src/shared/component/Layout/layoutHeader/Header.tsx b/src/shared/component/Layout/layoutHeader/Header.tsx
@@ -1,23 +1,28 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 import * as styles from './Header.css';
 
 import { PATH } from '@/route/path';
+import IcLogo from '@/assets/svg/IcLogo';
 
 const MENUS = [
   { label: '나의 할 일', path: PATH.TODO },
-  { label: '나의 만다르트', path: PATH.MANDAL },
+  { 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 location = useLocation();
+
+  const findActiveMenu = MENUS.find((menu) => location.pathname.startsWith(menu.path));
+  const initialMenu = findActiveMenu ? findActiveMenu.label : '';
+
+  const [activeMenu, setActiveMenu] = useState<string>(initialMenu);
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
 
   const handleLogin = () => {
-    // 로그인 로직 추가하기
     setIsLoggedIn(true);
   };
 
@@ -26,26 +31,36 @@ const Header = () => {
     navigate(path);
   };
 
-  return (
-    <header className={styles.header}>
-      <div className={styles.headerInner}>
-        <h1 className={styles.logo}>NINEDOT</h1>
+  const renderNavMenu = () => (
+    <>
+      <nav className={styles.navWrapper}>
+        {MENUS.map((menu) => {
+          const isActive = activeMenu === menu.label;
+          const buttonClass = `${styles.navItem} ${isActive ? styles.navItemActive : ''}`;
 
-        <nav className={styles.navWrapper}>
-          {MENUS.map((menu) => (
+          return (
             <button
               key={menu.label}
-              className={`${styles.navItem} ${activeMenu === menu.label ? styles.navItemActive : ''}`}
+              className={buttonClass}
               onClick={() => handleMenuClick(menu.label, menu.path)}
-              aria-current={activeMenu === menu.label ? 'page' : undefined}
+              aria-current={isActive ? 'page' : undefined}
             >
               {menu.label}
             </button>
-          ))}
-        </nav>
+          );
+        })}
+      </nav>
+      <div className={styles.profilePlaceholder} />
+    </>
+  );
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.headerInner}>
+        <IcLogo className={styles.logoImage} />
 
         {isLoggedIn ? (
-          <div className={styles.profilePlaceholder} />
+          renderNavMenu()
         ) : (
           <button className={styles.loginButton} onClick={handleLogin}>
             로그인
diff --git a/src/style/global.css.ts b/src/style/global.css.ts
@@ -1,9 +1,12 @@
 import { globalStyle } from '@vanilla-extract/css';
 
+import { colors } from '@/style/token/color.css';
+
 import './reset.css.ts';
 
 globalStyle('html', {
   fontSize: '62.5%',
+  backgroundColor: colors.bg_black01,
 });
 
 globalStyle('body', {
diff --git a/src/style/token/zIndex.css.ts b/src/style/token/zIndex.css.ts
@@ -1,5 +1,5 @@
 export const zIndex = {
-  header: '1000',
+  layout: '1000',
   modal: '2000',
   tooltip: '3000',
   dropdown: '4000',
diff --git a/src/type/api.ts b/src/type/api.ts
@@ -0,0 +1,18 @@
+export type ApiSuccessResponse<T> = {
+  code: number;
+  message: string;
+  data: T;
+  meta?: {
+    path?: string;
+    timestamp?: number;
+  };
+};
+
+export type ApiErrorResponse = {
+  code: number;
+  message: string;
+  meta: {
+    path: string;
+    timestamp: number;
+  };
+};
diff --git a/vercel 2.json b/vercel 2.json
@@ -0,0 +1,11 @@
+{
+  "buildCommand": "pnpm build",
+  "installCommand": "pnpm install",
+  "framework": "vite",
+  "outputDirectory": "dist",
+  "functions": {
+    "app/api/**/*.ts": {
+      "runtime": "nodejs20.x"
+    }
+  }
+} 
