From d56312a1c3e1ccdbc087abd89f127dc3db6c5a31 Mon Sep 17 00:00:00 2001
From: JiYoon <angella990825@gmail.com>
Date: Fri, 24 Nov 2023 00:08:32 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat(#224):=20=EC=8A=A4=ED=85=8C?=
 =?UTF-8?q?=EB=94=94=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94,=20=EC=B7=A8=EC=86=8C=20api=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20=EC=9E=90=EC=9E=98=ED=95=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[steady_id]/[application_id]/page.tsx     |  2 +-
 src/app/(steady)/steady/detail/[id]/page.tsx  | 45 ++++++++++++-------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx
index 42669360..1469ff67 100644
--- a/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx
+++ b/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx
@@ -63,7 +63,7 @@ const ApplicationEditPage = ({
           variant: "green",
         });
         await applicationRefetch();
-        router.replace("/");
+        router.replace(`/steady/detail/${steadyId}`);
       } catch (error) {
         toast({
           description: "스테디 신청서 수정 실패!",
diff --git a/src/app/(steady)/steady/detail/[id]/page.tsx b/src/app/(steady)/steady/detail/[id]/page.tsx
index 99d85347..b8479505 100644
--- a/src/app/(steady)/steady/detail/[id]/page.tsx
+++ b/src/app/(steady)/steady/detail/[id]/page.tsx
@@ -11,6 +11,7 @@ import useAuthStore from "@/stores/isAuth";
 import { Separator } from "@radix-ui/themes";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
+import deleteApplication from "@/services/application/deleteApplication";
 import getSteadyDetails from "@/services/steady/getSteadyDetails";
 import getSteadyParticipants from "@/services/steady/getSteadyParticipants";
 import likeSteady from "@/services/steady/likeSteady";
@@ -55,6 +56,7 @@ const SteadyDetailPage = ({ params }: { params: PageParams }) => {
   const { toast } = useToast();
   const { isAuth } = useAuthStore();
   const [isClient, setIsClient] = useState(false);
+  const [isLiked, setIsLiked] = useState(steadyDetailsData.isLiked);
 
   useEffect(() => {
     setIsClient(true);
@@ -81,6 +83,23 @@ const SteadyDetailPage = ({ params }: { params: PageParams }) => {
     }
   };
 
+  const handleClickDeleteApplication = async () => {
+    try {
+      await deleteApplication(steadyDetailsData.applicationId.toString());
+      toast({
+        description: "스테디 신청 취소 성공!",
+        variant: "green",
+      });
+    } catch (error) {
+      toast({
+        description: "스테디 신청 취소 실패!",
+        variant: "red",
+      });
+      console.error(error);
+    }
+    steadyDetailsRefetch();
+  };
+
   const matchingData = (
     defineData: { value: string; label: string }[],
     serverData:
@@ -94,6 +113,7 @@ const SteadyDetailPage = ({ params }: { params: PageParams }) => {
 
   const handleClickLike = async () => {
     await likeSteady(steadyId);
+    setIsLiked((prev) => !prev);
   };
 
   return (
@@ -112,8 +132,7 @@ const SteadyDetailPage = ({ params }: { params: PageParams }) => {
             <div className="text-35 font-bold">{steadyDetailsData.name}</div>
           </div>
           <button onClick={handleClickLike}>
-            {/* TODO: 좋아요 API 연결 */}
-            {/* {steadyLikeData?.isLike ? (
+            {isLiked ? (
               <Icon
                 name="heart"
                 size={30}
@@ -125,7 +144,7 @@ const SteadyDetailPage = ({ params }: { params: PageParams }) => {
                 size={30}
                 color="text-black"
               />
-            )} */}
+            )}
           </button>
         </div>
         <div className="flex flex-row items-center justify-between">
@@ -397,14 +416,15 @@ const SteadyDetailPage = ({ params }: { params: PageParams }) => {
             <>
               {steadyDetailsData.applicationId !== null ? (
                 <>
-                  <Link href={`/application/edit/${steadyDetailsData.id}`}>
+                  <Link
+                    href={`/application/edit/${steadyDetailsData.id}/${steadyDetailsData.applicationId}`}
+                  >
                     <Button
                       className={`${buttonSize.sm} bg-st-primary text-14 text-st-white`}
                     >
                       신청서 수정
                     </Button>
                   </Link>
-                  {/* TODO: 신청 취소 API*/}
                   <AlertModal
                     trigger={
                       <Button
@@ -416,12 +436,15 @@ const SteadyDetailPage = ({ params }: { params: PageParams }) => {
                     actionButton={
                       <Button
                         className={`${buttonSize.sm} bg-st-primary text-st-white`}
+                        onClick={handleClickDeleteApplication}
                       >
                         예
                       </Button>
                     }
                   >
-                    정말 취소 하시겠습니까?
+                    <span className="text-center text-18 font-bold">
+                      정말 취소 하시겠습니까?
+                    </span>
                   </AlertModal>
                 </>
               ) : (
@@ -468,16 +491,6 @@ const SteadyDetailPage = ({ params }: { params: PageParams }) => {
             </>
           )}
         </div>
-        {/* 댓글 영역 */}
-        {/* <div className="flex flex-col gap-10">
-          <div className="font-bold text-15">댓글</div>
-          <TextArea className="w-full h-150 rounded-15" />
-          <Button
-            className={`${buttonSize.sm} ml-auto bg-st-primary text-st-white`}
-          >
-            등록
-          </Button>
-        </div> */}
       </div>
     </div>
   );