Merge pull request #128 from LikeLionHGU/jongyhun_feat/#123

feat: 일지 업데이트 및 생성 API
LikeLionHGU · Aug 6, 2024 · 6185d33 · 6185d33
2 parents 68147a6 + 386b059
commit 6185d33
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 34 deletions.
diff --git a/src/apis/createImg.jsx b/src/apis/createImg.jsx
diff --git a/src/apis/updateDiary.jsx 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
@@ -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 ? (
+              <img
+                src={`${thumbnail}`}
+                alt="Current"
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                }}
+              />
             ) : (
               <>
                 <AddRoundedIcon />
-                <div className="image-add-text">사진 추가하기</div>
+                <div className="thumbnail-add-text">사진 추가하기</div>
               </>
             )}
             <input type="file" style={{ display: "none" }} onChange={handleFileInputChange} ref={fileInputRef} />
           </ImageAdd>
           <Buttons>
             <NextBtn>
-              <button onClick={handleNextStep}>다음으로</button>
-              {/* <button onClick={completeGoal}>다음으로</button> */}
+              {journalId === undefined ? (
+                <button onClick={handleNextStep}>다음으로</button>
+              ) : (
+                <button onClick={handleUpdateClick}>다음으로</button>
+              )}
             </NextBtn>
           </Buttons>
         </Wrapper>
@@ -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
@@ -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 (
     <Wrapper>
       <BoxWrapper>
@@ -65,11 +72,11 @@ function UpdateDiary() {
             formData={formData}
             diaryDetail={diaryDetail}
             csrfToken={csrfToken}
+            journalId={journalId}
+            thumbnail={thumbnail}
           />
         )}
-        {!thumbnailModal && editedModal && (
-          <DiaryEditModal setEditedModal={setEditedModal} goalId={goalId} />
-        )}
+        {!thumbnailModal && editedModal && <DiaryEditModal setEditedModal={setEditedModal} goalId={goalId} />}
       </BoxWrapper>
     </Wrapper>
   );