From cf7203342f13c856ceb2276e703847d9ad78c269 Mon Sep 17 00:00:00 2001 From: JongHyun Date: Tue, 6 Aug 2024 15:59:39 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9CAPI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "src/apis/\bcreateImg.jsx" | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 "src/apis/\bcreateImg.jsx" diff --git "a/src/apis/\bcreateImg.jsx" "b/src/apis/\bcreateImg.jsx" new file mode 100644 index 0000000..66fc47e --- /dev/null +++ "b/src/apis/\bcreateImg.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; From 0155b2898bd55e100b2a0d1d23d93aacbaa77283 Mon Sep 17 00:00:00 2001 From: JongHyun Date: Tue, 6 Aug 2024 16:20:23 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=9D=BC=EC=A7=80=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/deleteDiary.jsx | 22 +++++++++++++++++++ .../components/DeleteConfirmModal.jsx | 18 ++++++++++----- .../components/DiaryDetail.jsx | 10 +++------ 3 files changed, 38 insertions(+), 12 deletions(-) create mode 100644 src/apis/deleteDiary.jsx diff --git a/src/apis/deleteDiary.jsx b/src/apis/deleteDiary.jsx new file mode 100644 index 0000000..48f14fd --- /dev/null +++ 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 index 9904a06..dafd703 100644 --- 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 (
diff --git a/src/diaryDetailPage/components/DiaryDetail.jsx b/src/diaryDetailPage/components/DiaryDetail.jsx index 3351957..a52a534 100644 --- a/src/diaryDetailPage/components/DiaryDetail.jsx +++ b/src/diaryDetailPage/components/DiaryDetail.jsx @@ -31,7 +31,7 @@ function DiaryDetail() { } }; fetchGoalList(); - }, [goalId, csrfToken]); + }, [diaryId, csrfToken]); return ( @@ -55,16 +55,12 @@ function DiaryDetail() { {/* html 태그 적용된 일지 내용 보여주는 부분 */} -
+
- {deleteModal && ( - - )} + {deleteModal && } ); From 4e145971a59b069f0cb3b37a696de3ba2b1bffa3 Mon Sep 17 00:00:00 2001 From: JongHyun Date: Tue, 6 Aug 2024 16:20:49 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix=20:=20=EB=AA=A9=ED=91=9C=EC=83=9D?= =?UTF-8?q?=EC=84=B1=EB=AA=A8=EB=8B=AC=20=EB=B2=84=EA=B7=B8=20=ED=94=BD?= =?UTF-8?q?=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../goals/CreateGoalModal/CreateGoalModal.jsx | 22 +- src/homepage/component/goals/Goals.jsx | 199 +++++++----------- 2 files changed, 95 insertions(+), 126 deletions(-) diff --git a/src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx b/src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx index 07438e7..ef07297 100644 --- 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,6 +64,8 @@ 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( @@ -68,12 +73,13 @@ function CreateGoalModal({ ); 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,8 +184,8 @@ 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(); @@ -184,6 +193,7 @@ function CreateGoalModal({ } catch (error) { console.error("목표 수정 실패", error); } + setExpiredData(undefined); }; const handleToggleDateSetting = () => { diff --git a/src/homepage/component/goals/Goals.jsx b/src/homepage/component/goals/Goals.jsx index 7e6e49e..0932d8f 100644 --- a/src/homepage/component/goals/Goals.jsx +++ b/src/homepage/component/goals/Goals.jsx @@ -77,6 +77,7 @@ function Goals() { }, [csrfToken, navigate, setCsrfToken]); const openCreateGoalsModal = () => { + setExpiredData(undefined); setIsModalOpen(true); }; @@ -132,105 +133,83 @@ function Goals() { - + 목표 추가하기 - {!isLoading && - filteredGoals.length === 0 && - currentTab !== "완료한 도전" && ( - - -
-
첫 걸음을 내딛는 순간
-
성장이 시작됩니다!
-
-
-
하고 싶은 일을 적어볼까요?
{" "} -
- 작은 목표부터 큰 목표까지 모두 좋아요! -
-
- - )} - {!isLoading && - filteredGoals.length === 0 && - currentTab === "완료한 도전" && ( - - -
-
작은 목표부터 시작해서
-
하나씩 채워나가봐요!
-
-
-
곧 이곳이 당신의 성취로
{" "} -
가득 찰 거예요!
-
- - )} + {!isLoading && filteredGoals.length === 0 && currentTab !== "완료한 도전" && ( + + +
+
첫 걸음을 내딛는 순간
+
성장이 시작됩니다!
+
+
+
하고 싶은 일을 적어볼까요?
{" "} +
작은 목표부터 큰 목표까지 모두 좋아요!
+
+ + )} + {!isLoading && filteredGoals.length === 0 && currentTab === "완료한 도전" && ( + + +
+
작은 목표부터 시작해서
+
하나씩 채워나가봐요!
+
+
+
곧 이곳이 당신의 성취로
가득 찰 거예요!
+
+ + )} {filteredGoals.map((goal) => { - const randomIndex = Math.floor( - Math.random() * backgroundArr.length - ); + const randomIndex = Math.floor(Math.random() * backgroundArr.length); const backgroundImg = backgroundArr[randomIndex]; const daysLeft = getDaysLeft(goal.endDate); const expired = isExpired(goal.endDate); - const randomStampIndex = Math.floor( - Math.random() * complete_stamps.length - ); + const randomStampIndex = Math.floor(Math.random() * complete_stamps.length); const completeStamps = complete_stamps[randomStampIndex]; return ( @@ -287,9 +266,7 @@ function Goals() { }} /> ) : ( - + )} - {daysLeft !== null && - daysLeft <= 5 && - daysLeft > 0 && - goal?.status === "OPEN" && ( - - D-{daysLeft} - - )} + {daysLeft !== null && daysLeft <= 5 && daysLeft > 0 && goal?.status === "OPEN" && ( + + D-{daysLeft} + + )} {expired && goal?.status === "OPEN" && ( 기한이 지났어요! )} - {daysLeft === null || daysLeft > 5 - ? !expired &&
- : null} + {daysLeft === null || daysLeft > 5 ? !expired &&
: null} - - {goal.title} - + {goal.title} {goal.streak >= 3 && ( @@ -335,9 +305,7 @@ function Goals() { {(goal.startDate || goal.endDate) && ( - {goal.startDate && ( - {goal.startDate} - )} + {goal.startDate && {goal.startDate}} {goal.startDate && goal.endDate && → } {goal.endDate && {goal.endDate}} @@ -359,6 +327,7 @@ function Goals() { setIsUpdate={setIsUpdate} setIsGoalEditedModalOpen={setIsGoalEditedModalOpen} expiredData={expiredData} + setExpiredData={setExpiredData} /> )} {isGoalCreatedModalOpen && ( @@ -368,12 +337,7 @@ function Goals() { updateData={updateData} /> )} - {isDeleteModalOpen && ( - - )} + {isDeleteModalOpen && } {isGoalEditedModalOpen && } {isConfirmModalOpen && ( )} - {isCompModalOpen && ( - - )} + {isCompModalOpen && } ); }