[9팀 임규원] Chapter 2-3. 관심사 분리와 폴더구조

package.json

@@ -12,13 +12,16 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "pnpm": "^10.14.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
+    "@tanstack/react-query": "^5.85.3",
+    "@tanstack/react-query-devtools": "^5.85.3",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -40,6 +43,7 @@
     "typescript-eslint": "^8.39.0",
     "vite": "^7.1.1",
     "vitest": "^3.2.4",
-    "vitest-browser-react": "^1.0.1"
+    "vitest-browser-react": "^1.0.1",
+    "zustand": "^5.0.7"
   }
 }

src/App.tsx

@@ -1,6 +1,6 @@
 import { BrowserRouter as Router } from "react-router-dom"
-import Header from "./components/Header.tsx"
-import Footer from "./components/Footer.tsx"
+import Header from "./widgets/Header.tsx"
+import Footer from "./widgets/Footer.tsx"
 import PostsManagerPage from "./pages/PostsManagerPage.tsx"
 
 const App = () => {

src/entities/comment/api/commentApi.ts

@@ -0,0 +1,22 @@
+import { Comment, CommentsResponse, CreateCommentRequest, UpdateCommentRequest } from "../model/types.ts"
+import { api } from "../../../shared/api/axios"
+
+export const getComments = async (postId: number): Promise<CommentsResponse> => {
+  return api.get(`/comments/post/${postId}`)
+}
+
+export const createComment = async (newComment: CreateCommentRequest): Promise<Comment> => {
+  return api.post("/comments/add", newComment)
+}
+
+export const updateComment = async (id: number, body: Pick<UpdateCommentRequest, "body">): Promise<Comment> => {
+  return api.put(`/comments/${id}`, body)
+}
+
+export const deleteComment = async (id: number): Promise<void> => {
+  return api.delete(`/comments/${id}`)
+}
+
+export const likeComment = async (id: number, currentLikes: number): Promise<Comment> => {
+  return api.patch(`/comments/${id}`, {likes: currentLikes + 1})
+}

src/entities/comment/api/index.ts

@@ -0,0 +1 @@
+export * from "./commentApi"

src/entities/comment/model/index.ts

@@ -0,0 +1,4 @@
+export * from "./queries"
+export * from "./mutations"
+export * from "./queryKeys"
+export * from "./types"

src/entities/comment/model/mutations.ts

@@ -0,0 +1,95 @@
+import { createComment, deleteComment, likeComment, updateComment } from "../api"
+import { Comments, CommentsResponse, CreateCommentRequest, LikeCommentRequest, UpdateCommentRequest } from "./types"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { commentQueryKeys } from "./queryKeys.ts"
+
+// mutation
+// TODO 낙관적 업데이트
+export const useCreateCommentMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (payload: CreateCommentRequest) => createComment(payload),
+    onSuccess: (response) => {
+      if(!response.postId) return
+      queryClient.setQueryData<Comments>(commentQueryKeys.list(response.postId), (old) =>
+        old ? { ...old, comments: [response, ...old.comments], total: (old.total ?? 0) + 1 } : old)
+    }
+  })
+}
+
+export const useUpdateCommentMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (payload: UpdateCommentRequest ) => updateComment(payload.id, { body: payload.body }),
+
+    onSuccess: (response, { id }) => {
+      queryClient.setQueryData<Comments>(commentQueryKeys.list(id), (old) => {
+
+        if (!old) return old;
+        return {
+          ...old,
+          comments: old.comments.map((comment) => (comment.id === response.id ? response : comment)),
+        }
+      })
+    },
+  })
+}
+
+export const useDeleteCommentMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: ({ id }: { id: number; postId: number }) => deleteComment(id),
+    onSuccess: (_response, { postId, id }) => {
+      queryClient.setQueryData<CommentsResponse>(commentQueryKeys.list(postId), (old) => {
+        if (!old) return old
+        return {
+          ...old,
+          comments: old.comments.filter((comment) => comment.id !== id),
+          total: Math.max(0, (old.total ?? 0) - 1),
+        }
+      })
+    },
+  })
+}
+
+export const useLikeCommentMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: LikeCommentRequest) => likeComment(payload.id, payload.currentLikes),
+
+    // 낙관적 업데이트 적용
+    onMutate: async (payload) => {
+      const key = commentQueryKeys.list(payload.postId);
+
+      // 1) 진행 중 쿼리 중단
+      await queryClient.cancelQueries({ queryKey: key });
+
+      // 2) 스냅샷 저장(롤백용)
+      const previous = queryClient.getQueryData<CommentsResponse>(key);
+
+      // 3) 즉시 캐시 반영(+1)
+      queryClient.setQueryData<CommentsResponse>(key, (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          comments: old.comments.map((comment) =>
+            comment.id === payload.id ? { ...comment, likes: (comment.likes ?? 0) + 1 } : comment
+          ),
+        };
+      });
+      // 4) 롤백 컨텍스트 반환
+      return { key, previous };
+    },
+    onError: (error, variables, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(context.key, context.previous)
+      }
+    },
+    onSuccess: () => {
+    },
+  })
+}

src/entities/comment/model/queries.ts

@@ -0,0 +1,14 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { Comments, CommentsResponse, CreateCommentRequest, LikeCommentRequest, UpdateCommentRequest } from "./types"
+import { commentQueryKeys } from "./queryKeys.ts"
+import { createComment, deleteComment, getComments, likeComment, updateComment } from "../api"
+
+// query
+export const useGetCommentsQuery = (postId: number) =>{
+
+  return useQuery<CommentsResponse>({
+    queryKey: commentQueryKeys.list(postId),
+    queryFn: () => getComments(postId),
+    enabled: !!postId
+  })
+}

src/entities/comment/model/queryKeys.ts

@@ -0,0 +1,5 @@
+export const commentQueryKeys = {
+  all: ["comments"] as const,
+  list: (postId: number) => [...commentQueryKeys.all, "list", {postId}] as const,
+  detail: (id: number) => [...commentQueryKeys.all, "detail", id] as const,
+}

src/entities/comment/model/types.ts

@@ -0,0 +1,49 @@
+export interface Comment {
+  id: number
+  body: string
+  postId: number
+  userId: number
+  user: {
+    id: number
+    username: string
+  }
+  likes: number
+}
+
+export interface Comments {
+  comments: Comment[]
+  limit: number
+  skip: number
+  total: number
+}
+
+// api 호출용 타입
+export interface NewCommentDraft {
+  body: string
+  postId: number | null
+  userId: number
+}
+
+export interface CreateCommentRequest {
+  body: string
+  postId: number
+  userId: number
+}
+
+export interface UpdateCommentRequest {
+  id: number
+  body: string
+}
+
+export interface LikeCommentRequest {
+  id: number
+  postId: number
+  currentLikes: number
+}
+
+export interface CommentsResponse {
+  comments: Comment[]
+  limit: number
+  skip: number
+  total: number
+}

src/entities/post/api/index.ts

@@ -0,0 +1 @@
+export * from "./postApi"

src/entities/post/api/postApi.ts

@@ -0,0 +1,22 @@
+import { Post, PostsResponse, UpdatePostRequest, CreatePostRequest } from "../model/types"
+import { api } from "../../../shared/api/axios"
+
+export const getPosts = async (limit: number, skip: number): Promise<PostsResponse> => {
+  return api.get(`/posts?limit=${limit}&skip=${skip}`)
+}
+
+export const getSearchPosts = async (searchQuery: string): Promise<PostsResponse> => {
+  return api.get(`/posts/search?q=${searchQuery}`)
+}
+
+export const getPostByTag = async (tag: string):Promise<PostsResponse> => {
+  return api.get(`/posts/tag/${tag}`)
+}
+
+export const createPost = async (newPost: CreatePostRequest): Promise<Post> => {
+  return api.post("/posts", newPost)
+}
+
+export const updatePost = async (id: number, updatePost: UpdatePostRequest): Promise<Post> => {
+  return api.put(`/posts/${id}`, updatePost)
+}

src/entities/post/model/types.ts

@@ -0,0 +1,34 @@
+import { User } from "../../user/model/types"
+
+export interface Post {
+  id: number
+  title: string
+  body: string
+  userId: number
+  createdAt?: string
+  updatedAt?: string
+  reactions: {
+    likes: number
+    dislikes: number
+  }
+  author?: User
+  tags?: string[]
+}
+
+// api 호출 관련
+
+export interface PostsResponse {
+  posts: Post[]
+  total?: number
+}
+
+export interface CreatePostRequest {
+  title: string
+  body: string
+  userId: number
+}
+
+export interface UpdatePostRequest {
+  title: string
+  body: string
+}

src/entities/tag/model/types.ts

@@ -0,0 +1,7 @@
+export interface Tag {
+  id: string
+  name: string
+  slug: string
+  url?: string
+  color?: string
+}

src/entities/user/model/types.ts

@@ -0,0 +1,23 @@
+
+export interface User {
+  id: number
+  username: string
+  image?: string | null
+}
+// TODO UserModal 부분
+export interface UserWithInfo extends User {
+  firstName: string
+  lastName: string
+  age: number
+  email: string
+  phone: string
+  address: {
+    address: string
+    city: string
+    state: string
+  }
+  company: {
+    name: string
+    title: string
+  }
+}

src/features/comment/model/index.ts

@@ -0,0 +1 @@
+export * from './useComment'