Merge pull request #10 from TTORANG/feat/routing#9

feat/라우팅 설정

Author: AndyH0ng

src/App.tsx

@@ -1,7 +1,22 @@
+import { Outlet, useLocation } from 'react-router-dom';
+
 import './App.css';
+import { Gnb, Layout } from './components/layout';
+import { DEFAULT_TAB, PATH_TO_TAB } from './constants/navigation';
 
 function App() {
-  return <></>;
+  const location = useLocation();
+  const activeTab = PATH_TO_TAB[location.pathname] ?? DEFAULT_TAB;
+
+  return (
+    <Layout
+      headerLeft={<div>로고</div>}
+      headerCenter={<Gnb activeTab={activeTab} />}
+      headerRight={<div>로그인</div>}
+    >
+      <Outlet />
+    </Layout>
+  );
 }
 
 export default App;

src/components/layout/GNB.tsx src/components/layout/Gnb.tsxsrc/components/layout/GNB.tsx renamed to src/components/layout/Gnb.tsx

@@ -1,40 +1,40 @@
+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 {
+interface GnbProps {
   activeTab?: Tab;
-  onTabChange?: (tab: Tab) => void;
 }
 
-export function GNB({ activeTab = 'slide', onTabChange }: GNBProps) {
+export function Gnb({ activeTab = DEFAULT_TAB }: 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,
               },
             )}
           >
             {label}
-          </button>
+          </Link>
         );
       })}
     </nav>

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>
   );
 }

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>
   );

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';

src/constants/navigation.ts

@@ -1,7 +1,14 @@
 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 type Tab = (typeof TABS)[number]['key'];
+
+export const DEFAULT_TAB: Tab = 'slide';
+
+export const PATH_TO_TAB: Record<string, Tab> = {
+  '/': DEFAULT_TAB,
+  ...Object.fromEntries(TABS.map((tab) => [tab.path, tab.key])),
+};

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 /> }, // DEFAULT_TAB 변경 시 동기화 필요
+      { path: 'slide', element: <SlidePage /> },
+      { path: 'video', element: <VideoPage /> },
+      { path: 'insight', element: <InsightPage /> },
+    ],
+  },
+]);
+
 createRoot(document.querySelector('#root')!).render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>,
 );

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}