From 3eef848bcc890413b65560eadaeb50f77398c0ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=82=99=ED=83=80/=EC=86=A1=EC=9E=AC=EC=84=9D?=
 <106071687+Largopie@users.noreply.github.com>
Date: Fri, 25 Oct 2024 00:49:27 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20=EB=8B=AC=EB=A0=A5=20=ED=99=95=EC=A0=95?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20ConfirmModal=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=9B=84?=
 =?UTF-8?q?=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EA=B2=BD=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#426)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 로그인 시, 등록 페이지로 이동하도록 라우팅 경로 수정

* feat: 날짜만 조회 선택 후 확정 페이지 이동 시 ConfirmModal을 띄우도록 추가
---
 .../MeetingConfirmCalendar/Viewer/index.tsx   | 48 +++++++++++++++++--
 frontend/src/stores/servers/user/mutations.ts |  2 +-
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/MeetingConfirmCalendar/Viewer/index.tsx b/frontend/src/components/MeetingConfirmCalendar/Viewer/index.tsx
index 34c8b18f..44a5d01a 100644
--- a/frontend/src/components/MeetingConfirmCalendar/Viewer/index.tsx
+++ b/frontend/src/components/MeetingConfirmCalendar/Viewer/index.tsx
@@ -15,10 +15,14 @@ import {
 import { Button } from '@components/_common/Buttons/Button';
 import TabButton from '@components/_common/Buttons/TabButton';
 import Calendar from '@components/_common/Calendar';
+import MeetingLockConfirmModal from '@components/_common/Modal/MeetingLockConfirmModal';
 import ScreenReaderOnly from '@components/_common/ScreenReaderOnly';
+import Text from '@components/_common/Text';
 
+import useConfirmModal from '@hooks/useConfirmModal/useConfirmModal';
 import useRouter from '@hooks/useRouter/useRouter';
 
+import { useLockMeetingMutation } from '@stores/servers/meeting/mutations';
 import { useGetSchedules } from '@stores/servers/schedule/queries';
 
 import { formatAriaTab } from '@utils/a11y';
@@ -52,6 +56,11 @@ export default function Viewer({
   const { handleToggleIsTimePickerUpdate } = useContext(TimePickerUpdateStateContext);
   const { isLoggedIn, userName } = useContext(AuthContext).state;
 
+  const { isConfirmModalOpen, onToggleConfirmModal } = useConfirmModal();
+  const { mutate: lockMutate } = useLockMeetingMutation();
+
+  const routerToMeetingConfirmPage = () => routeTo(`/meeting/${uuid}/confirm`);
+
   const handleScheduleUpdate = () => {
     if (!isLoggedIn) {
       alert('로그인 해주세요');
@@ -78,6 +87,20 @@ export default function Viewer({
     }
   };
 
+  const handleConfirmPageRoute = () => {
+    if (!isLocked) {
+      onToggleConfirmModal();
+      return;
+    }
+
+    routerToMeetingConfirmPage();
+  };
+
+  const handleMeetingLockWithRoute = () => {
+    lockMutate(uuid);
+    routerToMeetingConfirmPage();
+  };
+
   return (
     meetingSchedules && (
       <>
@@ -139,11 +162,7 @@ export default function Viewer({
         <footer css={s_bottomFixedButtonContainer}>
           <div css={s_fullButtonContainer}>
             {hostName === userName ? (
-              <Button
-                size="full"
-                variant="primary"
-                onClick={() => routeTo(`/meeting/${uuid}/confirm`)}
-              >
+              <Button size="full" variant="primary" onClick={handleConfirmPageRoute}>
                 약속 시간 확정하기
               </Button>
             ) : (
@@ -165,6 +184,25 @@ export default function Viewer({
             <Pen width="28" height="28" />
           </button>
         </footer>
+
+        <MeetingLockConfirmModal
+          isOpen={isConfirmModalOpen}
+          onClose={onToggleConfirmModal}
+          onConfirm={handleMeetingLockWithRoute}
+          onSecondButtonClick={routerToMeetingConfirmPage}
+          title="약속 잠금 결정"
+          size="small"
+          position="center"
+          buttonPosition="column"
+        >
+          <Text variant="default" typo="captionMedium">
+            약속을 확정하기 위해서는 우선
+            <Text.Accent text=" 약속을 잠가야 합니다" />
+          </Text>
+          <Text variant="default" typo="captionMedium">
+            약속을 잠그고 약속 확정 페이지로 이동할까요?
+          </Text>
+        </MeetingLockConfirmModal>
       </>
     )
   );
diff --git a/frontend/src/stores/servers/user/mutations.ts b/frontend/src/stores/servers/user/mutations.ts
index 242e02b1..50556228 100644
--- a/frontend/src/stores/servers/user/mutations.ts
+++ b/frontend/src/stores/servers/user/mutations.ts
@@ -22,7 +22,7 @@ export const usePostLoginMutation = () => {
 
       setIsLoggedIn(true);
       setUserName(userName);
-      routeTo(`/meeting/${uuid}`);
+      routeTo(`/meeting/${uuid}/register`);
     },
   });
 };