Merge pull request #340 from SSAF-SOUND/feature/register-cancel-#339

회원가입 취소 UI 추가
SSAF-SOUND · Nov 5, 2023 · 1c7fada · 1c7fada
2 parents d2936df + 54c3151
commit 1c7fada
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/src/components/Forms/UserRegisterForm/index.tsx b/src/components/Forms/UserRegisterForm/index.tsx
@@ -13,6 +13,7 @@ import { flex, palettes, titleBarHeight } from '~/styles/utils';
 
 export type UserRegisterFormOptions = Partial<{
   titleBarTitle: string;
+  onClickClose?: () => void;
 }>;
 
 export interface UserRegisterFormProps {
@@ -33,7 +34,7 @@ const UserRegisterForm = (props: UserRegisterFormProps) => {
     className,
     options = {},
   } = props;
-  const { titleBarTitle } = options;
+  const { titleBarTitle, onClickClose } = options;
   const methods = useForm({
     defaultValues,
   });
@@ -55,9 +56,9 @@ const UserRegisterForm = (props: UserRegisterFormProps) => {
     <div css={selfCss} className={className}>
       <TitleBar.Default
         title={titleBarTitle}
-        withoutClose
         withoutBackward={currentPhase === 0}
         onClickBackward={popPhase}
+        onClickClose={onClickClose}
       />
 
       <ProgressBar

diff --git a/src/hooks/useSignOutReconfirmModal.ts b/src/hooks/useSignOutReconfirmModal.ts
@@ -7,6 +7,11 @@ interface UseSignOutReconfirmModalOptions {
   onSignOutSuccess: () => void;
 }
 
+interface OpenSignOutReconfirmModalParams {
+  description?: string;
+  actionText?: string;
+}
+
 export const useSignOutReconfirmModal = (
   options: Partial<UseSignOutReconfirmModalOptions> = {}
 ) => {
@@ -26,14 +31,20 @@ export const useSignOutReconfirmModal = (
     }
   };
 
-  const openSignOutReconfirmModal = () => {
+  const openSignOutReconfirmModal = (
+    params: OpenSignOutReconfirmModalParams = {}
+  ) => {
     if (!myInfo) return;
+    const {
+      description = `${myInfo?.nickname}님 로그아웃 하시겠습니까?`,
+      actionText = '로그아웃',
+    } = params;
 
     openModal('alert', {
       title: '알림',
-      description: `${myInfo?.nickname}님 로그아웃 하시겠습니까?`,
+      description,
       cancelText: '취소',
-      actionText: '로그아웃',
+      actionText,
       onClickAction: handleClickAction,
       onClickCancel: closeModal,
     });

diff --git a/src/pages/auth/register/index.tsx b/src/pages/auth/register/index.tsx
@@ -13,7 +13,7 @@ import { Logo } from '~/components/Common/Logo';
 import { PageHeadingText } from '~/components/Common/PageHeadingText';
 import { SsafyIcon } from '~/components/Common/SsafyIcon';
 import { ErrorMessageWithSsafyIcon } from '~/components/ErrorMessageWithSsafyIcon';
-import { Footer } from '~/components/Footer';
+import { useSignOutReconfirmModal } from '~/hooks';
 import { useMyAccountStatus, useUpdateMyInfo } from '~/services/member';
 import { useTermsOfService } from '~/services/meta/hooks/useTermsOfService';
 import {
@@ -41,6 +41,7 @@ const titleBarTitle = metaTitle;
 const RegisterPage: CustomNextPage = () => {
   const router = useRouter();
   const { isRegisterRequired } = useMyAccountStatus();
+  const { openSignOutReconfirmModal } = useSignOutReconfirmModal();
   const { mutateAsync: updateMyInfo } = useUpdateMyInfo();
   const [shouldCheckUserInfo, setShouldCheckUserInfo] = useState(true);
   const {
@@ -71,6 +72,13 @@ const RegisterPage: CustomNextPage = () => {
     }
   };
 
+  const onClickClose = () => {
+    openSignOutReconfirmModal({
+      actionText: '종료',
+      description: '회원가입을 종료합니다.',
+    });
+  };
+
   return (
     <>
       <PageHeadingText text={metaTitle} />
@@ -81,7 +89,7 @@ const RegisterPage: CustomNextPage = () => {
         {isTermsSuccess && (
           <UserRegisterForm
             terms={terms}
-            options={{ titleBarTitle }}
+            options={{ titleBarTitle, onClickClose }}
             onValidSubmit={onValidSubmit}
             css={formCss}
           />