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

src/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation.ts

@@ -13,39 +13,19 @@ import {
 } from '@tanstack/react-query';
 import { ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse } from '../../model/account-holder-search/types';
 
-export const extensionAccountHolderSearchDetail = async (params: ExtensionAccountHolderSearchDetailParams): Promise<DetailResponse> => {
+export const extensionAccountHolderSearchDetail = (params: ExtensionAccountHolderSearchDetailParams) => {
-    const response = await resultify(
+    return resultify(
-        axios.post<ExtensionAccountHolderSearchDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionAccountHolderSearchDetail(), params),
+        axios.post<ExtensionAccountHolderSearchDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionAccountHolderSearchList(), params),
     );
-
-    // ExtensionAccountHolderSearchDetailResponse를 DetailResponse로 변환
-    const detailResponse: DetailResponse = {
-        titleInfo: {
-            accountNo: response.accountNo,
-            bankName: response.bankName,
-            requestDate: response.requestDate
-        } as TitleInfo,
-        detailInfo: {
-            accountName: response.accountName,
-            requestDate: response.requestDate,
-            resultStatus: response.resultStatus,
-            failureReason: response.failReason,
-            bankName: response.bankName,
-            accountNo: response.accountNo,
-            requestWay: response.requestWay
-        } as DetailInfo
-
-    };
-
-    return detailResponse;
 };
 
-export const useExtensionAccountHolderSearchDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, ExtensionAccountHolderSearchDetailParams>) => {
+export const useExtensionAccountHolderSearchDetailtMutation = (options?: UseMutationOptions<ExtensionAccountHolderSearchDetailResponse, CBDCAxiosError, ExtensionAccountHolderSearchDetailParams>) => {
-    const mutation = useMutation<DetailResponse, CBDCAxiosError, ExtensionAccountHolderSearchDetailParams>({
+    const mutation = useMutation<ExtensionAccountHolderSearchDetailResponse, CBDCAxiosError, ExtensionAccountHolderSearchDetailParams>({
         ...options,
         mutationFn: (params: ExtensionAccountHolderSearchDetailParams) => extensionAccountHolderSearchDetail(params),
     });
+
     return {
         ...mutation,
     };
-}
+};

src/entities/additional-service/model/account-holder-search/constant.ts

@@ -1,9 +1,25 @@
 import { ProcessResult } from "../types";
-import { AccountHolderResultStatus } from "./types";
+import { AccountHolderResultStatus, AccountHolderSearchCl } from "./types";
 
 
 export const resultStatusBtnGroup = [
   { name: '전체', value: AccountHolderResultStatus.ALL },
   { name: '성공', value: AccountHolderResultStatus.SUCCESS },
   { name: '실패', value: AccountHolderResultStatus.FAIL },
-]
+]
+
+export const SearchTypeOption = [
+  { name: '예금주', value: AccountHolderSearchCl.ACCOUNT_NAME },
+  { name: '계좌번호', value: AccountHolderSearchCl.ACCOUNT_NO },
+];
+
+
+export const getAccountHolderStatusText = (status?: string): string => {
+  if (!status) return '';
+
+  const resultStatusMap: Record<string, string> = {
+    'SUCCESS': '성공',
+    'FAIL': '실패'
+  };
+  return resultStatusMap[status] || status;
+}

src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx

@@ -23,7 +23,7 @@ export const AccountHolderAuthList = ({
             date = requestDate;
           }
           if (date !== requestDate) {
-            date = requestDate;
+
             if (list.length > 0) {
               rs.push(
                 <ListDateGroup
@@ -34,6 +34,7 @@ export const AccountHolderAuthList = ({
                 ></ListDateGroup>
               );
             }
+            date = requestDate;
             list = [];
           }
           list.push(items);

src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx

@@ -12,33 +12,35 @@ export const AccountHolderSearchList = ({
     const { navigate } = useNavigate();
 
     const getListDateGroup = () => {
-        let rs: JSX.Element[] = [];
+        let rs = [];
         let date = '';
-        let list: AccountHolderSearchListItem[] = [];
+        let list = [];
         for (let i = 0; i < listItems.length; i++) {
-            // requestDate format: "20211018140420" (YYYYMMDDHHmmss)
+            let items = listItems[i];
-            let requestDate = listItems[i]?.requestDate || '';
+            if (!!items) {
-            let itemDate = requestDate.substring(0, 8);
+                let requestDate = items?.requestDate;
-            if (i === 0) {
+                requestDate = requestDate?.substring(0, 8);
-                date = itemDate;
+                if (!!requestDate) {
-            }
+                    if (i === 0) {
-            if (date !== itemDate) {
+                        date = requestDate;
-                // 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
+                    }
-                if (list.length > 0) {
+                    if (date !== requestDate) {
-                    rs.push(
+                        if (list.length > 0) {
-                        <ListDateGroup
+                            rs.push(
-                            additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
+                                <ListDateGroup
-                            mid={mid}
+                                    additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
-                            key={date + '-' + i}
+                                    key={date + '-' + i}
-                            date={date}
+                                    date={date}
-                            items={list as any}
+                                    items={list}
-                        ></ListDateGroup>
+                                ></ListDateGroup>
-                    );
+                            );
+                        }
+                        date = requestDate;
+                        list = [];
+                    }
+                    list.push(items);
                 }
-                date = itemDate;  // 그 다음에 날짜 업데이트
-                list = [];
             }
-            list.push(listItems[i] as any);
         }
         if (list.length > 0) {
             rs.push(
@@ -47,13 +49,14 @@ export const AccountHolderSearchList = ({
                     mid={mid}
                     key={date + '-last'}
                     date={date}
-                    items={list as any}
+                    items={list}
                 ></ListDateGroup>
             );
         }
         return rs;
     };
 
+
     const onClickToNavigate = () => {
         navigate(PATHS.additionalService.accountHolderSearch.request)
     };

src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx

@@ -13,6 +13,7 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
 import { AccountHolderSearchFilterProps, AccountHolderSearchCl, AccountHolderResultStatus } from '@/entities/additional-service/model/account-holder-search/types';
+import { resultStatusBtnGroup, SearchTypeOption } from '@/entities/additional-service/model/account-holder-search/constant';
 
 export const AccountHolderSearchFilter = ({
 	filterOn,
@@ -42,6 +43,10 @@ export const AccountHolderSearchFilter = ({
 	const [filterResultStatus, setFilterResultStatus] = useState<AccountHolderResultStatus>(resultStatus);
 
 	const midOptions = useStore.getState().UserStore.selectOptionsMids;
+	const bankList = useStore.getState().CommonStore.bankList;
+	const bankOptions = bankList
+		.filter((bank) => bank.code1 !== '****')
+		.map((bank) => ({ name: bank.desc1, value: bank.code1 }));
 
 	const onClickToClose = () => {
 		setFilterOn(false);
@@ -61,22 +66,8 @@ export const AccountHolderSearchFilter = ({
 		setResultStatus(filterResultStatus);
 		onClickToClose();
 	};
-	
-	let bankOptions = [
-		{ name: '우리은행', value: '우리은행' },
-		{ name: '토스뱅킹', value: '토스뱅킹' }
-	];
 
-	let searchTypeOption = [
-		{ name: '예금주', value: AccountHolderSearchCl.ACCOUNT_NAME },
-		{ name: '계좌번호', value: AccountHolderSearchCl.ACCOUNT_NO },
-	];
 
-	let processResultBtnGroup = [
-		{ name: '전체', value: ProcessResult.ALL },
-		{ name: '성공', value: ProcessResult.SUCCESS },
-		{ name: '실패', value: ProcessResult.FAIL },
-	];
 
 	return (
 		<>
@@ -84,17 +75,17 @@ export const AccountHolderSearchFilter = ({
 				className="full-menu-modal"
 				initial="hidden"
 				animate={(filterOn) ? 'visible' : 'hidden'}
-				variants={ FilterMotionVariants }
+				variants={FilterMotionVariants}
-				transition={ FilterMotionDuration }
+				transition={FilterMotionDuration}
-				style={ FilterMotionStyle }
+				style={FilterMotionStyle}
 			>
 				<div className="full-menu-container">
 					<div className="full-menu-header">
 						<div className="full-menu-title center">필터</div>
 						<div className="full-menu-actions">
 							<button
-									id="closeFullMenu"
+								id="closeFullMenu"
-									className="full-menu-close"
+								className="full-menu-close"
 							>
 								<img
 									src={IMAGE_ROOT + '/ico_close.svg'}
@@ -108,18 +99,18 @@ export const AccountHolderSearchFilter = ({
 					<div className="option-list pt-16">
 						<FilterSelect
 							title='가맹점'
-							selectValue={mid}
+							selectValue={filterMid}
-							selectSetter={setMid}
+							selectSetter={setFilterMid}
 							selectOptions={midOptions}
 						></FilterSelect>
 
 						<FilterSelectInput
 							title='예금주/계좌번호'
-							selectValue={searchType}
+							selectValue={filterSearchType}
-							selectSetter={setSearchType}
+							selectSetter={setFilterSearchType}
-							selectOptions={searchTypeOption}
+							selectOptions={SearchTypeOption}
-							inputValue={searchKeyword}
+							inputValue={filterSearchKeyword}
-							inputSetter={setSearchKeyword}
+							inputSetter={setFilterSearchKeyword}
 						></FilterSelectInput>
 						<FilterCalendar
 							startDate={filterStartDate}
@@ -130,15 +121,15 @@ export const AccountHolderSearchFilter = ({
 
 						<FilterSelect
 							title='은행'
-							selectValue={bank}
+							selectValue={filterBank}
-							selectSetter={setBank}
+							selectSetter={setFilterBank}
 							selectOptions={bankOptions}
 						></FilterSelect>
 
 						<FilterButtonGroups
 							title='조회결과'
 							activeValue={filterResultStatus}
-							btnGroups={processResultBtnGroup}
+							btnGroups={resultStatusBtnGroup}
 							setter={setFilterResultStatus}
 						></FilterButtonGroups>
 					</div>

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 [detail, setDetail] = useState<ExtensionAccountHolderSearchDetailResponse>();
-    const [detailInfo, setDetailInfo] = useState<DetailInfo>();
 
     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) => {
+        accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: ExtensionAccountHolderSearchDetailResponse) => {
-            console.log("Detail Info: ", rs)
+            setDetail(rs);
-            setTitleInfo(rs.titleInfo);
-            setDetailInfo(rs.detailInfo);
         });
     };
+
+    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
+                            <div className="num-amount">
-                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
+                                <span className="amount">{detail?.accountNo}</span>
-                                titleInfo={titleInfo}
+                            </div>
-                            ></TitleInfoWrap>
+                            <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>
+                            <div className="detail-title">상세 정보</div>
-                            <DetailInfoWrap
+                            <ul className="kv-list">
-                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
+                                <li className="kv-row">
-                                detailInfo={detailInfo}
+                                    <span className="k">예금주</span>
-                            ></DetailInfoWrap>
+                                    <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>

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) => {
+            .then((response) => {
-            console.log("계좌성명 조회 조회 신청 성공 응답: ", response.status)
+                console.log("계좌성명 조회 조회 신청 성공 응답: ", response.status)
-            navigate(PATHS.additionalService.accountHolderSearch.list);
+                navigate(PATHS.additionalService.accountHolderSearch.list);
-        })
+            })
-        .catch((error) => {
+            .catch((error) => {
-            console.error("계좌성명 조회 조회 신청 실패: ", 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
+                                        <select value={formData.mid} onChange={(e) => handleInputChange('mid', e.target.value)}>
-                                            className="wid-100"
+                                            {
-                                            value={formData.mid}
+                                                midOptions.map((value) => (
-                                            onChange={(e) => handleInputChange('mid', e.target.value)}
+                                                    <option
-                                        >
+                                                        key={value.value}
-                                            <option>nictest00m</option>
+                                                        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
+                                        <select value={formData.bankCode} onChange={(e) => handleInputChange('bankCode', e.target.value)}>
-                                            className="wid-100"
+                                            <option value="">선택하세요</option>
-                                            value={formData.bankCode}
+                                            {
-                                            onChange={(e) => handleInputChange('bankCode', e.target.value)}
+                                                bankList
-                                        >
+                                                    .filter((bank) => bank.code1 !== '****')
-                                            <option>우리은행</option>
+                                                    .map((bank) => (
-                                            <option>카카오뱅크</option>
+                                                        <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"
+                                            type="number"
-                                        placeholder=''
+                                            placeholder=''
-                                        value={formData.accountNo}
+                                            value={formData.accountNo}
-                                        onChange={(e) => handleInputChange('accountNo', e.target.value)}
+                                            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>