diff --git a/api/user.ts b/api/user.ts index 2ed20bd3..d27fdf25 100644 --- a/api/user.ts +++ b/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>( + `${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; +}; diff --git a/components/Common/Modal/BankInput.tsx b/components/Common/Modal/BankInput.tsx index d23cb153..6362a624 100644 --- a/components/Common/Modal/BankInput.tsx +++ b/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; @@ -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 ( @@ -32,7 +60,11 @@ export default function BankInput(props: BankInputProps) { - + @@ -40,6 +72,7 @@ export default function BankInput(props: BankInputProps) { boxType="inputBox--large" placeholder="은행 선택" register={methods.register('bank')} + disabled={isSuccess || isAbused} > 더 보기 @@ -52,17 +85,27 @@ export default function BankInput(props: BankInputProps) { inputType="number" placeholder="계좌번호를 입력해주세요" register={methods.register('account')} + disabled={isSuccess || isAbused} /> - + {'계좌번호 확인'} {validation.isIncludeHyphen(methods.watch('account')) && ( {'(-)없이 숫자만 입력해주세요'} )} - - {/* 조건 기능 추가 */} - {/* {{true ? '정상 계좌입니다' : '존재하지 않는 계좌번호입니다'}} */} + {isReady && ( + + {isSuccess + ? '정상 계좌입니다' + : isAbused + ? '4회 이상부터는 이용할 수 없습니다' + : '존재하지 않는 계좌번호입니다'} + + )} {isOpen && ( diff --git a/components/Wishes/WishesForm/BankInfo.tsx b/components/Wishes/WishesForm/BankInfo.tsx index 2da62f65..2d5d85d8 100644 --- a/components/Wishes/WishesForm/BankInfo.tsx +++ b/components/Wishes/WishesForm/BankInfo.tsx @@ -81,7 +81,7 @@ export default function BankInfo(props: BankInfoProps) { - + 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, + }; +} diff --git a/types/common/box/boxStyleType.ts b/types/common/box/boxStyleType.ts index 6747c46b..14a4415d 100644 --- a/types/common/box/boxStyleType.ts +++ b/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';