refactor: 페이지 로직을 커스텀 훅으로 분리

- TanStack Query를 사용한 데이터 페칭 및 뮤테이션 로직을
  각 feature의 model 디렉토리로 분리하여 재사용성을 높임.
- usePosts, useComments, useAddPost 등 관련 훅 생성.

Author: bebusl

src/features/add-comment/model/useAddComment.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { addCommentApi } from "../../../entities/comments/api"
+
+export const useAddComment = (onSuccessCallback?: () => void) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: addCommentApi,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["comments", data.postId] })
+      onSuccessCallback?.()
+    },
+    onError: (error) => {
+      console.error("댓글 추가 오류:", error)
+    },
+  })
+}

src/features/add-post/model/useAddPost.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { addPostApi } from "../../../entities/posts/api"
+
+export const useAddPost = (onSuccessCallback?: () => void) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: addPostApi,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["posts"] })
+      onSuccessCallback?.()
+    },
+    onError: (error) => {
+      console.error("게시물 추가 오류:", error)
+    },
+  })
+}

src/features/comments-management/model/useComments.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query"
+import { fetchCommentsApi } from "../../../entities/comments/api"
+
+export const useComments = (postId: number | null | undefined) => {
+  return useQuery({
+    queryKey: ["comments", postId],
+    queryFn: () => fetchCommentsApi(postId!),
+    enabled: !!postId,
+  })
+}

src/features/comments-management/model/useDeleteComment.ts

@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { deleteCommentApi } from "../../../entities/comments/api"
+
+export const useDeleteComment = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (params: { id: number; postId: number }) => deleteCommentApi(params.id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["comments", variables.postId] })
+    },
+    onError: (error) => {
+      console.error("댓글 삭제 오류:", error)
+    },
+  })
+}

src/features/comments-management/model/useLikeComment.ts

@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { likeCommentApi } from "../../../entities/comments/api"
+
+export const useLikeComment = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (params: { id: number; postId: number }) => likeCommentApi(params.id, 1),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["comments", data.postId] })
+    },
+    onError: (error) => {
+      console.error("댓글 좋아요 오류:", error)
+    },
+  })
+}

src/features/edit-comment/model/useUpdateComment.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { updateCommentApi } from "../../../entities/comments/api"
+
+export const useUpdateComment = (onSuccessCallback?: () => void) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (updatedComment: { id: number; body: string }) =>
+      updateCommentApi(updatedComment),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["comments", data.postId] })
+      onSuccessCallback?.()
+    },
+    onError: (error) => {
+      console.error("댓글 업데이트 오류:", error)
+    },
+  })
+}

src/features/edit-post/model/useEditPost.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { updatePostApi, PostDTO } from "../../../entities/posts/api"
+
+export const useEditPost = (onSuccessCallback?: () => void) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (params: { selectedPost: PostDTO }) => updatePostApi(params),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["posts"] })
+      onSuccessCallback?.()
+    },
+    onError: (error) => {
+      console.error("게시물 업데이트 오류:", error)
+    },
+  })
+}

src/features/posts-management/model/useDeletePost.ts

@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { deletePostApi } from "../../../entities/posts/api"
+
+export const useDeletePost = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: deletePostApi,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["posts"] })
+    },
+    onError: (error) => {
+      console.error("게시물 삭제 오류:", error)
+    },
+  })
+}

src/features/posts-management/model/usePosts.ts

@@ -0,0 +1,51 @@
+import { useQuery } from "@tanstack/react-query"
+import {
+  fetchPostsApi,
+  PostDTO,
+  searchPostsApi,
+} from "../../../entities/posts/api"
+import { fetchUsersApi } from "../../../entities/users/api"
+import { fetchPostsByTagApi } from "../../../entities/posts/api/fetchPostsByTag"
+
+interface UsePostsParams {
+  skip: number
+  limit: number
+  searchQuery: string
+  sortBy: string
+  sortOrder: string
+  selectedTag: string
+}
+
+const getPosts = async ({ skip, limit, searchQuery, selectedTag }: UsePostsParams) => {
+  let postsData
+  if (searchQuery) {
+    postsData = await searchPostsApi({ query: searchQuery })
+  } else if (selectedTag && selectedTag !== "all") {
+    postsData = await fetchPostsByTagApi(selectedTag)
+  } else {
+    postsData = await fetchPostsApi({ limit, skip })
+  }
+
+  const usersData = (await fetchUsersApi()).users
+
+  const postsWithUsers = postsData.posts.map((post: PostDTO) => ({
+    ...post,
+    author: usersData.find((user) => user.id === post.userId),
+  }))
+  return { posts: postsWithUsers, total: postsData.total }
+}
+
+export const usePosts = ({
+  skip,
+  limit,
+  searchQuery,
+  sortBy,
+  sortOrder,
+  selectedTag,
+}: UsePostsParams) => {
+  return useQuery({
+    queryKey: ["posts", { skip, limit, searchQuery, sortBy, sortOrder, selectedTag }],
+    queryFn: () => getPosts({ skip, limit, searchQuery, sortBy, sortOrder, selectedTag }),
+    placeholderData: (previousData) => previousData,
+  })
+}

src/features/posts-search-filter/model/usePostsQueryState.ts

@@ -0,0 +1,51 @@
+import { useState, useEffect } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+
+export const usePostsQueryState = () => {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const queryParams = new URLSearchParams(location.search)
+
+  const [skip, setSkip] = useState(parseInt(queryParams.get("skip") || "0"))
+  const [limit, setLimit] = useState(parseInt(queryParams.get("limit") || "10"))
+  const [sortBy, setSortBy] = useState(queryParams.get("sortBy") || "")
+  const [sortOrder, setSortOrder] = useState(queryParams.get("sortOrder") || "asc")
+  const [searchQuery, setSearchQuery] = useState(queryParams.get("search") || "")
+  const [selectedTag, setSelectedTag] = useState(queryParams.get("tag") || "")
+
+  useEffect(() => {
+    const params = new URLSearchParams()
+    if (skip) params.set("skip", skip.toString())
+    if (limit) params.set("limit", limit.toString())
+    if (searchQuery) params.set("search", searchQuery)
+    if (sortBy) params.set("sortBy", sortBy)
+    if (sortOrder) params.set("sortOrder", sortOrder)
+    if (selectedTag) params.set("tag", selectedTag)
+    navigate(`?${params.toString()}`)
+  }, [skip, limit, searchQuery, sortBy, sortOrder, selectedTag, navigate])
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search)
+    setSkip(parseInt(params.get("skip") || "0"))
+    setLimit(parseInt(params.get("limit") || "10"))
+    setSearchQuery(params.get("search") || "")
+    setSortBy(params.get("sortBy") || "")
+    setSortOrder(params.get("sortOrder") || "asc")
+    setSelectedTag(params.get("tag") || "")
+  }, [location.search])
+
+  return {
+    skip,
+    setSkip,
+    limit,
+    setLimit,
+    sortBy,
+    setSortBy,
+    sortOrder,
+    setSortOrder,
+    searchQuery,
+    setSearchQuery,
+    selectedTag,
+    setSelectedTag,
+  }
+}