Merge pull request #63 from Hana4Team/feat/#56

[Feature/#56] 머니박스 api 연결
Hana4Team · Jun 10, 2024 · 9625399 · 9625399
2 parents 3cc36e2 + 21eddac
commit 9625399
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 21 deletions.
diff --git a/src/apis/apiClient.ts b/src/apis/apiClient.ts
@@ -3,6 +3,7 @@ import { getCookie } from '../utils/cookie';
 import { usersApi } from './interfaces/usersApi';
 import { accountApi } from './interfaces/accountApi';
 import {
+  AccountPwdCheckType,
   AccountReqType,
   AccountType,
   OpenedDepositSavingReqType,
@@ -179,6 +180,15 @@ export class ApiClient
     return response.data;
   }
 
+  async postAccountPasswordCheck(reqData: AccountPwdCheckType) {
+    const response = await this.axiosInstance.request<{ message: string }>({
+      method: 'post',
+      url: '/account/password',
+      data: reqData,
+    });
+    return response.data;
+  }
+
   //---------transaction---------
   async getTransactionHistory(accountId: number, year: number, month: number) {
     const response = await this.axiosInstance.request<TransactionHistoryType>({

diff --git a/src/apis/interfaces/accountApi.ts b/src/apis/interfaces/accountApi.ts
@@ -1,4 +1,5 @@
 import {
+  AccountPwdCheckType,
   AccountReqType,
   AccountType,
   OpenedDepositSavingReqType,
@@ -7,6 +8,9 @@ import {
 
 export interface accountApi {
   getAccount(type: AccountReqType): Promise<AccountType[]>;
+  postAccountPasswordCheck(
+    reqData: AccountPwdCheckType
+  ): Promise<{ message: string }>;
   postOpendMoneyBox(
     password: string,
     productsId: number

diff --git a/src/pages/moneyBox/Sending.tsx b/src/pages/moneyBox/Sending.tsx
@@ -30,7 +30,7 @@ export const Sending = () => {
     receiveAccount: string;
   };
 
-  const { data: accountData, isSuccess: querySuccess } = useQuery({
+  const accountQuery = useQuery({
     queryKey: ['accounts'],
     queryFn: () => {
       const res = ApiClient.getInstance().getAccount({
@@ -42,6 +42,7 @@ export const Sending = () => {
       });
       return res;
     },
+    enabled: false,
   });
 
   const { mutate: sending, isSuccess: mutateSuccess0 } = useMutation({
@@ -82,6 +83,17 @@ export const Sending = () => {
     },
   });
 
+  const { mutate: passwordCheck, data: passwordData } = useMutation({
+    mutationKey: ['passwordCheck'],
+    mutationFn: (password: string) => {
+      const res = ApiClient.getInstance().postAccountPasswordCheck({
+        accountNumber: data.sendAccount,
+        password: password,
+      });
+      return res;
+    },
+  });
+
   useEffect(() => {
     if (mutateSuccess0 || mutateSuccess1) {
       setPage(page + 1);
@@ -146,18 +158,18 @@ export const Sending = () => {
       setIsActive(false);
       setShowModal2(false);
       return;
-    } else if (page === 4 && pwdCheck()) {
+    } else if (page === 4 && passwordData?.message === 'match') {
       if (data.sendAccount === data.receiveAccount) {
         sendingMoneyBox();
       } else {
-        console.log(
-          Number(String(price).replaceAll(',', '')),
-          data.sendAccount,
-          data.receiveAccount
-        );
         sending();
       }
       return;
+    } else if (page === 4 && passwordData?.message === 'mismatch') {
+      setIsPwdCorrect(false);
+      setIsActive(false);
+      setRe(!re);
+      return;
     } else if (page === 5) {
       navigate('/moneyBox'),
         {
@@ -205,35 +217,27 @@ export const Sending = () => {
 
   const checkPwdCondition = () => {
     if (pwdRef.current.map((p) => p?.value).join('').length === 4) {
+      passwordCheck(pwdRef.current.map((p) => p?.value).join(''));
       setIsActive(true);
     } else {
       setIsActive(false);
     }
   };
 
-  const pwdCheck = () => {
-    // 실제 비밀번호와 비교하는 작업 필요
-    if (pwdRef.current.map((p) => p?.value).join('') === '1234') {
-      setIsPwdCorrect(true);
-      return true;
+  useEffect(() => {
+    if (data.sendAccount) {
+      setPage(2);
     } else {
-      setIsPwdCorrect(false);
-      setIsActive(false);
-      setRe(!re);
-      return false;
+      accountQuery.refetch();
     }
-  };
-
-  useEffect(() => {
-    data.sendAccount && setPage(2);
   }, []);
 
   return (
     <>
       {showModal && (
         <ChoiceMenu title='출금계좌선택' onClose={() => showModalHandler()}>
           <div className='flex flex-col'>
-            {accountData?.map((account, idx) => (
+            {accountQuery.data?.map((account, idx) => (
               <AccountDetailItem
                 key={idx}
                 title={account.name}

diff --git a/src/types/account.d.ts b/src/types/account.d.ts
@@ -11,6 +11,10 @@ export type AccountReqType = {
   savingsAccount: boolean;
   moneyboxAccount: boolean;
 };
+export type AccountPwdCheckType = {
+  accountNumber: string;
+  password: string;
+};
 export type OpenedDepositSavingReqType = {
   payment: number;
   endDate: string;