Merge pull request #104 from Nubblee/feat/editPost-45

[Feat] 게시글 수정 기능 구현

src/components/RenderMarkdown.tsx

@@ -86,7 +86,7 @@ const RenderMarkdown = ({ markdown }: MarkdownProps) => {
 						return (
 							<img
 								style={{
-									maxWidth: '50%',
+									maxWidth: '90%',
 									justifyContent: 'center',
 									alignItems: 'center',
 									display: 'flex',

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,7 +28,13 @@ const PostDetail = () => {
 	const [postData, setPostData] = useState<PostData | null>(null)
 	const [error, setError] = useState<string | null>(null)
 	const { sessionId } = useAuthStore()
+	const navigate = useNavigate()
+	const { userName } = useAuthStore()
 
+	const handlePostEdit = () => {
+		navigate(`/write?id=${postId}`, { state: { postData } })
+	}
+	console.log(postData)
 	useEffect(() => {
 		const fetchPostData = async () => {
 			try {
@@ -72,17 +78,19 @@ const PostDetail = () => {
 								<span>{formatDate(postData.createdAt)}</span>
 								<span>{postData.userNickname}</span>
 							</DateName>
-							<EditDelete>
-								<button>수정</button>
-								<button>삭제</button>
-							</EditDelete>
+							{userName === postData.userNickname ? (
+								<EditDelete>
+									<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,24 +144,22 @@ 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 (category) {
-			setBoardId(Number(category))
+		if (board) {
+			setBoardId(Number(board))
 		}
-	}, [category])
+	}, [board])
+
+	useEffect(() => {
+		if (id && post) {
+			setIsEditing(true)
+			setTitle(post.title)
+			setContent(post.content)
+			setCategory(post.categoryId)
+			setBoard(post.boardId)
+		}
+	}, [id, post])
 
 	return (
 		<Container>
@@ -217,7 +223,13 @@ const WritePage = () => {
 							임시저장
 						</Button>
 						{isEditing ? (
-							<Button radius={50}>수정하기</Button>
+							<Button
+								radius={50}
+								onClick={handleSubmit}
+								disabled={!(markdownTitle && markdownContent && category && board)}
+							>
+								수정하기
+							</Button>
 						) : (
 							<Button
 								radius={50}