[2팀 김우정] Chapter 3-3 기능 중심 아키텍처와 프로젝트 폴더 구조

package.json

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

src/App.tsx

@@ -1,19 +1,24 @@
 import { BrowserRouter as Router } from "react-router-dom"
-import Header from "./components/Header.tsx"
-import Footer from "./components/Footer.tsx"
+import Header from "./shared/components/Header.tsx"
+import Footer from "./shared/components/Footer.tsx"
 import PostsManagerPage from "./pages/PostsManagerPage.tsx"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+
+const queryClient = new QueryClient()
 
 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>
+    <QueryClientProvider client={queryClient}>
+      <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>
+    </QueryClientProvider>
   )
 }
 

src/entities/comments/api/index.ts

@@ -0,0 +1,40 @@
+import { Comment } from "../types"
+
+export const fetchComments = async (postId: number) => {
+  const response = await fetch(`/api/comments/post/${postId}`)
+  return response.json()
+}
+
+export const createComment = async (comment: Comment | { body: string; postId: number; userId: number }) => {
+  const response = await fetch("/api/comments/add", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(comment),
+  })
+  return response.json()
+}
+
+export const updateComment = async (commentId: number, body: string) => {
+  const response = await fetch(`/api/comments/${commentId}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ body }),
+  })
+  return response.json()
+}
+
+export const deleteComment = async (commentId: number) => {
+  const response = await fetch(`/api/comments/${commentId}`, {
+    method: "DELETE",
+  })
+  return response.json()
+}
+
+export const likeComment = async (commentId: number, likes: number) => {
+  const response = await fetch(`/api/comments/${commentId}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ likes }),
+  })
+  return response.json()
+}

src/entities/comments/model/index.ts

@@ -0,0 +1,2 @@
+export * from "./queries"
+export * from "./mutations"

src/entities/comments/model/mutations.ts

@@ -0,0 +1,94 @@
+import { useMutation, useQueryClient, QueryClient } from "@tanstack/react-query"
+import { createComment, updateComment, deleteComment, likeComment } from "../api"
+import { commentQueries } from "./queryFactory"
+import { Comment } from "../types"
+
+type MutationCallbacks<TData = unknown, TError = Error, TVariables = void> = {
+  onSuccess?: (data: TData, variables: TVariables, context: unknown) => void
+  onError?: (error: TError, variables: TVariables, context: unknown) => void
+}
+
+const invalidateCommentQueries = (queryClient: QueryClient, postId: number) => {
+  queryClient.invalidateQueries({ queryKey: [...commentQueries.lists(), postId] })
+}
+
+export const useCreateCommentMutation = (
+  postId: number,
+  callbacks?: MutationCallbacks<
+    Awaited<ReturnType<typeof createComment>>,
+    Error,
+    Comment | { body: string; postId: number; userId: number }
+  >,
+) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: createComment,
+    onSuccess: (data, variables, context) => {
+      const targetPostId = postId || (data as Comment)?.postId || (variables as { postId?: number })?.postId
+      if (targetPostId) {
+        invalidateCommentQueries(queryClient, targetPostId)
+      }
+      callbacks?.onSuccess?.(data, variables, context)
+    },
+    onError: (error, variables, context) => {
+      callbacks?.onError?.(error, variables, context)
+    },
+  })
+}
+
+export const useUpdateCommentMutation = (
+  postId: number,
+  callbacks?: MutationCallbacks<Awaited<ReturnType<typeof updateComment>>, Error, { id: number; body: string }>,
+) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, body }: { id: number; body: string }) => updateComment(id, body),
+    onSuccess: (data, variables, context) => {
+      if (postId) {
+        invalidateCommentQueries(queryClient, postId)
+      }
+      callbacks?.onSuccess?.(data, variables, context)
+    },
+    onError: (error, variables, context) => {
+      callbacks?.onError?.(error, variables, context)
+    },
+  })
+}
+
+export const useDeleteCommentMutation = (
+  postId: number,
+  callbacks?: MutationCallbacks<Awaited<ReturnType<typeof deleteComment>>, Error, number>,
+) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: deleteComment,
+    onSuccess: (data, variables, context) => {
+      if (postId) {
+        invalidateCommentQueries(queryClient, postId)
+      }
+      callbacks?.onSuccess?.(data, variables, context)
+    },
+    onError: (error, variables, context) => {
+      callbacks?.onError?.(error, variables, context)
+    },
+  })
+}
+
+export const useLikeCommentMutation = (
+  postId: number,
+  callbacks?: MutationCallbacks<Awaited<ReturnType<typeof likeComment>>, Error, { id: number; likes: number }>,
+) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, likes }: { id: number; likes: number }) => likeComment(id, likes),
+    onSuccess: (data, variables, context) => {
+      if (postId) {
+        invalidateCommentQueries(queryClient, postId)
+      }
+      callbacks?.onSuccess?.(data, variables, context)
+    },
+    onError: (error, variables, context) => {
+      callbacks?.onError?.(error, variables, context)
+    },
+  })
+}