Merge branch 'main' of https://github.com/LikeLionHGU/Namsong3-Front …

…into eunju_feat/#125
LikeLionHGU · Aug 6, 2024 · c383ed4 · c383ed4
2 parents 3d1d203 + 1b99210
commit c383ed4
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 138 deletions.
diff --git a/src/apis/createImg.jsx b/src/apis/createImg.jsx
@@ -0,0 +1,21 @@
+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/deleteDiary.jsx b/src/apis/deleteDiary.jsx
@@ -0,0 +1,22 @@
+import axios from "axios";
+
+const deleteDiary = async (csrfToken, journalId) => {
+  console.log("API 코드에서 잘 넘어왔는지", csrfToken, journalId);
+  try {
+    const serverResponse = await axios.delete(`${process.env.REACT_APP_HOST_URL}/v1/journals/${journalId}`, {
+      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 deleteDiary;
diff --git a/src/diaryDetailPage/components/DeleteConfirmModal.jsx b/src/diaryDetailPage/components/DeleteConfirmModal.jsx
@@ -1,16 +1,24 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
+import deleteDiary from "../../apis/deleteDiary";
+import { useRecoilValue } from "recoil";
+import { tokenState } from "../../atom/atom";
 
-function DeleteConfirmModal({ setDeleteModal, goalId }) {
+function DeleteConfirmModal({ setDeleteModal, goalId, journalId }) {
   const navigate = useNavigate();
+  const csrfToken = useRecoilValue(tokenState);
   const closeDeleteModal = () => {
     setDeleteModal(false);
   };
-  const deleteModal = () => {
-    //일지 삭제하는 부분 필요.
-    setDeleteModal(false);
-    navigate(`/diarylist`, { state: { goalId } });
+  const deleteModal = async () => {
+    try {
+      await deleteDiary(csrfToken, journalId);
+      setDeleteModal(false);
+      navigate(`/diarylist`, { state: { goalId } });
+    } catch (error) {
+      console.error("목표 삭제 실패", error);
+    }
   };
   return (
     <div>

diff --git a/src/diaryDetailPage/components/DiaryDetail.jsx b/src/diaryDetailPage/components/DiaryDetail.jsx
@@ -31,7 +31,7 @@ function DiaryDetail() {
       }
     };
     fetchGoalList();
-  }, [goalId, csrfToken]);
+  }, [diaryId, csrfToken]);
 
   return (
     <Wrapper>
@@ -55,16 +55,12 @@ function DiaryDetail() {
           <ContentArea>
             <Contents>
               {/* html 태그 적용된 일지 내용 보여주는 부분 */}
-              <div
-                dangerouslySetInnerHTML={{ __html: diaryDetail.content }}
-              ></div>
+              <div dangerouslySetInnerHTML={{ __html: diaryDetail.content }}></div>
             </Contents>
           </ContentArea>
         </CenterBox>
 
-        {deleteModal && (
-          <DeleteConfirmModal setDeleteModal={setDeleteModal} goalId={goalId} />
-        )}
+        {deleteModal && <DeleteConfirmModal setDeleteModal={setDeleteModal} goalId={goalId} journalId={diaryId} />}
       </BoxWrapper>
     </Wrapper>
   );

diff --git a/src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx b/src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx
@@ -9,6 +9,8 @@ import ImgUpload from "../../../../asset/Icon/ImgUpload.svg";
 import { Toggle } from "./Toggle";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import updateGoal from "../../../../apis/updateGoal";
+import { fi } from "date-fns/locale";
+import createImg from "../../../../apis/\bcreateImg";
 
 const formatDate = (date) => {
   const year = date.getFullYear();
@@ -32,6 +34,7 @@ function CreateGoalModal({
   setIsUpdate,
   setIsGoalEditedModalOpen,
   expiredData,
+  setExpiredData,
 }) {
   const [isDateSetting, setIsDateSetting] = useState(true);
   const csrfToken = useRecoilValue(tokenState);
@@ -61,19 +64,22 @@ function CreateGoalModal({
       isUpdate && updateData?.thumbnail ? updateData.thumbnail : expiredData?.thumbnail ? expiredData.thumbnail : "",
   });
 
+  const [imageUrl, setImageUrl] = useState("");
+
   const goalId = isUpdate && updateData.goalId ? updateData.goalId : expiredData?.goalId;
   const status = isUpdate && updateData.status ? updateData.status : expiredData?.status;
   const [previewUrl, setPreviewUrl] = useState(
     isUpdate && updateData?.thumbnail ? updateData.thumbnail : expiredData?.thumbnail ? expiredData.thumbnail : null
   );
 
   useEffect(() => {
-    console.log("formData updated:", formData, csrfToken, updateData, isUpdate);
+    console.log("formData updated:", formData, csrfToken, updateData, isUpdate, imageUrl);
   }, [formData]);
 
   const closeCreateGoalModal = () => {
     setIsModalOpen(false);
     setIsUpdate(false);
+    setExpiredData(undefined);
   };
 
   const handleImageUploadClick = () => {
@@ -93,8 +99,11 @@ function CreateGoalModal({
     }
   };
 
-  const handleFileInputChange = (event) => {
+  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();
@@ -140,8 +149,8 @@ function CreateGoalModal({
       formDataToSend.append("startDate", startDate);
       formDataToSend.append("endDate", endDate);
 
-      if (fileInputRef.current.files[0]) {
-        formDataToSend.append("thumbnail", fileInputRef.current.files[0]);
+      if (imageUrl) {
+        formDataToSend.append("thumbnail", imageUrl);
       }
       await createGoal(formDataToSend, csrfToken);
       closeCreateGoalModal();
@@ -175,15 +184,16 @@ function CreateGoalModal({
       );
       formDataToSend.append("status", status);
 
-      if (fileInputRef.current.files[0]) {
-        formDataToSend.append("thumbnail", fileInputRef.current.files[0]);
+      if (imageUrl) {
+        formDataToSend.append("thumbnail", imageUrl);
       }
       await updateGoal(formDataToSend, csrfToken, goalId);
       closeCreateGoalModal();
       setIsGoalEditedModalOpen(true);
     } catch (error) {
       console.error("목표 수정 실패", error);
     }
+    setExpiredData(undefined);
   };
 
   const handleToggleDateSetting = () => {