diff --git a/src/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation.ts b/src/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation.ts index 5cde56e..34fc066 100644 --- a/src/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation.ts +++ b/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 => { - const response = await resultify( - axios.post(API_URL_ADDITIONAL_SERVICE.extensionAccountHolderSearchDetail(), params), +export const extensionAccountHolderSearchDetail = (params: ExtensionAccountHolderSearchDetailParams) => { + return resultify( + axios.post(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) => { - const mutation = useMutation({ +export const useExtensionAccountHolderSearchDetailtMutation = (options?: UseMutationOptions) => { + const mutation = useMutation({ ...options, mutationFn: (params: ExtensionAccountHolderSearchDetailParams) => extensionAccountHolderSearchDetail(params), }); + return { ...mutation, }; -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/entities/additional-service/model/account-holder-search/constant.ts b/src/entities/additional-service/model/account-holder-search/constant.ts index c9aaf31..2e4c67f 100644 --- a/src/entities/additional-service/model/account-holder-search/constant.ts +++ b/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 }, -] \ No newline at end of file +] + +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 = { + 'SUCCESS': '성공', + 'FAIL': '실패' + }; + return resultStatusMap[status] || status; +} \ No newline at end of file diff --git a/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx b/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx index 9ceac02..7166e99 100644 --- a/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx +++ b/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( ); } + date = requestDate; list = []; } list.push(items); diff --git a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx b/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx index 504cfd9..c57da14 100644 --- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx +++ b/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 requestDate = listItems[i]?.requestDate || ''; - let itemDate = requestDate.substring(0, 8); - if (i === 0) { - date = itemDate; - } - if (date !== itemDate) { - // 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!) - if (list.length > 0) { - rs.push( - - ); + let items = listItems[i]; + if (!!items) { + let requestDate = items?.requestDate; + requestDate = requestDate?.substring(0, 8); + if (!!requestDate) { + if (i === 0) { + date = requestDate; + } + if (date !== requestDate) { + if (list.length > 0) { + rs.push( + + ); + } + 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} > ); } return rs; }; + const onClickToNavigate = () => { navigate(PATHS.additionalService.accountHolderSearch.request) }; diff --git a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx b/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx index d189883..d8a5d91 100644 --- a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx +++ b/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(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 } - transition={ FilterMotionDuration } - style={ FilterMotionStyle } + variants={FilterMotionVariants} + transition={FilterMotionDuration} + style={FilterMotionStyle} >
필터
diff --git a/src/pages/additional-service/account-holder-search/detail-page.tsx b/src/pages/additional-service/account-holder-search/detail-page.tsx index 9cb0b9d..e4aef18 100644 --- 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(); - const [detailInfo, setDetailInfo] = useState(); + const [detail, setDetail] = useState(); 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 = () => {
- +
+ {detail?.accountNo} +
+ {detail?.bankName} +
{getDate(detail?.requestDate)}
+
-
- +
상세 정보
+
    +
  • + 예금주 + {detail?.accountName} +
    • +
  • + 조회 일시 + {detail?.requestDate} +
    • +
  • + 결과 + {getAccountHolderStatusText(detail?.resultStatus)} +
    • +
  • + 실패사유 + {detail?.failReason} +
    • +
  • + 은행 + {detail?.bankName} +
    • +
  • + 계좌번호 + {detail?.accountNo} +
    • +
  • + 요청 구분 + {detail?.requestWay} +
    • +
diff --git a/src/pages/additional-service/account-holder-search/request-page.tsx b/src/pages/additional-service/account-holder-search/request-page.tsx index 885b8b8..fb4e658 100644 --- 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 ( <>
@@ -65,12 +74,15 @@ export const AccountHolderSearchRequestPage = () => {
가맹점
- handleInputChange('mid', e.target.value)}> + { + midOptions.map((value) => ( + + )) + }
@@ -78,13 +90,18 @@ export const AccountHolderSearchRequestPage = () => {
은행
- handleInputChange('bankCode', e.target.value)}> + + { + bankList + .filter((bank) => bank.code1 !== '****') + .map((bank) => ( + + )) + }
@@ -93,10 +110,10 @@ export const AccountHolderSearchRequestPage = () => {
계좌번호
handleInputChange('accountNo', e.target.value)} + type="number" + placeholder='' + value={formData.accountNo} + onChange={(e) => handleInputChange('accountNo', e.target.value)} >
@@ -105,6 +122,7 @@ export const AccountHolderSearchRequestPage = () => {