diff --git a/src/pages/PostDetail.tsx b/src/pages/PostDetail.tsx index 166bd60..64f5655 100644 --- a/src/pages/PostDetail.tsx +++ b/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(null) const [error, setError] = useState(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 = () => { {postData.userNickname} - + -
-						
-					
+
diff --git a/src/pages/PreviewPage.tsx b/src/pages/PreviewPage.tsx index 4735490..c631ddf 100644 --- a/src/pages/PreviewPage.tsx +++ b/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(null) const navigate = useNavigate() const { sessionId } = useAuthStore() + const location = useLocation() + const { isEditing, post } = location.state || '' const handleBack = useGoBack() @@ -54,10 +56,16 @@ 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, @@ -65,17 +73,17 @@ const PreviewPage = () => { 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() diff --git a/src/pages/WritePage.tsx b/src/pages/WritePage.tsx index e9fa60c..acb95d8 100644 --- a/src/pages/WritePage.tsx +++ b/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(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 = () => { 임시저장 {isEditing ? ( - + ) : (