Skip to content

Commit 0858961

Browse files
committed
refactor: 게시물 수정 기능 로직 캡슐화
1 parent a99c397 commit 0858961

File tree

4 files changed

+23
-34
lines changed

4 files changed

+23
-34
lines changed

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
import { useSetAtom } from "jotai"
12
import { useMutation, useQueryClient } from "@tanstack/react-query"
23
import { updatePostApi, PostDTO } from "../../../entities/posts/api"
4+
import { isEditPostModalOpenAtom } from "./atoms"
35

4-
export const useEditPost = (onSuccessCallback?: () => void) => {
6+
export const useEditPost = () => {
57
const queryClient = useQueryClient()
8+
const setIsEditPostModalOpen = useSetAtom(isEditPostModalOpenAtom)
69

710
return useMutation({
8-
mutationFn: (params: { selectedPost: PostDTO }) => updatePostApi(params),
11+
mutationFn: (post: PostDTO) => updatePostApi({ selectedPost: post }),
912
onSuccess: () => {
1013
queryClient.invalidateQueries({ queryKey: ["posts"] })
11-
onSuccessCallback?.()
14+
setIsEditPostModalOpen(false)
1215
},
1316
onError: (error) => {
1417
console.error("게시물 업데이트 오류:", error)

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

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,34 @@
11
import { Input, Textarea, Button } from "../../../shared/ui"
22
import { PostDTO } from "../../../entities/posts/api"
33
import { ChangeEvent, useState } from "react"
4+
import { useEditPost } from "../model/useEditPost"
45

56
interface EditPostFormProps {
67
post: PostDTO | null
7-
onUpdatePost: (updatedPost: PostDTO | null) => void
88
}
99

10-
const EditPostForm = ({ post, onUpdatePost }: EditPostFormProps) => {
10+
const EditPostForm = ({ post }: EditPostFormProps) => {
1111
const [updatedPost, setUpdatedPost] = useState(post)
12+
const { mutate: updatePost } = useEditPost()
1213

1314
const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
14-
const name = e.target.name as "title" | "body"
15-
const value = e.target.value
15+
const { name, value } = e.target
16+
if (name) {
17+
setUpdatedPost((prev) => (prev ? { ...prev, [name]: value } : null))
18+
}
19+
}
1620

17-
if (name) setUpdatedPost((prev) => ({ ...prev, [name]: value }))
21+
const handleUpdate = () => {
22+
if (updatedPost) {
23+
updatePost(updatedPost)
24+
}
1825
}
26+
1927
return (
2028
<div className="space-y-4">
2129
<Input placeholder="제목" name="title" value={updatedPost?.title || ""} onChange={handleChange} />
2230
<Textarea name="body" rows={15} placeholder="내용" value={updatedPost?.body || ""} onChange={handleChange} />
23-
<Button onClick={() => onUpdatePost(updatedPost)}>게시물 업데이트</Button>
31+
<Button onClick={handleUpdate}>게시물 업데이트</Button>
2432
</div>
2533
)
2634
}

src/pages/posts-manager/index.tsx

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
fetchPostsApi,
2222
PostDTO,
2323
searchPostsApi,
24-
updatePostApi,
2524
} from "../../entities/posts/api"
2625
import { fetchTagsApi } from "../../entities/tags/api"
2726
import { fetchUsersApi } from "../../entities/users/api"
@@ -127,22 +126,6 @@ const PostsManager = () => {
127126
updateURL()
128127
}
129128

130-
// 게시물 업데이트
131-
const { mutate: updatePostMutate } = useMutation({
132-
mutationFn: updatePostApi,
133-
onSuccess: () => {
134-
queryClient.invalidateQueries({ queryKey: ["posts"] })
135-
setIsEditPostModalOpen(false)
136-
},
137-
onError: (error) => {
138-
console.error("게시물 업데이트 오류:", error)
139-
},
140-
})
141-
142-
const updatePost = (updatedPost: PostDTO) => {
143-
updatePostMutate({ selectedPost: updatedPost })
144-
}
145-
146129
// 게시물 삭제
147130
const { mutate: deletePostMutate } = useMutation({
148131
mutationFn: deletePostApi,
@@ -293,7 +276,7 @@ const PostsManager = () => {
293276

294277
<AddPostModal />
295278

296-
<EditPostModal onUpdatePost={updatePost} />
279+
<EditPostModal />
297280

298281
<AddCommentModal />
299282

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
import { useAtom } from "jotai"
2-
import { PostDTO } from "../../entities/posts/api"
32
import { editingPostAtom, isEditPostModalOpenAtom } from "../../features/edit-post/model/atoms"
43
import EditPostForm from "../../features/edit-post/ui/EditPostForm"
54
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../shared/ui"
65

7-
interface EditPostModalProps {
8-
onUpdatePost: (post: PostDTO | null) => void
9-
}
10-
11-
const EditPostModal = ({ onUpdatePost }: EditPostModalProps) => {
6+
const EditPostModal = () => {
127
const [isOpen, setIsOpen] = useAtom(isEditPostModalOpenAtom)
138
const [post] = useAtom(editingPostAtom)
149

@@ -18,7 +13,7 @@ const EditPostModal = ({ onUpdatePost }: EditPostModalProps) => {
1813
<DialogHeader>
1914
<DialogTitle>게시물 수정</DialogTitle>
2015
</DialogHeader>
21-
<EditPostForm post={post} onUpdatePost={onUpdatePost} />
16+
<EditPostForm post={post} />
2217
</DialogContent>
2318
</Dialog>
2419
)

0 commit comments

Comments
 (0)