Merge pull request #182 from Make-A-Wish-Sopt/feature/175-user/verify…

…Account

To develop

api/user.ts

@@ -1,10 +1,11 @@
+import { BANK_LIST } from '@/constant/bankList';
 import { getAccessToken } from '@/utils/common/token';
 import { client } from './common/axios';
 import { API_VERSION_01, PATH_USER } from './path';
 import { UseFormReturn } from 'react-hook-form';
 
 import { DefaultResponseType, UserAccountDataResponseType } from '@/types/api/response';
-import { WishesDataInputType } from '@/types/wishesType';
+import { AccountInfoType, WishesDataInputType } from '@/types/wishesType';
 
 const ACCESS_TOKEN = getAccessToken();
 
@@ -54,3 +55,24 @@ export const deleteUserInfo = async () => {
 
   return data;
 };
+
+export const postVerifyAccount = async (accountInfo: AccountInfoType) => {
+  const bankCode = BANK_LIST.find((bank) => bank.name === accountInfo.bank)?.bankCode;
+
+  const response = await client.post<DefaultResponseType<number>>(
+    `${API_VERSION_01}${PATH_USER.ACCOUNT_VERIFY}`,
+    {
+      bankCode,
+      accountNumber: accountInfo.account,
+      name: accountInfo.name,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${ACCESS_TOKEN}`,
+      },
+    },
+  );
+
+  return response.data;
+};

components/Common/Modal/BankInput.tsx

@@ -15,6 +15,8 @@ import { StyledBtnBox } from '../Button';
 import { StyledBox } from '../Box';
 import AlertTextBox from '../AlertTextBox';
 import { validation } from '@/validation/input';
+import { usePostVerifyAccount } from '@/hooks/queries/user';
+import { useEffect, useState } from 'react';
 
 interface BankInputProps {
   methods: UseFormReturn<WishesDataInputType, any, undefined>;
@@ -24,6 +26,32 @@ interface BankInputProps {
 export default function BankInput(props: BankInputProps) {
   const { methods } = props;
   const { isOpen, handleToggle } = useModal();
+  const [btnState, setBtnState] = useState(false);
+
+  const { handleVerifyAccount, isSuccess, isReady, isAbused } = usePostVerifyAccount({
+    name: methods.getValues('name'),
+    bank: methods.getValues('bank'),
+    account: methods.getValues('account'),
+  });
+
+  const handleClick = () => {
+    if (!btnState) return;
+    handleVerifyAccount();
+  };
+
+  useEffect(() => {
+    if (
+      methods.watch('name') !== '' &&
+      methods.watch('bank') !== '' &&
+      methods.watch('account') !== '' &&
+      !isSuccess &&
+      !isAbused
+    ) {
+      setBtnState(true);
+    } else {
+      setBtnState(false);
+    }
+  }, [methods.watch(), isSuccess, isAbused]); // isSuccess 추가 안해도 되네? 왜 이러지..
 
   return (
     <Styled.Container>
@@ -32,14 +60,19 @@ export default function BankInput(props: BankInputProps) {
       </Styled.GuideBox>
 
       <Styled.ItemWrapper>
-        <Input placeholder="예금주명" register={methods.register('name')} />
+        <Input
+          placeholder="예금주명"
+          register={methods.register('name')}
+          disabled={isSuccess || isAbused}
+        />
       </Styled.ItemWrapper>
 
       <Styled.ItemWrapper onClick={handleToggle}>
         <Input
           boxType="inputBox--large"
           placeholder="은행 선택"
           register={methods.register('bank')}
+          disabled={isSuccess || isAbused}
         >
           <Image src={ArrowDownIc} alt="더 보기" />
         </Input>
@@ -52,17 +85,27 @@ export default function BankInput(props: BankInputProps) {
             inputType="number"
             placeholder="계좌번호를 입력해주세요"
             register={methods.register('account')}
+            disabled={isSuccess || isAbused}
           />
-          <Styled.AccountAuthButton className="mainBlue_white">
+          <Styled.AccountAuthButton
+            className={!btnState ? 'gray1_white' : 'mainBlue_white'}
+            onClick={handleClick}
+          >
             {'계좌번호 확인'}
           </Styled.AccountAuthButton>
         </Styled.InputWrapper>
         {validation.isIncludeHyphen(methods.watch('account')) && (
           <AlertTextBox>{'(-)없이 숫자만 입력해주세요'}</AlertTextBox>
         )}
-
-        {/* 조건 기능 추가  */}
-        {/* {<AlertTextBox>{true ? '정상 계좌입니다' : '존재하지 않는 계좌번호입니다'}</AlertTextBox>} */}
+        {isReady && (
+          <AlertTextBox alertSuccess={isSuccess}>
+            {isSuccess
+              ? '정상 계좌입니다'
+              : isAbused
+              ? '4회 이상부터는 이용할 수 없습니다'
+              : '존재하지 않는 계좌번호입니다'}
+          </AlertTextBox>
+        )}
       </Styled.ItemWrapper>
 
       {isOpen && (

components/Wishes/WishesForm/BankInfo.tsx

@@ -81,7 +81,7 @@ export default function BankInfo(props: BankInfoProps) {
           <InputContainer title="계좌번호 입력하기">
             <BankInput methods={methods} />
 
-            <InputContainer title="전화번호 입력하기">
+            <InputContainer title="휴대폰번호 입력하기">
               <Input
                 inputType="number"
                 placeholder="(-)없이 숫자만 입력해주세요"

hooks/queries/user.ts

@@ -1,6 +1,6 @@
-import { getUserAccount, putUserAccount } from '@/api/user';
+import { getUserAccount, postVerifyAccount, putUserAccount } from '@/api/user';
 import { QUERY_KEY } from '@/constant/queryKey';
-import { WishesDataInputType } from '@/types/wishesType';
+import { AccountInfoType, WishesDataInputType } from '@/types/wishesType';
 import router from 'next/router';
 import { UseFormReturn } from 'react-hook-form';
 import { useMutation, useQuery } from 'react-query';
@@ -20,3 +20,20 @@ export function useGetUserAccount() {
 
   return { userAccountData };
 }
+
+export function usePostVerifyAccount(accountInfo: AccountInfoType) {
+  const { mutate, data } = useMutation(() => postVerifyAccount(accountInfo));
+
+  /**
+   * 틀린 경우와 맞은 경우 둘 다 200으로 응답이 오고, success 값을 다르게 받음.
+   * (팝빌에서 예외처리 없이 받은 에러는(ex. 503) 200으로 응답이 오지 않지만, success 값은 false로 옴.)
+   * data는 일반적으로 null 이고, success가 false일 때 틀린 횟수를 data에 받아옴.
+   * 이 횟수가 4 이상이면, 잠금 처리.
+   */
+  return {
+    handleVerifyAccount: mutate,
+    isSuccess: data ? data.success : false,
+    isReady: data !== undefined,
+    isAbused: data ? (data.data ? data.data >= 4 : false) : false,
+  };
+}

types/common/box/boxStyleType.ts

@@ -1,4 +1,4 @@
-export type BoxTypes = 'half' | 'large' | 'iamge' | 'custom';
+export type BoxTypes = 'half' | 'large' | 'image' | 'custom';
 export type InputBoxTypes = 'inputBox--half' | 'inputBox--large' | 'inputBox--calendar';
 export type BtnBoxTypes = 'btn--half' | 'btn--large' | 'btn--custom';
 export type ImageBoxTypes = 'imageBox--textarea' | 'imageBox--image';