feat: 글 수정 기능 구현 #45

src/pages/PostDetail.tsx

@@ -10,7 +10,7 @@ import Toast from '@components/Toast'
 import styled from '@emotion/styled'
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 interface PostData {
 	postId: number
@@ -28,6 +28,11 @@ const PostDetail = () => {
 	const [postData, setPostData] = useState<PostData | null>(null)
 	const [error, setError] = useState<string | null>(null)
 	const { sessionId } = useAuthStore()
+	const navigate = useNavigate()
+
+	const handlePostEdit = () => {
+		navigate(`/write?id=${postId}`, { state: { postData } })
+	}
 
 	useEffect(() => {
 		const fetchPostData = async () => {
@@ -73,16 +78,14 @@ const PostDetail = () => {
 								<span>{postData.userNickname}</span>
 							</DateName>
 							<EditDelete>
-								<button>수정</button>
+								<button onClick={handlePostEdit}>수정</button>
 								<button>삭제</button>
 							</EditDelete>
 						</MetaData>
 					</div>
 				</TitleContainer>
 				<Content>
-					<pre>
-						<RenderMarkdown markdown={postData.content} />
-					</pre>
+					<RenderMarkdown markdown={postData.content} />
 				</Content>
 				<CommentForm />
 				<CommentList />

src/pages/PreviewPage.tsx

@@ -7,7 +7,7 @@ import Button from '@components/Button'
 import useGoBack from '@/hooks/useGoBack'
 import useWrite from '@/hooks/useWrite'
 import useFileUpload from '@/hooks/useFileUpload'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useAuthStore } from '@/stores/authStore'
 import axios from 'axios'
 import { ShowToast } from '@components/Toast'
@@ -28,6 +28,8 @@ const PreviewPage = () => {
 	const fileRef = useRef<HTMLInputElement>(null)
 	const navigate = useNavigate()
 	const { sessionId } = useAuthStore()
+	const location = useLocation()
+	const { isEditing, post } = location.state || ''
 
 	const handleBack = useGoBack()
 
@@ -54,28 +56,34 @@ const PreviewPage = () => {
 	}
 
 	const handleSubmit = async () => {
+		const method = isEditing ? 'put' : 'post'
+		const url = isEditing
+			? `${import.meta.env.VITE_NUBBLE_SERVER}/posts/${post.id}`
+			: `${import.meta.env.VITE_NUBBLE_SERVER}/posts`
+
 		try {
-			const res = await axios.post(
-				`${import.meta.env.VITE_NUBBLE_SERVER}/posts`,
-				{
+			const res = await axios({
+				method,
+				url,
+				data: {
 					title: markdownTitle,
 					content: markdownContent,
 					boardId,
 					status: 'PUBLISHED',
 					thumbnailUrl: thumbnail,
 					description,
 				},
-				{
-					headers: {
-						'Content-Type': 'application/json',
-						'SESSION-ID': sessionId,
-					},
+
+				headers: {
+					'Content-Type': 'application/json',
+					'SESSION-ID': sessionId,
 				},
-			)
+			})
 			const { postId } = res.data
-			console.log(postId)
 			navigate(
-				`/postDetail/${boardId === 0 ? '코딩테스트' : '스터디'}/@${userId}/${encodeURIComponent(markdownTitle)}/${postId}`,
+				isEditing
+					? `/postDetail/${boardId === 0 ? '코딩테스트' : '스터디'}/@${userId}/${encodeURIComponent(markdownTitle)}/${post.id}`
+					: `/postDetail/${boardId === 0 ? '코딩테스트' : '스터디'}/@${userId}/${encodeURIComponent(markdownTitle)}/${postId}`,
 			)
 			ShowToast('게시물이 성공적으로 등록되었습니다.', 'success')
 			reset()

src/pages/WritePage.tsx

@@ -19,6 +19,7 @@ import Toast from '@components/Toast'
 const WritePage = () => {
 	const navigate = useNavigate()
 	const location = useLocation()
+	const { state } = useLocation()
 	const queryParams = new URLSearchParams(location.search)
 	const id = queryParams.get('id')
 	const fileRef = useRef<HTMLInputElement>(null)
@@ -47,6 +48,7 @@ const WritePage = () => {
 	} = useWrite()
 	const { uploadFile } = useFileUpload()
 	const { sessionId } = useAuthStore()
+	const [post, setPost] = useState(state?.postData || null)
 
 	const handleUploadFile = () => {
 		if (fileRef.current) {
@@ -109,7 +111,13 @@ const WritePage = () => {
 		setDescription(markdownContent)
 		setCategory(category)
 		setBoard(board)
-		navigate('/preview')
+
+		navigate('/preview', {
+			state: {
+				isEditing,
+				post: { title: markdownTitle, content: markdownContent, category, board, id },
+			},
+		})
 	}
 
 	const handleDraft = async () => {
@@ -136,18 +144,17 @@ const WritePage = () => {
 			toast.error('임시저장에 실패했는데요?😱')
 		}
 	}
-	// useEffect(() => {
-	// 	if (id) {
-	// 		setIsEditing(true)
-	// 		const post = postsData[id]
-	// 		if (post) {
-	// 			setTitle(post.markdownTitle)
-	// 			setContent(post.content)
-	// 			setSelectedCategory(post.category)
-	// 			setSelectedSubCategory(post.subCategory)
-	// 		}
-	// 	}
-	// }, [id])
+
+	useEffect(() => {
+		if (id && post) {
+			setIsEditing(true)
+
+			setTitle(post.title)
+			setContent(post.content)
+			setCategory(post.category)
+			setBoard(post.subCategory)
+		}
+	}, [id, post])
 
 	useEffect(() => {
 		if (category) {
@@ -217,7 +224,13 @@ const WritePage = () => {
 							임시저장
 						</Button>
 						{isEditing ? (
-							<Button radius={50}>수정하기</Button>
+							<Button
+								radius={50}
+								onClick={handleSubmit}
+								disabled={!(markdownTitle && markdownContent && category && board)}
+							>
+								수정하기
+							</Button>
 						) : (
 							<Button
 								radius={50}