fix: 실패시 모달, 마이페이지 라우팅 수정

Hana4Team · Jun 11, 2024 · 5ec5ca1 · 5ec5ca1
1 parent 83badd3
commit 5ec5ca1
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 11 deletions.
diff --git a/src/components/molecules/AccountSummaryItem.tsx b/src/components/molecules/AccountSummaryItem.tsx
@@ -2,29 +2,24 @@ import { FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 interface IProps {
-  accountId: number;
   title: string;
   totalMoney: number;
   icons: string;
+  link: string;
 }
 
 export const AccountSummaryItem: FC<IProps> = ({
-  accountId,
   title,
   totalMoney,
   icons,
+  link,
 }: IProps) => {
   const navigate = useNavigate();
 
   const movePageHandler = () => {
     if (title === '머니박스 통장') navigate('/moneyBox');
     else if (title === '하나머니') return;
-    else
-      navigate('/account', {
-        state: {
-          accountId: accountId,
-        },
-      });
+    else navigate(link);
   };
 
   return (

diff --git a/src/pages/main/MyPage.tsx b/src/pages/main/MyPage.tsx
@@ -66,24 +66,34 @@ export const MyPage = () => {
       <div className='flex flex-col items-center gap-7'>
         {hanaMoney && (
           <AccountSummaryItem
-            accountId={1}
             title='하나머니'
             totalMoney={hanaMoney.points}
             icons='icons/piggybank.svg'
+            link={''}
           />
         )}
         {accounts &&
           accounts.map((item: AccountType) => (
             <AccountSummaryItem
               key={item.accountId}
-              accountId={item.accountId}
               title={item.name}
               totalMoney={item.balance}
               icons={
                 item.name == '머니박스 통장'
                   ? 'icons/moneybox_icon.svg'
                   : 'icons/bankbook.svg'
               }
+              link={
+                item.type === 'moneybox'
+                  ? '/moneyBox'
+                  : item.type === 'saving100'
+                    ? '/saving100'
+                    : item.type === 'saving'
+                      ? '/roadmap4'
+                      : item.type === 'deposit'
+                        ? '/roadmap5'
+                        : ''
+              }
             />
           ))}
       </div>

diff --git a/src/pages/mission3/Savings100Days.tsx b/src/pages/mission3/Savings100Days.tsx
@@ -96,6 +96,7 @@ export const Savings100Days = () => {
     isSuccess &&
       navigate('/termination', {
         state: {
+          type: 'saving100',
           accountId: saving100.accountId,
           accountName: saving100.productName,
           sendAccount: saving100.accountNumber,

diff --git a/src/pages/mission4/RoadMap4.tsx b/src/pages/mission4/RoadMap4.tsx
@@ -97,6 +97,7 @@ export const RoadMap4 = () => {
     isSuccess &&
       navigate('/termination', {
         state: {
+          type: 'savings',
           accountId: roadmap.accountId,
           accountName: roadmap.productName,
           sendAccount: roadmap.accountNumber,

diff --git a/src/pages/mission4/Termination.tsx b/src/pages/mission4/Termination.tsx
@@ -11,8 +11,10 @@ import { differenceInDays } from 'date-fns';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 import { AccountDelType, AccountPwdCheckType } from '../../types/account';
+import { AlertModal } from '../../components/AlertModal';
 
 interface RequestType {
+  type: string;
   accountId: number;
   accountName: string;
   sendAccount: string;
@@ -33,6 +35,7 @@ export const Termination = () => {
   const [showModal, setShowModal] = useState<boolean>(false);
   const [isActive, setIsActive] = useState<boolean>(false);
   const [isPwdCheck, setIsPwdCheck] = useState<boolean>(true);
+  const [showStepModal, setShowStepModal] = useState<boolean>(false);
 
   const { mutate: postAccountPasswordCheck } = useMutation({
     mutationFn: (reqData: AccountPwdCheckType) => {
@@ -70,6 +73,7 @@ export const Termination = () => {
   });
 
   const locationState = location.state as {
+    type: string;
     accountId: number;
     accountName: string;
     sendAccount: string;
@@ -80,6 +84,7 @@ export const Termination = () => {
   };
 
   const [data, setDate] = useState<RequestType>({
+    type: locationState.type,
     accountId: locationState.accountId,
     accountName: locationState.accountName,
     sendAccount: locationState.sendAccount,
@@ -111,7 +116,15 @@ export const Termination = () => {
         depositAccountId: data.sendAccountId,
       });
     } else if (step === 3) {
-      navigate('/mission');
+      if (data.terminationType === '중도해지') {
+        if (data.type === 'deposit') {
+          navigate('/mission');
+        } else {
+          setShowStepModal(true);
+        }
+      } else if (data.terminationType === '만기해지') {
+        navigate('/mission');
+      }
     }
   };
   const clickAccount = (
@@ -135,6 +148,15 @@ export const Termination = () => {
     else setIsActive(false);
   };
 
+  const onCloseStepModal = async () => {
+    try {
+      setShowStepModal(false);
+      navigate('/mission');
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   return (
     <div className='bg-white h-screen flex flex-col items-center'>
       {showModal && isSuccess && (
@@ -153,6 +175,28 @@ export const Termination = () => {
         </ChoiceMenu>
       )}
       <Topbar title='예적금 해지' />
+      {data.type === 'saving100' && showStepModal ? (
+        <AlertModal onClose={() => onCloseStepModal()}>
+          <div className='flex flex-col font-hanaMedium text-2xl text-center'>
+            <p>
+              3단계 미션을 <span className='text-hanaRed'>실패</span>
+              했습니다!
+            </p>
+          </div>
+        </AlertModal>
+      ) : (
+        data.type === 'savings' &&
+        showStepModal && (
+          <AlertModal onClose={() => onCloseStepModal()}>
+            <div className='flex flex-col font-hanaMedium text-2xl text-center'>
+              <p>
+                4단계 미션을 <span className='text-hanaRed'>실패</span>
+                했습니다!
+              </p>
+            </div>
+          </AlertModal>
+        )
+      )}
 
       {step === 1 ? (
         <div className='flex flex-col justify-between items-center w-full h-full p-10'>

diff --git a/src/pages/mission5/RoadMap5.tsx b/src/pages/mission5/RoadMap5.tsx
@@ -87,6 +87,7 @@ export const RoadMap5 = () => {
     isSuccess &&
       navigate('/termination', {
         state: {
+          type: 'deposit',
           accountId: roadmap.accountId,
           accountName: roadmap.productName,
           sendAccount: roadmap.accountNumber,

diff --git a/src/types/account.d.ts b/src/types/account.d.ts
@@ -9,6 +9,7 @@ export type AccountType = {
   name: string;
   balance: number;
   accountNumber: string;
+  type: string;
 };
 export type AccountReqType = {
   depositWithdrawalAccount: boolean;