[2팀 양혜진] Chapter 2-3. 관심사 분리와 폴더구조

package.json

@@ -12,6 +12,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.75.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

src/App.tsx

@@ -2,17 +2,28 @@ 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 { PostsProvider } from "./features/post/get-posts/context.tsx"
+import { CommentsProvider } from "./features/comment/get-comments/context.tsx"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
 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>
+      <QueryClientProvider client={queryClient}>
+        <div className="flex flex-col min-h-screen">
+          <Header />
+          <main className="flex-grow container mx-auto px-4 py-8">
+            <PostsProvider>
+              <CommentsProvider>
+                <PostsManagerPage />
+              </CommentsProvider>
+            </PostsProvider>
+          </main>
+          <Footer />
+        </div>
+      </QueryClientProvider>
     </Router>
   )
 }

src/entities/comment/api.ts

@@ -0,0 +1,24 @@
+import ApiClient from "../../shared/api/apiClient.ts"
+import { Comment, Comments, NewComment } from "./model.ts"
+
+export const createComment = (comment: NewComment) => {
+  return ApiClient.post<Comment, NewComment>("/comments/add", comment)
+}
+
+export const fetchComments = (postId: number) => {
+  return ApiClient.get<Comments>(`/comments/post/${postId}`)
+}
+
+export const updateComment = (comment: Comment) => {
+  return ApiClient.put<Comment, Pick<Comment, "body">>(`/comments/${comment.id}`, {
+    body: comment.body,
+  })
+}
+
+export const updateCommentLikes = (commentId: number, likes: number) => {
+  return ApiClient.patch<Comment, Pick<Comment, "likes">>(`/comments/${commentId}`, { likes })
+}
+
+export const deleteComment = (commentId: number) => {
+  return ApiClient.del(`/comments/${commentId}`)
+}

src/entities/comment/model.ts

@@ -0,0 +1,26 @@
+interface User {
+  id: number
+  username: string
+  fullName: string
+}
+
+export interface Comment {
+  id: number
+  postId: number
+  body: string
+  likes: number
+  user: User
+}
+
+export interface Comments {
+  comments: Comment[]
+  limit: number
+  skip: number
+  total: number
+}
+
+export interface NewComment {
+  userId: User["id"]
+  postId: Comment["postId"]
+  body: Comment["body"]
+}

src/entities/post/api.ts

@@ -0,0 +1,26 @@
+import ApiClient from "../../shared/api/apiClient.ts"
+import { Post, Posts, NewPost } from "./model.ts"
+
+export const createPost = (post: NewPost) => {
+  return ApiClient.post<Post, NewPost>(`/posts/add`, post)
+}
+
+export const fetchPosts = (limit: number, skip: number) => {
+  return ApiClient.get<Posts>("/posts", { limit, skip })
+}
+
+export const updatePost = (post: Post) => {
+  return ApiClient.put<Post, Post>(`/posts/${post.id}`, post)
+}
+
+export const deletePost = (postId: number) => {
+  return ApiClient.del(`/posts/${postId}`)
+}
+
+export const searchPosts = (searchQuery: string) => {
+  return ApiClient.get<Posts>(`/posts/search`, { q: searchQuery })
+}
+
+export const searchPostsByTag = (tag: string) => {
+  return ApiClient.get<Posts>(`/posts/tag/${tag}`)
+}

src/entities/post/model.ts

@@ -0,0 +1,25 @@
+export interface Post {
+  id: number
+  userId: number
+  title: string
+  body: string
+  tags: string[]
+  reactions: {
+    likes: number
+    dislikes: number
+  }
+  views: number
+}
+
+export interface Posts {
+  limit: number
+  posts: Post[]
+  skip: number
+  total: number
+}
+
+export interface NewPost {
+  userId: Post["userId"]
+  title: Post["title"]
+  body: Post["body"]
+}

src/entities/tag/api.ts

@@ -0,0 +1,6 @@
+import ApiClient from "../../shared/api/apiClient.ts"
+import { Tag } from "./model.ts"
+
+export const fetchTags = () => {
+  return ApiClient.get<Tag[]>("/posts/tags")
+}

src/entities/tag/model.ts

@@ -0,0 +1,5 @@
+export interface Tag {
+  name: string
+  slug: string
+  url: string
+}

src/entities/user/api.ts

@@ -0,0 +1,13 @@
+import ApiClient from "../../shared/api/apiClient.ts"
+import { User, Users } from "./model.ts"
+
+export const fetchUsers = () => {
+  return ApiClient.get<Users>("/users", {
+    limit: 0,
+    select: ["username", "image"].join(","),
+  })
+}
+
+export const fetchUser = (userId: number) => {
+  return ApiClient.get<User>(`/users/${userId}`)
+}

src/entities/user/model.ts

@@ -0,0 +1,78 @@
+interface Hair {
+  color: string
+  type: string
+}
+
+interface Coordinates {
+  lat: number
+  lng: number
+}
+
+interface Address {
+  address: string
+  city: string
+  state: string
+  stateCode: string
+  postalCode: string
+  coordinates: Coordinates
+  country: string
+}
+
+interface Bank {
+  cardExpire: string
+  cardNumber: string
+  cardType: string
+  currency: string
+  iban: string
+}
+
+interface Company {
+  department: string
+  name: string
+  title: string
+  address: Address
+}
+
+interface Crypto {
+  coin: string
+  wallet: string
+  network: string
+}
+
+export interface BaseUser {
+  id: number
+  username: string
+  image: string
+}
+
+export interface User extends BaseUser {
+  firstName: string
+  lastName: string
+  maidenName: string
+  age: number
+  gender: string
+  email: string
+  phone: string
+  password: string
+  birthDate: string
+  bloodGroup: string
+  height: number
+  weight: number
+  eyeColor: string
+  hair: Hair
+  ip: string
+  address: Address
+  macAddress: string
+  university: string
+  bank: Bank
+  company: Company
+  ein: string
+  ssn: string
+  userAgent: string
+  crypto: Crypto
+  role: string
+}
+
+export interface Users {
+  users: BaseUser[]
+}

src/features/comment/add-comment/ui/comment-add-dialog.tsx

@@ -0,0 +1,57 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../../shared/ui/dialog/dialog.tsx"
+import { Textarea } from "../../../../shared/ui/textarea/textarea.tsx"
+import { Button } from "../../../../shared/ui/button/button.tsx"
+import { useComments } from "../../get-comments/context.tsx"
+import { NewComment } from "../../../../entities/comment/model.ts"
+import { useState } from "react"
+
+type CommentAddDialogProps = {
+  postId?: number | null
+  showAddCommentDialog: boolean
+  setShowAddCommentDialog: (showAddCommentDialog: boolean) => void
+}
+
+export const CommentAddDialog = ({
+  postId = null,
+  showAddCommentDialog,
+  setShowAddCommentDialog,
+}: CommentAddDialogProps) => {
+  const { addComment } = useComments()
+
+  const [newComment, setNewComment] = useState<Omit<NewComment, "postId"> & { postId: number | null }>({
+    body: "",
+    postId,
+    userId: 1,
+  })
+
+  // 댓글 추가
+  const _addComment = async () => {
+    if (newComment.postId === null) return
+
+    try {
+      await addComment(newComment as NewComment)
+      setShowAddCommentDialog(false)
+      setNewComment({ body: "", postId: null, userId: 1 })
+    } catch (error) {
+      console.error("댓글 추가 오류:", error)
+    }
+  }
+
+  return (
+    <Dialog open={showAddCommentDialog} onOpenChange={setShowAddCommentDialog}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>새 댓글 추가</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <Textarea
+            placeholder="댓글 내용"
+            value={newComment.body}
+            onChange={(e) => setNewComment({ ...newComment, body: e.target.value })}
+          />
+          <Button onClick={_addComment}>댓글 추가</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}