[6팀 김보경] Chapter 2-3. 관심사 분리와 폴더구조

package.json

@@ -6,14 +6,18 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "deploy": "gh-pages -d dist",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",
     "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",
@@ -22,6 +26,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/axios": "^0.14.4",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
@@ -30,6 +35,7 @@
     "eslint": "^9.25.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "gh-pages": "^6.3.0",
     "globals": "^16.0.0",
     "jsdom": "^26.1.0",
     "lucide-react": "^0.503.0",

src/App.tsx

@@ -1,19 +1,24 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 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 Footer from "./widgets/ui/Footer.tsx"
+import Header from "./widgets/ui/Header.tsx"
 
 const App = () => {
+  const queryClient = new QueryClient()
+
   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/comment/api/CommentAPI.ts

@@ -0,0 +1,36 @@
+import {
+  Comment,
+  CommentsResponse,
+  DeleteCommentParams,
+  NewComment,
+  UpdateCommentParams,
+} from "@/entities/comment/model/CommentType"
+import { axiosInstance } from "@/shared/api/axiosInstance"
+import axios from "axios"
+
+export const addComment = async (newComment: NewComment): Promise<Comment> => {
+  const response = await axiosInstance.post("/api/comments/add", newComment)
+  return response.data
+}
+
+export const updateComment = async ({ id, body }: UpdateCommentParams) => {
+  const response = await axiosInstance.put(`/api/comments/${id}`, { body })
+  return response.data
+}
+
+export const deleteComment = async ({ id }: DeleteCommentParams) => {
+  const response = await axiosInstance.delete(`/api/comments/${id}`)
+  return response.data
+}
+
+export const likeComment = async ({ id, likes, postId }: { id: number; likes: number; postId: number }) => {
+  await axiosInstance.patch(`/api/comments/${id}`, {
+    likes: likes + 1,
+  })
+  return { id, postId, likes: likes + 1 }
+}
+
+export const fetchComments = async (postId: number): Promise<CommentsResponse> => {
+  const response = await axios.get(`/api/comments/post/${postId}`)
+  return response.data
+}

src/entities/comment/model/CommentStore.ts

@@ -0,0 +1,39 @@
+import { create } from "zustand"
+import { Comment } from "./CommentType"
+
+interface CommentStore {
+  newComment: {
+    body: string
+    postId: number | null
+    likes: number
+    userId: number
+  }
+  selectedComment: Comment | null
+  showAddCommentDialog: boolean
+  showEditCommentDialog: boolean
+
+  setNewComment: (comment: Partial<CommentStore["newComment"]>) => void
+  setSelectedComment: (comment: Comment | null) => void
+  setShowAddCommentDialog: (open: boolean) => void
+  setShowEditCommentDialog: (open: boolean) => void
+}
+
+export const useCommentStore = create<CommentStore>((set) => ({
+  newComment: {
+    body: "",
+    likes: 0,
+    postId: null,
+    userId: 1,
+  },
+  selectedComment: null,
+  showAddCommentDialog: false,
+  showEditCommentDialog: false,
+
+  setNewComment: (comment) =>
+    set((state) => ({
+      newComment: { ...state.newComment, ...comment },
+    })),
+  setSelectedComment: (comment) => set({ selectedComment: comment }),
+  setShowAddCommentDialog: (open) => set({ showAddCommentDialog: open }),
+  setShowEditCommentDialog: (open) => set({ showEditCommentDialog: open }),
+}))

src/entities/comment/model/CommentType.ts

@@ -0,0 +1,36 @@
+export interface Comment {
+  id: number
+  body: string
+  postId: number
+  userId: number
+  likes: number
+  user: {
+    id: number
+    username: string
+    fullName: string
+  }
+}
+
+export type NewComment = {
+  body: string
+  postId: number | null
+  likes: number
+  userId: number
+}
+
+export type UpdateCommentParams = {
+  id: number
+  body: string
+}
+
+export type DeleteCommentParams = {
+  id: number
+  postId: number
+}
+
+export interface CommentsResponse {
+  comments: Comment[]
+  total: number
+  skip: number
+  limit: number
+}

src/entities/post/api/PostAPI.ts

@@ -0,0 +1,92 @@
+import { Post, PostWithAuthor } from "@/entities/post/model/PostType"
+import { getUsers } from "@/entities/user/api/UserAPI"
+import { axiosInstance } from "@/shared/api/axiosInstance"
+import axios from "axios"
+
+export const fetchTags = async () => {
+  try {
+    const response = await axios.get("/api/posts/tags")
+    return response.data
+  } catch (error) {
+    console.error("태그 가져오기 오류:", error)
+  }
+}
+
+export const createPost = async (post: { title: string; body: string; userId: number }) => {
+  const response = await axiosInstance.post("/api/posts/add", post)
+  return response.data
+}
+
+export const updatePost = async (post: Post) => {
+  const response = await axiosInstance.put(`/api/posts/${post.id}`, post)
+  return response.data
+}
+
+export const searchPosts = async (query: string) => {
+  const response = await axios.get(`/api/posts/search?q=${query}`)
+  return response.data
+}
+
+//post 전체 조회
+export const getPosts = async ({ limit, skip }: { limit: number; skip: number }) => {
+  const response = await axios.get<{
+    total: number
+    posts: Post[]
+  }>("/api/posts", { params: { limit, skip } })
+  return response.data
+}
+
+export const deletePost = async (id: number): Promise<void> => {
+  const response = await axiosInstance.delete(`/api/posts/${id}`)
+  return response.data
+}
+
+//태그별 조회
+export const getPostsByTag = async (tag: string) => {
+  const response = await axios.get<{
+    total: number
+    posts: Post[]
+  }>(`/api/posts/tag/${tag}`)
+  return response.data
+}
+
+// 게시물 가져오기
+const fetchPosts = async ({ limit, skip }: { limit: number; skip: number }) => {
+  const [postsRes, user] = await Promise.all([getPosts({ limit, skip }), getUsers()])
+
+  const postsWithUsers = postsRes.posts.map((post) => ({
+    ...post,
+    author: user.find((user) => user.id === post.userId),
+  }))
+
+  return {
+    posts: postsWithUsers,
+    total: postsRes.total,
+  }
+}
+// 태그별 게시물 가져오기 - 통합
+export const fetchPostsByTag = async ({
+  tag,
+  limit,
+  skip,
+}: {
+  tag: string
+  limit: number
+  skip: number
+}): Promise<{ posts: PostWithAuthor[]; total: number }> => {
+  if (!tag || tag === "all") {
+    return fetchPosts({ limit, skip })
+  }
+
+  const [postsRes, users] = await Promise.all([getPostsByTag(tag), getUsers()])
+
+  const postsWithUsers = postsRes.posts.map((post: Post) => ({
+    ...post,
+    author: users.find((user) => user.id === post.userId),
+  }))
+
+  return {
+    posts: postsWithUsers,
+    total: postsRes.total,
+  }
+}

src/entities/post/model/PostPaginationStore.ts

@@ -0,0 +1,48 @@
+import { create } from "zustand"
+
+interface PostPaginationStore {
+  skip: number
+  limit: number
+  total: number
+  searchQuery: string
+  sortBy: string
+  sortOrder: "asc" | "desc"
+  selectedTag: string
+
+  setSkip: (value: number) => void
+  setLimit: (value: number) => void
+  setTotal: (value: number) => void
+  setSearchQuery: (value: string) => void
+  setSortBy: (value: string) => void
+  setSortOrder: (value: "asc" | "desc") => void
+  setSelectedTag: (tag: string) => void
+  setStateFromParams: (params: URLSearchParams) => void
+}
+
+export const usePostPaginationStore = create<PostPaginationStore>((set) => ({
+  skip: 0,
+  limit: 10,
+  total: 0,
+  searchQuery: "",
+  sortBy: "",
+  sortOrder: "asc",
+  selectedTag: "",
+
+  setSkip: (value) => set({ skip: value }),
+  setLimit: (value) => set({ limit: value }),
+  setTotal: (value) => set({ total: value }),
+  setSearchQuery: (value) => set({ searchQuery: value }),
+  setSortBy: (value) => set({ sortBy: value }),
+  setSortOrder: (value) => set({ sortOrder: value }),
+  setSelectedTag: (tag) => set({ selectedTag: tag }),
+  setStateFromParams: (params: URLSearchParams) => {
+    set({
+      skip: parseInt(params.get("skip") || "0"),
+      limit: parseInt(params.get("limit") || "10"),
+      searchQuery: params.get("search") || "",
+      sortBy: params.get("sortBy") || "",
+      sortOrder: (params.get("sortOrder") as "asc" | "desc") || "asc",
+      selectedTag: params.get("tag") || "",
+    })
+  },
+}))

src/entities/post/model/PostStore.ts

@@ -0,0 +1,30 @@
+import { create } from "zustand"
+import { Post, PostWithAuthor } from "./PostType"
+
+interface PostStore {
+  newPost: PostWithAuthor
+  selectedPost: Post | null
+  showAddDialog: boolean
+  showEditDialog: boolean
+  showPostDetailDialog: boolean
+
+  setNewPost: (post: PostWithAuthor) => void
+  setSelectedPost: (post: Post | null) => void
+  setShowAddDialog: (visible: boolean) => void
+  setShowEditDialog: (visible: boolean) => void
+  setShowPostDetailDialog: (visible: boolean) => void
+}
+
+export const usePostStore = create<PostStore>((set) => ({
+  newPost: { title: "", body: "", userId: 1 },
+  selectedPost: null,
+  showAddDialog: false,
+  showEditDialog: false,
+  showPostDetailDialog: false,
+
+  setNewPost: (post) => set({ newPost: post }),
+  setSelectedPost: (post) => set({ selectedPost: post }),
+  setShowAddDialog: (visible) => set({ showAddDialog: visible }),
+  setShowEditDialog: (visible) => set({ showEditDialog: visible }),
+  setShowPostDetailDialog: (visible) => set({ showPostDetailDialog: visible }),
+}))

src/entities/post/model/PostType.ts

@@ -0,0 +1,26 @@
+import { User } from "@/entities/user/model/UserType"
+
+export interface Post {
+  id?: number
+  title: string
+  body: string
+  userId: number
+  reactions?: {
+    likes: number
+    dislikes: number
+  }
+  tags?: string[] //TODO 타입 수정 필요
+}
+
+export type PostWithAuthor = Post & { author?: User }
+export interface Tag {
+  url: string
+  slug: string
+}
+
+export interface PostResponse {
+  posts: Post[]
+  total: number
+  skip: number
+  limit: number
+}