[3팀 이정우] Chapter 2-3. 관심사 분리와 폴더구조

README.md

@@ -103,4 +103,39 @@ FSD가 아닌 자신만의 기능 중심의 폴더 구조를 만들어보세요.
 
 꼭 기억할 점
 1. 자신만의 기능 중심의 폴더라고 했지만, 그 모습이 상당히 유니크하고 독창적이지는 않을 거에요. 아마 적절한 모법사례의 조합으로 수렴될 거에요. 
-2. 그리고 그게 잘하는 거에요. 좋은 코드는? 자신보돠 남들에게 모두에게 이해하기 쉬운 코드니까요.
+2. 그리고 그게 잘하는 거에요. 좋은 코드는? 자신보돠 남들에게 모두에게 이해하기 쉬운 코드니까요.
+```
+
+## 구현 가이드 (6주차 Basic 완료)
+
+### 폴더 구조 (FSD 적용)
+```
+src/
+  app/              # App 루트, 전역 Provider
+  shared/
+    ui/             # Button, Input 등 디자인 시스템
+    stores/         # Zustand 전역 상태 (예: postsStore)
+  entities/
+    post/
+      model/        # types, adapter
+      ui/           # PostRow 등 단순 표시 컴포넌트
+  features/
+    post/
+      add-post/
+      update-post/
+      delete-post/
+  widgets/
+    posts-table/    # 테이블 + 검색/필터 UI 조합
+  pages/
+    PostsManagerPage.tsx
+```
+
+### 전역 상태관리(Zustand)
+`src/shared/stores/postsStore.ts` 에서 게시물·댓글·태그와 CRUD action 을 관리합니다.
+
+### 실행 방법
+```bash
+pnpm i      # 의존성 설치 (zustand 포함)
+pnpm dev    # Vite 개발 서버 실행
+```
+브라우저에서 `localhost:5173` 접속 후 게시물 CRUD 및 페이지네이션, 검색, 태그 필터가 정상 동작하면 Basic 과제 요구사항을 충족합니다.

package.json

@@ -12,8 +12,11 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.85.3",
+    "@tanstack/react-query-devtools": "^5.85.3",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "zustand": "^4.5.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

src/App.tsx

@@ -1,15 +1,29 @@
-import { BrowserRouter as Router } from "react-router-dom"
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
 import Header from "./components/Header.tsx"
 import Footer from "./components/Footer.tsx"
 import PostsManagerPage from "./pages/PostsManagerPage.tsx"
+import DashboardPage from './pages/DashboardPage'
+import SettingsPage from './pages/SettingsPage'
+import { usePreferencesStore } from './shared/stores/preferencesStore'
+import { useEffect } from 'react'
 
 const App = () => {
+  const darkMode = usePreferencesStore((s) => s.darkMode)
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', darkMode)
+  }, [darkMode])
+
   return (
     <Router>
       <div className="flex flex-col min-h-screen">
         <Header />
         <main className="flex-grow container mx-auto px-4 py-8">
-          <PostsManagerPage />
+          <Routes>
+            <Route path="/" element={<PostsManagerPage />} />
+            <Route path="/dashboard" element={<DashboardPage />} />
+            <Route path="/settings" element={<SettingsPage />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
         </main>
         <Footer />
       </div>

src/components/Header.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MessageSquare } from 'lucide-react';
+import { Link } from 'react-router-dom'
 
 const Header: React.FC = () => {
     return (
@@ -11,9 +12,9 @@ const Header: React.FC = () => {
                 </div>
                 <nav>
                     <ul className="flex space-x-4">
-                        <li><a href="#" className="hover:underline">홈</a></li>
-                        <li><a href="#" className="hover:underline">대시보드</a></li>
-                        <li><a href="#" className="hover:underline">설정</a></li>
+                        <li><Link to="/" className="hover:underline">홈</Link></li>
+                        <li><Link to="/dashboard" className="hover:underline">대시보드</Link></li>
+                        <li><Link to="/settings" className="hover:underline">설정</Link></li>
                     </ul>
                 </nav>
             </div>