hanghae-plus · d5br5 · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -9,6 +9,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/app/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -3,17 +3,24 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "homepage": "https://d5br5.github.io/front-5th-chapter2-3/",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "deploy": "pnpm run build && gh-pages -d dist"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.74.11",
+    "clsx": "^2.1.1",
+    "gh-pages": "^6.3.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "tailwind-merge": "^3.2.0",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.1",
@@ -22,6 +29,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.15.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -0,0 +1,26 @@
+import { BrowserRouter as Router } from "react-router-dom"
+
+import { QueryClientProvider } from "@/app/providers/QueryClientProvider"
+
+import PostsManagerPage from "@/pages/PostsManagerPage.tsx"
+
+import Header from "@/widgets/layout/ui/Header"
+import Footer from "@/widgets/layout/ui/Footer"
+
+const App = () => {
+  return (
+    <QueryClientProvider>
+      <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>
+  )
+}
+
+export default App
diff --git a/src/app/config/fetch.ts b/src/app/config/fetch.ts
@@ -0,0 +1 @@
+export const API_BASE_PATH = process.env.NODE_ENV === "production" ? "https://dummyjson.com" : "/api"
diff --git a/src/app/main.tsx b/src/app/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import "./style/index.css"
+import App from "@/app/App.tsx"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/src/app/providers/QueryClientProvider.tsx b/src/app/providers/QueryClientProvider.tsx
@@ -0,0 +1,15 @@
+import { useState } from "react"
+import { QueryClient, QueryClientProvider as ReactQueryClientProvider } from "@tanstack/react-query"
+
+export const QueryClientProvider = ({ children }: { children: React.ReactNode }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: { refetchOnWindowFocus: false, staleTime: 10 * 60_000 },
+        },
+      }),
+  )
+
+  return <ReactQueryClientProvider client={queryClient}>{children}</ReactQueryClientProvider>
+}
diff --git a/src/index.css → src/app/style/index.css b/src/index.css → src/app/style/index.css
diff --git a/src/vite-env.d.ts → src/app/vite-env.d.ts b/src/vite-env.d.ts → src/app/vite-env.d.ts
diff --git a/src/entity/comment/api/addComment.ts b/src/entity/comment/api/addComment.ts
@@ -0,0 +1,11 @@
+import { NewComment } from "../model/types"
+import { API_BASE_PATH } from "@/app/config/fetch"
+
+export const addComment = async (comment: NewComment) => {
+  const response = await fetch(`${API_BASE_PATH}/comments/add`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(comment),
+  })
+  return await response.json()
+}
diff --git a/src/entity/comment/api/deleteComment.ts b/src/entity/comment/api/deleteComment.ts
@@ -0,0 +1,8 @@
+import { API_BASE_PATH } from "@/app/config/fetch"
+
+export const deleteComment = async (commentId: number) => {
+  const response = await fetch(`${API_BASE_PATH}/comments/${commentId}`, {
+    method: "DELETE",
+  })
+  return await response.json()
+}
diff --git a/src/entity/comment/api/editComment.ts b/src/entity/comment/api/editComment.ts
@@ -0,0 +1,10 @@
+import { API_BASE_PATH } from "@/app/config/fetch"
+
+export const editComment = async (commentId: number, body: string) => {
+  const response = await fetch(`${API_BASE_PATH}/comments/${commentId}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ body }),
+  })
+  return await response.json()
+}
diff --git a/src/entity/comment/api/getComments.ts b/src/entity/comment/api/getComments.ts
@@ -0,0 +1,8 @@
+import axios from "axios"
+import { GetCommentsResponse } from "../model/types"
+import { API_BASE_PATH } from "@/app/config/fetch"
+
+export const getComments = async (postId: number) => {
+  const res = await axios.get<GetCommentsResponse>(`${API_BASE_PATH}/comments/post/${postId}`)
+  return res.data
+}
diff --git a/src/entity/comment/api/likeComment.ts b/src/entity/comment/api/likeComment.ts
@@ -0,0 +1,9 @@
+import { API_BASE_PATH } from "@/app/config/fetch"
+
+export const likeComment = async (commentId: number, likes: number) => {
+  const response = await fetch(`${API_BASE_PATH}/comments/${commentId}`, {
+    method: "PATCH",
+    body: JSON.stringify({ likes }),
+  })
+  return response.json()
+}
diff --git a/src/entity/comment/model/selectedComment.ts b/src/entity/comment/model/selectedComment.ts
@@ -0,0 +1,12 @@
+import { create } from "zustand"
+import { Comment } from "@/entity/comment/model/types"
+
+interface SelectedCommentStore {
+  selectedComment: Comment | null
+  setSelectedComment: (comment: Comment | null) => void
+}
+
+export const useSelectedComment = create<SelectedCommentStore>((set) => ({
+  selectedComment: null,
+  setSelectedComment: (comment) => set({ selectedComment: comment }),
+}))
diff --git a/src/entity/comment/model/types.ts b/src/entity/comment/model/types.ts
@@ -0,0 +1,22 @@
+import { User } from "@/entity/user/model/types"
+
+export interface NewComment {
+  userId: number
+  body: string
+  postId: number | null
+}
+
+export interface Comment {
+  body: string
+  id: number
+  likes: number
+  postId: number
+  user: User
+}
+
+export interface GetCommentsResponse {
+  limit: number
+  skip: number
+  total: number
+  comments: Comment[]
+}
diff --git a/src/entity/comment/model/useComments.ts b/src/entity/comment/model/useComments.ts
@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query"
+import { getComments } from "@/entity/comment/api/getComments"
+
+export const useComments = (postId: number) => {
+  return useQuery({
+    queryKey: ["comments", postId],
+    queryFn: async () => {
+      try {
+        return await getComments(postId)
+      } catch (error) {
+        console.error("댓글 가져오기 오류:", error)
+        return
+      }
+    },
+  })
+}
diff --git a/src/entity/comment/ui/AddButton.tsx b/src/entity/comment/ui/AddButton.tsx
@@ -0,0 +1,12 @@
+import { Button } from "@/shared/ui"
+import { Plus } from "lucide-react"
+import { ComponentProps } from "react"
+
+export const CommentAddButton = (props: ComponentProps<typeof Button>) => {
+  return (
+    <Button size="sm" {...props}>
+      <Plus className="w-3 h-3 mr-1" />
+      댓글 추가
+    </Button>
+  )
+}
diff --git a/src/entity/comment/ui/DeleteButton.tsx b/src/entity/comment/ui/DeleteButton.tsx
@@ -0,0 +1,11 @@
+import { Button } from "@/shared/ui"
+import { Trash2 } from "lucide-react"
+import { ComponentProps } from "react"
+
+export const CommentDeleteButton = (props: ComponentProps<typeof Button>) => {
+  return (
+    <Button variant="ghost" size="sm" {...props}>
+      <Trash2 className="w-3 h-3" />
+    </Button>
+  )
+}
diff --git a/src/entity/comment/ui/LikeButton.tsx b/src/entity/comment/ui/LikeButton.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@/shared/ui"
+import { ThumbsUp } from "lucide-react"
+import { ComponentProps } from "react"
+
+interface CommentLikeButtonProps extends ComponentProps<typeof Button> {
+  likes: number
+}
+
+export const CommentLikeButton = ({ likes, ...props }: CommentLikeButtonProps) => {
+  return (
+    <Button variant="ghost" size="sm" {...props}>
+      <ThumbsUp className="w-3 h-3" />
+      <span className="ml-1 text-xs">{likes}</span>
+    </Button>
+  )
+}
diff --git a/src/entity/comment/ui/OpenEditDialogButton.tsx b/src/entity/comment/ui/OpenEditDialogButton.tsx
@@ -0,0 +1,11 @@
+import { Button } from "@/shared/ui"
+import { Edit2 } from "lucide-react"
+import { ComponentProps } from "react"
+
+export const OpenEditDialogButton = (props: ComponentProps<typeof Button>) => {
+  return (
+    <Button variant="ghost" size="sm" {...props}>
+      <Edit2 className="w-3 h-3" />
+    </Button>
+  )
+}
diff --git a/src/entity/post/api/addPost.ts b/src/entity/post/api/addPost.ts
@@ -0,0 +1,12 @@
+import { API_BASE_PATH } from "@/app/config/fetch"
+import { NewPost } from "../model/types"
+
+export const addPost = async (post: NewPost) => {
+  const response = await fetch(`${API_BASE_PATH}/posts/add`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(post),
+  })
+  const data = await response.json()
+  return data
+}
diff --git a/src/entity/post/api/deletePost.ts b/src/entity/post/api/deletePost.ts
@@ -0,0 +1,8 @@
+import { API_BASE_PATH } from "@/app/config/fetch"
+
+export const deletePost = async (id: number) => {
+  const response = await fetch(`${API_BASE_PATH}/posts/${id}`, {
+    method: "DELETE",
+  })
+  return await response.json()
+}
diff --git a/src/entity/post/api/editPost.ts b/src/entity/post/api/editPost.ts
@@ -0,0 +1,11 @@
+import { API_BASE_PATH } from "@/app/config/fetch"
+import { Post } from "../model/types"
+
+export const editPost = async (postId: number, post: Post) => {
+  const response = await fetch(`${API_BASE_PATH}/posts/${postId}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(post),
+  })
+  return await response.json()
+}
diff --git a/src/entity/post/api/getPosts.ts b/src/entity/post/api/getPosts.ts
@@ -0,0 +1,8 @@
+import axios from "axios"
+import { GetPostsResponse } from "../model/types"
+import { API_BASE_PATH } from "@/app/config/fetch"
+
+export const getPosts = async (limit: number, skip: number) => {
+  const res = await axios.get<GetPostsResponse>(`${API_BASE_PATH}/posts?limit=${limit}&skip=${skip}`)
+  return res.data
+}
diff --git a/src/entity/post/api/getTagPosts.ts b/src/entity/post/api/getTagPosts.ts
@@ -0,0 +1,8 @@
+import axios from "axios"
+import { GetPostsResponse } from "../model/types"
+import { API_BASE_PATH } from "@/app/config/fetch"
+
+export const getTagPosts = async (tag: string) => {
+  const res = await axios.get<GetPostsResponse>(`${API_BASE_PATH}/posts/tag/${tag}`)
+  return res.data
+}
diff --git a/src/entity/post/api/searchPosts.ts b/src/entity/post/api/searchPosts.ts
@@ -0,0 +1,8 @@
+import axios from "axios"
+import { GetPostsResponse } from "../model/types"
+import { API_BASE_PATH } from "@/app/config/fetch"
+
+export const searchPosts = async (query: string) => {
+  const res = await axios.get<GetPostsResponse>(`${API_BASE_PATH}/posts/search?q=${query}`)
+  return res.data
+}
diff --git a/src/entity/post/model/selectedPost.ts b/src/entity/post/model/selectedPost.ts
@@ -0,0 +1,12 @@
+import { create } from "zustand"
+import { Post } from "./types"
+
+interface SelectedPostStore {
+  selectedPost: Post | null
+  setSelectedPost: (post: Post | null) => void
+}
+
+export const useSelectedPost = create<SelectedPostStore>((set) => ({
+  selectedPost: null,
+  setSelectedPost: (post) => set({ selectedPost: post }),
+}))
diff --git a/src/entity/post/model/types.ts b/src/entity/post/model/types.ts
@@ -0,0 +1,25 @@
+export interface Post {
+  id: number
+  body: string
+  reactions: {
+    dislikes: number
+    likes: number
+  }
+  tags: string[]
+  title: string
+  userId: number
+  views: number
+}
+
+export interface GetPostsResponse {
+  limit: number
+  skip: number
+  total: number
+  posts: Post[]
+}
+
+export interface NewPost {
+  title: string
+  body: string
+  userId: number
+}
diff --git a/src/entity/post/model/useNormalPosts.ts b/src/entity/post/model/useNormalPosts.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query"
+
+import { getPosts } from "../api/getPosts"
+import { usePaginationStore } from "@/features/pagination/model/usePaginationStore"
+
+export const useNormalPosts = () => {
+  const { limit, skip } = usePaginationStore()
+
+  return useQuery({
+    queryKey: ["posts", { limit, skip }],
+    queryFn: async () => {
+      try {
+        return await getPosts(limit, skip)
+      } catch (e) {
+        console.error("게시물 가져오기 오류:", e)
+      }
+    },
+  })
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const API_BASE_PATH = process.env.NODE_ENV === "production" ? "https://dummyjson.com" : "/api"