diff --git a/src/entities/additional-service/model/contant.ts b/src/entities/additional-service/model/contant.ts new file mode 100644 index 0000000..9aab8d6 --- /dev/null +++ b/src/entities/additional-service/model/contant.ts @@ -0,0 +1,12 @@ +import { EscrowDeliveryStatus } from '@/entities/transaction/model/types'; + +export const deliveryStatusBtnGroup = [ + {name: '전체', value: EscrowDeliveryStatus.ALL}, + {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE}, + {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT}, + {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE}, + {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM}, + {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT}, + {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING}, + {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE}, +]; \ No newline at end of file diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index ecbff8c..16cf00e 100644 --- a/src/entities/additional-service/model/types.ts +++ b/src/entities/additional-service/model/types.ts @@ -8,7 +8,7 @@ export interface FundTransferTabProps { activeTab: FundTransferTabKeys; }; export enum LinkPaymentTabKeys { - DispatchList = 'DispatchList', + ShippingHistory = 'ShippingHistory', PendingSend = 'PendingSend' }; export interface LinkPaymentTabProps { @@ -23,16 +23,47 @@ export enum SortByKeys { New = 'New', Amount = 'Amount', }; +export enum ProcessResult { + ALL = 'ALL', + SUCCESS = 'SUCCESS', + FAILURE = 'FAILURE' +}; +export enum KeyInPaymentTransactionStatus { + ALL = 'ALL', + APPROVE = 'APPROVE', + BF_CANCEL = 'BF_CANCEL', + AF_CANCEL = 'AF_CANCEL' +} export enum AccountHolderSearchType { ALL = 'ALL', ACCOUNT_HOLDER = 'ACCOUNT_HOLDER', ACCOUNT_NUMBER = 'ACCOUNT_NUMBER' }; -export enum AccountHolderSearchProcessResult { - ALL = 'ALL', - SUCCESS = 'SUCCESS', - FAILURE = 'FAILURE' +export enum LinkPaymentSearchType { + ALL = "ALL", + PHONE = "PHONE", + EMAIL = "EMAIL" }; +export enum LinkPaymentSendMethod { + ALL = "ALL", + SMS = "SMS", + EMAIL = "EMAIL", + KAKAO = "KAKAO" +}; +export enum LinkPaymentTransactionStatus { + ALL = "ALL", + ACTIVATE = "ACTIVATE", + DEPOSIT_REQUEST = "DEPOSIT_REQUEST", + TRANSACTION_COMPLETE = "TRANSACTION_COMPLETE", + TRANSACTION_FAIL = "TRANSACTION_FAIL", + INACTIVE = "INACTIVE" +} +export enum LinkPaymentSendingStatus { + ALL = "ALL", + SEND_REQUEST = "SEND_REQUEST", + SEND_CANCEL = "SEND_CANCEL" +} + export interface SortOptionsBoxProps { sortBy: SortByKeys; onClickToSort: (sortBy: SortByKeys) => void; @@ -328,7 +359,21 @@ export interface FilterProps { filterOn: boolean; setFilterOn: (filterOn: boolean) => void; }; - +export interface KeyInPaymentFilterProps extends FilterProps { + mid: string, + startDate: string; + endDate: string; + transactionStatus: KeyInPaymentTransactionStatus; + minAmount?: number | string; + maxAmount?: number | string; + setMid: (mid: string) => void; + setStartDate: (startDate: string) => void; + setEndDate: (endDate: string) => void; + setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void; + setMinAmount: (minAmount: string | number) => void; + setMaxAmount: (maxAmount: string | number) => void; +} +// 계좌성명 조회 필터 export interface AccountHolderSearchFilterProps extends FilterProps { mid: string; searchType: AccountHolderSearchType; @@ -336,17 +381,52 @@ export interface AccountHolderSearchFilterProps extends FilterProps { startDate: string; endDate: string; bank: string; - processResult: AccountHolderSearchProcessResult; + processResult: ProcessResult; setMid: (mid: string) => void; setSearchType: (searchType: AccountHolderSearchType) => void; setSearchKeyword: (searchKeyWorld: string) => void; setStartDate: (startDate: string) => void; setEndDate: (endDate: string) => void; setBank: (bank: string) => void; - setProcessResult: (processResult: AccountHolderSearchProcessResult) => void; + setProcessResult: (processResult: ProcessResult) => void; } -export interface LinkPaymentFilterProps extends FilterProps { +// 링크결제 - 발송내역 탭 필터 +export interface LinkPaymentShippingHistoryFilterProps extends FilterProps { + mid: string; + searchType: LinkPaymentSearchType; + searchKeyword: string; + startDate: string; + endDate: string; + transactionStatus: LinkPaymentTransactionStatus; + processResult: ProcessResult; + sendMethod: LinkPaymentSendMethod; + setMid: (mid: string) => void; + setSearchType: (searchType: LinkPaymentSearchType) => void; + setSearchKeyword: (searchKeyWorld: string) => void; + setStartDate: (startDate: string) => void; + setEndDate: (endDate: string) => void; + setTransactionStatus: (transactionStatus: LinkPaymentTransactionStatus) => void; + setProcessResult: (processResult: ProcessResult) => void; + setSendMethod: (sendMethod: LinkPaymentSendMethod) => void; +} + +// 링크결제 - 발송대기 탭 필터 +export interface LinkPaymentPendingSendFilterProps extends FilterProps { + mid: string; + searchType: LinkPaymentSearchType; + searchKeyword: string; + startDate: string; + endDate: string; + sendMethod: LinkPaymentSendMethod; + sendingStatus: LinkPaymentSendingStatus; + setMid: (mid: string) => void; + setSearchType: (searchType: LinkPaymentSearchType) => void; + setSearchKeyword: (searchKeyWorld: string) => void; + setStartDate: (startDate: string) => void; + setEndDate: (endDate: string) => void; + setSendMethod: (sendMethod: LinkPaymentSendMethod) => void; + setSendingStatus: (sendingStatus: LinkPaymentSendingStatus) => void; }; export enum DetailInfoSectionKeys { diff --git a/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx b/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx index c2329fa..e6d64c4 100644 --- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx +++ b/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx @@ -1,14 +1,17 @@ import moment from 'moment'; +import { useEffect } from 'react'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { motion } from 'framer-motion'; import { ChangeEvent, useState } from 'react'; import { AccountHolderSearchType, AccountHolderSearchFilterProps, - AccountHolderSearchProcessResult + ProcessResult } from '../../model/types'; +import { FilterSelect } from '@/shared/ui/filter/select'; +import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { FilterDateOptions } from '@/entities/common/model/types'; -import { FilterCalendar } from '@/shared/ui/filter/filter-calendar'; +import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; export const AccountHolderSearchFilter = ({ @@ -36,7 +39,7 @@ export const AccountHolderSearchFilter = ({ const [filterStartDate, setFilterStartDate] = useState(startDate); const [filterEndDate, setFilterEndDate] = useState(endDate); const [filterBank, setFilterBank] = useState(bank) - const [filterProcessResult, setFilterProcessResult] = useState(processResult); + const [filterProcessResult, setFilterProcessResult] = useState(processResult); const [dateReadOnly, setDateReadyOnly] = useState(true); const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); @@ -50,38 +53,6 @@ export const AccountHolderSearchFilter = ({ const onClickToClose = () => { setFilterOn(false); }; - const setFilterDate = (dateOptions: FilterDateOptions) => { - if (dateOptions === FilterDateOptions.Today) { - setFilterStartDate(moment().format('YYYY-MM-DD')); - setFilterEndDate(moment().format('YYYY-MM-DD')); - setDateReadyOnly(true); - setFilterDateOptionsBtn(FilterDateOptions.Today); - } - else if (dateOptions === FilterDateOptions.Week) { - setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD')); - setFilterEndDate(moment().format('YYYY-MM-DD')); - setDateReadyOnly(true); - setFilterDateOptionsBtn(FilterDateOptions.Week); - } - else if (dateOptions === FilterDateOptions.Month) { - setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD')); - setFilterEndDate(moment().format('YYYY-MM-DD')); - setDateReadyOnly(true); - setFilterDateOptionsBtn(FilterDateOptions.Month); - } - else if (dateOptions === FilterDateOptions.Input) { - setDateReadyOnly(false); - setFilterDateOptionsBtn(FilterDateOptions.Input); - } - }; - const onClickToOpenCalendar = () => { - if (!dateReadOnly) { - setCalendarOpen(true); - } - else { - setCalendarOpen(false); - } - }; const setNewDate = (newDate: any) => { console.log(newDate) @@ -97,11 +68,27 @@ export const AccountHolderSearchFilter = ({ setProcessResult(filterProcessResult); }; - let processResultBtnGroup = [ - { name: '전체', value: AccountHolderSearchProcessResult.ALL }, - { name: '성공', value: AccountHolderSearchProcessResult.SUCCESS }, - { name: '실패', value: AccountHolderSearchProcessResult.FAILURE }, + let MidOptions = [ + { name: 'nictest001m', value: 'nictest001m' }, + { name: 'nictest002m', value: 'nictest002m' } ]; + + let bankOptions = [ + { name: '우리은행', value: '우리은행'}, + { name: '토스뱅킹', value: '토스뱅킹'} + ] + + let searchTypeOption = [ + { name: '예금주', value: AccountHolderSearchType.ACCOUNT_HOLDER }, + { name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NUMBER }, + ] + + let processResultBtnGroup = [ + { name: '전체', value: ProcessResult.ALL }, + { name: '성공', value: ProcessResult.SUCCESS }, + { name: '실패', value: ProcessResult.FAILURE }, + ]; + return ( <>
-
-
가맹점
-
- -
-
+ -
-
예금주/계좌번호
-
- - ) => setFilterSearchKeyword(e.target.value)} - /> -
-
+ -
-
은행
-
- -
-
+ { + + const [filterMid, setFilterMid] = useState(mid); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterTransactionStatus, setFilterTransactionStatus] = useState(transactionStatus); + const [filterMinAmount, setFilterMinAmount] = useState(minAmount || ''); + const [filterMaxAmount, setFilterMaxAmount] = useState(maxAmount || ''); + + const variants = { + hidden: { x: '100%' }, + visible: { x: '0%' }, + }; + + const onClickToClose = () => { + setFilterOn(false); + }; + + const setNewDate = (newDate: any) => { + console.log(newDate) + }; + + const onClickToSetFilter = () => { + setMid(filterMid); + setStartDate(filterStartDate); + setEndDate(filterEndDate); + setTransactionStatus(filterTransactionStatus); + setMinAmount(filterMinAmount); + setMaxAmount(filterMaxAmount); + onClickToClose(); + }; + let MidOptions = [ + { name: 'nictest001m', value: 'nictest001m' } + ]; + + let transactionStatusOption = [ + { name: '전체', value: KeyInPaymentTransactionStatus.ALL }, + { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE }, + { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL }, + { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL }, + ] + + return ( + <> + +
+
+
필터
+
+ +
+
+ +
+ + + + + + + +
+
+ +
+
+ + + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx b/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx new file mode 100644 index 0000000..6d06611 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx @@ -0,0 +1,174 @@ +import moment from 'moment'; +import { useEffect } from 'react'; +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { motion } from 'framer-motion'; +import { ChangeEvent, useState } from 'react'; +import { + LinkPaymentPendingSendFilterProps, + LinkPaymentSearchType, + LinkPaymentSendMethod, + LinkPaymentSendingStatus, +} from "../../../model/types"; +import { FilterSelect } from '@/shared/ui/filter/select'; +import { FilterSelectInput } from '@/shared/ui/filter/select-input'; +import { FilterDateOptions } from '@/entities/common/model/types'; +import { FilterCalendar } from '@/shared/ui/filter/calendar'; +import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; + +export const LinkPaymentPendingSendFilter = ({ + filterOn, + setFilterOn, + mid, + searchType, + searchKeyword, + startDate, + endDate, + sendMethod, + sendingStatus, + setMid, + setSearchType, + setSearchKeyword, + setStartDate, + setEndDate, + setSendMethod, + setSendingStatus +}: LinkPaymentPendingSendFilterProps) => { + + + const [filterMid, setFilterMid] = useState(mid); + const [filterSearchType, setFilterSearchType] = useState(searchType); + const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterSendMethod, setFilterSendMethod] = useState(sendMethod) + const [filterSendingStatus, setFilterSendingStatus] = useState(sendingStatus); + const [dateReadOnly, setDateReadyOnly] = useState(true); + const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); + + const [calendarOpen, setCalendarOpen] = useState(false); + + const variants = { + hidden: { x: '100%' }, + visible: { x: '0%' }, + }; + + const onClickToClose = () => { + setFilterOn(false); + }; + + const setNewDate = (newDate: any) => { + console.log(newDate) + }; + + const onClickToSetFilter = () => { + setMid(filterMid); + setSearchType(filterSearchType); + setSearchKeyword(filterSearchKeyword); + setStartDate(filterStartDate); + setEndDate(filterEndDate); + setSendMethod(filterSendMethod); + setSendingStatus(filterSendingStatus); + }; + + let MidOptions = [ + { name: 'nictest001m', value: 'nictest001m' }, + { name: 'nictest002m', value: 'nictest002m' } + ]; + + let searchTypeOption = [ + { name: '휴대폰번호', value: LinkPaymentSearchType.PHONE }, + { name: '이메일', value: LinkPaymentSearchType.EMAIL }, + ] + + let sendMethodOption = [ + { name: '전체', value: LinkPaymentSendMethod.ALL }, + { name: 'SMS', value: LinkPaymentSendMethod.SMS }, + { name: '이메일', value: LinkPaymentSendMethod.EMAIL }, + { name: '카카오', value: LinkPaymentSendMethod.KAKAO }, + ] + + let sendingStatusOption = [ + { name: '전체', value: LinkPaymentSendingStatus.ALL }, + { name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST }, + { name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL }, + ] + + return ( + <> + +
+
+
필터
+
+ +
+
+ +
+ + + + + + + + +
+
+ +
+
+ + + ) +} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx b/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx new file mode 100644 index 0000000..a518749 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx @@ -0,0 +1,195 @@ +import moment from 'moment'; +import { useEffect } from 'react'; +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { motion } from 'framer-motion'; +import { ChangeEvent, useState } from 'react'; +import { + LinkPaymentSearchType, + LinkPaymentSendMethod, + LinkPaymentShippingHistoryFilterProps, + LinkPaymentTransactionStatus, + ProcessResult +} from "../../../model/types"; +import { FilterSelect } from '@/shared/ui/filter/select'; +import { FilterSelectInput } from '@/shared/ui/filter/select-input'; +import { FilterDateOptions } from '@/entities/common/model/types'; +import { FilterCalendar } from '@/shared/ui/filter/calendar'; +import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; + +export const LinkPaymentShippingHistoryFilter = ({ + filterOn, + setFilterOn, + mid, + searchType, + searchKeyword, + startDate, + endDate, + transactionStatus, + processResult, + sendMethod, + setMid, + setSearchType, + setSearchKeyword, + setStartDate, + setEndDate, + setTransactionStatus, + setProcessResult, + setSendMethod +}: LinkPaymentShippingHistoryFilterProps) => { + + + const [filterMid, setFilterMid] = useState(mid); + const [filterSearchType, setFilterSearchType] = useState(searchType); + const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterTransactionStatus, setFilterTransactionStatus] = useState(transactionStatus) + const [filterProcessResult, setFilterProcessResult] = useState(processResult); + const [filterSendMethod, setFilterSendMethod] = useState(sendMethod); + const [dateReadOnly, setDateReadyOnly] = useState(true); + const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); + + const [calendarOpen, setCalendarOpen] = useState(false); + + const variants = { + hidden: { x: '100%' }, + visible: { x: '0%' }, + }; + + const onClickToClose = () => { + setFilterOn(false); + }; + + const setNewDate = (newDate: any) => { + console.log(newDate) + }; + + const onClickToSetFilter = () => { + setMid(filterMid); + setSearchType(filterSearchType); + setSearchKeyword(filterSearchKeyword); + setStartDate(filterStartDate); + setEndDate(filterEndDate); + setTransactionStatus(filterTransactionStatus); + setProcessResult(filterProcessResult); + setSendMethod(filterSendMethod); + }; + + let MidOptions = [ + { name: 'nictest001m', value: 'nictest001m' }, + { name: 'nictest002m', value: 'nictest002m' } + ]; + + let searchTypeOption = [ + { name: '휴대폰번호', value: LinkPaymentSearchType.PHONE }, + { name: '이메일', value: LinkPaymentSearchType.EMAIL }, + ] + + let transactionStatusOption = [ + { name: '전체', value: LinkPaymentTransactionStatus.ALL }, + { name: '미완료/활성화', value: LinkPaymentTransactionStatus.ACTIVATE }, + { name: '입금요청', value: LinkPaymentTransactionStatus.DEPOSIT_REQUEST }, + { name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE }, + { name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL }, + { name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE }, + ] + + let processResultOption = [ + { name: '전체', value: ProcessResult.ALL }, + { name: '성공', value: ProcessResult.SUCCESS }, + { name: '실패', value: ProcessResult.FAILURE }, + ] + + let sendMethodOption = [ + { name: '전체', value: LinkPaymentSendMethod.ALL }, + { name: 'SMS', value: LinkPaymentSendMethod.SMS }, + { name: '이메일', value: LinkPaymentSendMethod.EMAIL }, + { name: '카카오', value: LinkPaymentSendMethod.KAKAO }, + ] + + return ( + <> + +
+
+
필터
+
+ +
+
+ +
+ + + + + + + + + + +
+
+ +
+
+ + + ) +} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-filter.tsx b/src/entities/additional-service/ui/link-payment/link-payment-filter.tsx deleted file mode 100644 index 344a982..0000000 --- a/src/entities/additional-service/ui/link-payment/link-payment-filter.tsx +++ /dev/null @@ -1,193 +0,0 @@ -import { motion } from 'framer-motion'; -import {IMAGE_ROOT} from "@/shared/constants/common"; -import {LinkPaymentFilterProps} from "@/entities/additional-service/model/types"; - -export const LinkPaymentFilter = ({ - filterOn, - setFilterOn -}: LinkPaymentFilterProps) => { - const variants = { - hidden:{ x: '100%'}, - visible: {x: '0%'} - }; - - const onClickToClose = () => { - setFilterOn(false); - }; - return ( - <> - -
-
-
필터
-
- -
-
- -
-
-
가맹점
-
- -
-
- -
-
휴대폰번호, 이메일
-
- - -
-
- -
-
결제수단
-
- -
-
- -
-
조회기간
-
-
- 당일 - 일주일 - 1개월 - 직접입력 -
- -
-
- - -
- ~ -
- - -
-
-
-
- -
-
거래 구분
-
-
- 전체 - 미완료/
활성화 - 입금요청 - 결제완료 - -
-
-
-
- 결제실패 - 결제중단/
비활성화 - - -
-
-
- -
-
전송결과
-
-
- 전체 - 성공 - 실패 -
-
-
- -
-
발송수단
-
-
- 전체 - SMS - 이메일 - 카카오 -
-
-
- -
- -
- -
-
- - - ) -} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx index f069648..e1a5fa2 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx @@ -1,22 +1,33 @@ +import moment from 'moment'; import { IMAGE_ROOT } from "@/shared/constants/common"; import { useState, useEffect } from "react"; -import { LinkPaymentFilter } from "./link-payment-filter"; +import { LinkPaymentPendingSendFilter } from "./filter/link-payment-pending-send-filter"; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { PATHS } from "@/shared/constants/paths"; import { LinkPaymentPendingList } from "./link-payment-pending-list"; +import { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod } from "../../model/types"; export const LinkPaymentPendingSendWrap = () => { const { navigate } = useNavigate(); + const [filterOn, setFilterOn] = useState(false); + const [mid, setMid] = useState('nictest001m'); + const [searchType, setSearchType] = useState(LinkPaymentSearchType.ALL) + const [searchKeyword, setSearchKeyword] = useState(''); + const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); + const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); + const [sendMethod, setSendMethod] = useState(LinkPaymentSendMethod.ALL); + const [sendingStatus, setSendingStatus] = useState(LinkPaymentSendingStatus.ALL); + const [listItems, setListItems] = useState({}); - + const onClickToOpenFilter = () => { setFilterOn(!filterOn); }; const onClickToNavigate = () => { navigate(PATHS.additionalService.linkPayment.request) } - + const callList = () => { setListItems({ '20250608': [ @@ -28,7 +39,7 @@ export const LinkPaymentPendingSendWrap = () => { amount: 5254000 }, { - transactionId: 'pending2', + transactionId: 'pending2', customerName: '김*환(7000)', status: '발송요청', channel: 'SMS', @@ -111,7 +122,7 @@ export const LinkPaymentPendingSendWrap = () => {
-
@@ -120,10 +131,24 @@ export const LinkPaymentPendingSendWrap = () => { onClick={() => onClickToNavigate()} >결제 신청
- + mid={mid} + searchType={searchType} + searchKeyword={searchKeyword} + startDate={startDate} + endDate={endDate} + sendMethod={sendMethod} + sendingStatus={sendingStatus} + setMid={setMid} + setSearchType={setSearchType} + setSearchKeyword={setSearchKeyword} + setStartDate={setStartDate} + setEndDate={setEndDate} + setSendMethod={setSendMethod} + setSendingStatus={setSendingStatus} + > ) } \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx similarity index 71% rename from src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx rename to src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx index ae5c15d..eb483dd 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx @@ -1,18 +1,28 @@ +import moment from 'moment'; import { IMAGE_ROOT } from "@/shared/constants/common"; import { useState, useEffect } from "react"; -import { LinkPaymentFilter } from "./link-payment-filter"; +import { LinkPaymentShippingHistoryFilter } from "./filter/link-payment-shipping-history-filter"; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { PATHS } from "@/shared/constants/paths"; import { LinkPaymentList } from "./link-payment-list"; import { SortOptionsBox } from "./sort-options-box"; -import { SortByKeys } from "../../model/types"; +import { LinkPaymentSendMethod, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types"; +import { LinkPaymentSearchType, } from "../../model/types"; -export const LinkPaymentDispatchListWrap = () => { +export const LinkPaymentShippingHistoryWrap = () => { const { navigate } = useNavigate(); const [filterOn, setFilterOn] = useState(false); const [sortBy, setSortBy] = useState(SortByKeys.New); const [listItems, setListItems] = useState({}); + const [mid, setMid] = useState('nictest001m'); + const [searchType, setSearchType] = useState(LinkPaymentSearchType.ALL) + const [searchKeyword, setSearchKeyword] = useState(''); + const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); + const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); + const [transactionStatus, setTransactionStatus] = useState(LinkPaymentTransactionStatus.ALL) + const [processResult, setProcessResult] = useState(ProcessResult.ALL) + const [sendMethod, setSendMethod] = useState(LinkPaymentSendMethod.ALL) const onClickToOpenFilter = () => { setFilterOn(!filterOn); @@ -25,7 +35,7 @@ export const LinkPaymentDispatchListWrap = () => { callList({ sortBy: sort }); }; - const callList = (option?: {sortBy?: string, val?: string}) => { + const callList = (option?: { sortBy?: string, val?: string }) => { setListItems({ '20250608': [ { @@ -134,10 +144,26 @@ export const LinkPaymentDispatchListWrap = () => { onClick={() => onClickToNavigate()} >결제 신청 - + mid={mid} + searchType={searchType} + searchKeyword={searchKeyword} + startDate={startDate} + endDate={endDate} + transactionStatus={transactionStatus} + processResult={processResult} + sendMethod={sendMethod} + setMid={setMid} + setSearchType={setSearchType} + setSearchKeyword={setSearchKeyword} + setStartDate={setStartDate} + setEndDate={setEndDate} + setTransactionStatus={setTransactionStatus} + setProcessResult={setProcessResult} + setSendMethod={setSendMethod} + > ) } \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx b/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx index 1b38cff..75a9bfc 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx @@ -12,8 +12,8 @@ export const LinkPaymentTab = ({ const onClickToNavigation = (tab: LinkPaymentTabKeys) => { if(activeTab !== tab){ - if(tab === LinkPaymentTabKeys.DispatchList){ - navigate(PATHS.additionalService.linkPayment.dispatchList); + if(tab === LinkPaymentTabKeys.ShippingHistory){ + navigate(PATHS.additionalService.linkPayment.shippingHistory); } else if(tab === LinkPaymentTabKeys.PendingSend){ navigate(PATHS.additionalService.linkPayment.pendingSend); @@ -25,8 +25,8 @@ export const LinkPaymentTab = ({ <>
-
- ~ -
- - -
- - - - -
-
요청상태
-
-
- 전체 - 진행중 - 성공 - 요청취소 -
-
-
- -
-
저리결과
-
-
- 전체 - 성공 - 실패 - -
-
-
- -
-
결제수단
-
- -
-
- -
-
거래금액
-
-
- -
- ~ -
- -
-
-
+
+ + + + + + + + +
- +
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 1b627f1..00d691e 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 @@ -6,7 +6,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common'; import { HeaderType } from '@/entities/common/model/types'; import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation'; import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-filter'; -import { AccountHolderSearchProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types'; +import { ProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types'; import { useSetHeaderTitle, useSetHeaderType, @@ -24,7 +24,7 @@ export const AccountHolderSearchPage = () => { const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); const [bank, setBank] = useState(''); - const [processResult, setProcessResult] = useState(AccountHolderSearchProcessResult.ALL); + const [processResult, setProcessResult] = useState(ProcessResult.ALL); useSetHeaderTitle('계좌성명조회'); useSetHeaderType(HeaderType.LeftArrow); diff --git a/src/pages/additional-service/additional-service-pages.tsx b/src/pages/additional-service/additional-service-pages.tsx index 90095ef..bdd2583 100644 --- a/src/pages/additional-service/additional-service-pages.tsx +++ b/src/pages/additional-service/additional-service-pages.tsx @@ -9,7 +9,7 @@ import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page'; import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page'; import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page'; import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page'; -import { LinkPaymentDispatchListPage } from './link-payment/link-payment-dispatch-list-page'; +import { LinkPaymentShippingHistoryPage } from './link-payment/link-payment-shipping-history-page'; import { LinkPaymentPendingSendPage } from './link-payment/link-payment-pending-send-page'; import { KakaoPaymentNotificationListPage } from './kakao-payment-notification/list-page'; import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notification/setting-page'; @@ -58,7 +58,7 @@ export const AdditionalServicePages = () => { } /> - } /> + } /> } /> } /> } /> diff --git a/src/pages/additional-service/intro/intro-page.tsx b/src/pages/additional-service/intro/intro-page.tsx index eba7247..7f317d0 100644 --- a/src/pages/additional-service/intro/intro-page.tsx +++ b/src/pages/additional-service/intro/intro-page.tsx @@ -49,7 +49,7 @@ export const IntroPage = () => { }, { className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스', - icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.dispatchList + icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.shippingHistory }, { className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능', diff --git a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx index d4b9080..602dad4 100644 --- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx +++ b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx @@ -1,4 +1,5 @@ -import { useState } from 'react'; +import moment from 'moment'; +import { useEffect, useState } from 'react'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { HeaderType } from '@/entities/common/model/types'; @@ -8,24 +9,84 @@ import { useSetFooterMode } from '@/widgets/sub-layout/use-sub-layout'; import { PATHS } from '@/shared/constants/paths'; +import { useExtensionKeyinDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-keyin-download-excel-mutation'; +import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-filter'; +import { KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types'; +import { SortOptionsBox } from '@/entities/additional-service/ui/link-payment/sort-options-box'; +import { useExtensionKeyinListMutation } from '@/entities/additional-service/api/use-extension-keyin-list-mutation'; +import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants'; + +const requestStatusBtnGroup = [ + { name: '전체', value: KeyInPaymentTransactionStatus.ALL }, + { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE }, + { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL }, + { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL } +]; export const KeyInPaymentPage = () => { const { navigate } = useNavigate(); + + const [sortBy, setSortBy] = useState(SortByKeys.New); + const [listItems, setListItems] = useState({}); + const [filterOn, setFilterOn] = useState(false); + const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [mid, setMid] = useState('nictest001m'); + const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); + const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); + const [transactionStatus, setTransactionStatus] = useState(KeyInPaymentTransactionStatus.ALL) + const [minAmount, setMinAmount] = useState(); + const [maxAmount, setMaxAmount] = useState(); + + useSetHeaderTitle('KEY-IN 결제'); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); + const { mutateAsync: keyinList } = useExtensionKeyinListMutation(); + const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation(); + + const onClickToOpenFilter = () => { + setFilterOn(!filterOn); + }; + + const onClickToDownloadExcel = () => { + // downloadExcel({ + // mid, + // fromDate: '', + // toDate: '', + // paymentStatus: '', + // minAmount: 0, + // maxAmount: 0 + // }).then((rs) => { + + // }); + }; + + const onClickToSort = (sort: SortByKeys) => { + setSortBy(sort); + // TODO : callList 구현 + }; + + const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => { + setTransactionStatus(val); + // TODO : callList 구현 + }; + const onClickToNavigation = () => { navigate(PATHS.additionalService.keyInPayment.request) } + useEffect(() => { + // TODO : callList(); + }, []); + return ( <>
-
+
{ 검색옵션 onClickToOpenFilter()} />
@@ -51,26 +113,31 @@ export const KeyInPaymentPage = () => { 다운로드 onClickToDownloadExcel()} />
-
-
- - | - -
+
+
- 전체 - 승인 - 전취소 - 후취소 + { + requestStatusBtnGroup.map((value, index) => ( + onClickToTransactionStatus(value.value)} + >{value.name} + )) + }
-
+
@@ -148,6 +215,22 @@ export const KeyInPaymentPage = () => { onClick={() => onClickToNavigation()} >결제 신청
+
diff --git a/src/pages/additional-service/link-payment/link-payment-detail-page.tsx b/src/pages/additional-service/link-payment/link-payment-detail-page.tsx index a5a5cbb..02fd6df 100644 --- a/src/pages/additional-service/link-payment/link-payment-detail-page.tsx +++ b/src/pages/additional-service/link-payment/link-payment-detail-page.tsx @@ -31,14 +31,14 @@ export const LinkPaymentDetailPage = () => { useSetHeaderTitle('링크결제 상세'); useSetHeaderType(HeaderType.RightClose); useSetOnBack(() => { - navigate(PATHS.additionalService.linkPayment.dispatchList); + navigate(PATHS.additionalService.linkPayment.shippingHistory); }); useSetFooterMode(false); const onClickToNavigate = (path: string) => { let timeout = setTimeout(() => { clearTimeout(timeout); - navigate(PATHS.additionalService.linkPayment.dispatchList, { + navigate(PATHS.additionalService.linkPayment.shippingHistory, { }); }, 10) }; @@ -60,7 +60,7 @@ export const LinkPaymentDetailPage = () => { afterLeave={ unmount } open={ isOpen } onClose={ close } - onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.dispatchList) } + onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.shippingHistory) } message={ msg } buttonLabel={['취소', '확인']} /> diff --git a/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx b/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx index c88c57f..dede7dc 100644 --- a/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx +++ b/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx @@ -12,7 +12,6 @@ import { useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; -import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment/link-payment-filter'; /** * 발송대기 탭 화면 diff --git a/src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx b/src/pages/additional-service/link-payment/link-payment-shipping-history-page.tsx similarity index 79% rename from src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx rename to src/pages/additional-service/link-payment/link-payment-shipping-history-page.tsx index f5dda5f..57b79be 100644 --- a/src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx +++ b/src/pages/additional-service/link-payment/link-payment-shipping-history-page.tsx @@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common'; import { HeaderType } from '@/entities/common/model/types'; import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab'; import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types'; -import { LinkPaymentDispatchListWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap'; +import { LinkPaymentShippingHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap'; import { useSetHeaderTitle, useSetHeaderType, @@ -17,10 +17,10 @@ import { * 발송내역 탭 화면 */ -export const LinkPaymentDispatchListPage = () => { +export const LinkPaymentShippingHistoryPage = () => { const { navigate } = useNavigate(); - const [activeTab, setActiveTab] = useState(LinkPaymentTabKeys.DispatchList) + const [activeTab, setActiveTab] = useState(LinkPaymentTabKeys.ShippingHistory) useSetHeaderTitle('링크결제') useSetHeaderType(HeaderType.LeftArrow); @@ -35,7 +35,7 @@ export const LinkPaymentDispatchListPage = () => {
- +
diff --git a/src/pages/transaction/escrow/list-page.tsx b/src/pages/transaction/escrow/list-page.tsx index 2d193dd..8e9ea21 100644 --- a/src/pages/transaction/escrow/list-page.tsx +++ b/src/pages/transaction/escrow/list-page.tsx @@ -5,11 +5,12 @@ import { IMAGE_ROOT } from '@/shared/constants/common'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { EscrowList } from '@/entities/transaction/ui/escrow-list'; -import { EscrowListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types'; +import { EscrowListItem, TransactionCategory, SortByKeys, EscrowDeliveryStatus, EscrowSearchType, EscrowSettlementStatus } from '@/entities/transaction/model/types'; import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation'; import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants'; import { Filter } from '@/entities/transaction/ui/filter'; +import { deliveryStatusBtnGroup } from '@/entities/additional-service/model/contant'; import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box'; import { HeaderType } from '@/entities/common/model/types'; import { @@ -19,23 +20,24 @@ import { useSetFooterMode } from '@/widgets/sub-layout/use-sub-layout'; -const serviceCodes = [ - {name: '전체', key: 'all'}, - {name: '결제완료', key: 'paid'}, - {name: '배송등록', key: 'register'}, -]; - export const EscrowListPage = () => { const { navigate } = useNavigate(); const userInfo = useStore((state) => state.UserStore.UserInfo); - const [selectedServiceCode, setSelectedServiceCode] = useState('all'); const [sortBy, setSortBy] = useState(SortByKeys.New); const [listItems, setListItems] = useState({}); const [filterOn, setFilterOn] = useState(false); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); - const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD')); + const [mid, setMid] = useState('nictest001m'); + const [searchType, setSearchType] = useState(EscrowSearchType.ALL); + const [searchKeyword, setSearchKeyword] = useState(''); + //const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD')); + const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); + const [deliveryStatus, setDeliveryStatus] = useState(EscrowDeliveryStatus.ALL); + const [settlementStatus, setSettlementStatus] = useState(EscrowSettlementStatus.ALL); + const [minAmount, setMinAmount] = useState(); + const [maxAmount, setMaxAmount] = useState(); useSetHeaderTitle('에스크로'); useSetHeaderType(HeaderType.LeftArrow); @@ -51,24 +53,30 @@ export const EscrowListPage = () => { sortBy?: string, val?: string }) => { - // pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy; + pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy; setPageParam(pageParam); + let newMinAmount = minAmount; + if(!!minAmount && typeof(minAmount) === 'string'){ + newMinAmount = parseInt(minAmount); + } + let newMaxAmount = maxAmount; + if(!!maxAmount && typeof(maxAmount) === 'string'){ + newMaxAmount = parseInt(maxAmount); + } let listParams = { - mid: 'nictest001m', - searchType: 'ORDER_NUMBER', - searchKeyword: '', + mid: mid, + searchType: searchType, + searchKeyword: searchKeyword, startDate: startDate, endDate: endDate, - deliveryStatus: 'ALL', - settlementStatus: 'ALL', - minAmount: 0, - maxAmount: 999999999, + deliveryStatus: deliveryStatus, + settlementStatus: settlementStatus, + minAmount: newMinAmount, + maxAmount: newMaxAmount, pagination: pageParam }; - console.log(listParams) - - escrowList(listParams).then((rs) => { + escrowList(listParams).then((rs) => { setListItems(assembleData(rs.content)); }); }; @@ -105,8 +113,8 @@ export const EscrowListPage = () => { callList({sortBy: sort}); }; - const onClickToServiceCode = (val: string) => { - setSelectedServiceCode(val); + const onClickToDeliveryStatus = (val: EscrowDeliveryStatus) => { + setDeliveryStatus(val); callList({val: val}); }; @@ -154,11 +162,11 @@ export const EscrowListPage = () => {
{ - serviceCodes.map((value, index) => ( + deliveryStatusBtnGroup.map((value, index) => ( onClickToServiceCode(value.key) } + className={ `keyword-tag ${(deliveryStatus === value.value)? 'active': ''}` } + onClick={ () => onClickToDeliveryStatus(value.value) } >{ value.name } )) } diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts index 8574eee..e23fb28 100644 --- a/src/shared/constants/paths.ts +++ b/src/shared/constants/paths.ts @@ -191,9 +191,9 @@ export const PATHS: RouteNamesType = { accountHolderAuth: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderAuth), linkPayment: { base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`), - dispatchList: generatePath( + shippingHistory: generatePath( `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`, - ROUTE_NAMES.additionalService.linkPayment.dispatchList, + ROUTE_NAMES.additionalService.linkPayment.shippingHistory, ), pendingSend: generatePath( `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`, diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts index c14c14c..d3b3214 100644 --- a/src/shared/constants/route-names.ts +++ b/src/shared/constants/route-names.ts @@ -92,7 +92,7 @@ export const ROUTE_NAMES = { accountHolderAuth: 'account-holder-auth', linkPayment: { base: '/link-payment/*', - dispatchList: 'dispatch-list', + shippingHistory: 'shipping-history', pendingSend: 'pending-send', request: 'request', requestConfirm: 'request-confirm', diff --git a/src/shared/ui/calendar/nice-calendar.tsx b/src/shared/ui/calendar/nice-calendar.tsx index bd1e7a0..8bd0a04 100644 --- a/src/shared/ui/calendar/nice-calendar.tsx +++ b/src/shared/ui/calendar/nice-calendar.tsx @@ -1,40 +1,101 @@ -import moment from 'moment'; +import moment, { locale } from 'moment'; import styled from "styled-components"; import { useState } from 'react'; import Calendar from 'react-calendar'; import 'react-calendar/dist/Calendar.css'; import { useEffect } from 'react'; +import { CalendarType } from '@/entities/common/model/types'; interface NiceCalendarProps { calendarOpen: boolean; + setCalendarOpen: (calendarOpen: boolean) => void; + startDate: string; + endDate: string; + calendarType: CalendarType; setNewDate: (date: string) => void; }; const NiceCalendar = ({ calendarOpen, + setCalendarOpen, + startDate, + endDate, + calendarType, setNewDate }: NiceCalendarProps) => { - const [calendarDate, setCalendarDate] = useState(moment().format('YYYY-MM-DD')); - const [isOpen, setIsOpen] = useState(false); + const [valueDate, setValueDate] = useState(); + const [minDate, setMinDate] = useState(); + const [maxDate, setMaxDate] = useState(); const onchangeToDate = (selectedDate: any) => { setNewDate(moment(selectedDate).format('YYYY-MM-DD')); - setIsOpen(false); + setCalendarOpen(false); + }; + + const onClickToClose = () => { + setCalendarOpen(false); + }; + const setMinMaxValueDate = () => { + if(calendarType === CalendarType.Start){ + setMinDate(undefined); + setMaxDate(new Date(endDate)); + setValueDate(startDate); + } + else if(calendarType === CalendarType.End){ + setMinDate(new Date(startDate)); + setMaxDate(new Date()); + setValueDate(endDate); + } + }; + + const formatMonthYear = (locale: string | undefined, date: Date) => { + return date.toLocaleDateString('en', { + month: 'long', + year: 'numeric' + }); + }; + const formatYear = (locale: string | undefined, date: Date) => { + return date.toLocaleDateString('en', { + year: 'numeric' + }); + }; + const formmatMonth = (locale: string | undefined, date: Date) => { + return date.toLocaleDateString('en', { + month: 'short' + }); + }; + const formatDay = (locale: string | undefined, date: Date) => { + return date.toLocaleString('en', { + day: 'numeric' + }); + }; + const formatShortWeekday = (locale: string | undefined, date: Date) => { + return date.toLocaleString('en', { + weekday: 'short' + }); }; useEffect(() => { - console.log(calendarOpen) - setIsOpen(calendarOpen); + setMinMaxValueDate(); + }, [calendarOpen]) return ( <> - { (isOpen) && + { (calendarOpen) && <>
- + onClickToClose() }> diff --git a/src/shared/ui/filter/filter-calendar.tsx b/src/shared/ui/filter/calendar.tsx similarity index 83% rename from src/shared/ui/filter/filter-calendar.tsx rename to src/shared/ui/filter/calendar.tsx index 7e36c30..f6c44da 100644 --- a/src/shared/ui/filter/filter-calendar.tsx +++ b/src/shared/ui/filter/calendar.tsx @@ -1,6 +1,6 @@ import moment from 'moment'; import { ChangeEvent, useState } from 'react'; -import { FilterDateOptions } from '@/entities/common/model/types'; +import { CalendarType, FilterDateOptions } from '@/entities/common/model/types'; import { IMAGE_ROOT } from '@/shared/constants/common'; import NiceCalendar from '../calendar/nice-calendar'; import { useEffect } from 'react'; @@ -24,7 +24,7 @@ export const FilterCalendar = ({ const [dateReadOnly, setDateReadyOnly] = useState(false); const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); const [calendarOpen, setCalendarOpen] = useState(false); - const [activceCalendar, setActiveCalendar] = useState(); + const [calendarType, setCalendarType] = useState(CalendarType.Start); const setFilterDate = (dateOptions: FilterDateOptions) => { if(dateOptions === FilterDateOptions.Today){ @@ -52,22 +52,22 @@ export const FilterCalendar = ({ }; - const onClickToOpenCalendar = (key: string) => { + const onClickToOpenCalendar = (calendarType: CalendarType) => { if(!dateReadOnly){ setCalendarOpen(true); - setActiveCalendar(key); + setCalendarType(calendarType); } else{ setCalendarOpen(false); - setActiveCalendar(''); + } }; const setNewDate = (date: string) => { - if(activceCalendar === 'start'){ + if(calendarType === CalendarType.Start){ setStartDate(date); } - else if(activceCalendar === 'end'){ + else if(calendarType === CalendarType.End){ setEndDate(date); } setCalendarOpen(false); @@ -107,12 +107,13 @@ export const FilterCalendar = ({ type="text" placeholder="날짜 선택" value={ startDate } - readOnly={ true } + onChange={ (e: ChangeEvent) => {} } + readOnly={ dateReadOnly } />