[11팀 이민기] Chapter 2-3. 관심사 분리와 폴더구조

.github/workflows/deploy.yml

@@ -0,0 +1,55 @@
+name: Deploy to GitHub Pages
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build with Vite
+        run: pnpm run build
+
+      - name: Create 404 page
+        run: cp dist/index.html dist/404.html
+
+      - name: Disable Jekyll
+        run: touch dist/.nojekyll
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./dist"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package.json

@@ -12,8 +12,10 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^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/App.tsx

@@ -0,0 +1,25 @@
+import { PostsManagerPage } from "@/pages/posts/manager"
+
+import { Footer } from "@/widgets/common/footer"
+import { Header } from "@/widgets/common/header"
+import { BrowserRouter as Router } from "react-router-dom"
+import { TanstackQueryProvider } from "./provider/tanstack-query"
+import "./styles/index.css"
+
+const App = () => {
+  return (
+    <TanstackQueryProvider>
+      <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>
+    </TanstackQueryProvider>
+  )
+}
+
+export default App

src/app/provider/tanstack-query/index.ts

@@ -0,0 +1 @@
+export { TanstackQueryProvider } from "./tanstack-query-provider";

src/app/provider/tanstack-query/tanstack-query-provider.tsx

@@ -0,0 +1,7 @@
+import { queryClient } from "@/shared/api"
+import { QueryClientProvider } from "@tanstack/react-query"
+import * as React from "react"
+
+export const TanstackQueryProvider = ({ children }: { children: React.ReactNode }) => {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+}

src/entities/comment/api/comment-query-key.api.ts

@@ -0,0 +1,3 @@
+export const COMMENT_QUERY_KEY = {
+  byPostId: (postId: number) => ["comments", postId] as const,
+}

src/entities/comment/api/comment.api.ts

@@ -0,0 +1,52 @@
+import { ApiClient } from "@/shared/api/api"
+import { ApiResponse } from "@/shared/types"
+import { CommentResponseDto } from "../dto/comment.dto"
+import { Comment } from "../types"
+
+export const commentApi = (apiClient: ApiClient) => ({
+  listByPost: async (postId: number): Promise<CommentResponseDto> => {
+    return await apiClient
+      .get<ApiResponse<CommentResponseDto>>(`/comments/post/${postId}`)
+      .then((response) => response.data)
+      .catch((error) => {
+        console.error("Comments List Error: ", error)
+        return error
+      })
+  },
+  create: async (body: string, postId: number, userId: number): Promise<Comment> => {
+    return await apiClient
+      .post<ApiResponse<Comment>>(`/comments/add`, { body, postId, userId })
+      .then((response) => response.data)
+      .catch((error) => {
+        console.error("Comment Create Error: ", error)
+        return error
+      })
+  },
+  update: async (id: number, body: string): Promise<Comment> => {
+    return await apiClient
+      .put<ApiResponse<Comment>>(`/comments/${id}`, { body })
+      .then((response) => response.data)
+      .catch((error) => {
+        console.error("Comment Update Error: ", error)
+        return error
+      })
+  },
+  remove: async (id: number): Promise<boolean> => {
+    return await apiClient
+      .delete<ApiResponse<void>>(`/comments/${id}`)
+      .then((response) => response.ok)
+      .catch((error) => {
+        console.error("Comment Remove Error: ", error)
+        return error
+      })
+  },
+  likeComment: async (id: number): Promise<boolean> => {
+    return await apiClient
+      .patch<ApiResponse<void>>(`/comments/${id}/like`)
+      .then((response) => response.ok)
+      .catch((error) => {
+        console.error("Comment Like Error: ", error)
+        return error
+      })
+  },
+})

src/entities/comment/api/index.ts

@@ -0,0 +1,2 @@
+export { COMMENT_QUERY_KEY } from "./comment-query-key.api"
+export { commentApi } from "./comment.api"

src/entities/comment/dto/comment.dto.ts

@@ -0,0 +1,6 @@
+import { Pagination } from "@/shared/types"
+import { Comment } from "../types/comment.types"
+
+export interface CommentResponseDto extends Pagination {
+  comments: Comment[]
+}

src/entities/comment/stores/comment.store.ts

@@ -0,0 +1,25 @@
+import { create } from "zustand"
+import { Comment } from "../types"
+
+type CommentStoreState = Pick<Comment, "body" | "postId" | "id"> & {
+  userId: number
+
+  setBody: (body: string) => void
+  setPostId: (postId: number) => void
+  setUserId: (userId: number) => void
+  setSelectedComment: (postId: number, commentId: number, body: string) => void
+  reset: () => void
+}
+
+export const useCommentStore = create<CommentStoreState>((set) => ({
+  body: "",
+  postId: 0,
+  userId: 0,
+  id: 0,
+
+  setBody: (body) => set({ body }),
+  setPostId: (postId) => set({ postId }),
+  setUserId: (userId) => set({ userId }),
+  setSelectedComment: (postId: number, commentId: number, body: string) => set({ postId, id: commentId, body }),
+  reset: () => set({ body: "", postId: 0 }),
+}))

src/entities/comment/stores/comments.stores.ts

@@ -0,0 +1,22 @@
+import { create } from "zustand"
+import { Comment } from "../types"
+
+interface CommentsState {
+  comments: Array<Comment>
+  setComments: (comments: Comment[]) => void
+  addComment: (comment: Comment) => void
+  removeComment: (id: number) => void
+  updateComment: (comment: Comment) => void
+}
+
+export const commentsStore = () => {
+  return create<CommentsState>((set) => ({
+    comments: [],
+    setComments: (comments: Comment[]) => set({ comments }),
+    addComment: (comment: Comment) => set((state) => ({ comments: [...state.comments, comment] })),
+    removeComment: (id: number) =>
+      set((state) => ({ comments: state.comments.filter((comment) => comment.id !== id) })),
+    updateComment: (comment: Comment) =>
+      set((state) => ({ comments: state.comments.map((c) => (c.id === comment.id ? comment : c)) })),
+  }))
+}

src/entities/comment/stores/index.ts

@@ -0,0 +1 @@
+export { useCommentStore } from "./comment.store"

src/entities/comment/types/comment.types.ts

@@ -0,0 +1,9 @@
+import { User } from "@/entities/user/types/user.types"
+
+export interface Comment {
+  body: string
+  id: number
+  likes: number
+  postId: number
+  user: User
+}

src/entities/comment/types/index.ts

@@ -0,0 +1 @@
+export { type Comment } from "./comment.types"

src/entities/comment/ui/comment-view/CommentView.tsx

@@ -0,0 +1,18 @@
+import { HighlightText } from "@/shared/ui"
+import { Comment } from "../../types"
+
+interface CommentViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  comment: Comment
+  searchQuery: string
+}
+
+export const CommentView: React.FC<CommentViewProps> = ({ comment, searchQuery, ...props }) => {
+  return (
+    <div {...props} className="flex items-center space-x-2 overflow-hidden">
+      <span className="font-medium truncate">{comment.user.username}:</span>
+      <span className="truncate">
+        <HighlightText text={comment.body} highlight={searchQuery} />
+      </span>
+    </div>
+  )
+}

src/entities/comment/ui/index.ts

@@ -0,0 +1 @@
+export { CommentView } from "./comment-view/CommentView"

src/entities/post/api/index.ts

@@ -0,0 +1,2 @@
+export { POST_QUERY_KEY } from "./post-query-key.api"
+export { postApi } from "./post.api"

src/entities/post/api/post-query-key.api.ts

@@ -0,0 +1,7 @@
+export const POST_QUERY_KEY = {
+  all: ["posts"] as const,
+  list: (params: { limit?: number; skip?: number }) => ["posts", "list", params] as const,
+  search: (query: string) => ["posts", "search", query] as const,
+  tag: (tag: string) => ["posts", "tag", tag] as const,
+  detail: (id: number) => ["post", id] as const,
+}