f-lab-edu · nemo0824 · Jan 3, 2025 · Dec 27, 2024 · Dec 29, 2024 · Dec 29, 2024
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# SPA-project
+# SPA-project
diff --git a/app.js b/app.js
@@ -0,0 +1,14 @@
+import { setupRouter } from './router.js';
+import { setNavEvent } from './navbar.js';
+
+// 초기화함수
+async function initApp() {
+  try {
+    setNavEvent();
+    setupRouter();
+  } catch (error) {
+    console.error('초기화 에러', error);
+  }
+}
+
+initApp();
diff --git a/dataservice.js b/dataservice.js
@@ -0,0 +1,14 @@
+export async function fetchAllData() {
+  const response = await fetch('/posts.json');
+  return await response.json();
+}
+
+export async function fetchCategoryData(category) {
+  const response = await fetchAllData();
+  return response.filter((item) => item.category === category);
+}
+
+export async function fetchDetailData(id) {
+  const response = await fetchAllData();
+  return response.find((item) => item.id == id);
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SPA-Project  main</title>
+    <link rel="stylesheet" href="./style.css">
+    <script src="./app.js" defer type="module"></script>
+</head>
+<body>
+    <!-- 안쪽에 app 안에서 만들기 / 고정된걸 해결할수있는방법이있을수도있음 -->
+     <header>
+        <nav id="navbar">
+            <a href="/" data-link>전체</a>
+            <a href="/develop" data-link>개발</a>
+            <a href="/design" data-link>디자인</a>
+        </nav>
+    </header>
+     <div id="app">
+
+     </div>
+</body>
+</html>
diff --git a/main.html b/main.html
diff --git a/navbar.js b/navbar.js
@@ -0,0 +1,14 @@
+export function setNavEvent() {
+  document.addEventListener('click', (e) => {
+    if (e.target.tagName === 'A' && e.target.hasAttribute('data-link')) {
+      e.preventDefault();
+      const url = e.target.getAttribute('href');
+      navigate(url);
+    }
+  });
+
+  function navigate(url) {
+    history.pushState(null, null, url);
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  }
+}
diff --git a/posts.json b/posts.json
@@ -0,0 +1,8 @@
+[
+  { "id": 1, "category": "develop", "title": "JavaScript 기초", "content": "자바스크립트 기초 컨텐츠"},
+  { "id": 2, "category": "develop", "title": "React Hooks 소개", "content": "React Hooks 소개" },
+  { "id": 3, "category": "design", "title": "UI/UX 디자인 가이드" , "content": "UI/UX 디자인 가이드"},
+  { "id": 4, "category": "design", "title": "Figma 사용법", "content": "Figma 사용법" },
+  { "id": 5, "category": "develop", "title": "프로젝트 계획 수립", "content": "프로젝트 계획 수립"},
+  { "id": 6, "category": "develop", "title": "협업 도구 소개" , "content": "협업 도구 소개"}
+]
diff --git a/router.js b/router.js
@@ -0,0 +1,45 @@
+import {
+  fetchCategoryData,
+  fetchDetailData,
+  fetchAllData,
+} from './dataservice.js';
+
+async function renderPage(route) {
+  const app = document.getElementById('app');
+  let content = '';
+
+  if (route === '/') {
+    // 전체 페이지
+    const data = await fetchAllData(); // 전체 데이터 요청
+    content = `
+      <ul>
+        ${data.map((item) => `<li><a href="/detail/${item.id}" data-link>${item.title}</a></li>`).join('')}
+      </ul>
+    `;
+  } else if (route.startsWith('/develop') || route.startsWith('/design')) {
+    // 카테고리 페이지
+    const category = route.replace('/', '');
+    const data = await fetchCategoryData(category);
+    content = `
+      <ul>
+        ${data.map((item) => `<li><a href="/detail/${item.id}" data-link>${item.title}</a></li>`).join('')}
+      </ul>
+    `;
+  } else if (route.startsWith('/detail/')) {
+    // 상세 페이지
+    const id = route.split('/')[2];
+    console.log('id', id);
+    const item = await fetchDetailData(id);
+    content = `<h3>${item.title}</h3><p>${item.content}</p>`;
+  }
+
+  app.innerHTML = content;
+}
+
+export function setupRouter() {
+  renderPage(location.pathname);
+
+  window.addEventListener('popstate', () => {
+    renderPage(location.pathname);
+  });
+}
diff --git a/settings.json b/settings.json
@@ -0,0 +1,11 @@
+{
+    "liveServer.settings.root": "/",
+    "liveServer.settings.port": 8080,
+    "liveServer.settings.rewriteRules": [
+      {
+        "source": ".*",      
+        "destination": "/index.html" 
+      }
+    ]
+  }
+
diff --git a/style.css b/style.css
@@ -0,0 +1,32 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+nav {
+  display: flex;
+  background: #333;
+  padding: 10px;
+}
+
+nav a {
+  color: white;
+  text-decoration: none;
+  padding: 10px 20px;
+  margin-right: 10px;
+}
+
+nav a.active {
+  background: #555;
+  border-radius: 5px;
+}
+
+#app {
+  padding: 20px;
+}
+
+#app a {
+  text-decoration: none;
+  color: black;
+}