[1팀 천진아] Chapter 3-3 기능 중심 아키텍처와 프로젝트 폴더 구조

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm run build
+
+      - 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,11 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.12",
+    "@tanstack/react-query-devtools": "^5.91.1",
     "react": "^19.2.1",
-    "react-dom": "^19.2.1"
+    "react-dom": "^19.2.1",
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

src/App.tsx

@@ -1,19 +1,26 @@
 import { BrowserRouter as Router } from "react-router-dom"
-import Header from "./components/Header.tsx"
-import Footer from "./components/Footer.tsx"
-import PostsManagerPage from "./pages/PostsManagerPage.tsx"
+import Header from "./shared/ui/Header.tsx"
+import Footer from "./shared/ui/Footer.tsx"
+import PostsManagerPage from "./pages/PostManager/PostsManagerPage.tsx"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
 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}>
+      <ReactQueryDevtools initialIsOpen={false} />
+      <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/addCommentApi.ts

@@ -0,0 +1,19 @@
+import { AddCommentRequest, Comment } from "../model/comment"
+import { getApiUrl } from "../../../shared/api/apiClient"
+
+const addCommentApi = async ({ comment }: { comment: AddCommentRequest }): Promise<Comment> => {
+  const response = await fetch(getApiUrl(`/comments/add`), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(comment),
+  })
+
+  if (!response.ok) {
+    throw new Error(`댓글 추가 실패: ${response.status} ${response.statusText}`)
+  }
+
+  const data = await response.json()
+  return data
+}
+
+export default addCommentApi

src/entities/comment/api/deleteCommentApi.ts

@@ -0,0 +1,16 @@
+import { getApiUrl } from "../../../shared/api/apiClient"
+
+const deleteCommentApi = async ({ id }: { id: number }) => {
+  const response = await fetch(getApiUrl(`/comments/${id}`), {
+    method: "DELETE",
+  })
+
+  if (!response.ok) {
+    throw new Error(`댓글 삭제 실패: ${response.status} ${response.statusText}`)
+  }
+
+  const data = await response.json()
+  return data
+}
+
+export default deleteCommentApi

src/entities/comment/api/getCommentsApi.ts

@@ -0,0 +1,15 @@
+import { GetCommentsResponse } from "../model/comment"
+import { getApiUrl } from "../../../shared/api/apiClient"
+
+const getCommentsApi = async ({ postId }: { postId: number }): Promise<GetCommentsResponse> => {
+  try {
+    const response = await fetch(getApiUrl(`/comments/post/${postId}`))
+    const data = await response.json()
+    return data
+  } catch (error) {
+    console.error("댓글 가져오기 오류:", error)
+    return { comments: [], total: 0, skip: 0, limit: 0 }
+  }
+}
+
+export default getCommentsApi

src/entities/comment/api/likeCommentApi.ts

@@ -0,0 +1,18 @@
+import { getApiUrl } from "../../../shared/api/apiClient"
+
+const likeCommentApi = async ({ id, likes }: { id: number; likes: number }) => {
+  const response = await fetch(getApiUrl(`/comments/${id}`), {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ likes }),
+  })
+
+  if (!response.ok) {
+    throw new Error(`댓글 좋아요 실패: ${response.status} ${response.statusText}`)
+  }
+
+  const data = await response.json()
+  return data
+}
+
+export default likeCommentApi