refactor: 게시물 추가 기능 로직 캡슐화

Author: bebusl

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

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

src/features/add-post/ui/AddPostForm.tsx

@@ -1,12 +1,14 @@
 import { useState } from "react"
 import { Input, Textarea, Button } from "../../../shared/ui"
+import { useAddPost } from "../model/useAddPost"
 
-interface AddPostFormProps {
-  onAddPost: () => void
-}
-
-const AddPostForm = ({ onAddPost }: AddPostFormProps) => {
+const AddPostForm = () => {
   const [newPost, setNewPost] = useState({ title: "", body: "", userId: 1 })
+  const { mutate: addPost } = useAddPost()
+
+  const handleAddPost = () => {
+    addPost(newPost)
+  }
 
   return (
     <div className="space-y-4">
@@ -27,7 +29,7 @@ const AddPostForm = ({ onAddPost }: AddPostFormProps) => {
         value={newPost.userId}
         onChange={(e) => setNewPost({ ...newPost, userId: Number(e.target.value) })}
       />
-      <Button onClick={onAddPost}>게시물 추가</Button>
+      <Button onClick={handleAddPost}>게시물 추가</Button>
     </div>
   )
 }

src/pages/posts-manager/index.tsx

@@ -3,12 +3,20 @@ import { useEffect, useState } from "react"
 import { Plus } from "lucide-react"
 import { useLocation, useNavigate } from "react-router-dom"
 import { isAddPostModalOpenAtom } from "../../features/add-post/model/atoms"
-import { editingPostAtom, isEditPostModalOpenAtom } from "../../features/edit-post/model/atoms"
-import { isUserInfoModalOpenAtom, viewingUserIdAtom } from "../../features/user-management/model/atoms"
-import { detailPostAtom, isPostDetailModalOpenAtom } from "../../features/view-post-detail/model/atoms"
+import {
+  editingPostAtom,
+  isEditPostModalOpenAtom,
+} from "../../features/edit-post/model/atoms"
+import {
+  isUserInfoModalOpenAtom,
+  viewingUserIdAtom,
+} from "../../features/user-management/model/atoms"
+import {
+  detailPostAtom,
+  isPostDetailModalOpenAtom,
+} from "../../features/view-post-detail/model/atoms"
 import { Button, Card, CardContent, CardHeader, CardTitle } from "../../shared/ui"
 import {
-  addPostApi,
   deletePostApi,
   fetchPostsApi,
   PostDTO,
@@ -17,7 +25,11 @@ import {
 } from "../../entities/posts/api"
 import { fetchTagsApi } from "../../entities/tags/api"
 import { fetchUsersApi } from "../../entities/users/api"
-import { deleteCommentApi, fetchCommentsApi, likeCommentApi } from "../../entities/comments/api"
+import {
+  deleteCommentApi,
+  fetchCommentsApi,
+  likeCommentApi,
+} from "../../entities/comments/api"
 import { fetchPostsByTagApi } from "../../entities/posts/api/fetchPostsByTag"
 import PostsTable from "../../features/posts-management/ui/posts-table"
 import UserInfoModal from "../../widgets/user-modal"
@@ -115,22 +127,6 @@ const PostsManager = () => {
     updateURL()
   }
 
-  // 게시물 추가
-  const { mutate: addPostMutate } = useMutation({
-    mutationFn: addPostApi,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["posts"] })
-      setIsAddPostModalOpen(false)
-    },
-    onError: (error) => {
-      console.error("게시물 추가 오류:", error)
-    },
-  })
-
-  const addPostFlow = (newPost: { title: string; body: string; userId: number }) => {
-    addPostMutate(newPost)
-  }
-
   // 게시물 업데이트
   const { mutate: updatePostMutate } = useMutation({
     mutationFn: updatePostApi,
@@ -295,7 +291,7 @@ const PostsManager = () => {
         </div>
       </CardContent>
 
-      <AddPostModal onAddPost={addPostFlow} />
+      <AddPostModal />
 
       <EditPostModal onUpdatePost={updatePost} />
 

src/widgets/add-post-modal/index.tsx

@@ -1,13 +1,9 @@
 import { useAtom } from "jotai"
-import AddPostForm from "../../features/add-post/ui/AddPostForm"
 import { isAddPostModalOpenAtom } from "../../features/add-post/model/atoms"
+import AddPostForm from "../../features/add-post/ui/AddPostForm"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../shared/ui"
 
-interface AddPostModalProps {
-  onAddPost: (post: { title: string; body: string; userId: number }) => void
-}
-
-const AddPostModal = ({ onAddPost }: AddPostModalProps) => {
+const AddPostModal = () => {
   const [isOpen, setIsOpen] = useAtom(isAddPostModalOpenAtom)
 
   return (
@@ -16,10 +12,12 @@ const AddPostModal = ({ onAddPost }: AddPostModalProps) => {
         <DialogHeader>
           <DialogTitle>새 게시물 추가</DialogTitle>
         </DialogHeader>
-        <AddPostForm onAddPost={onAddPost} />
+        <AddPostForm />
       </DialogContent>
     </Dialog>
   )
 }
 
 export default AddPostModal
+
+export default AddPostModal