- 부가서비스 각 요청 페이지 : SnackBar 추가, 양식 수정

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

@@ -11,6 +11,8 @@ import {
 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';
+import { NumericFormat } from 'react-number-format';
+import { snackBar } from '@/shared/lib';
 
 export const AccountHolderSearchRequestPage = () => {
     const { navigate } = useNavigate();
@@ -48,11 +50,21 @@ export const AccountHolderSearchRequestPage = () => {
 
         accountHolderSearchRequest(reuqestParams)
             .then((response) => {
-                console.log("계좌성명 조회 조회 신청 성공 응답: ", response.status)
-                navigate(PATHS.additionalService.accountHolderSearch.list);
+                if (response.status) {
+                    console.log("계좌성명 조회 조회 신청 성공 응답: ", response.status)
+                    snackBar("계좌성명 조회 신청을 성공하였습니다.")
+                    navigate(PATHS.additionalService.accountHolderSearch.list);
+                } else {
+                    const errorMessage = response.error?.message || '계좌성명 조회 신청이 실패하였습니다.';
+                    snackBar(`[실패] ${errorMessage}`);
+                }
             })
             .catch((error) => {
                 console.error("계좌성명 조회 조회 신청 실패: ", error)
+                const errorMessage = error?.response?.data?.error?.message ||
+                                    error?.message ||
+                                    '계좌성명 조회 신청 중 오류가 발생했습니다.';
+                snackBar(`[실패] ${errorMessage}`);
             })
     };
 
@@ -109,12 +121,19 @@ export const AccountHolderSearchRequestPage = () => {
                                 <div className="billing-row">
                                     <div className="billing-label">계좌번호</div>
                                     <div className="billing-field">
-                                        <input
-                                            type="number"
-                                            placeholder=''
+                                        <NumericFormat
                                             value={formData.accountNo}
-                                            onChange={(e) => handleInputChange('accountNo', e.target.value)}
-                                        ></input>
+                                            valueIsNumericString
+                                            allowNegative={false}
+                                            decimalScale={0}
+                                            isAllowed={(values) => {
+                                                const { value } = values;
+                                                return !value || value.length <= 14;
+                                            }}
+                                            onValueChange={(values) => {
+                                                setFormData({ ...formData, accountNo: values.value });
+                                            }}
+                                        />
                                     </div>
                                 </div>
                             </div>