fix/라우팅 경로 수정

src/components/common/LoginButton.tsx

@@ -0,0 +1,9 @@
+import { Link } from 'react-router-dom';
+
+export function LoginButton() {
+  return (
+    <Link to="/login" className="flex items-center gap-1 text-body-s-bold text-gray-800">
+      로그인
+    </Link>
+  );
+}

src/components/common/Logo.tsx

@@ -0,0 +1,15 @@
+import { Link, useLocation } from 'react-router-dom';
+
+import logoFull from '@/assets/logo-full@4x.webp';
+import logoIcon from '@/assets/logo-icon@4x.webp';
+
+export function Logo() {
+  const { pathname } = useLocation();
+  const isHome = pathname === '/';
+
+  return (
+    <Link to="/">
+      <img src={isHome ? logoFull : logoIcon} alt="또랑" className="h-8" />
+    </Link>
+  );
+}

src/components/common/index.ts

@@ -0,0 +1,2 @@
+export { LoginButton } from './LoginButton';
+export { Logo } from './Logo';

src/components/layout/Gnb.tsx

@@ -1,26 +1,26 @@
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
 
 import clsx from 'clsx';
 
-import { DEFAULT_TAB, TABS, type Tab } from '../../constants/navigation';
+import { TABS, getTabFromPathname, getTabPath } from '@/constants/navigation';
 
-interface GnbProps {
-  activeTab?: Tab;
-}
+export function Gnb() {
+  const { projectId = '' } = useParams<{ projectId: string }>();
+  const location = useLocation();
+  const activeTab = getTabFromPathname(location.pathname);
 
-export function Gnb({ activeTab = DEFAULT_TAB }: GnbProps) {
   return (
     <nav
       className="flex h-15 items-center justify-center"
       role="tablist"
       aria-label="네비게이션 메뉴"
     >
-      {TABS.map(({ key, label, path }) => {
+      {TABS.map(({ key, label }) => {
         const isActive = activeTab === key;
         return (
           <Link
             key={key}
-            to={path}
+            to={getTabPath(projectId, key)}
             role="tab"
             id={`tab-${key}`}
             aria-selected={isActive}

src/components/layout/Layout.tsx

@@ -1,19 +1,25 @@
 import type { ReactNode } from 'react';
+import { Outlet } from 'react-router-dom';
 
-import { Header } from './Header';
+import { Logo } from '@/components/common';
 
 interface LayoutProps {
-  headerLeft?: ReactNode;
-  headerCenter?: ReactNode;
-  headerRight?: ReactNode;
-  children?: ReactNode;
+  left?: ReactNode;
+  center?: ReactNode;
+  right?: ReactNode;
 }
 
-export function Layout({ headerLeft, headerCenter, headerRight, children }: LayoutProps) {
+export function Layout({ left, center, right }: LayoutProps) {
   return (
     <div className="min-h-screen bg-gray-100">
-      <Header left={headerLeft} center={headerCenter} right={headerRight} />
-      <main className="pt-15">{children}</main>
+      <header className="fixed top-0 right-0 left-0 z-50 flex h-15 items-center justify-between border-b border-gray-200 bg-white px-18">
+        <div className="flex items-center gap-6">{left ?? <Logo />}</div>
+        <div className="absolute left-1/2 -translate-x-1/2">{center}</div>
+        <div className="flex items-center gap-8">{right}</div>
+      </header>
+      <main className="pt-15">
+        <Outlet />
+      </main>
     </div>
   );
 }

src/constants/navigation.ts

@@ -1,14 +1,43 @@
 export const TABS = [
-  { key: 'slide', label: '슬라이드', path: '/slide' },
-  { key: 'video', label: '영상', path: '/video' },
-  { key: 'insight', label: '인사이트', path: '/insight' },
+  { key: 'slide', label: '슬라이드' },
+  { key: 'video', label: '영상' },
+  { key: 'insight', label: '인사이트' },
 ] as const;
 
 export type Tab = (typeof TABS)[number]['key'];
 
-export const DEFAULT_TAB: Tab = 'slide';
+export const DEFAULT_SLIDE_ID = '1';
 
-export const PATH_TO_TAB: Record<string, Tab> = {
-  '/': DEFAULT_TAB,
-  ...Object.fromEntries(TABS.map((tab) => [tab.path, tab.key])),
+const LAST_SLIDE_KEY_PREFIX = 'lastSlideId:';
+
+/** 마지막으로 본 슬라이드 ID 저장 */
+export const setLastSlideId = (projectId: string, slideId: string): void => {
+  localStorage.setItem(`${LAST_SLIDE_KEY_PREFIX}${projectId}`, slideId);
+};
+
+/** 마지막으로 본 슬라이드 ID 조회 */
+export const getLastSlideId = (projectId: string): string => {
+  return localStorage.getItem(`${LAST_SLIDE_KEY_PREFIX}${projectId}`) ?? DEFAULT_SLIDE_ID;
+};
+
+/** 탭별 경로 생성 */
+export const getTabPath = (projectId: string, tab: Tab, slideId?: string): string => {
+  switch (tab) {
+    case 'slide':
+      return `/${projectId}/slide/${slideId ?? getLastSlideId(projectId)}`;
+    case 'video':
+      return `/${projectId}/video`;
+    case 'insight':
+      return `/${projectId}/insight`;
+  }
+};
+
+/** pathname에서 탭 추출 (/:projectId/:tab/...) */
+export const getTabFromPathname = (pathname: string): Tab => {
+  const segments = pathname.split('/').filter(Boolean);
+  const tabSegment = segments[1];
+
+  if (tabSegment === 'video') return 'video';
+  if (tabSegment === 'insight') return 'insight';
+  return 'slide';
 };

src/main.tsx

@@ -1,20 +1,36 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { Navigate, RouterProvider, createBrowserRouter } from 'react-router-dom';
 
-import App from './App';
-import InsightPage from './pages/InsightPage';
-import SlidePage from './pages/SlidePage';
-import VideoPage from './pages/VideoPage';
-import './styles/index.css';
+import { LoginButton, Logo } from '@/components/common';
+import { Gnb } from '@/components/layout/Gnb';
+import { Layout } from '@/components/layout/Layout';
+import { HomePage, InsightPage, SlidePage, VideoPage } from '@/pages';
+import '@/styles/index.css';
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <App />,
+    element: <Layout right={<LoginButton />} />,
+    children: [{ index: true, element: <HomePage /> }],
+  },
+  {
+    path: '/:projectId',
+    element: (
+      <Layout
+        left={
+          <>
+            <Logo />
+            <span className="text-body-m-bold text-gray-800">내 발표</span>
+          </>
+        }
+        center={<Gnb />}
+        right={<LoginButton />}
+      />
+    ),
     children: [
-      { index: true, element: <SlidePage /> }, // DEFAULT_TAB 변경 시 동기화 필요
-      { path: 'slide', element: <SlidePage /> },
+      { index: true, element: <Navigate to="slide/1" replace /> },
+      { path: 'slide/:slideId?', element: <SlidePage /> },
       { path: 'video', element: <VideoPage /> },
       { path: 'insight', element: <InsightPage /> },
     ],

src/pages/HomePage.tsx

@@ -0,0 +1,7 @@
+export default function HomePage() {
+  return (
+    <div className="p-8">
+      <h1 className="text-body-m-bold">홈</h1>
+    </div>
+  );
+}

src/pages/SlidePage.tsx

@@ -1,7 +1,23 @@
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { DEFAULT_SLIDE_ID, setLastSlideId } from '@/constants/navigation';
+
 export default function SlidePage() {
+  const { projectId = '', slideId = DEFAULT_SLIDE_ID } = useParams<{
+    projectId: string;
+    slideId: string;
+  }>();
+
+  useEffect(() => {
+    if (projectId && slideId) {
+      setLastSlideId(projectId, slideId);
+    }
+  }, [projectId, slideId]);
+
   return (
     <div role="tabpanel" id="tabpanel-slide" aria-labelledby="tab-slide" className="p-8">
-      <h1 className="text-body-m-bold">슬라이드</h1>
+      <h1 className="text-body-m-bold">슬라이드 {slideId}</h1>
     </div>
   );
 }

src/pages/index.ts

@@ -0,0 +1,4 @@
+export { default as HomePage } from './HomePage';
+export { default as InsightPage } from './InsightPage';
+export { default as SlidePage } from './SlidePage';
+export { default as VideoPage } from './VideoPage';

tsconfig.app.json

@@ -21,7 +21,13 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }

vite.config.ts

@@ -1,9 +1,14 @@
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
-
+import path from 'path';
 import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 });