diff --git a/src/entities/account/ui/user-account-auth-wrap.tsx b/src/entities/account/ui/user-account-auth-wrap.tsx index ab037a2..4d22192 100644 --- a/src/entities/account/ui/user-account-auth-wrap.tsx +++ b/src/entities/account/ui/user-account-auth-wrap.tsx @@ -111,7 +111,7 @@ export const UserAccountAuthWrap = ({ ] return ( <> -
+
계정 상태
@@ -144,7 +144,7 @@ export const UserAccountAuthWrap = ({ menuGrants={ permissions } > -
+
-
diff --git a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx index 8380ebb..f4c0c61 100644 --- a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx +++ b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx @@ -1,7 +1,7 @@ import moment from 'moment'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; -import { HeaderType } from '@/entities/common/model/types'; +import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { useEffect, useState } from 'react'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; @@ -19,21 +19,24 @@ import { AccountHolderAuthList } from '@/entities/additional-service/ui/account- import { useExtensionAccountHolderAuthDownloadExcelMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-download-excel-mutation'; import { AccountHolderAuthFilter } from '@/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter'; import { useStore } from '@/shared/model/store'; -import { AccountHolderAuthListItem, AuthAndTransferStatus } from '@/entities/additional-service/model/account-holder-auth/types'; +import { AccountHolderAuthListItem, AuthAndTransferStatus, ExtensionAccountHolderAuthContentItem, ExtensionAccountHolderAuthDownloadExcelParams, ExtensionAccountHolderAuthDownloadExcelResponse } from '@/entities/additional-service/model/account-holder-auth/types'; +import { AdditionalServiceCategory } from '@/entities/additional-service/model/types'; +import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; export const AccountHolderAuthPage = () => { const { navigate } = useNavigate(); + const userMid = useStore.getState().UserStore.mid; const [sortType, setSortType] = useState(SortTypeKeys.LATEST); - const [listItems, setListItems] = useState({}); + const [listItems, setListItems] = useState>([]); const [filterOn, setFilterOn] = useState(false); - const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [mid, setMid] = useState(userMid); - const [fromDate, setFromDate] = useState(moment().format('YYYY-MM-DD')); - const [toDate, setToDate] = useState(moment().format('YYYY-MM-DD')); + const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD')); + const [toDate, setToDate] = useState(moment().format('YYYYMMDD')); const [authStatus, setAuthStatus] = useState(AuthAndTransferStatus.ALL) - + const [emailBottomSheetOn, setEmailBottomSheetOn] = useState(false); useSetHeaderTitle('계좌점유인증'); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); @@ -43,12 +46,11 @@ export const AccountHolderAuthPage = () => { const { mutateAsync: accountHolderAuthList } = useExtensionAccountHolderAuthListMutation(); const { mutateAsync: downloadExcel } = useExtensionAccountHolderAuthDownloadExcelMutation(); + const callList = (option?: { sortType?: SortTypeKeys, - val?: string + status?: AuthAndTransferStatus }) => { - pageParam.sortType = (option?.sortType)? option.sortType: sortType; - setPageParam(pageParam); let listParams = { mid: mid, fromDate: fromDate, @@ -57,28 +59,14 @@ export const AccountHolderAuthPage = () => { page: pageParam }; - accountHolderAuthList(listParams).then((rs) => { - setListItems(assembleData(rs.content)); - }); - } - - const assembleData = (content: Array) => { - console.log('rs.content:', content) - let data: any = {}; - if (content && content.length > 0) { - for (let i = 0; i < content?.length; i++) { - let requestDate = content[i]?.requestDate?.substring(0, 8); - let groupDate = moment(requestDate).format('YYYYMMDD'); - if(!!groupDate && !data.hasOwnProperty(groupDate)){ - data[groupDate] = []; - } - if(!!groupDate && data.hasOwnProperty(groupDate)){ - data[groupDate].push(content[i]); - } - } + if (listParams.page) { + listParams.page.sortType = option?.sortType || sortType; + setPageParam(listParams.page); } - console.log('Data : ', data); - return data; + + accountHolderAuthList(listParams).then((rs) => { + setListItems(rs.content); + }); }; const onClickToDownloadExcel = () => { @@ -100,19 +88,46 @@ export const AccountHolderAuthPage = () => { setSortType(sort); callList({ sortType: sort - }) + }); }; - const onClickToAuthStatus = (val: AuthAndTransferStatus) => { setAuthStatus(val); - callList({ val: val }); + callList({ + status: val + }); + }; + + + const onClickToOpenEmailBottomSheet = () => { + setEmailBottomSheetOn(true); + }; + + const onSendRequest = (selectedEmail?: string) => { + if (selectedEmail) { + const params: ExtensionAccountHolderAuthDownloadExcelParams = { // 추후 수정필요 + mid: mid, + //email: selectedEmail, + fromDate: fromDate, + toDate: toDate, + authStatus: authStatus + }; + downloadExcel(params).then((rs: ExtensionAccountHolderAuthDownloadExcelResponse) => { + console.log('Excel Download Status:', rs.status); + }); + } + setEmailBottomSheetOn(false); }; useEffect(() => { callList(); - }, []); - + }, [ + mid, + fromDate, + toDate, + authStatus + ]); + return ( <>
@@ -152,8 +167,8 @@ export const AccountHolderAuthPage = () => {
@@ -170,6 +185,7 @@ export const AccountHolderAuthPage = () => {
@@ -189,6 +205,14 @@ export const AccountHolderAuthPage = () => { setAuthStatus={setAuthStatus} > + + ); }; \ No newline at end of file diff --git a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx index d184ada..872ff99 100644 --- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx +++ b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx @@ -21,37 +21,16 @@ import { AccountHolderSearchList } from '@/entities/additional-service/ui/accoun import { useStore } from '@/shared/model/store'; import { AccountHolderSearchListItem, AccountHolderSearchType } from '@/entities/additional-service/model/account-holder-search/types'; import { resultStatusBtnGroup } from '@/entities/additional-service/model/account-holder-search/constant'; -import useIntersectionObserver from '@/widgets/intersection-observer'; +import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; export const AccountHolderSearchPage = () => { const { navigate } = useNavigate(); - const [onActionIntersect, setOnActionIntersect] = useState(false); - const onIntersect: IntersectionObserverCallback = (entries: Array) => { - entries.forEach((entry: IntersectionObserverEntry) => { - if (entry.isIntersecting) { - console.log('Element is now intersecting with the root. [' + onActionIntersect + ']'); - if (onActionIntersect) { - callList(); - } - } - else { - console.log('Element is no longer intersecting with the root.'); - } - }); - }; - - const { setTarget } = useIntersectionObserver({ - threshold: 1, - onIntersect - }); - const userMid = useStore.getState().UserStore.mid; const [sortType, setSortType] = useState(SortTypeKeys.LATEST); const [listItems, setListItems] = useState>([]); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); - const [nextCursor, setNextCursor] = useState(null); const [filterOn, setFilterOn] = useState(false); const [mid, setMid] = useState(userMid); const [searchType, setSearchType] = useState(AccountHolderSearchType.ACCOUNT_NAME) @@ -60,6 +39,8 @@ export const AccountHolderSearchPage = () => { const [endDate, setEndDate] = useState(moment().format('YYYYMMDD')); const [bank, setBank] = useState(''); const [processResult, setProcessResult] = useState(ProcessResult.ALL); + const [emailBottomSheetOn, setEmailBottomSheetOn] = useState(false); + const [email, setEmail] = useState(''); useSetHeaderTitle('계좌성명조회'); useSetHeaderType(HeaderType.LeftArrow); @@ -73,17 +54,8 @@ export const AccountHolderSearchPage = () => { const callList = (option?: { sortType?: SortTypeKeys, - processResult?: ProcessResult, - resetPage?: boolean + processResult?: ProcessResult }) => { - setOnActionIntersect(false); - - const currentPageParam = option?.resetPage - ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType } - : { ...pageParam, sortType: option?.sortType ?? sortType }; - - setPageParam(currentPageParam); - let listParams = { mid: mid, searchCl: searchType, @@ -92,27 +64,16 @@ export const AccountHolderSearchPage = () => { toDate: endDate, bankCode: bank, resultStatus: option?.processResult ?? processResult, - ... { - page: currentPageParam - } + page: pageParam + } + + if (listParams.page) { + listParams.page.sortType = option?.sortType || sortType; + setPageParam(listParams.page); } accountHolderSearchList(listParams).then((rs) => { - setListItems(option?.resetPage ? rs.content : [ - ...listItems, - ...rs.content - ]); - if (rs.hasNext) { - setNextCursor(rs.nextCursor); - setPageParam({ - ...currentPageParam, - cursor: rs.nextCursor - }); - setOnActionIntersect(true) - } - else { - setNextCursor(null); - } + setListItems(rs.content); }); } @@ -120,6 +81,30 @@ export const AccountHolderSearchPage = () => { setFilterOn(!filterOn); }; + const onClickToOpenEmailBottomSheet = () => { + setEmailBottomSheetOn(true); + }; + + const onSendRequest = (selectedEmail?: string) => { + if (selectedEmail) { + + // 이메일을 설정한 후 다운로드 실행 + downloadExcel({ + mid: mid, + //email: selectedEmail, + searchCl: searchType, + searchValue: searchKeyword, + fromDate: startDate, + toDate: endDate, + bankCode: bank, + resultStatus: processResult + }).then((rs) => { + console.log('Excel Download Status: ' + rs.status); + }); + } + setEmailBottomSheetOn(false); + }; + const onClickToDownloadExcel = () => { downloadExcel({ mid: mid, @@ -137,22 +122,19 @@ export const AccountHolderSearchPage = () => { const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); callList({ - sortType: sort, - resetPage: true + sortType: sort }); }; const onClickToTransactionStatus = (val: ProcessResult) => { setProcessResult(val); callList({ - processResult: val, - resetPage: true + processResult: val }); }; useEffect(() => { - // 필터 조건이 변경되면 첫 페이지부터 다시 시작 - callList({ resetPage: true }); + callList(); }, [ mid, searchType, @@ -190,11 +172,11 @@ export const AccountHolderSearchPage = () => {
@@ -222,7 +204,6 @@ export const AccountHolderSearchPage = () => {
@@ -245,6 +226,14 @@ export const AccountHolderSearchPage = () => { setBank={setBank} setProcessResult={setProcessResult} > + + ); }; \ No newline at end of file diff --git a/src/pages/additional-service/alimtalk/list-page.tsx b/src/pages/additional-service/alimtalk/list-page.tsx index c199dad..d7855ef 100644 --- a/src/pages/additional-service/alimtalk/list-page.tsx +++ b/src/pages/additional-service/alimtalk/list-page.tsx @@ -3,9 +3,9 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { - useSetHeaderTitle, - useSetHeaderType, - useSetFooterMode, + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; import { JSX, useEffect, useState } from 'react'; @@ -19,7 +19,8 @@ import { ExtensionAlimtalkDownloadExcelParams, ExtensionAlimtalkDownloadExcelResponse, ExtensionAlimtalkListParams, - ExtensionAlimtalkListResponse + ExtensionAlimtalkListResponse, + ServiceCode } from '@/entities/additional-service/model/alimtalk/types'; import moment from 'moment'; import { useExtensionAlimtalkListMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-list-mutation'; @@ -27,47 +28,29 @@ import { useExtensionAlimtalkDownloadExcelMutation } from '@/entities/additional import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group'; import { AdditionalServiceCategory } from '@/entities/additional-service/model/types'; import { useStore } from '@/shared/model/store'; -import useIntersectionObserver from '@/widgets/intersection-observer'; +import { snackBar } from '@/shared/lib'; +import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; +import { AlimtalkFilter } from '@/entities/additional-service/ui/filter/alimtalk-filter'; export const AlimtalkListPage = () => { const { navigate } = useNavigate(); const userMid = useStore.getState().UserStore.mid; - const [onActionIntersect, setOnActionIntersect] = useState(false); - const onIntersect: IntersectionObserverCallback = (entries: Array) => { - entries.forEach((entry: IntersectionObserverEntry) => { - if (entry.isIntersecting) { - console.log('Element is now intersecting with the root. [' + onActionIntersect + ']'); - if (onActionIntersect) { - callList(); - } - } - else { - console.log('Element is no longer intersecting with the root.'); - } - }); - }; - - const { setTarget } = useIntersectionObserver({ - threshold: 1, - onIntersect - }); - const [sortType, setSortType] = useState(SortTypeKeys.LATEST); const [listItems, setListItems] = useState>([]); const [filterOn, setFilterOn] = useState(false); - const [nextCursor, setNextCursor] = useState(null); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [mid, setMid] = useState(userMid); const [searchCl, setSearchCl] = useState(AlimtalkSearchCl.BUYER_NAME); - const [searchValue, setSearchValue] = useState(); - const [paymentMethod, setPaymentMethod] = useState(); + const [searchValue, setSearchValue] = useState(''); + const [serviceCode, setServiceCode] = useState(ServiceCode.CARD); const [alimCl, setAlimCl] = useState(AlimtalkAlimCl.DEPOSIT_REQUEST); const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD')); const [toDate, setToDate] = useState(moment().format('YYYYMMDD')); const [sendType, setSendType] = useState(AlimtalkSendType.ALL); const [sendCl, setSendCl] = useState(AlimTalkSendCl.ALL); + const [emailBottomSheetOn, setEmailBottomSheetOn] = useState(false); const { mutateAsync: extensionAlimtalkList } = useExtensionAlimtalkListMutation(); const { mutateAsync: extensionAlimtalkDownloadExcel } = useExtensionAlimtalkDownloadExcelMutation(); @@ -79,101 +62,97 @@ export const AlimtalkListPage = () => { }); const callList = (option?: { - sortType?: SortTypeKeys, - resetPage?: boolean - }) => { - setOnActionIntersect(false); - - const currentPageParam = option?.resetPage - ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType } - : { ...pageParam, sortType: option?.sortType ?? sortType }; - - setPageParam(currentPageParam); - + sortType?: SortTypeKeys + }) => { let params: ExtensionAlimtalkListParams = { mid: mid, searchCl: searchCl, searchValue: searchValue, - serviceCode: paymentMethod, - fromDate: fromDate, - toDate: toDate, - sendType: sendType, - sendCl: sendCl, - page: currentPageParam - }; - extensionAlimtalkList(params).then((rs: ExtensionAlimtalkListResponse) => { - setListItems(option?.resetPage ? rs.content : [ - ...listItems, - ...rs.content - ]); - if (rs.hasNext) { - setNextCursor(rs.nextCursor); - setPageParam({ - ...currentPageParam, - cursor: rs.nextCursor - }); - setOnActionIntersect(true); - } - else { - setNextCursor(null); - } - }); - }; - - const callDownloadExcel = () => { - let params: ExtensionAlimtalkDownloadExcelParams = { - mid: mid, - searchCl: searchCl, - searchValue: searchValue, - paymentMethod: paymentMethod, + serviceCode: serviceCode, alimCl: alimCl, fromDate: fromDate, toDate: toDate, sendType: sendType, - sendCl: sendCl + sendCl: sendCl, + page: pageParam }; - extensionAlimtalkDownloadExcel(params).then((rs: ExtensionAlimtalkDownloadExcelResponse) => { + if (params.page) { + params.page.sortType = option?.sortType || sortType; + setPageParam(params.page); + } + + extensionAlimtalkList(params).then((rs: ExtensionAlimtalkListResponse) => { + setListItems(rs.content); }); }; + + const onClickToOpenEmailBottomSheet = () => { + setEmailBottomSheetOn(true); + } + + const onSendRequest = (selectedEmail?: string) => { + if (selectedEmail) { + const params: ExtensionAlimtalkDownloadExcelParams = { + mid: mid, + searchCl: searchCl, + searchValue: searchValue, + serviceCode: serviceCode, + alimCl: alimCl, + fromDate: fromDate, + toDate: toDate, + sendType: sendType, + sendCl: sendCl, + //email: selectedEmail + }; + extensionAlimtalkDownloadExcel(params).then((rs: ExtensionAlimtalkDownloadExcelResponse) => { + console.log('Excel Download Status:', rs.status); + }); + }; + setEmailBottomSheetOn(false); + }; + const onClickToNavigate = () => { navigate(PATHS.additionalService.alimtalk.setting); }; - const onClickToDownloadExcel = () => { - callDownloadExcel(); - }; + + const onClickToOpenFilter = () => { setFilterOn(!filterOn); }; const getAlimtalkList = () => { - let rs: JSX.Element[] = []; + let rs = []; let date = ''; - let list: AlimtalkListContent[] = []; + let list = []; for (let i = 0; i < listItems.length; i++) { - // sendDate format: "20211018140420" (YYYYMMDDHHmmss) - let sendDate = listItems[i]?.sendDate || ''; - let itemDate = sendDate.substring(0, 8); - if (i === 0) { - date = itemDate; - } - if (date !== itemDate) { - // 날짜가 바뀌면 이전 리스트를 푸시 - if (list.length > 0) { - rs.push( - - ); + let item = listItems[i]; + if (!!item) { + // sendDate format: "20211018140420" (YYYYMMDDHHmmss) + let sendDate = item?.sendDate || ''; + let itemDate = sendDate.substring(0, 8); + if (!!itemDate) { + if (i === 0) { + date = itemDate; + } + if (date !== itemDate) { + date = itemDate; + if (list.length > 0) { + rs.push( + + ); + } + list = []; + } + list.push(item); } - date = itemDate; - list = []; } - list.push(listItems[i] as any); } if (list.length > 0) { rs.push( @@ -188,15 +167,15 @@ export const AlimtalkListPage = () => { } return rs; } - + useEffect(() => { - // 필터 조건이 변경되면 첫 페이지부터 다시 시작 - callList({ resetPage: true }); + callList(); }, [ mid, searchCl, searchValue, - paymentMethod, + serviceCode, + alimCl, fromDate, toDate, sendType, @@ -211,49 +190,78 @@ export const AlimtalkListPage = () => {
- -
-
- +
- { getAlimtalkList() } -
+ {getAlimtalkList()}
-
+ + + ); }; \ No newline at end of file diff --git a/src/pages/additional-service/ars/list-page.tsx b/src/pages/additional-service/ars/list-page.tsx index 36adde8..d90381b 100644 --- a/src/pages/additional-service/ars/list-page.tsx +++ b/src/pages/additional-service/ars/list-page.tsx @@ -3,9 +3,9 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types'; import { - useSetHeaderTitle, - useSetHeaderType, - useSetFooterMode, + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; import { JSX, useEffect, useState } from 'react'; @@ -20,37 +20,15 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box'; import { ArsPaymentStatusBtnGroup } from '@/entities/additional-service/model/ars/constant'; import { ArsFilter } from '@/entities/additional-service/ui/filter/ars-filter'; import { useStore } from '@/shared/model/store'; -import useIntersectionObserver from '@/widgets/intersection-observer'; export const ArsListPage = () => { const { navigate } = useNavigate(); - const [onActionIntersect, setOnActionIntersect] = useState(false); - const onIntersect: IntersectionObserverCallback = (entries: Array) => { - entries.forEach((entry: IntersectionObserverEntry) => { - if (entry.isIntersecting) { - console.log('Element is now intersecting with the root. [' + onActionIntersect + ']'); - if (onActionIntersect) { - callList(); - } - } - else { - console.log('Element is no longer intersecting with the root.'); - } - }); - }; - - const { setTarget } = useIntersectionObserver({ - threshold: 1, - onIntersect - }); - const userMid = useStore.getState().UserStore.mid; const [sortType, setSortType] = useState(SortTypeKeys.LATEST); const [listItems, setListItems] = useState>([]); const [filterOn, setFilterOn] = useState(false); - const [nextCursor, setNextCursor] = useState(null); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [mid, setMid] = useState(userMid); const [moid, setMoid] = useState(''); @@ -63,7 +41,7 @@ export const ArsListPage = () => { const { mutateAsync: extensionArsList } = useExtensionArsListMutation(); const { mutateAsync: extensionArsDownloadExcel } = useExtensionArsDownloadExcelMutation(); - + useSetHeaderTitle('신용카드 ARS 결제'); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); @@ -73,17 +51,8 @@ export const ArsListPage = () => { const callList = (option?: { sortType?: SortTypeKeys, - paymentStatus?: PaymentStatus, - resetPage?: boolean + paymentStatus?: PaymentStatus }) => { - setOnActionIntersect(false); - - const currentPageParam = option?.resetPage - ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType } - : { ...pageParam, sortType: option?.sortType ?? sortType }; - - setPageParam(currentPageParam); - let params: ExtensionArsListParams = { mid: mid, moid: moid, @@ -93,25 +62,16 @@ export const ArsListPage = () => { orderStatus: orderStatus, minAmount: minAmount, maxAmount: maxAmount, - page: currentPageParam + page: pageParam }; + + if (params.page) { + params.page.sortType = option?.sortType || sortType; + setPageParam(params.page); + } + extensionArsList(params).then((rs: ExtensionArsListResponse) => { - // resetPage면 기존 리스트 무시, 아니면 추가 - setListItems(option?.resetPage ? rs.content : [ - ...listItems, - ...rs.content - ]); - if (rs.hasNext) { - setNextCursor(rs.nextCursor); - setPageParam({ - ...currentPageParam, - cursor: rs.nextCursor - }); - setOnActionIntersect(true) - } - else { - setNextCursor(null); - } + setListItems(rs.content); }); }; @@ -146,21 +106,21 @@ export const ArsListPage = () => { const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); callList({ - sortType: sort, - resetPage: true + sortType: sort }); }; const onClickToPaymentStatus = (val: PaymentStatus) => { setPaymentStatus(val); callList({ - paymentStatus: val, - resetPage: true + paymentStatus: val }); }; useEffect(() => { - // 필터 조건이 변경되면 첫 페이지부터 다시 시작 - callList({ resetPage: true }); + callList(); + }, []); + useEffect(() => { + callList(); }, [ mid, moid, @@ -173,33 +133,36 @@ export const ArsListPage = () => { ]); const getListDateGroup = () => { - let rs: JSX.Element[] = []; + let rs = []; let date = ''; - let list: ArsListContent[] = []; + let list = []; for (let i = 0; i < listItems.length; i++) { - // paymentDate format: "20211018140420" (YYYYMMDDHHmmss) - let paymentDate = listItems[i]?.paymentDate || ''; - let itemDate = paymentDate.substring(0, 8); - if (i === 0) { - date = itemDate; - } - if (date !== itemDate) { - // 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!) - if (list.length > 0) { - rs.push( - - ); + let item = listItems[i]; + if (!!item) { + let paymentDate = item?.paymentDate || ''; + let itemDate = paymentDate.substring(0, 8); + if (!!itemDate) { + if (i === 0) { + date = itemDate; + } + if (date !== itemDate) { + date = itemDate; + if (list.length > 0) { + rs.push( + + ); + } + list = []; + } + list.push(item); } - date = itemDate; // 그 다음에 날짜 업데이트 - list = []; } - list.push(listItems[i] as any); } if (list.length > 0) { rs.push( @@ -223,30 +186,30 @@ export const ArsListPage = () => {
- -
- @@ -255,56 +218,55 @@ export const ArsListPage = () => {
{ ArsPaymentStatusBtnGroup.map((value, index) => ( - onClickToPaymentStatus(value.value) } - >{ value.name } + onClickToPaymentStatus(value.value)} + >{value.name} )) }
- +
- { getListDateGroup() } -
+ {getListDateGroup()}
); diff --git a/src/pages/additional-service/fund-account/result-detail-page.tsx b/src/pages/additional-service/fund-account/result-detail-page.tsx index fc53148..20eb1b9 100644 --- a/src/pages/additional-service/fund-account/result-detail-page.tsx +++ b/src/pages/additional-service/fund-account/result-detail-page.tsx @@ -11,11 +11,14 @@ import { useLocation } from 'react-router'; import { useEffect, useState } from 'react'; import { NumericFormat } from 'react-number-format'; import { + ExtensionFundAccountDownloadReceiptParams, + ExtensionFundAccountDownloadReceiptResponse, ExtensionFundAccountResultDetailParams, ExtensionFundAccountResultDetailResponse, } from '@/entities/additional-service/model/fund-account/types'; import moment from 'moment'; import { useExtensionFundAccountResultDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-result-detail-mutation'; +import { useExtensionFundAccountDownloadReceiptMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-download-certificate-mutation'; export const FundAccountResultDetailPage = () => { const { navigate } = useNavigate(); @@ -25,8 +28,10 @@ export const FundAccountResultDetailPage = () => { const mid = location.state.mid; const [detail, setDetail] = useState(); + const [email, setEmail] = useState(''); const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation(); + const { mutateAsync: extensionFundAccountDownlaodReceipt } = useExtensionFundAccountDownloadReceiptMutation(); const callDetail = () => { let params: ExtensionFundAccountResultDetailParams = { @@ -39,6 +44,17 @@ export const FundAccountResultDetailPage = () => { }); }; + const onClickToDownload = () => { + let params: ExtensionFundAccountDownloadReceiptParams = { + mid: mid, + tid: tid, + email: email + }; + extensionFundAccountDownlaodReceipt(params).then((rs: ExtensionFundAccountDownloadReceiptResponse) => { + console.log(rs); + }); + }; + useSetHeaderTitle('자금이체 상세'); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); @@ -72,7 +88,11 @@ export const FundAccountResultDetailPage = () => { {/* ✅ resultMessage가 "정상"일 때만 표시 */} {detail?.resultMessage === '정상' && (
- @@ -104,7 +124,7 @@ export const FundAccountResultDetailPage = () => {
  • 은행 - {detail?.bankCode} + {detail?.bankName}
  • 계좌번호 diff --git a/src/pages/additional-service/fund-account/transfer-detail-page.tsx b/src/pages/additional-service/fund-account/transfer-detail-page.tsx index dd66d53..ea1546c 100644 --- a/src/pages/additional-service/fund-account/transfer-detail-page.tsx +++ b/src/pages/additional-service/fund-account/transfer-detail-page.tsx @@ -11,27 +11,25 @@ import { useLocation } from 'react-router'; import { useEffect, useState } from 'react'; import { NumericFormat } from 'react-number-format'; import { useExtensionFundAccountTransferDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-detail-mutation'; -import { ExtensionFundAccountTransferDetailParams, ExtensionFundAccountTransferDetailResponse, ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse, FundAccountStatus } from '@/entities/additional-service/model/fund-account/types'; +import { ExtensionFundAccountTransferDetailParams, ExtensionFundAccountTransferDetailResponse, ExtensionFundAccountTransferRegistParams, ExtensionFundAccountTransferRequestResponse, FundAccountStatus } from '@/entities/additional-service/model/fund-account/types'; import { getFundAccountStatusName } from '@/entities/additional-service/model/fund-account/constant'; import moment from 'moment'; -import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation'; +import { useExtensionFundAccountTransferRegistMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-regist-mutation'; export const FundAccountTransferDetailPage = () => { const { navigate } = useNavigate(); const location = useLocation(); - const tid = location.state.tid; - const mid = location.state.mid; + const seq = location.state.seq; const [detail, setDetail] = useState(); const { mutateAsync: extensionFundAccountTransferDetail } = useExtensionFundAccountTransferDetailMutation(); - const { mutateAsync: extensionFundAccountTransferRequest } = useExtensionFundAccountTransferRequestMutation(); + const { mutateAsync: extensionFundAccountTransferRequest } = useExtensionFundAccountTransferRegistMutation(); const callDetail = () => { let params: ExtensionFundAccountTransferDetailParams = { - tid: tid, - mid: mid, + seq: seq }; extensionFundAccountTransferDetail(params).then((rs: ExtensionFundAccountTransferDetailResponse) => { @@ -50,26 +48,26 @@ export const FundAccountTransferDetailPage = () => { callDetail(); }, []); - const onClickToRequest = () => { - if (!detail) { - alert('상세 정보를 불러오는 중입니다.'); - return; - } + // const onClickToRequest = () => { + // if (!detail) { + // alert('상세 정보를 불러오는 중입니다.'); + // return; + // } - let params: ExtensionFundAccountTransferRequestParams = { - mid: mid, - bankCode: detail.bankCode || '', - accountNo: detail.accountNo || '', - accountName: detail.accountName || '', - amount: detail.amount || 0, - moid: detail.moid || '' - }; - extensionFundAccountTransferRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => { - console.log(rs) - alert(rs.status ? '이체 요청이 완료되었습니다.' : '이체 요청에 실패했습니다.'); - navigate(PATHS.additionalService.fundAccount.transferList); - }); - }; + // let params: ExtensionFundAccountTransferRegistParams = { + // mid: mid, + // bankCode: detail.bankCode || '', + // accountNo: detail.accountNo || '', + // accountName: detail.accountName || '', + // amount: detail.amount || 0, + // moid: detail.moid || '' + // }; + // extensionFundAccountTransferRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => { + // console.log(rs) + // alert(rs.status ? '이체 요청이 완료되었습니다.' : '이체 요청에 실패했습니다.'); + // navigate(PATHS.additionalService.fundAccount.transferList); + // }); + // }; return ( <> @@ -138,7 +136,7 @@ export const FundAccountTransferDetailPage = () => {
    diff --git a/src/pages/additional-service/fund-account/transfer-request-page.tsx b/src/pages/additional-service/fund-account/transfer-request-page.tsx index 2858648..a7d12f6 100644 --- a/src/pages/additional-service/fund-account/transfer-request-page.tsx +++ b/src/pages/additional-service/fund-account/transfer-request-page.tsx @@ -7,15 +7,15 @@ import { useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; -import { ChangeEvent, useEffect, useState } from 'react'; -import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation'; -import { ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse } from '@/entities/additional-service/model/fund-account/types'; +import { ChangeEvent, useState } from 'react'; +import { ExtensionFundAccountTransferRegistParams, ExtensionFundAccountTransferRegistResponse } from '@/entities/additional-service/model/fund-account/types'; import { useStore } from '@/shared/model/store'; +import { snackBar } from '@/shared/lib'; +import { useExtensionFundAccountTransferRegistMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-regist-mutation'; export const FundAccountTransferRequestPage = () => { const { navigate } = useNavigate(); - const midOptions = useStore.getState().UserStore.selectOptionsMids; const userMid = useStore.getState().UserStore.mid; @@ -27,7 +27,7 @@ export const FundAccountTransferRequestPage = () => { const [moid, setMoid] = useState(''); const [depositParameter, setDepositParameter] = useState(''); - const { mutateAsync: extensionFundAccountRequest } = useExtensionFundAccountTransferRequestMutation(); + const { mutateAsync: extensionFundAccountRegist } = useExtensionFundAccountTransferRegistMutation(); useSetHeaderTitle('자금이체 이체등록'); useSetHeaderType(HeaderType.RightClose); @@ -36,8 +36,17 @@ export const FundAccountTransferRequestPage = () => { navigate(PATHS.additionalService.fundAccount.transferList); }); - const callExtensionFundAccountTransferRequest = () => { - let params: ExtensionFundAccountTransferRequestParams = { + const resetForm = () => { + setBankCode(''); + setAccountNo(''); + setAccountName(''); + setAmount(0); + setMoid(''); + setDepositParameter(''); + }; + + const callExtensionFundAccountTransferRegist = () => { + let params: ExtensionFundAccountTransferRegistParams = { mid: mid, bankCode: bankCode, accountNo: accountNo, @@ -46,8 +55,13 @@ export const FundAccountTransferRequestPage = () => { moid: moid, depositParameter: depositParameter }; - extensionFundAccountRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => { - navigate(PATHS.additionalService.payout.list); + extensionFundAccountRegist(params).then((rs: ExtensionFundAccountTransferRegistResponse) => { + if (rs.status) { + snackBar("이체등록을 성공하였습니다.") + resetForm(); + } else { + snackBar("이체등록이 실패하였습니다.") + } }); }; @@ -72,10 +86,7 @@ export const FundAccountTransferRequestPage = () => {
    가맹점*
    - setMid(e.target.value)}> { midOptions.map((value, index) => (
    diff --git a/src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx b/src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx index 7574cda..1bf080b 100644 --- a/src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx +++ b/src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx @@ -256,7 +256,12 @@ export const LinkPaymentSeparateApprovalPage = () => {
  • • 유효기간: - {item.paymentLimitDate} + + {item.paymentLimitDate + ? moment(item.paymentLimitDate, 'YYYYMMDD').format('YYYY/MM/DD') + : '-' + } +
  • • 연장횟수: @@ -272,13 +277,11 @@ export const LinkPaymentSeparateApprovalPage = () => { onChange={(e) => handleExtendPeriodChange(itemId, e.target.value)} > - - - - - - - + {[1, 2, 3, 4, 5, 6, 7].map(days => { + const baseDate = moment(item.paymentLimitDate, 'YYYYMMDD'); + const targetDate = baseDate.clone().add(days, 'days').format('YYYY/MM/DD'); + return ; + })}
    • diff --git a/src/pages/additional-service/payout/list-page.tsx b/src/pages/additional-service/payout/list-page.tsx index b4fe353..5f6f5a2 100644 --- a/src/pages/additional-service/payout/list-page.tsx +++ b/src/pages/additional-service/payout/list-page.tsx @@ -28,36 +28,14 @@ import { PayoutDisbursementStatusBtnGroup } from '@/entities/additional-service/ import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group'; import { AdditionalServiceCategory } from '@/entities/additional-service/model/types'; import { useStore } from '@/shared/model/store'; -import useIntersectionObserver from '@/widgets/intersection-observer'; export const PayoutListPage = () => { const { navigate } = useNavigate(); const userMid = useStore.getState().UserStore.mid; - const [onActionIntersect, setOnActionIntersect] = useState(false); - const onIntersect: IntersectionObserverCallback = (entries: Array) => { - entries.forEach((entry: IntersectionObserverEntry) => { - if (entry.isIntersecting) { - console.log('Element is now intersecting with the root. [' + onActionIntersect + ']'); - if (onActionIntersect) { - callExtensionPayoutList(); - } - } - else { - console.log('Element is no longer intersecting with the root.'); - } - }); - }; - - const { setTarget } = useIntersectionObserver({ - threshold: 1, - onIntersect - }); - const [sortType, setSortType] = useState(SortTypeKeys.LATEST); const [listItems, setListItems] = useState>([]); const [filterOn, setFilterOn] = useState(false); - const [nextCursor, setNextCursor] = useState(null); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [mid, setMid] = useState(userMid); const [searchDateType, setSearchDateType] = useState(PayoutSearchDateType.REQUEST_DATE); @@ -83,17 +61,8 @@ export const PayoutListPage = () => { const callExtensionPayoutList = (option?: { sortType?: SortTypeKeys, - status?: PayoutDisbursementStatus, - resetPage?: boolean + status?: PayoutDisbursementStatus }) => { - setOnActionIntersect(false); - - const currentPageParam = option?.resetPage - ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType } - : { ...pageParam, sortType: option?.sortType ?? sortType }; - - setPageParam(currentPageParam); - let newMinAmount = minAmount; if(!!minAmount && typeof(minAmount) === 'string'){ newMinAmount = parseInt(minAmount); @@ -110,25 +79,16 @@ export const PayoutListPage = () => { status: option?.status ?? status, minAmount: newMinAmount, maxAmount: newMaxAmount, - page: currentPageParam + page: pageParam }; + + if(params.page){ + params.page.sortType = option?.sortType || sortType; + setPageParam(params.page); + } + extensionPayoutList(params).then((rs: ExtensionPayoutListResponse) => { - // resetPage면 기존 리스트 무시, 아니면 추가 - setListItems(option?.resetPage ? rs.content : [ - ...listItems, - ...rs.content - ]); - if (rs.hasNext) { - setNextCursor(rs.nextCursor); - setPageParam({ - ...currentPageParam, - cursor: rs.nextCursor - }); - setOnActionIntersect(true) - } - else { - setNextCursor(null); - } + setListItems(rs.content); }); }; @@ -156,21 +116,18 @@ export const PayoutListPage = () => { const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); callExtensionPayoutList({ - sortType: sort, - resetPage: true + sortType: sort }); }; const onClickToDisbursementStatus = (val: PayoutDisbursementStatus) => { setStatus(val); callExtensionPayoutList({ - status: val, - resetPage: true + status: val }); }; useEffect(() => { - // 필터 조건이 변경되면 첫 페이지부터 다시 시작 - callExtensionPayoutList({ resetPage: true }); + callExtensionPayoutList(); }, [ mid, searchDateType, @@ -298,7 +255,6 @@ export const PayoutListPage = () => {
    { getListDateGroup() } -
    diff --git a/src/shared/api/api-url-additional-service.ts b/src/shared/api/api-url-additional-service.ts index 3f61148..a59876f 100644 --- a/src/shared/api/api-url-additional-service.ts +++ b/src/shared/api/api-url-additional-service.ts @@ -173,6 +173,10 @@ export const API_URL_ADDITIONAL_SERVICE = { }, // Fund Account Management 부가서비스 > 자금이체 API + extensionFundAccountTransferRegist: () => { + // POST: 자금이체 > 이체등록 + return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/fund-account/transfer/regist` + }, extensionFundAccountTransferRequest: () => { // POST: 자금이체 > 이체신청 return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/fund-account/transfer/request`; diff --git a/src/shared/ui/assets/css/style-fix.css b/src/shared/ui/assets/css/style-fix.css index 4899f27..d5ec029 100644 --- a/src/shared/ui/assets/css/style-fix.css +++ b/src/shared/ui/assets/css/style-fix.css @@ -176,16 +176,22 @@ main.home-main{ } .approval-cards-wrapper { + display: flex; + flex-direction: column; gap: 16px; + padding: 16px; padding-bottom: 2px; } .separate-approval-main .apply-row.two-button { + display: flex; + gap: 8px; flex-shrink: 0; position: sticky; bottom: 0; background: white; z-index: 10; + padding: 16px; } /* 분할승인 안내 박스 */ @@ -215,13 +221,15 @@ main.home-main{ border: 2px solid var(--color-d6d6d6); border-radius: 16px; padding: 16px; - margin-bottom: 16px; - transition: all 0.4s ease; + margin-bottom: 0; + transition: all 0.3s ease; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .approval-card.selected { border-color: var(--color-3E6AFC); background: var(--color-F4F8FF); + box-shadow: 0 4px 12px rgba(62, 106, 252, 0.2); } .approval-card .card-checkbox { @@ -270,6 +278,8 @@ main.home-main{ /* 분할승인 카드 헤더 */ .approval-card .card-header { + display: flex; + align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; @@ -309,6 +319,8 @@ main.home-main{ } .approval-card .info-list { + display: flex; + flex-direction: column; list-style: none; padding: 0; margin: 0; @@ -316,6 +328,7 @@ main.home-main{ } .approval-card .info-list li { + display: flex; align-items: center; font-size: var(--fs-14); color: var(--color-2D3436); @@ -351,6 +364,7 @@ main.home-main{ } .approval-card .period-selector select { + flex: 1; height: 36px; font-size: var(--fs-14); padding: 6px 30px 6px 12px; @@ -358,6 +372,7 @@ main.home-main{ border-radius: 4px; background-color: var(--color-white); transition: all 0.2s ease; + cursor: pointer; } /* Scrollbar hide utility class */ diff --git a/src/widgets/sub-layout/index.tsx b/src/widgets/sub-layout/index.tsx index 6882908..8c0a810 100644 --- a/src/widgets/sub-layout/index.tsx +++ b/src/widgets/sub-layout/index.tsx @@ -166,6 +166,12 @@ export const SubLayout = () => { id: 'nictest00', password: 'nictest00' }; + + // userParmas = { + // id: 'medi9332', + // password: 'medi9332' + // }; + } callLogin(userParmas).then(() => { callHomeGroups();