[FEATURE] 초기 세팅 진행

package.json

@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.17",
     "axios": "^1.13.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.5",
     "socket.io-client": "^4.8.1"
   },
   "devDependencies": {

src/App.tsx

@@ -1,5 +1,11 @@
-const App = () => {
-  return <div>Snowgent</div>;
-};
+import { Outlet } from 'react-router-dom';
 
-export default App;
+export default function App() {
+  return (
+    <div className="mobile-container">
+      <div className="mobile-content">
+        <Outlet />
+      </div>
+    </div>
+  );
+}

src/index.css

@@ -0,0 +1,125 @@
+@import 'tailwindcss';
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Thin.woff2')
+    format('woff2');
+  font-weight: 100;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-ExtraLight.woff2')
+    format('woff2');
+  font-weight: 200;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Light.woff2')
+    format('woff2');
+  font-weight: 300;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Regular.woff2')
+    format('woff2');
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Medium.woff2')
+    format('woff2');
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-SemiBold.woff2')
+    format('woff2');
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Bold.woff2')
+    format('woff2');
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-ExtraBold.woff2')
+    format('woff2');
+  font-weight: 800;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Black.woff2')
+    format('woff2');
+  font-weight: 900;
+  font-display: swap;
+}
+
+@layer base {
+  * {
+    @apply box-border;
+  }
+
+  html {
+    @apply h-full overflow-x-hidden;
+    height: 100dvh;
+  }
+
+  body {
+    @apply m-0 h-full p-0 antialiased;
+    font-family:
+      'Pretendard',
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      sans-serif;
+    background-color: #f9f9f9;
+    overscroll-behavior: none;
+    touch-action: pan-y;
+  }
+
+  #root {
+    @apply h-full;
+  }
+}
+
+@layer components {
+  .mobile-container {
+    @apply mx-auto flex h-full w-full justify-center;
+    max-width: 480px;
+  }
+
+  .mobile-content {
+    @apply flex h-full w-full flex-col;
+    background-color: white;
+  }
+
+  .mobile-padding {
+    @apply px-4 py-4;
+  }
+
+  .safe-top {
+    padding-top: max(env(safe-area-inset-top), 1rem);
+  }
+
+  .safe-bottom {
+    padding-bottom: max(env(safe-area-inset-bottom), 1rem);
+  }
+}

src/index.tsx

@@ -0,0 +1,30 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Onboarding from './pages/onboarding/Onboarding';
+import Chat from './pages/chat/Chat';
+import App from './App';
+import HomePage from './pages/HomePage';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: 'onboarding',
+        element: <Onboarding />,
+      },
+      {
+        path: 'chat',
+        element: <Chat />,
+      },
+    ],
+  },
+]);
+
+export default function Router() {
+  return <RouterProvider router={router} />;
+}

src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import Router from './index.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <Router />
   </StrictMode>,
-)
+);

src/pages/HomePage.tsx

@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router-dom';
+import logo from '/vite.svg';
+
+const HomePage = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-8">
+      <img src={logo} alt="Vite logo" className="h-40" />
+      <h1 className="text-6xl text-[#0D2D84]">Snowgent</h1>
+      <button
+        onClick={() => navigate('/onboarding')}
+        className="cursor-pointer rounded-lg bg-blue-50 px-10 py-5 text-xl font-semibold text-[#0D2D84] hover:bg-blue-100"
+      >
+        시작하기
+      </button>
+    </div>
+  );
+};
+
+export default HomePage;

src/pages/chat/Chat.tsx

@@ -0,0 +1,5 @@
+const Chat = () => {
+  return <div className="flex h-full flex-col">Chat</div>;
+};
+
+export default Chat;

src/pages/onboarding/Onboarding.tsx

@@ -0,0 +1,5 @@
+const Onboarding = () => {
+  return <div>Onboarding</div>;
+};
+
+export default Onboarding;

vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [react(), tailwindcss()],
+});