[7팀 제정원] Chapter 2-3. 관심사 분리와 폴더구조

package.json

@@ -12,8 +12,11 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.74.7",
+    "@tanstack/react-query-devtools": "^5.74.7",
     "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

@@ -2,18 +2,23 @@ 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 { 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/posts/api/addPost.ts

@@ -0,0 +1,10 @@
+import { Post } from "@/entities/posts/model/post.type"
+
+export const addPost = async (newPost: Pick<Post, "title" | "body" | "userId">) => {
+  const res = await fetch("/api/posts/add", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(newPost),
+  })
+  return res.json()
+}

src/entities/posts/api/deletePost.ts

@@ -0,0 +1,6 @@
+export const deletePost = async (postId: number) => {
+  const res = await fetch(`/api/posts/${postId}`, {
+    method: "DELETE",
+  })
+  return res.json()
+}

src/entities/posts/api/getPosts.ts

@@ -0,0 +1,4 @@
+export const getPosts = async () => {
+  const res = await fetch(`/api/posts`)
+  return res.json()
+}

src/entities/posts/api/getPostsByPagination.ts

@@ -0,0 +1,4 @@
+// export const getPostsByPagination = async (limit: number, page: number) => {
+//   const res = await fetch(`/api/posts?limit=${limit}&page=${page}`)
+//   return res.json()
+// }

src/entities/posts/api/getPostsByTag.ts

@@ -0,0 +1,4 @@
+export const getPostsByTag = async (tag: string) => {
+  const res = await fetch(`/api/posts/tags/${tag}`)
+  return res.json()
+}

src/entities/posts/api/getPostsSearchQuery.ts

@@ -0,0 +1,4 @@
+export const getPostsSearchQuery = async (searchQuery: string) => {
+  const res = await fetch(`/api/posts/search?query=${searchQuery}`)
+  return res.json()
+}

src/entities/posts/api/getTags.ts

@@ -0,0 +1,4 @@
+export const getTags = async () => {
+  const res = await fetch("/api/posts/tags")
+  return res.json()
+}

src/entities/posts/api/getUniqueTag.ts

@@ -0,0 +1,4 @@
+export const getUniqueTag = async (tag: string) => {
+  const res = await fetch(`/api/posts/tags/${tag}`)
+  return res.json()
+}

src/entities/posts/api/updatePost.ts

@@ -0,0 +1,13 @@
+import { Post } from "@/entities/posts/model/post.type"
+
+export const updatePost = async (selectedPost: Post) => {
+  const res = await fetch(`/api/posts/${selectedPost.id}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(selectedPost),
+  })
+  if (res.ok) {
+    return { message: "ok" }
+  }
+  throw new Error("Failed to update post")
+}

src/entities/posts/model/post.type.ts

@@ -0,0 +1,17 @@
+export interface Post {
+  id: number
+  title: string
+  body: string
+  tags: Tag[]
+  reactions: Reaction
+  userId: number
+}
+
+export interface Reaction {
+  like: number
+  dislike: number
+}
+export interface Tag {
+  url: string
+  slug: string
+}

src/entities/posts/model/usePostsMutation.ts

@@ -0,0 +1,8 @@
+import { useMutation } from "@tanstack/react-query"
+import { addPost } from "@/entities/posts/api/addPost"
+
+export const useAddPostsMutation = () => {
+  return useMutation({
+    mutationFn: addPost,
+  })
+}

src/entities/posts/model/usePostsQuery.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query"
+import { getPosts } from "@/entities/posts/api/getPosts"
+import { Post } from "@/entities/posts/model/post.type"
+
+interface PostsResponse {
+  posts: Post[]
+  total: number
+  skip: number
+  limit: number
+}
+
+export const usePostsQuery = () => {
+  return useQuery<PostsResponse>({
+    queryKey: ["posts"],
+    queryFn: getPosts,
+  })
+}

src/entities/posts/model/usePostsStore.ts

@@ -0,0 +1,52 @@
+import { create } from "zustand"
+
+interface PostsStoreState {
+  posts: Post[]
+  total: number
+  skip: number
+  limit: number
+  setPosts: (posts: Post[]) => void
+  setTotal: (total: number) => void
+  setSkip: (skip: number) => void
+  setLimit: (limit: number) => void
+}
+
+export const usePostsStore = create<PostsStoreState>((set) => ({
+  posts: [],
+  total: 0,
+  skip: 0,
+  limit: 10,
+  setPosts: (posts) => set((prev) => ({ ...prev, posts })),
+  setTotal: (total) => set((prev) => ({ ...prev, total })),
+  setSkip: (skip) => set((prev) => ({ ...prev, skip })),
+  setLimit: (limit) => set((prev) => ({ ...prev, limit })),
+}))
+
+/*
+{
+  "posts": [
+    {
+      "id": 1,
+      "title": "His mother had always taught him",
+      "body": "His mother had always taught him not to ever think of himself as better than others. He'd tried to live by this motto. He never looked down on those who were less fortunate or who had less money than him. But the stupidity of the group of people he was talking to made him change his mind.",
+      "tags": [
+        "history",
+        "american",
+        "crime"
+      ],
+      "reactions": {
+        "likes": 192,
+        "dislikes": 25
+      },
+      "views": 305,
+      "userId": 121
+    },
+    {...},
+    {...}
+    // 30 items
+  ],
+  "total": 251,
+  "skip": 0,
+  "limit": 30
+}
+*/

src/entities/posts/model/usePostsWithUsers.ts

@@ -0,0 +1,28 @@
+import { Post } from "@/entities/posts/model/post.type"
+import { useAllPostsQuery } from "@/entities/posts/model/useAllPostsQuery"
+import { useAllUsersQuery } from "@/entities/users/model/useAllUsersQuery"
+
+export const usePostsWithUsers = (limit: number, skip: number) => {
+  const postsQuery = useAllPostsQuery(limit, skip)
+  const usersQuery = useAllUsersQuery()
+
+  const isLoading = postsQuery.isLoading || usersQuery.isLoading
+  const isError = postsQuery.isError || usersQuery.isError
+
+  // TODO: 데이터 조합 따로 함수로 분리
+  let posts: Post[] = []
+  if (postsQuery.data && usersQuery.data) {
+    posts = postsQuery.data.posts.map((post) => ({
+      ...post,
+      author: usersQuery.data.users.find((user) => user.id === post.userId),
+    }))
+  }
+
+  return {
+    posts,
+    total: postsQuery.data?.total ?? 0,
+    isLoading,
+    isError,
+    error: postsQuery.error || usersQuery.error,
+  }
+}

src/entities/posts/model/useTagsList.ts

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query"
+import { getTags } from "@/entities/posts/api/getTags"
+
+export const useTagsList = () => {
+  return useQuery({
+    queryKey: ["tags"],
+    queryFn: getTags,
+  })
+}

src/entities/posts/model/useUniqueTag.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query"
+import { getUniqueTag } from "@/entities/posts/api/getUniqueTag"
+
+export const useUniqueTag = (tag: string) => {
+  return useQuery({
+    queryKey: ["tags", tag],
+    queryFn: () => getUniqueTag(tag),
+    enabled: !!tag,
+  })
+}

src/entities/users/api/getUniqueUser.ts

@@ -0,0 +1,4 @@
+export const getUniqueUser = async (userId: number) => {
+  const res = await fetch(`/api/users/${userId}`)
+  return res.json()
+}

src/entities/users/api/getUsers.ts

@@ -0,0 +1,4 @@
+export const getUsers = async () => {
+  const res = await fetch("/api/users?limit=0&select=username,image")
+  return res.json()
+}

src/entities/users/model/useUniqueUserQuery.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query"
+import { getUniqueUser } from "@/entities/users/api/getUniqueUser"
+import { User } from "@/entities/users/model/user.type"
+
+export const useUniqueUserQuery = (userId: number) => {
+  return useQuery<User>({
+    queryKey: ["user", userId],
+    queryFn: () => getUniqueUser(userId),
+    enabled: !!userId,
+  })
+}