[3팀 주민수] Chapter 3-3 기능 중심 아키텍처와 프로젝트 폴더 구조

.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx tsc:*)",
+      "Bash(find:*)",
+      "Bash(tree:*)",
+      "Bash(cat:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package.json

@@ -12,6 +12,9 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.12",
+    "@tanstack/react-query-devtools": "^5.91.1",
+    "jotai": "^2.15.2",
     "react": "^19.2.1",
     "react-dom": "^19.2.1"
   },

src/App.tsx

@@ -1,19 +1,22 @@
 import { BrowserRouter as Router } from "react-router-dom"
-import Header from "./components/Header.tsx"
-import Footer from "./components/Footer.tsx"
-import PostsManagerPage from "./pages/PostsManagerPage.tsx"
+import { QueryProvider } from "./app/providers/QueryProvider"
+import Header from "./widgets/layout/Header.tsx"
+import Footer from "./widgets/layout/Footer.tsx"
+import PostsManagerPage from "./pages/PostsManagerPage"
 
 const App = () => {
   return (
-    <Router>
-      <div className="flex flex-col min-h-screen">
-        <Header />
-        <main className="flex-grow container mx-auto px-4 py-8">
-          <PostsManagerPage />
-        </main>
-        <Footer />
-      </div>
-    </Router>
+    <QueryProvider>
+      <Router>
+        <div className="flex flex-col min-h-screen">
+          <Header />
+          <main className="flex-grow container mx-auto px-4 py-8">
+            <PostsManagerPage />
+          </main>
+          <Footer />
+        </div>
+      </Router>
+    </QueryProvider>
   )
 }
 

src/app/providers/QueryProvider.tsx

@@ -0,0 +1,27 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
+import { ReactNode } from "react"
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5분
+      gcTime: 1000 * 60 * 30, // 30분
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
+interface QueryProviderProps {
+  children: ReactNode
+}
+
+export const QueryProvider: React.FC<QueryProviderProps> = ({ children }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}

src/entities/comment/api/index.ts

@@ -0,0 +1,61 @@
+declare const __API_BASE_URL__: string
+
+import type { Comment } from "../model/types"
+
+/**
+ * 특정 게시물의 댓글 목록 조회
+ */
+export const fetchComments = async (postId: number): Promise<Comment[]> => {
+  const response = await fetch(`${__API_BASE_URL__}/comments/post/${postId}`)
+  const data: { comments: Comment[] } = await response.json()
+  return data.comments
+}
+
+/**
+ * 댓글 생성
+ */
+export const createComment = async (commentData: {
+  body: string
+  postId: number
+  userId: number
+}): Promise<Comment> => {
+  const response = await fetch(`${__API_BASE_URL__}/comments/add`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(commentData),
+  })
+  return response.json()
+}
+
+/**
+ * 댓글 수정
+ */
+export const updateComment = async (id: number, body: string): Promise<Comment> => {
+  const response = await fetch(`${__API_BASE_URL__}/comments/${id}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ body }),
+  })
+  return response.json()
+}
+
+/**
+ * 댓글 삭제
+ */
+export const deleteComment = async (id: number): Promise<void> => {
+  await fetch(`${__API_BASE_URL__}/comments/${id}`, {
+    method: "DELETE",
+  })
+}
+
+/**
+ * 댓글 좋아요
+ */
+export const likeComment = async (id: number, currentLikes: number): Promise<Comment> => {
+  const response = await fetch(`${__API_BASE_URL__}/comments/${id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ likes: currentLikes + 1 }),
+  })
+  return response.json()
+}

src/entities/comment/api/types.ts

@@ -0,0 +1,10 @@
+export interface CreateCommentRequest {
+  body: string
+  postId: number
+  userId: number
+}
+
+export interface UpdateCommentRequest {
+  body?: string
+  likes?: number
+}

src/entities/comment/model/atoms.ts

@@ -0,0 +1,6 @@
+import { atom } from "jotai"
+import type { Comment } from "./types"
+
+export type CommentsState = Record<number, Comment[]>
+
+export const commentsAtom = atom<CommentsState>({})

src/entities/comment/model/index.ts

@@ -0,0 +1,2 @@
+export * from "./types"
+export * from "./atoms"