From 8a6e1d33464d2dc7eaec82b4d98c1ac79eee9f81 Mon Sep 17 00:00:00 2001
From: JinJeongMin <jdsjm2@naver.com>
Date: Mon, 29 Jan 2024 02:34:44 +0900
Subject: [PATCH] Feat: add journey in detail page

---
 .../Detail/BottomFixedBtn/BottomFixedBtn.tsx  | 72 ++++++++++++++-----
 src/pages/Detail/Detail.tsx                   |  1 +
 src/types/detail.ts                           |  1 +
 3 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx b/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx
index 03fe6779..1d94bc0a 100644
--- a/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx
+++ b/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx
@@ -7,15 +7,26 @@ import {isModalOpenState, modalContentState} from '@/recoil/vote/alertModal';
 import {BottomFixedBtnProps} from '@/types/detail';
 import {Cookies} from 'react-cookie';
 import {useNavigate} from 'react-router-dom';
+import {usePostPlaces} from '@/hooks/Spaces/space';
+import CustomToast from '@/components/CustomToast/CustomToast';
+import {useState} from 'react';
 
-function BottomFixedBtn({onOpen}: BottomFixedBtnProps) {
+function BottomFixedBtn({onOpen, placeId}: BottomFixedBtnProps) {
   const setIsModalOpen = useSetRecoilState(isModalOpenState);
   const setModalContent = useSetRecoilState(modalContentState);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
 
   const cookies = new Cookies();
   const isLogin = cookies.get('isLogin');
   const navigate = useNavigate();
 
+  const showToast = CustomToast();
+
+  const params = new URLSearchParams(location.search);
+
+  const tripId: number = Number(params.get('tripId'));
+  const journeyId: number = Number(params.get('journyId'));
+
   const notLoginContent = {
     title: '로그인이 필요한 기능입니다.',
     subText: '로그인하고 모든 서비스를 이용해 보세요! ',
@@ -33,23 +44,52 @@ function BottomFixedBtn({onOpen}: BottomFixedBtnProps) {
     setModalContent({...notLoginContent});
   };
 
+  const {mutateAsync: addToJourneyMutateAsync} = usePostPlaces();
+
+  const handleAddJourney = async () => {
+    const res = await addToJourneyMutateAsync({spaceId: tripId, journeyId: journeyId, placeIds: [placeId]});
+    console.log('일정추가 res', res);
+    showToast('일정에 추가가 완료되었습니다.', true, '바로가기', () => navigate(`/trip/${tripId}`));
+  };
+
   return (
     <div className={styles.container}>
-      <div
-        className={styles.container__wrapper}
-        style={{
-          backgroundColor: '#2388FF',
-        }}
-        onClick={() => {
-          if (isLogin) {
-            onOpen();
-          } else {
-            showNotLoginModal();
-          }
-        }}
-      >
-        <span>이 장소 후보로 등록하기</span>
-      </div>
+      {tripId && journeyId ? (
+        <button
+          className={styles.container__wrapper}
+          style={{
+            backgroundColor: '#2388FF',
+          }}
+          onClick={() => {
+            if (isLogin) {
+              setIsDisabled(true);
+              handleAddJourney();
+              navigate(`/trip/${tripId}`);
+            } else {
+              showNotLoginModal();
+            }
+          }}
+          disabled={isDisabled}
+        >
+          <span>이 장소 일정에 추가하기</span>
+        </button>
+      ) : (
+        <button
+          className={styles.container__wrapper}
+          style={{
+            backgroundColor: '#2388FF',
+          }}
+          onClick={() => {
+            if (isLogin) {
+              onOpen();
+            } else {
+              showNotLoginModal();
+            }
+          }}
+        >
+          <span>이 장소 후보로 등록하기</span>
+        </button>
+      )}
     </div>
   );
 }
diff --git a/src/pages/Detail/Detail.tsx b/src/pages/Detail/Detail.tsx
index 945c75e7..d9602a0c 100644
--- a/src/pages/Detail/Detail.tsx
+++ b/src/pages/Detail/Detail.tsx
@@ -106,6 +106,7 @@ function Detail() {
             false,
           )
         }
+        placeId={placeInfo.id}
       />
       <BottomSlideDetail
         isOpen={isOpen}
diff --git a/src/types/detail.ts b/src/types/detail.ts
index 5c7b8756..eae0e25f 100644
--- a/src/types/detail.ts
+++ b/src/types/detail.ts
@@ -102,6 +102,7 @@ export interface starsWrapperProps {
 
 export interface BottomFixedBtnProps {
   onOpen: () => void;
+  placeId: number;
 }
 
 export interface RegistrationSlideProps {