[4팀 이연성] Chapter 2-3. 관심사 분리와 폴더구조

package.json

@@ -12,8 +12,10 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.74.11",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.1",

src/App.tsx

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

src/entities/comment/api/api.ts

@@ -0,0 +1,32 @@
+import { axiosClient } from "../../../shared/api/client"
+
+import { Comment } from "../types"
+
+export async function fetchComments(postId: number): Promise<Comment[]> {
+  const { data } = await axiosClient.get(`/api/comments/post/${postId}`)
+  return data.comments
+}
+
+export async function addComment(comment: {
+  body: string
+  postId: number
+  userId: number
+  likes: number
+}): Promise<Comment> {
+  const { data } = await axiosClient.post("/api/comments/add", comment)
+  return data
+}
+
+export async function updateComment(id: number, body: string): Promise<Comment> {
+  const { data } = await axiosClient.put(`/api/comments/${id}`, { body })
+  return data
+}
+
+export async function deleteComment(id: number): Promise<void> {
+  await axiosClient.delete(`/api/comments/${id}`)
+}
+
+export async function likeComment(id: number, likes: number): Promise<Comment> {
+  const { data } = await axiosClient.patch(`/api/comments/${id}`, { likes })
+  return data
+}

src/entities/comment/model/commentStore.ts

@@ -0,0 +1,28 @@
+import { create } from "zustand"
+import { Comment } from "../types"
+
+interface CommentStoreState {
+  newComment: {
+    body: string
+    postId: number
+    userId: number
+    likes: number
+  }
+  selectedComment: Comment | null
+
+  setNewComment: (v: { body: string; postId: number; userId: number; likes: number }) => void
+  setSelectedComment: (c: Comment | null) => void
+}
+
+export const useCommentStore = create<CommentStoreState>((set) => ({
+  newComment: {
+    body: "",
+    postId: 0,
+    userId: 1,
+    likes: 0,
+  },
+  selectedComment: null,
+
+  setNewComment: (v) => set({ newComment: v }),
+  setSelectedComment: (c) => set({ selectedComment: c }),
+}))

src/entities/comment/queries/useCommentMutation.ts

@@ -0,0 +1,70 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+
+import { addComment, updateComment, deleteComment, likeComment } from "../api/api"
+import { Comment } from "../types"
+
+export const useAddCommentMutation = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: addComment,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["comments", data.postId] })
+    },
+  })
+}
+
+export const useUpdateCommentMutation = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, body }: { id: number; body: string }) => updateComment(id, body),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["comments", data.postId] })
+    },
+  })
+}
+
+export const useDeleteCommentMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: ({ id }: { id: number; postId: number }) => deleteComment(id),
+    onMutate: async ({ id, postId }) => {
+      await queryClient.cancelQueries({ queryKey: ["comments", postId] })
+
+      const previousComments = queryClient.getQueryData<Comment[]>(["comments", postId])
+
+      queryClient.setQueryData<Comment[]>(["comments", postId], (old = []) => old.filter((c) => c.id !== id))
+
+      return { previousComments }
+    },
+  })
+}
+
+export const useLikeCommentMutation = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, likes }: { id: number; likes: number }) => likeComment(id, likes),
+    onMutate: async ({ id }) => {
+      // 옵티미스틱 UI
+      const matchingQuery = queryClient
+        .getQueryCache()
+        .findAll({ queryKey: ["comments"] })
+        .find((query) => {
+          const data = queryClient.getQueryData<Comment[]>(query.queryKey as [string, number])
+          return data?.some((comment) => comment.id === id)
+        })
+
+      const postId = (matchingQuery?.queryKey as [string, number])?.[1]
+
+      if (postId === undefined) return
+
+      const previousComments = queryClient.getQueryData<Comment[]>(["comments", postId])
+
+      queryClient.setQueryData<Comment[]>(["comments", postId], (old = []) =>
+        old.map((comment) => (comment.id === id ? { ...comment, likes: comment.likes + 1 } : comment)),
+      )
+
+      return { previousComments, postId }
+    },
+  })
+}

src/entities/comment/queries/useCommentQuery.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query"
+import { fetchComments } from "../api/api"
+
+export const useCommentsQuery = (postId: number) => {
+  return useQuery({
+    queryKey: ["comments", postId],
+    queryFn: () => fetchComments(postId),
+    enabled: !!postId,
+  })
+}

src/entities/comment/types.ts

@@ -0,0 +1,10 @@
+export interface Comment {
+  id: number
+  body: string
+  postId: number
+  user: {
+    id: number
+    username: string
+  }
+  likes: number
+}

src/entities/post/api/api.ts

@@ -0,0 +1,56 @@
+import { axiosClient } from "../../../shared/api/client"
+
+import { User } from "../../user/types"
+import { Post, Tag } from "../types"
+
+export async function fetchPosts(skip: number, limit: number): Promise<{ posts: Post[]; total: number }> {
+  const { data: postData } = await axiosClient.get(`/api/posts?limit=${limit}&skip=${skip}`)
+  const { data: userData } = await axiosClient.get("/api/users?limit=0&select=username,image")
+
+  const postsWithAuthor = postData.posts.map((post: Post) => ({
+    ...post,
+    author: userData.users.find((u: User) => u.id === post.userId),
+  }))
+
+  return { posts: postsWithAuthor, total: postData.total }
+}
+
+export async function fetchPostsByTag(tag: string): Promise<{ posts: Post[]; total: number }> {
+  const { data: postData } = await axiosClient.get(`/api/posts/tag/${tag}`)
+  const { data: userData } = await axiosClient.get("/api/users?limit=0&select=username,image")
+
+  const postsWithAuthor = postData.posts.map((post: Post) => ({
+    ...post,
+    author: userData.users.find((u: User) => u.id === post.userId),
+  }))
+
+  return { posts: postsWithAuthor, total: postData.total }
+}
+
+export async function fetchPostsBySearch(query: string): Promise<{ posts: Post[]; total: number }> {
+  const { data } = await axiosClient.get(`/api/posts/search?q=${query}`)
+  return data
+}
+
+export async function fetchTags(): Promise<Tag[]> {
+  const { data } = await axiosClient.get("/api/posts/tags")
+  return data
+}
+
+export async function addPost(post: Omit<Post, "id">): Promise<Post> {
+  const payload = {
+    ...post,
+    userId: 1, // 기본 유저 설정
+  }
+  const { data } = await axiosClient.post("/api/posts/add", payload)
+  return data
+}
+
+export async function updatePost(post: Post): Promise<Post> {
+  const { data } = await axiosClient.put(`/api/posts/${post.id}`, post)
+  return data
+}
+
+export async function deletePost(id: number): Promise<void> {
+  await axiosClient.delete(`/api/posts/${id}`)
+}

src/entities/post/model/postStore.ts

@@ -0,0 +1,45 @@
+// src/entities/post/model/postStore.ts
+import { create } from "zustand"
+import { Post } from "../types"
+
+interface PostStoreState {
+  selectedPost: Post | null
+  total: number
+  newPost: Omit<Post, "id">
+  selectedTag: string
+  searchQuery: string
+  sortBy: string
+  sortOrder: string
+  skip: number
+  limit: number
+
+  setSelectedPost: (post: Post | null) => void
+  setNewPost: (post: Omit<Post, "id">) => void
+  setSelectedTag: (tag: string) => void
+  setSearchQuery: (query: string) => void
+  setSortBy: (value: string) => void
+  setSortOrder: (value: string) => void
+  setSkip: (v: number) => void
+  setLimit: (v: number) => void
+}
+
+export const usePostStore = create<PostStoreState>((set) => ({
+  selectedPost: null,
+  total: 0,
+  newPost: { title: "", body: "", userId: 1 },
+  selectedTag: "",
+  searchQuery: "",
+  sortBy: "",
+  sortOrder: "asc",
+  skip: 0,
+  limit: 10,
+
+  setSelectedPost: (post) => set({ selectedPost: post }),
+  setNewPost: (post) => set({ newPost: post }),
+  setSelectedTag: (tag) => set({ selectedTag: tag }),
+  setSearchQuery: (query) => set({ searchQuery: query }),
+  setSortBy: (value) => set({ sortBy: value }),
+  setSortOrder: (value) => set({ sortOrder: value }),
+  setSkip: (v) => set({ skip: v }),
+  setLimit: (v) => set({ limit: v }),
+}))