hanghae-plus · JayeHa · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+**/*.test.js
+
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always"
+}
diff --git a/index.html b/index.html
@@ -1,13 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>항해플러스 SNS</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body>
-<div id="root"></div>
-<script type="module" src="/src/main.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>항해플러스 SNS</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@vitest/ui": "^2.1.1",
     "jsdom": "^25.0.0",
+    "typescript": "^5.6.2",
     "vite": "^5.1.0",
     "vitest": "^2.1.1"
   }

diff --git a/src/App.ts b/src/App.ts
@@ -0,0 +1,16 @@
+import ErrorPage from './pages/error';
+import HomePage from './pages/home';
+import LoginPage from './pages/login';
+import ProfilePage from './pages/profile';
+import { router } from './shared/util/Router';
+
+export default class App {
+  constructor(selector: string) {
+    router.init({
+      '/': () => new HomePage(selector),
+      '/login': () => new LoginPage(selector),
+      '/profile': () => new ProfilePage(selector),
+      '/404': () => new ErrorPage(selector),
+    });
+  }
+}
diff --git a/src/__tests__/advanced.test.js b/src/__tests__/advanced.test.js
@@ -4,7 +4,7 @@ beforeAll(async () => {
   // DOM 초기화
   window.alert = vi.fn();
   document.body.innerHTML = '<div id="root"></div>';
-  await import('../main.js');
+  await import('../main.ts');
 })
 
 afterAll(() => {

diff --git a/src/__tests__/basic.test.js b/src/__tests__/basic.test.js
@@ -4,7 +4,7 @@ beforeAll(async () => {
   // DOM 초기화
   window.alert = vi.fn();
   document.body.innerHTML = '<div id="root"></div>';
-  await import('../main.js');
+  await import('../main.ts');
 })
 
 afterAll(() => {

diff --git a/src/main.js b/src/main.js
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,3 @@
+import App from './App';
+
+new App('#root');
diff --git a/src/pages/error.ts b/src/pages/error.ts
@@ -0,0 +1,20 @@
+import { BaseComponent } from '../shared/ui/BaseComponent';
+
+export default class ErrorPage extends BaseComponent {
+  template() {
+    return `
+<main class="bg-gray-100 flex items-center justify-center min-h-screen">
+      <div class="bg-white p-8 rounded-lg shadow-md w-full text-center" style="max-width: 480px">
+        <h1 class="text-2xl font-bold text-blue-600 mb-4">항해플러스</h1>
+        <p class="text-4xl font-bold text-gray-800 mb-4">404</p>
+        <p class="text-xl text-gray-600 mb-8">페이지를 찾을 수 없습니다</p>
+        <p class="text-gray-600 mb-8">
+          요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다.
+        </p>
+        <a href="/" class="bg-blue-600 text-white px-4 py-2 rounded font-bold">
+          홈으로 돌아가기
+        </a>
+      </div>
+    </main>`;
+  }
+}