From df3f863f19363abeb61866663c6094b716b03e31 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Tue, 30 Dec 2025 22:09:52 +0900
Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20GNB=EB=A5=BC=20Gnb=EB=A1=9C=20r?=
 =?UTF-8?q?ename=20(#9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/{GNB.tsx => Gnb.tsx} | 4 ++--
 src/components/layout/index.ts             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/layout/{GNB.tsx => Gnb.tsx} (92%)

diff --git a/src/components/layout/GNB.tsx b/src/components/layout/Gnb.tsx
similarity index 92%
rename from src/components/layout/GNB.tsx
rename to src/components/layout/Gnb.tsx
index 144f59b7..8f6138aa 100644
--- a/src/components/layout/GNB.tsx
+++ b/src/components/layout/Gnb.tsx
@@ -2,12 +2,12 @@ import clsx from 'clsx';
 
 import { TABS, type Tab } from '../../constants/navigation';
 
-interface GNBProps {
+interface GnbProps {
   activeTab?: Tab;
   onTabChange?: (tab: Tab) => void;
 }
 
-export function GNB({ activeTab = 'slide', onTabChange }: GNBProps) {
+export function Gnb({ activeTab = 'slide', onTabChange }: GnbProps) {
   return (
     <nav
       className="absolute left-1/2 flex h-15 -translate-x-1/2 items-center justify-center"
diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts
index 985c4f27..e5fd9468 100644
--- a/src/components/layout/index.ts
+++ b/src/components/layout/index.ts
@@ -1,3 +1,3 @@
-export { GNB } from './GNB';
+export { Gnb } from './Gnb';
 export { Header } from './Header';
 export { Layout } from './Layout';

From a786fb68e2d13a4f91490e4a0c6a3625492b7c2f Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Tue, 30 Dec 2025 22:10:25 +0900
Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20navigation.ts=EC=97=90=20path?=
 =?UTF-8?q?=20=EB=B0=8F=20PATH=5FTO=5FTAB=20=ED=86=B5=ED=95=A9=20(#9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/navigation.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts
index 9224f64e..9ea557aa 100644
--- a/src/constants/navigation.ts
+++ b/src/constants/navigation.ts
@@ -1,7 +1,12 @@
 export const TABS = [
-  { key: 'slide', label: '슬라이드' },
-  { key: 'video', label: '영상' },
-  { key: 'insight', label: '인사이트' },
+  { key: 'slide', label: '슬라이드', path: '/slide' },
+  { key: 'video', label: '영상', path: '/video' },
+  { key: 'insight', label: '인사이트', path: '/insight' },
 ] as const;
 
+export const PATH_TO_TAB: Record<string, Tab> = {
+  '/': 'slide',
+  ...Object.fromEntries(TABS.map((tab) => [tab.path, tab.key])),
+};
+
 export type Tab = (typeof TABS)[number]['key'];

From a3338bb7315dd06305d2ba05f4fd09a2c1a1de68 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Tue, 30 Dec 2025 22:11:10 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                      | 17 ++++++++++++++++-
 src/components/layout/Gnb.tsx    | 18 +++++++++---------
 src/components/layout/Header.tsx | 12 ++++++++----
 src/components/layout/Layout.tsx |  8 +++++---
 src/main.tsx                     | 21 +++++++++++++++++++--
 src/pages/InsightPage.tsx        |  7 +++++++
 src/pages/SlidePage.tsx          |  7 +++++++
 src/pages/VideoPage.tsx          |  7 +++++++
 8 files changed, 78 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/InsightPage.tsx
 create mode 100644 src/pages/SlidePage.tsx
 create mode 100644 src/pages/VideoPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f702fa08..184964b6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,22 @@
+import { Outlet, useLocation } from 'react-router-dom';
+
 import './App.css';
+import { Gnb, Layout } from './components/layout';
+import { PATH_TO_TAB } from './constants/navigation';
 
 function App() {
-  return <></>;
+  const location = useLocation();
+  const activeTab = PATH_TO_TAB[location.pathname] ?? 'slide';
+
+  return (
+    <Layout
+      headerLeft={<div>로고</div>}
+      headerCenter={<Gnb activeTab={activeTab} />}
+      headerRight={<div>로그인</div>}
+    >
+      <Outlet />
+    </Layout>
+  );
 }
 
 export default App;
diff --git a/src/components/layout/Gnb.tsx b/src/components/layout/Gnb.tsx
index 8f6138aa..f9d3c31e 100644
--- a/src/components/layout/Gnb.tsx
+++ b/src/components/layout/Gnb.tsx
@@ -1,32 +1,32 @@
+import { Link } from 'react-router-dom';
+
 import clsx from 'clsx';
 
 import { TABS, type Tab } from '../../constants/navigation';
 
 interface GnbProps {
   activeTab?: Tab;
-  onTabChange?: (tab: Tab) => void;
 }
 
-export function Gnb({ activeTab = 'slide', onTabChange }: GnbProps) {
+export function Gnb({ activeTab = 'slide' }: GnbProps) {
   return (
     <nav
-      className="absolute left-1/2 flex h-15 -translate-x-1/2 items-center justify-center"
+      className="flex h-15 items-center justify-center"
       role="tablist"
       aria-label="네비게이션 메뉴"
     >
-      {TABS.map(({ key, label }) => {
+      {TABS.map(({ key, label, path }) => {
         const isActive = activeTab === key;
         return (
-          <button
+          <Link
             key={key}
-            type="button"
+            to={path}
             role="tab"
             id={`tab-${key}`}
             aria-selected={isActive}
             aria-controls={`tabpanel-${key}`}
-            onClick={() => onTabChange?.(key)}
             className={clsx(
-              `flex h-full w-25 items-end justify-center px-2.5 pb-4 pt-4 text-body-m-bold border-b-2`,
+              'flex h-full w-25 items-end justify-center px-2.5 pb-4 pt-4 text-body-m-bold border-b-2',
               {
                 'border-main text-main': isActive,
                 'border-transparent text-gray-600': !isActive,
@@ -34,7 +34,7 @@ export function Gnb({ activeTab = 'slide', onTabChange }: GnbProps) {
             )}
           >
             {label}
-          </button>
+          </Link>
         );
       })}
     </nav>
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 9dd91d49..caf158d9 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,13 +1,17 @@
 import type { ReactNode } from 'react';
 
 interface HeaderProps {
-  children?: ReactNode;
+  left?: ReactNode;
+  center?: ReactNode;
+  right?: ReactNode;
 }
 
-export function Header({ children }: HeaderProps) {
+export function Header({ left, center, right }: HeaderProps) {
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 flex h-15 items-center justify-center border-b border-gray-200 bg-white px-18">
-      {children}
+    <header className="fixed top-0 left-0 right-0 z-50 flex h-15 items-center justify-between border-b border-gray-200 bg-white px-18">
+      <div className="flex items-center">{left}</div>
+      <div className="absolute left-1/2 -translate-x-1/2">{center}</div>
+      <div className="flex items-center">{right}</div>
     </header>
   );
 }
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 1517a961..ff060363 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -3,14 +3,16 @@ import type { ReactNode } from 'react';
 import { Header } from './Header';
 
 interface LayoutProps {
-  header: ReactNode;
+  headerLeft?: ReactNode;
+  headerCenter?: ReactNode;
+  headerRight?: ReactNode;
   children?: ReactNode;
 }
 
-export function Layout({ children, header }: LayoutProps) {
+export function Layout({ headerLeft, headerCenter, headerRight, children }: LayoutProps) {
   return (
     <div className="min-h-screen bg-gray-100">
-      <Header>{header}</Header>
+      <Header left={headerLeft} center={headerCenter} right={headerRight} />
       <main className="pt-15">{children}</main>
     </div>
   );
diff --git a/src/main.tsx b/src/main.tsx
index 66b0f0df..55cd2d39 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,28 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
-import App from './App.tsx';
+import App from './App';
+import InsightPage from './pages/InsightPage';
+import SlidePage from './pages/SlidePage';
+import VideoPage from './pages/VideoPage';
 import './styles/index.css';
 
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      { index: true, element: <SlidePage /> },
+      { path: 'slide', element: <SlidePage /> },
+      { path: 'video', element: <VideoPage /> },
+      { path: 'insight', element: <InsightPage /> },
+    ],
+  },
+]);
+
 createRoot(document.querySelector('#root')!).render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>,
 );
diff --git a/src/pages/InsightPage.tsx b/src/pages/InsightPage.tsx
new file mode 100644
index 00000000..38d9ac0e
--- /dev/null
+++ b/src/pages/InsightPage.tsx
@@ -0,0 +1,7 @@
+export default function InsightPage() {
+  return (
+    <div role="tabpanel" id="tabpanel-insight" aria-labelledby="tab-insight" className="p-8">
+      <h1 className="text-body-m-bold">인사이트</h1>
+    </div>
+  );
+}
diff --git a/src/pages/SlidePage.tsx b/src/pages/SlidePage.tsx
new file mode 100644
index 00000000..7e3229fb
--- /dev/null
+++ b/src/pages/SlidePage.tsx
@@ -0,0 +1,7 @@
+export default function SlidePage() {
+  return (
+    <div role="tabpanel" id="tabpanel-slide" aria-labelledby="tab-slide" className="p-8">
+      <h1 className="text-body-m-bold">슬라이드</h1>
+    </div>
+  );
+}
diff --git a/src/pages/VideoPage.tsx b/src/pages/VideoPage.tsx
new file mode 100644
index 00000000..c6b10470
--- /dev/null
+++ b/src/pages/VideoPage.tsx
@@ -0,0 +1,7 @@
+export default function VideoPage() {
+  return (
+    <div role="tabpanel" id="tabpanel-video" aria-labelledby="tab-video" className="p-8">
+      <h1 className="text-body-m-bold">영상</h1>
+    </div>
+  );
+}

From 15389c1801c7ac1e1a74ad7764ed6eb798bf7612 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Tue, 30 Dec 2025 22:30:56 +0900
Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=EA=B0=92=20=EC=A4=91=EC=95=99=ED=99=94=20(#9?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                   | 4 ++--
 src/components/layout/Gnb.tsx | 4 ++--
 src/constants/navigation.ts   | 8 +++++---
 src/main.tsx                  | 2 +-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 184964b6..b09fa42b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,11 +2,11 @@ import { Outlet, useLocation } from 'react-router-dom';
 
 import './App.css';
 import { Gnb, Layout } from './components/layout';
-import { PATH_TO_TAB } from './constants/navigation';
+import { DEFAULT_TAB, PATH_TO_TAB } from './constants/navigation';
 
 function App() {
   const location = useLocation();
-  const activeTab = PATH_TO_TAB[location.pathname] ?? 'slide';
+  const activeTab = PATH_TO_TAB[location.pathname] ?? DEFAULT_TAB;
 
   return (
     <Layout
diff --git a/src/components/layout/Gnb.tsx b/src/components/layout/Gnb.tsx
index f9d3c31e..2db7fff9 100644
--- a/src/components/layout/Gnb.tsx
+++ b/src/components/layout/Gnb.tsx
@@ -2,13 +2,13 @@ import { Link } from 'react-router-dom';
 
 import clsx from 'clsx';
 
-import { TABS, type Tab } from '../../constants/navigation';
+import { DEFAULT_TAB, TABS, type Tab } from '../../constants/navigation';
 
 interface GnbProps {
   activeTab?: Tab;
 }
 
-export function Gnb({ activeTab = 'slide' }: GnbProps) {
+export function Gnb({ activeTab = DEFAULT_TAB }: GnbProps) {
   return (
     <nav
       className="flex h-15 items-center justify-center"
diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts
index 9ea557aa..a547c29a 100644
--- a/src/constants/navigation.ts
+++ b/src/constants/navigation.ts
@@ -4,9 +4,11 @@ export const TABS = [
   { key: 'insight', label: '인사이트', path: '/insight' },
 ] as const;
 
+export type Tab = (typeof TABS)[number]['key'];
+
+export const DEFAULT_TAB: Tab = 'slide';
+
 export const PATH_TO_TAB: Record<string, Tab> = {
-  '/': 'slide',
+  '/': DEFAULT_TAB,
   ...Object.fromEntries(TABS.map((tab) => [tab.path, tab.key])),
 };
-
-export type Tab = (typeof TABS)[number]['key'];
diff --git a/src/main.tsx b/src/main.tsx
index 55cd2d39..406b8e1e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -13,7 +13,7 @@ const router = createBrowserRouter([
     path: '/',
     element: <App />,
     children: [
-      { index: true, element: <SlidePage /> },
+      { index: true, element: <SlidePage /> }, // DEFAULT_TAB 변경 시 동기화 필요
       { path: 'slide', element: <SlidePage /> },
       { path: 'video', element: <VideoPage /> },
       { path: 'insight', element: <InsightPage /> },

From 841d6a843f0d934184fb1284465f35010a245db2 Mon Sep 17 00:00:00 2001
From: Andy Hong <chili.tomat0@icloud.com>
Date: Tue, 30 Dec 2025 22:51:07 +0900
Subject: [PATCH 5/5] =?UTF-8?q?design:=20rem=20=EB=8B=A8=EC=9C=84=EB=A1=9C?=
 =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B0=80=EC=9D=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=95=EC=9D=98=20(#9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/index.css | 4 ++++
 src/styles/theme.css | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index 1da34e2c..d029f3af 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -23,4 +23,8 @@
   --font-size-caption: var(--font-size-caption);
   --font-size-body-s: var(--font-size-body-s);
   --font-size-body-m: var(--font-size-body-m);
+
+  --spacing-15: 3.75rem;
+  --spacing-18: 4.5rem;
+  --spacing-25: 6.25rem;
 }
diff --git a/src/styles/theme.css b/src/styles/theme.css
index a00eaff8..fb7cfecf 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -25,9 +25,9 @@
   --line-height: 1.5;
 
   /* 폰트 크기 */
-  --font-size-caption: 12px;
-  --font-size-body-s: 14px;
-  --font-size-body-m: 16px;
+  --font-size-caption: 0.75rem;
+  --font-size-body-s: 0.875rem;
+  --font-size-body-m: 1rem;
 
   /* 폰트 굵기 */
   --font-weight-regular: 400;