116 lines
5.0 KiB
TypeScript
116 lines
5.0 KiB
TypeScript
import { useState } from 'react';
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { HeaderType } from '@/entities/common/model/types';
|
|
import {
|
|
useSetHeaderTitle,
|
|
useSetHeaderType,
|
|
useSetFooterMode,
|
|
useSetOnBack
|
|
} from '@/widgets/sub-layout/use-sub-layout';
|
|
import { useExtensionAccountHolderSearchRequestMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-reqeust-mutation';
|
|
import { ExtensionAccountHolderSearchRequestParams } from '@/entities/additional-service/model/account-holder-search/types';
|
|
import { useStore } from '@/shared/model/store';
|
|
|
|
export const AccountHolderSearchRequestPage = () => {
|
|
const { navigate } = useNavigate();
|
|
|
|
const userMid = useStore.getState().UserStore.mid
|
|
|
|
useSetHeaderTitle('계좌성명조회_신청');
|
|
useSetHeaderType(HeaderType.LeftArrow);
|
|
useSetFooterMode(false);
|
|
useSetOnBack(() => {
|
|
navigate(PATHS.additionalService.accountHolderSearch.list);
|
|
});
|
|
|
|
const { mutateAsync: accountHolderSearchRequest } = useExtensionAccountHolderSearchRequestMutation();
|
|
|
|
const [formData, setFormData] = useState({
|
|
mid: userMid,
|
|
bankCode: '',
|
|
accountNo: ''
|
|
})
|
|
|
|
const handleInputChange = (field: string, value: string) => {
|
|
setFormData({ ...formData, [field]: value });
|
|
};
|
|
|
|
const onClickToRequest = () => {
|
|
const reuqestParams: ExtensionAccountHolderSearchRequestParams = {
|
|
mid: formData.mid,
|
|
bankCode: formData.bankCode, // 추후 진짜 은행코드 삽입 필요
|
|
accountNo: formData.accountNo
|
|
}
|
|
|
|
console.log("계좌성명 조회 조회신청 요청 파라미터 : ", reuqestParams);
|
|
|
|
accountHolderSearchRequest(reuqestParams)
|
|
.then((response) => {
|
|
console.log("계좌성명 조회 조회 신청 성공 응답: ", response.status)
|
|
navigate(PATHS.additionalService.accountHolderSearch.list);
|
|
})
|
|
.catch((error) => {
|
|
console.error("계좌성명 조회 조회 신청 실패: ", error)
|
|
})
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<main>
|
|
<div className="tab-content">
|
|
<div className="tab-pane sub active">
|
|
<div className="option-list">
|
|
<div className="billing-form gap-16">
|
|
<div className="billing-row">
|
|
<div className="billing-label">가맹점</div>
|
|
<div className="billing-field">
|
|
<select
|
|
className="wid-100"
|
|
value={formData.mid}
|
|
onChange={(e) => handleInputChange('mid', e.target.value)}
|
|
>
|
|
<option>nictest00m</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">은행</div>
|
|
<div className="billing-field">
|
|
<select
|
|
className="wid-100"
|
|
value={formData.bankCode}
|
|
onChange={(e) => handleInputChange('bankCode', e.target.value)}
|
|
>
|
|
<option>우리은행</option>
|
|
<option>카카오뱅크</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="billing-row">
|
|
<div className="billing-label">계좌번호</div>
|
|
<div className="billing-field">
|
|
<input
|
|
type="number"
|
|
placeholder=''
|
|
value={formData.accountNo}
|
|
onChange={(e) => handleInputChange('accountNo', e.target.value)}
|
|
></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="apply-row">
|
|
<button
|
|
className="btn-50 btn-blue flex-1"
|
|
onClick={() => onClickToRequest()}
|
|
>신청</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
)
|
|
} |