- 계좌성명조회 페이지 수정

2025-10-23 20:28:19 +09:00
parent fdd565a0de
commit 583cb3a2df
7 changed files with 168 additions and 128 deletions
--- a/src/pages/additional-service/account-holder-search/detail-page.tsx
+++ b/src/pages/additional-service/account-holder-search/detail-page.tsx
@@ -9,12 +9,13 @@ import {
    useSetFooterMode,
    useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
-import { useExtensionAccountHolderSearchDetailMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation';
 import { AdditionalServiceCategory, DetailInfo, DetailResponse, TitleInfo } from '@/entities/additional-service/model/types';
 import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
 import { useLocation } from 'react-router';
 import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
-import { ExtensionAccountHolderSearchDetailParams } from '@/entities/additional-service/model/account-holder-search/types';
+import { ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse } from '@/entities/additional-service/model/account-holder-search/types';
+import { useExtensionAccountHolderSearchDetailtMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation';
+import { getAccountHolderStatusText } from '@/entities/additional-service/model/account-holder-search/constant';

 export const AccountHolderSearchDetailPage = () => {
    const { navigate } = useNavigate();
@@ -22,8 +23,7 @@ export const AccountHolderSearchDetailPage = () => {

    const { mid, tid } = location.state || {};

-    const [titleInfo, setTitleInfo] = useState<TitleInfo>();
-    const [detailInfo, setDetailInfo] = useState<DetailInfo>();
+    const [detail, setDetail] = useState<ExtensionAccountHolderSearchDetailResponse>();

    useSetHeaderTitle('계좌성명조회 상세');
    useSetHeaderType(HeaderType.LeftArrow);
@@ -32,19 +32,22 @@ export const AccountHolderSearchDetailPage = () => {
        navigate(PATHS.additionalService.accountHolderSearch.list);
    });

-    const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailMutation();
+    const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailtMutation();

    const callDetail = () => {
        let accountHolderSearchDetailParams: ExtensionAccountHolderSearchDetailParams = {
            mid: mid,
            tid: tid
        }
-        accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: DetailResponse) => {
-            console.log("Detail Info: ", rs)
-            setTitleInfo(rs.titleInfo);
-            setDetailInfo(rs.detailInfo);
+        accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: ExtensionAccountHolderSearchDetailResponse) => {
+            setDetail(rs);
        });
    };
+
+    const getDate = (date?: string) => {
+        return (date) ? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '';
+    };
+
    useEffect(() => {
        callDetail();
    }, []);
@@ -54,17 +57,45 @@ export const AccountHolderSearchDetailPage = () => {
                <div className="tab-content">
                    <div className="tab-pane sub active">
                        <div className="pay-top">
-                            <TitleInfoWrap
-                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
-                                titleInfo={titleInfo}
-                            ></TitleInfoWrap>
+                            <div className="num-amount">
+                                <span className="amount">{detail?.accountNo}</span>
+                            </div>
+                            <span className="num-day">{detail?.bankName}</span>
+                            <div className="num-day">{getDate(detail?.requestDate)}</div>
                        </div>
+                        <div className="detail-divider"></div>
                        <div className="pay-detail">
-                            <div className="detail-divider"></div>
-                            <DetailInfoWrap
-                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
-                                detailInfo={detailInfo}
-                            ></DetailInfoWrap>
+                            <div className="detail-title">상세 정보</div>
+                            <ul className="kv-list">
+                                <li className="kv-row">
+                                    <span className="k">예금주</span>
+                                    <span className="v">{detail?.accountName}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">조회 일시</span>
+                                    <span className="v">{detail?.requestDate}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">결과</span>
+                                    <span className="v">{getAccountHolderStatusText(detail?.resultStatus)}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">실패사유</span>
+                                    <span className="v">{detail?.failReason}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">은행</span>
+                                    <span className="v">{detail?.bankName}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">계좌번호</span>
+                                    <span className="v">{detail?.accountNo}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">요청 구분</span>
+                                    <span className="v">{detail?.requestWay}</span>
+                                </li>
+                            </ul>
                        </div>
                    </div>
                </div>
--- a/src/pages/additional-service/account-holder-search/request-page.tsx
+++ b/src/pages/additional-service/account-holder-search/request-page.tsx
@@ -15,7 +15,8 @@ import { useStore } from '@/shared/model/store';
 export const AccountHolderSearchRequestPage = () => {
    const { navigate } = useNavigate();

-    const userMid = useStore.getState().UserStore.mid
+    const midOptions = useStore.getState().UserStore.selectOptionsMids
+    const bankList = useStore.getState().CommonStore.bankList

    useSetHeaderTitle('계좌성명조회_신청');
    useSetHeaderType(HeaderType.LeftArrow);
@@ -27,7 +28,7 @@ export const AccountHolderSearchRequestPage = () => {
    const { mutateAsync: accountHolderSearchRequest } = useExtensionAccountHolderSearchRequestMutation();

    const [formData, setFormData] = useState({
-        mid: userMid,
+        mid: '',
        bankCode: '',
        accountNo: ''
    })
@@ -39,22 +40,30 @@ export const AccountHolderSearchRequestPage = () => {
    const onClickToRequest = () => {
        const reuqestParams: ExtensionAccountHolderSearchRequestParams = {
            mid: formData.mid,
-            bankCode: formData.bankCode, // 추후 진짜 은행코드 삽입 필요
+            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)
-        })
+            .then((response) => {
+                console.log("계좌성명 조회 조회 신청 성공 응답: ", response.status)
+                navigate(PATHS.additionalService.accountHolderSearch.list);
+            })
+            .catch((error) => {
+                console.error("계좌성명 조회 조회 신청 실패: ", error)
+            })
    };

+    const isFormValid = () => {
+        return (
+            formData.mid.trim() !== '' &&
+            formData.bankCode.trim() !== '' &&
+            formData.accountNo.trim() !== ''
+        )
+    }
+
    return (
        <>
            <main>
@@ -65,12 +74,15 @@ export const AccountHolderSearchRequestPage = () => {
                                <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 value={formData.mid} onChange={(e) => handleInputChange('mid', e.target.value)}>
+                                            {
+                                                midOptions.map((value) => (
+                                                    <option
+                                                        key={value.value}
+                                                        value={value.value}
+                                                    >{value.name}</option>
+                                                ))
+                                            }
                                        </select>
                                    </div>
                                </div>
@@ -78,13 +90,18 @@ export const AccountHolderSearchRequestPage = () => {
                                <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 value={formData.bankCode} onChange={(e) => handleInputChange('bankCode', e.target.value)}>
+                                            <option value="">선택하세요</option>
+                                            {
+                                                bankList
+                                                    .filter((bank) => bank.code1 !== '****')
+                                                    .map((bank) => (
+                                                        <option
+                                                            key={bank.code1}
+                                                            value={bank.code1}
+                                                        >{bank.desc1}</option>
+                                                    ))
+                                            }
                                        </select>
                                    </div>
                                </div>
@@ -93,10 +110,10 @@ export const AccountHolderSearchRequestPage = () => {
                                    <div className="billing-label">계좌번호</div>
                                    <div className="billing-field">
                                        <input
-                                        type="number"
-                                        placeholder=''
-                                        value={formData.accountNo}
-                                        onChange={(e) => handleInputChange('accountNo', e.target.value)}
+                                            type="number"
+                                            placeholder=''
+                                            value={formData.accountNo}
+                                            onChange={(e) => handleInputChange('accountNo', e.target.value)}
                                        ></input>
                                    </div>
                                </div>
@@ -105,6 +122,7 @@ export const AccountHolderSearchRequestPage = () => {
                        <div className="apply-row">
                            <button
                                className="btn-50 btn-blue flex-1"
+                                disabled={!isFormValid()}
                                onClick={() => onClickToRequest()}
                            >신청</button>
                        </div>