diff --git "a/src/apis/\bcreateImg.jsx" "b/src/apis/\bcreateImg.jsx" deleted file mode 100644 index 66fc47e..0000000 --- "a/src/apis/\bcreateImg.jsx" +++ /dev/null @@ -1,21 +0,0 @@ -import axios from "axios"; - -const createImg = async (csrfToken, formData) => { - try { - const serverResponse = await axios.post(`${process.env.REACT_APP_HOST_URL}/v1/images`, formData, { - withCredentials: true, - headers: { - "X-CSRF-TOKEN": csrfToken, - "Content-Type": "multipart/form-data", - }, - }); - console.log("이미지가 정상적으로 추가되었음", serverResponse); - - return serverResponse.data.imageUrl; - } catch (error) { - console.error("이미지 추가 실패:", error); - throw error; - } -}; - -export default createImg; diff --git a/src/apis/updateDiary.jsx b/src/apis/updateDiary.jsx new file mode 100644 index 0000000..a1c161a --- /dev/null +++ b/src/apis/updateDiary.jsx @@ -0,0 +1,26 @@ +import axios from "axios"; + +const updateDiary = async (formDataToSend, csrfToken, journalId) => { + console.log("API 코드에서 잘 넘어왔는지", formDataToSend, csrfToken, journalId); + try { + const serverResponse = await axios.put( + `${process.env.REACT_APP_HOST_URL}/v1/journals/${journalId}`, + formDataToSend, + { + withCredentials: true, + headers: { + "Content-Type": "application/json", + "X-CSRF-TOKEN": csrfToken, + }, + } + ); + console.log("일지가 정상적으로 수정되었음", serverResponse); + + return serverResponse.data; + } catch (error) { + console.error("일지 수정 실패:", error); + throw error; + } +}; + +export default updateDiary; diff --git a/src/diaryWritePage/components/ThumbnailModal.jsx b/src/diaryWritePage/components/ThumbnailModal.jsx index 0fde5d1..f555dbd 100644 --- a/src/diaryWritePage/components/ThumbnailModal.jsx +++ b/src/diaryWritePage/components/ThumbnailModal.jsx @@ -3,10 +3,28 @@ import styled from "styled-components"; import CloseRoundedIcon from "@mui/icons-material/CloseRounded"; import AddRoundedIcon from "@mui/icons-material/AddRounded"; import createDiary from "../../apis/createDiary"; -function ThumbnailModal({ setThumbnailModal, setPostedModal, formData, goalId, csrfToken }) { +import createImg from "../../apis/createImg"; +import { tokenState } from "../../atom/atom"; +import updateDiary from "../../apis/updateDiary"; + +function ThumbnailModal({ + setThumbnailModal, + setPostedModal, + setEditedModal, + formData, + goalId, + csrfToken, + journalId, + thumbnail, +}) { // 이미지 설정// const fileInputRef = useRef(null); const [previewUrl, setPreviewUrl] = useState(null); // 미리보기창에 들어갈 이미지 url + const [imageUrl, setImageUrl] = useState(""); + + useEffect(() => { + console.log("journalId updated:", journalId); + }, [journalId]); const closeThumbnailModal = () => { // 썸네일 추가하는 모달 닫는 함수(배경누르거나 x 눌러서 닫기만할때) @@ -32,8 +50,8 @@ function ThumbnailModal({ setThumbnailModal, setPostedModal, formData, goalId, c formDataToSend.append("content", content); // 이미지 파일이 존재할 경우에만 추가 - if (fileInputRef.current.files[0]) { - formDataToSend.append("image", fileInputRef.current.files[0]); + if (imageUrl) { + formDataToSend.append("thumbnail", imageUrl); } // TODO: 다이어리 수정하는 api 파일 생성하기 !!!!!! creatDiary말고 나중에 // 백엔드에서 일지 수정 api 생성하면 만들고 이 부분도 고치기. @@ -44,14 +62,40 @@ function ThumbnailModal({ setThumbnailModal, setPostedModal, formData, goalId, c console.error("일지 생성 실패", error); } }; - const handleFileInputChange = (event) => { + + const handleUpdateClick = async () => { + try { + const { title, content } = formData; + + const formDataToSend = new FormData(); + formDataToSend.append("title", title); + formDataToSend.append("content", content); + + // 이미지 파일이 존재할 경우에만 추가 + if (imageUrl) { + formDataToSend.append("thumbnail", imageUrl); + } + // TODO: 다이어리 수정하는 api 파일 생성하기 !!!!!! creatDiary말고 나중에 + // 백엔드에서 일지 수정 api 생성하면 만들고 이 부분도 고치기. + await updateDiary(formDataToSend, csrfToken, journalId); + setThumbnailModal(false); + setEditedModal(true); + } catch (error) { + console.error("일지 생성 실패", error); + } + }; + + const handleFileInputChange = async (event) => { const file = event.target.files[0]; + const formData = new FormData(); + formData.append("file", file); + setImageUrl(await createImg(csrfToken, formData)); if (file) { const reader = new FileReader(); reader.onload = () => { setPreviewUrl(reader.result); - console.log("Uploaded image:", reader.result); + console.log("Uploaded thumbnail:", reader.result); }; reader.readAsDataURL(file); } else { @@ -82,18 +126,31 @@ function ThumbnailModal({ setThumbnailModal, setPostedModal, formData, goalId, c objectFit: "cover", }} /> + ) : thumbnail ? ( + Current ) : ( <> -
사진 추가하기
+
사진 추가하기
)} - - {/* */} + {journalId === undefined ? ( + + ) : ( + + )} @@ -184,7 +241,7 @@ const ImageAdd = styled.div` > svg { font-size: 40px; } - .image-add-text { + .thumbnail-add-text { font-size: 14px; font-weight: bold; } diff --git a/src/diaryWritePage/components/UpdateDiary.jsx b/src/diaryWritePage/components/UpdateDiary.jsx index 1a2dd15..eb9e81e 100644 --- a/src/diaryWritePage/components/UpdateDiary.jsx +++ b/src/diaryWritePage/components/UpdateDiary.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import styled from "styled-components"; import QuillEditor from "./QuillEditor"; import { useLocation } from "react-router-dom"; @@ -22,6 +22,13 @@ function UpdateDiary() { setThumbnailModal(true); }; + useEffect(() => { + console.log("diaryDetail updated:", diaryDetail); + }, [diaryDetail]); + + const journalId = diaryDetail.journalId; + const thumbnail = diaryDetail.thumbnail; + return ( @@ -65,11 +72,11 @@ function UpdateDiary() { formData={formData} diaryDetail={diaryDetail} csrfToken={csrfToken} + journalId={journalId} + thumbnail={thumbnail} /> )} - {!thumbnailModal && editedModal && ( - - )} + {!thumbnailModal && editedModal && } );