From cf82618de1f775fe30afde7f12bcf5dadceb67f0 Mon Sep 17 00:00:00 2001
From: wogha95 <wogha95@naver.com>
Date: Mon, 18 Jul 2022 02:57:27 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20challenge=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ChallengePage.tsx | 42 +++++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/pages/ChallengePage.tsx b/src/pages/ChallengePage.tsx
index d4383e0..d157682 100644
--- a/src/pages/ChallengePage.tsx
+++ b/src/pages/ChallengePage.tsx
@@ -2,7 +2,8 @@ import { useEffect, useState } from "react";
 
 import { fetchDeleteLikeByPostId, fetchPostLikeByPostId } from "@api/like";
 import { fetchPostNotification } from "@api/notification";
-import { fetchPutPost } from "@api/post";
+import { fetchDeletePostByPostId, fetchPutPost } from "@api/post";
+import Icon from "@base/Icon";
 import { Circle, Flex } from "@chakra-ui/react";
 import CertificationButton from "@domain/ChallengePage/CertificationButton";
 import CertificationTable from "@domain/ChallengePage/CertificationTable";
@@ -22,6 +23,8 @@ const ChallengePage = () => {
   const [, setPageTitle] = useAtom(titleAtom);
   const navigate = useNavigate();
   const [isGuest, setIsGuest] = useState(true);
+  const [isWorking, setIsWorking] = useState(true);
+  const [challengeId, setChallengeId] = useState("");
   const [reward, setReward] = useState("");
   const [commentCount, setCommentCount] = useState(0);
   const [cheerUpCount, setCheerUpCount] = useState(0);
@@ -53,6 +56,7 @@ const ChallengePage = () => {
       } = JSON.parse(Content);
 
       setPageTitle(challengeTitle);
+      setChallengeId(contents.data._id);
 
       const calculatedPresentDay = differenceInDays(
         new Date(format(new Date(), "yyyy-MM-dd")),
@@ -79,10 +83,14 @@ const ChallengePage = () => {
   }, [presentDay]);
 
   const validateGuest = (postUserId: string) => {
-    if (myUser && myUser._id === postUserId) setIsGuest(false);
+    if (myUser && myUser._id === postUserId) {
+      setIsGuest(false);
+      setIsWorking(false);
+    }
   };
   const validateDate = (calculatedPresentDay: number) => {
-    if (calculatedPresentDay < 0 || 29 < calculatedPresentDay) setIsGuest(true);
+    if (calculatedPresentDay < 0 || 29 < calculatedPresentDay)
+      setIsWorking(true);
     if (calculatedPresentDay < 0) setPresentDay(0);
     if (29 < calculatedPresentDay) setPresentDay(30);
   };
@@ -115,6 +123,11 @@ const ChallengePage = () => {
     return myUser === null || myUser === undefined ? false : true;
   };
 
+  const challengeDelete = async (_id: string) => {
+    const { data, status } = await fetchDeletePostByPostId(_id);
+    status === 200 ? navigate("/my/profile") : alert("다시 시도바랍니다!");
+  };
+
   const onCheerUpEvent = async () => {
     if (checkUser()) {
       if (isCheered) {
@@ -159,6 +172,13 @@ const ChallengePage = () => {
     const { status } = await fetchPutPost(updatedPost);
     status === 200 ? setDays(updatedDays) : console.log("다시 시도해주세요!");
   };
+
+  const onDeleteChallengeEvent = () => {
+    if (confirm("목표를 포기하시겠습니까?")) {
+      void challengeDelete(challengeId);
+    }
+  };
+
   return (
     <>
       {show && (
@@ -202,10 +222,24 @@ const ChallengePage = () => {
                 ></CheerUpButton>
               </Flex>
             </Flex>
+            {show && !isGuest && (
+              <Circle
+                position="relative"
+                left={256}
+                top={4}
+                padding={1.5}
+                _hover={{ cursor: "pointer" }}
+                bg="#FFFFFF"
+                boxShadow="0px 2px 2px rgba(0, 0, 0, 0.25)"
+                onClick={onDeleteChallengeEvent}
+              >
+                <Icon name="trash-2" size={32} color="#FF5A5A" />
+              </Circle>
+            )}
           </Flex>
         </>
       )}
-      {show && !isGuest && (
+      {show && !isWorking && (
         <Circle
           position="absolute"
           left="50%"