diff --git a/src/components/molecules/AccountSummaryItem.tsx b/src/components/molecules/AccountSummaryItem.tsx index 11f72d6..216b230 100644 --- 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 = ({ - 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 index d807b5c..03dad80 100644 --- a/src/pages/main/MyPage.tsx +++ b/src/pages/main/MyPage.tsx @@ -66,17 +66,16 @@ export const MyPage = () => {
{hanaMoney && ( )} {accounts && accounts.map((item: AccountType) => ( { ? 'icons/moneybox_icon.svg' : 'icons/bankbook.svg' } + link={ + item.type === 'moneybox' + ? '/moneyBox' + : item.type === 'saving100' + ? '/saving100' + : item.type === 'saving' + ? '/roadmap4' + : item.type === 'deposit' + ? '/roadmap5' + : '' + } /> ))}
diff --git a/src/pages/mission3/Savings100Days.tsx b/src/pages/mission3/Savings100Days.tsx index 7bb5d44..f626c03 100644 --- 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 index 3d3b150..0fe971d 100644 --- 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 index 38c04d2..c1baca3 100644 --- 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(false); const [isActive, setIsActive] = useState(false); const [isPwdCheck, setIsPwdCheck] = useState(true); + const [showStepModal, setShowStepModal] = useState(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({ + 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 (
{showModal && isSuccess && ( @@ -153,6 +175,28 @@ export const Termination = () => { )} + {data.type === 'saving100' && showStepModal ? ( + onCloseStepModal()}> +
+

+ 3단계 미션을 실패 + 했습니다! +

+
+
+ ) : ( + data.type === 'savings' && + showStepModal && ( + onCloseStepModal()}> +
+

+ 4단계 미션을 실패 + 했습니다! +

+
+
+ ) + )} {step === 1 ? (
diff --git a/src/pages/mission5/RoadMap5.tsx b/src/pages/mission5/RoadMap5.tsx index c12e72a..3d6c18e 100644 --- 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 index 3507b4f..fd77d4f 100644 --- 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;