부가서비스

- 계좌성명조회 - 조회신청 API 연결

src/pages/additional-service/account-holder-search/request-page.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { IMAGE_ROOT } from '@/shared/constants/common';
 import { HeaderType } from '@/entities/common/model/types';
 import {
     useSetHeaderTitle,
@@ -9,11 +8,12 @@ import {
     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/types';
 
 export const AccountHolderSearchRequestPage = () => {
     const { navigate } = useNavigate();
 
-
     useSetHeaderTitle('계좌성명조회_신청');
     useSetHeaderType(HeaderType.LeftArrow);
     useSetFooterMode(false);
@@ -21,25 +21,35 @@ export const AccountHolderSearchRequestPage = () => {
         navigate(PATHS.additionalService.accountHolderSearch.list);
     });
 
+    const { mutateAsync: accountHolderSearchRequest } = useExtensionAccountHolderSearchRequestMutation();
+
     const [formData, setFormData] = useState({
         mid: 'nictest001m',
-        bank: '',
-        accountNum: ''
+        bankCode: '',
+        accountNo: ''
     })
 
     const handleInputChange = (field: string, value: string) => {
-        setFormData(prev => ({
-            ...prev,
-            [field]: value
-        }));
+        setFormData({ ...formData, [field]: value });
     };
 
-    useSetOnBack(() => {
-        navigate(PATHS.additionalService.accountHolderSearch.list);
-    });
-
     const onClickToRequest = () => {
-        navigate(PATHS.additionalService.accountHolderSearch.list)
+        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 (
@@ -67,8 +77,8 @@ export const AccountHolderSearchRequestPage = () => {
                                     <div className="billing-field">
                                         <select
                                             className="wid-100"
-                                            value={formData.bank}
-                                            onChange={(e) => handleInputChange('bank', e.target.value)}
+                                            value={formData.bankCode}
+                                            onChange={(e) => handleInputChange('bankCode', e.target.value)}
                                         >
                                             <option>우리은행</option>
                                             <option>카카오뱅크</option>
@@ -80,9 +90,11 @@ export const AccountHolderSearchRequestPage = () => {
                                     <div className="billing-label">계좌번호</div>
                                     <div className="billing-field">
                                         <input
-                                            type="number"
-                                            value="10002464******"
-                                        />
+                                        type="number"
+                                        placeholder=''
+                                        value={formData.accountNo}
+                                        onChange={(e) => handleInputChange('accountNo', e.target.value)}
+                                        ></input>
                                     </div>
                                 </div>
                             </div>
@@ -90,7 +102,7 @@ export const AccountHolderSearchRequestPage = () => {
                         <div className="apply-row">
                             <button
                                 className="btn-50 btn-blue flex-1"
-                                onClick={() => onClickToRequest() }
+                                onClick={() => onClickToRequest()}
                             >신청</button>
                         </div>
                     </div>