refactor: 게시물 수정 기능 로직 캡슐화

Author: bebusl

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

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

src/features/edit-post/ui/EditPostForm.tsx

@@ -1,26 +1,34 @@
 import { Input, Textarea, Button } from "../../../shared/ui"
 import { PostDTO } from "../../../entities/posts/api"
 import { ChangeEvent, useState } from "react"
+import { useEditPost } from "../model/useEditPost"
 
 interface EditPostFormProps {
   post: PostDTO | null
-  onUpdatePost: (updatedPost: PostDTO | null) => void
 }
 
-const EditPostForm = ({ post, onUpdatePost }: EditPostFormProps) => {
+const EditPostForm = ({ post }: EditPostFormProps) => {
   const [updatedPost, setUpdatedPost] = useState(post)
+  const { mutate: updatePost } = useEditPost()
 
   const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const name = e.target.name as "title" | "body"
-    const value = e.target.value
+    const { name, value } = e.target
+    if (name) {
+      setUpdatedPost((prev) => (prev ? { ...prev, [name]: value } : null))
+    }
+  }
 
-    if (name) setUpdatedPost((prev) => ({ ...prev, [name]: value }))
+  const handleUpdate = () => {
+    if (updatedPost) {
+      updatePost(updatedPost)
+    }
   }
+
   return (
     <div className="space-y-4">
       <Input placeholder="제목" name="title" value={updatedPost?.title || ""} onChange={handleChange} />
       <Textarea name="body" rows={15} placeholder="내용" value={updatedPost?.body || ""} onChange={handleChange} />
-      <Button onClick={() => onUpdatePost(updatedPost)}>게시물 업데이트</Button>
+      <Button onClick={handleUpdate}>게시물 업데이트</Button>
     </div>
   )
 }

src/pages/posts-manager/index.tsx

@@ -21,7 +21,6 @@ import {
   fetchPostsApi,
   PostDTO,
   searchPostsApi,
-  updatePostApi,
 } from "../../entities/posts/api"
 import { fetchTagsApi } from "../../entities/tags/api"
 import { fetchUsersApi } from "../../entities/users/api"
@@ -127,22 +126,6 @@ const PostsManager = () => {
     updateURL()
   }
 
-  // 게시물 업데이트
-  const { mutate: updatePostMutate } = useMutation({
-    mutationFn: updatePostApi,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["posts"] })
-      setIsEditPostModalOpen(false)
-    },
-    onError: (error) => {
-      console.error("게시물 업데이트 오류:", error)
-    },
-  })
-
-  const updatePost = (updatedPost: PostDTO) => {
-    updatePostMutate({ selectedPost: updatedPost })
-  }
-
   // 게시물 삭제
   const { mutate: deletePostMutate } = useMutation({
     mutationFn: deletePostApi,
@@ -293,7 +276,7 @@ const PostsManager = () => {
 
       <AddPostModal />
 
-      <EditPostModal onUpdatePost={updatePost} />
+      <EditPostModal />
 
       <AddCommentModal />
 

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

@@ -1,14 +1,9 @@
 import { useAtom } from "jotai"
-import { PostDTO } from "../../entities/posts/api"
 import { editingPostAtom, isEditPostModalOpenAtom } from "../../features/edit-post/model/atoms"
 import EditPostForm from "../../features/edit-post/ui/EditPostForm"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../shared/ui"
 
-interface EditPostModalProps {
-  onUpdatePost: (post: PostDTO | null) => void
-}
-
-const EditPostModal = ({ onUpdatePost }: EditPostModalProps) => {
+const EditPostModal = () => {
   const [isOpen, setIsOpen] = useAtom(isEditPostModalOpenAtom)
   const [post] = useAtom(editingPostAtom)
 
@@ -18,7 +13,7 @@ const EditPostModal = ({ onUpdatePost }: EditPostModalProps) => {
         <DialogHeader>
           <DialogTitle>게시물 수정</DialogTitle>
         </DialogHeader>
-        <EditPostForm post={post} onUpdatePost={onUpdatePost} />
+        <EditPostForm post={post} />
       </DialogContent>
     </Dialog>
   )