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

src/App.tsx

@@ -1,18 +1,26 @@
 import { BrowserRouter as Router } from "react-router-dom"
-import Header from "./components/Header.tsx"
-import Footer from "./components/Footer.tsx"
+import { Header, Footer } from "./widgets"
 import PostsManagerPage from "./pages/PostsManagerPage.tsx"
+import { PostProvider } from "@/features/post"
+import { CommentProvider } from "@/features/comment"
+import { UserProvider } from "@/features/user"
 
 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>
+      <PostProvider>
+        <CommentProvider>
+          <UserProvider>
+            <div className="flex flex-col min-h-screen">
+              <Header />
+              <main className="flex-grow container mx-auto px-4 py-8">
+                <PostsManagerPage />
+              </main>
+              <Footer />
+            </div>
+          </UserProvider>
+        </CommentProvider>
+      </PostProvider>
     </Router>
   )
 }

src/entities/comment/api/comments-api.ts

@@ -0,0 +1,46 @@
+import { Comment, CommentsResponse, NewComment } from "../model"
+
+export const commentsApi = {
+  // 게시물의 댓글 목록 조회
+  getCommentsByPost: async (postId: number): Promise<CommentsResponse> => {
+    const response = await fetch(`/api/comments/post/${postId}`)
+    return response.json()
+  },
+
+  // 댓글 추가
+  addComment: async (comment: NewComment): Promise<Comment> => {
+    const response = await fetch("/api/comments/add", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(comment),
+    })
+    return response.json()
+  },
+
+  // 댓글 수정
+  updateComment: async (id: number, body: string): Promise<Comment> => {
+    const response = await fetch(`/api/comments/${id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ body }),
+    })
+    return response.json()
+  },
+
+  // 댓글 삭제
+  deleteComment: async (id: number): Promise<void> => {
+    await fetch(`/api/comments/${id}`, {
+      method: "DELETE",
+    })
+  },
+
+  // 댓글 좋아요
+  likeComment: async (id: number, likes: number): Promise<Comment> => {
+    const response = await fetch(`/api/comments/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ likes }),
+    })
+    return response.json()
+  },
+}

src/entities/comment/api/index.ts

@@ -0,0 +1,2 @@
+export { commentsApi } from "./comments-api"
+

src/entities/comment/index.tsx

@@ -0,0 +1,4 @@
+export { commentsApi } from "./api"
+export type { Comment, CommentsResponse, NewComment } from "./model"
+export { CommentRow } from "./ui"
+

src/entities/comment/model/index.ts

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

src/entities/comment/model/types.ts

@@ -0,0 +1,22 @@
+export interface Comment {
+  id: number
+  body: string
+  postId: number
+  userId: number
+  likes: number
+  user?: {
+    username: string
+    image: string
+  }
+}
+
+export interface CommentsResponse {
+  comments: Comment[]
+}
+
+export interface NewComment {
+  body: string
+  postId: number
+  userId: number
+}
+

src/entities/comment/ui/comment-row.tsx

@@ -0,0 +1,20 @@
+import { highlightText } from "@/shared/lib/text"
+import type { Comment } from "../model/types"
+
+interface CommentRowProps {
+  comment: Comment
+  searchQuery?: string
+  actions?: React.ReactNode
+}
+
+export const CommentRow = ({ comment, searchQuery = "", actions }: CommentRowProps) => {
+  return (
+    <div className="flex items-center justify-between text-sm border-b pb-1">
+      <div className="flex items-center space-x-2 overflow-hidden flex-1">
+        <span className="font-medium truncate">{comment.user?.username || "Unknown"}:</span>
+        <span className="truncate">{highlightText(comment.body, searchQuery)}</span>
+      </div>
+      <div className="flex items-center space-x-1 flex-shrink-0">{actions}</div>
+    </div>
+  )
+}

src/entities/comment/ui/index.ts

@@ -0,0 +1,2 @@
+export { CommentRow } from "./comment-row"
+

src/entities/post/api/index.ts

@@ -0,0 +1 @@
+export { postsApi } from "./posts-api"