nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

필터

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-12 14:03:12 +09:00
parent 84288188dc
commit a2a3d6af9b
26 changed files with 2813 additions and 1770 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/entities/additional-service/ui/fund-transfer-request-list-wrap.tsx
View File

@@ -4,7 +4,7 @@ export const FundTransferRequestListWrap = () => {
return (
<>
<section className="summary-section">
<section className="summary-section pt-30">
<div className="credit-controls">
<div>
<input

2
src/entities/additional-service/ui/fund-transfer-result-inquiry-wrap.tsx
View File

@@ -4,7 +4,7 @@ export const FundTransferResultInquiryWrap = () => {
return (
<>
<section className="summary-section">
<section className="summary-section pt-30">
<div className="credit-controls">
<div>
<input

2
src/entities/additional-service/ui/settlement-agency-deposit-wrap.tsx
View File

@@ -11,7 +11,7 @@ export const SettlementAgencyDepositWrap = () => {
return (
<>
<div className="summary-section">
<div className="summary-section pt-30">
<div className="credit-controls">
<div>
<input

2
src/entities/additional-service/ui/settlement-agency-manage-wrap.tsx
View File

@@ -14,7 +14,7 @@ export const SettlementAgencyManageWrap = () => {
return (
<>
<section className="summary-section">
<section className="summary-section pt-30">
<div className="credit-controls">
<div>
<input

6
src/entities/common/model/types.ts
View File

@@ -2,6 +2,12 @@ export enum SuccessResult {
SUCCESS = 'SUCCESS',
FAIL = 'FAIL'
};
export enum FilterDateOptions {
Today = 'Today',
Week = 'Week',
Month = 'Month',
Input = 'Input'
};
export interface DefaultRequestPagination {
cursor: string;
size: number;

2
src/entities/settlement/ui/list-wrap.tsx
View File

@@ -92,7 +92,7 @@ export const ListWrap = () => {
return (
<>
<div className="summary-section">
<div className="summary-section pt-30">
<div className="credit-controls">
<div>
<input

2
src/entities/tax/ui/invoice-list-wrap.tsx
View File

@@ -30,7 +30,7 @@ export const InvoiceListWrap = () => {
}, []);
return (
<>
<div className="summary-section">
<div className="summary-section pt-30">
<div className="credit-controls">
<div>
<input

51
src/entities/transaction/model/types.ts
View File

@@ -38,6 +38,30 @@ export enum CashReceiptPurpose {
INCOME_DEDUCTION = 'INCOME_DEDUCTION',
EXPENSE_PROOF = 'EXPENSE_PROOF',
};
export enum BillingSearchType {
ALL = 'ALL',
ORDER_NUMBER = 'ORDER_NUMBER',
TID = 'TID'
};
export enum BillingRequestStatus {
ALL = 'ALL',
IN_PROGRESS = 'IN_PROGRESS',
SUCCESS = 'SUCCESS',
REQUEST_CANCEL = 'REQUEST_CANCEL'
};
export enum BillingProcessResult {
ALL = 'ALL',
SUCCESS = 'SUCCESS',
FAILURE = 'FAILURE'
};
export enum BillingPaymentMethod {
ALL = 'ALL',
CREDIT_CARD = 'CREDIT_CARD',
VIRTUAL_ACCOUNT = 'VIRTUAL_ACCOUNT',
MOBILE_PAYMENT = 'MOBILE_PAYMENT'
};
export interface SortOptionsBoxProps {
sortBy: SortByKeys;
onCliCkToSort: (sortBy: SortByKeys) => void;
@@ -421,6 +445,33 @@ export interface FilterProps {
filterOn: boolean;
setFilterOn: (filterOn: boolean) => void;
};
export interface AllTransactionFilterProps extends FilterProps {
};
export interface CashReceiptFilterProps extends FilterProps {
};
export interface EscrowFilterProps extends FilterProps {
};
export interface BillingFilterProps extends FilterProps {
mid: string;
searchType: BillingSearchType;
searchKeyword: string;
startDate: string;
endDate: string;
requestStatus: BillingRequestStatus;
processResult: BillingProcessResult;
paymentMethod: BillingPaymentMethod;
setMid: (mid: string) => void;
setSearchType: (searchType: BillingSearchType) => void;
setSearchKeyword: (searchKeyword: string) => void;
setStartDate: (startDate: string) => void;
setEndDate: (endDate: string) => void;
setRequestStatus: (requestStatus: BillingRequestStatus) => void;
setProcessResult: (processResult: BillingProcessResult) => void;
setPaymentMethod: (paymentMethod: BillingPaymentMethod) => void;
};
export interface CashReceiptPurposeUpdateParams {
issueNumber: number;

187
src/entities/transaction/ui/filter/all-transaction-filter.tsx Normal file
View File

@@ -0,0 +1,187 @@
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterProps } from '../../model/types';
export const AllTransactionFilter = ({
filterOn,
setFilterOn
}: FilterProps) => {
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
style={{
width: '100%',
height: '100%',
}}
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center">필터</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
className="full-menu-close"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
onClick={ () => onClickToClose() }
/>
</button>
</div>
</div>
<div className="option-list pb-120">
<div className="opt-field">
<div className="opt-label">가맹점</div>
<div className="opt-controls">
<select className="flex-1">
<option>nictest001m</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">주문번호/ID</div>
<div className="opt-controls">
<select className="w-110">
<option>주문번호</option>
<option>ID</option>
</select>
<input
className="flex-1"
type="text"
placeholder=""
/>
</div>
</div>
<div className="opt-field">
<div className="opt-label">조회기간</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">당일</span>
<span className="keyword-tag">일주일</span>
<span className="keyword-tag">1개월</span>
<span className="keyword-tag">직접입력</span>
</div>
<div className="range-row">
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
type="button"
className="date-btn"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
<span className="beetween">~</span>
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
type="button"
className="date-btn"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">요청상태</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">진행중</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">요청취소</span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">저리결과</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">실패</span>
<span
className="keyword-tag"
style={{ visibility: 'hidden' }}
></span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">결제수단</div>
<div className="opt-controls">
<select className="flex-1">
<option>전체</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">거래금액</div>
<div className="opt-controls">
<div className="input-wrapper ">
<input
type="text"
placeholder=""
/>
</div>
<span> ~ </span>
<div className="input-wrapper date">
<input
type="text"
placeholder=""
/>
</div>
</div>
</div>
</div>
<div className="apply-row">
<button className="btn-50 btn-blue flex-1">적용</button>
</div>
</div>
</motion.div>
</>
);
};

337
src/entities/transaction/ui/filter/billing-filter.tsx Normal file
View File

@@ -0,0 +1,337 @@
import { ChangeEvent, useState } from 'react';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
BillingFilterProps,
BillingPaymentMethod,
BillingProcessResult,
BillingRequestStatus,
BillingSearchType
} from '../../model/types';
import { FilterDateOptions } from '@/entities/common/model/types';
import moment from 'moment';
import NiceCalendar from '@/shared/ui/calendar';
export const BillingFilter = ({
filterOn,
setFilterOn,
mid,
searchType,
searchKeyword,
startDate,
endDate,
requestStatus,
processResult,
paymentMethod,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setRequestStatus,
setProcessResult,
setPaymentMethod
}: BillingFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<BillingSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterRequestStatus, setFilterRequestStatus] = useState<BillingRequestStatus>(requestStatus);
const [filterProcessResult, setFilterProcessResult] = useState<BillingProcessResult>(processResult);
const [filterPaymentMethod, setFilterPaymentMethod] = useState<BillingPaymentMethod>(paymentMethod);
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
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)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setRequestStatus(filterRequestStatus);
setProcessResult(filterProcessResult);
setPaymentMethod(filterPaymentMethod);
};
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
style={{
width: '100%',
height: '100%',
}}
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center">필터</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
className="full-menu-close"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
onClick={ () => onClickToClose() }
/>
</button>
</div>
</div>
<div className="option-list pb-120">
<div className="opt-field">
<div className="opt-label">가맹점</div>
<div className="opt-controls">
<select className="flex-1">
<option>nictest001m</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">주문번호/ID</div>
<div className="opt-controls">
<select
className="w-110"
value={ filterSearchType }
onChange={ (e: any) => setFilterSearchType(e.target.value)}
>
<option value={ BillingSearchType.ORDER_NUMBER }>주문번호</option>
<option value={ BillingSearchType.TID }>ID</option>
</select>
<input
className="flex-1"
type="text"
placeholder=""
value={ filterSearchKeyword }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setFilterSearchKeyword(e.target.value)}
/>
</div>
</div>
<div className="opt-field">
<div className="opt-label">조회기간</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Today)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Today) }
>당일</span>
<span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Week)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Week) }
>일주일</span>
<span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Month)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Month) }
>1개월</span>
<span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Input)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Input) }
>직접입력</span>
</div>
<div className="range-row">
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value={ filterStartDate }
readOnly={ true }
/>
<button
type="button"
className="date-btn"
onClick={ () => onClickToOpenCalendar() }
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
<span className="beetween">~</span>
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value={ filterEndDate }
readOnly={ true }
/>
<button
type="button"
className="date-btn"
onClick={ () => onClickToOpenCalendar() }
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">요청상태</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span
className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.ALL)? 'active': ''}` }
onClick={ () => setFilterRequestStatus(BillingRequestStatus.ALL) }
>전체</span>
<span
className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.IN_PROGRESS)? 'active': ''}` }
onClick={ () => setFilterRequestStatus(BillingRequestStatus.IN_PROGRESS) }
>진행중</span>
<span
className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.SUCCESS)? 'active': ''}` }
onClick={ () => setFilterRequestStatus(BillingRequestStatus.SUCCESS) }
>성공</span>
<span
className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.REQUEST_CANCEL)? 'active': ''}` }
onClick={ () => setFilterRequestStatus(BillingRequestStatus.REQUEST_CANCEL) }
>요청취소</span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">처리결과</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span
className={ `keyword-tag ${(filterProcessResult === BillingProcessResult.ALL)? 'active': ''}` }
onClick={ () => setFilterProcessResult(BillingProcessResult.ALL) }
>전체</span>
<span
className={ `keyword-tag ${(filterProcessResult === BillingProcessResult.SUCCESS)? 'active': ''}` }
onClick={ () => setFilterProcessResult(BillingProcessResult.SUCCESS) }
>성공</span>
<span
className={ `keyword-tag ${(filterProcessResult === BillingProcessResult.FAILURE)? 'active': ''}` }
onClick={ () => setFilterProcessResult(BillingProcessResult.FAILURE) }
>실패</span>
<span
className="keyword-tag"
style={{ visibility: 'hidden' }}
></span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">결제수단</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span
className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.ALL)? 'active': ''}` }
onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.ALL) }
>전체</span>
<span
className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.CREDIT_CARD)? 'active': ''}` }
onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.CREDIT_CARD) }
>신용카드</span>
<span
className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.VIRTUAL_ACCOUNT)? 'active': ''}` }
onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.VIRTUAL_ACCOUNT) }
>가상계좌</span>
<span
className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.MOBILE_PAYMENT)? 'active': ''}` }
onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.MOBILE_PAYMENT) }
>휴대폰</span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">거래금액</div>
<div className="opt-controls">
<div className="input-wrapper ">
<input
type="text"
placeholder=""
/>
</div>
<span> ~ </span>
<div className="input-wrapper date">
<input
type="text"
placeholder=""
/>
</div>
</div>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSetFilter() }
>적용</button>
</div>
</div>
<NiceCalendar
calendarOpen={ calendarOpen }
setNewDate={ setNewDate }
></NiceCalendar>
</motion.div>
</>
);
};

187
src/entities/transaction/ui/filter/cash-receipt-filter.tsx Normal file
View File

@@ -0,0 +1,187 @@
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterProps } from '../../model/types';
export const CashReceiptFilter = ({
filterOn,
setFilterOn
}: FilterProps) => {
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
style={{
width: '100%',
height: '100%',
}}
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center">필터</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
className="full-menu-close"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
onClick={ () => onClickToClose() }
/>
</button>
</div>
</div>
<div className="option-list pb-120">
<div className="opt-field">
<div className="opt-label">가맹점</div>
<div className="opt-controls">
<select className="flex-1">
<option>nictest001m</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">주문번호/ID</div>
<div className="opt-controls">
<select className="w-110">
<option>주문번호</option>
<option>ID</option>
</select>
<input
className="flex-1"
type="text"
placeholder=""
/>
</div>
</div>
<div className="opt-field">
<div className="opt-label">조회기간</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">당일</span>
<span className="keyword-tag">일주일</span>
<span className="keyword-tag">1개월</span>
<span className="keyword-tag">직접입력</span>
</div>
<div className="range-row">
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
type="button"
className="date-btn"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
<span className="beetween">~</span>
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
type="button"
className="date-btn"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">요청상태</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">진행중</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">요청취소</span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">저리결과</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">실패</span>
<span
className="keyword-tag"
style={{ visibility: 'hidden' }}
></span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">결제수단</div>
<div className="opt-controls">
<select className="flex-1">
<option>전체</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">거래금액</div>
<div className="opt-controls">
<div className="input-wrapper ">
<input
type="text"
placeholder=""
/>
</div>
<span> ~ </span>
<div className="input-wrapper date">
<input
type="text"
placeholder=""
/>
</div>
</div>
</div>
</div>
<div className="apply-row">
<button className="btn-50 btn-blue flex-1">적용</button>
</div>
</div>
</motion.div>
</>
);
};

187
src/entities/transaction/ui/filter/escrow-filter.tsx Normal file
View File

@@ -0,0 +1,187 @@
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterProps } from '../../model/types';
export const EscrowFilter = ({
filterOn,
setFilterOn
}: FilterProps) => {
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }
variants={ variants }
transition={{ duration: 0.3 }}
style={{
width: '100%',
height: '100%',
}}
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center">필터</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
className="full-menu-close"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
onClick={ () => onClickToClose() }
/>
</button>
</div>
</div>
<div className="option-list pb-120">
<div className="opt-field">
<div className="opt-label">가맹점</div>
<div className="opt-controls">
<select className="flex-1">
<option>nictest001m</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">주문번호/ID</div>
<div className="opt-controls">
<select className="w-110">
<option>주문번호</option>
<option>ID</option>
</select>
<input
className="flex-1"
type="text"
placeholder=""
/>
</div>
</div>
<div className="opt-field">
<div className="opt-label">조회기간</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">당일</span>
<span className="keyword-tag">일주일</span>
<span className="keyword-tag">1개월</span>
<span className="keyword-tag">직접입력</span>
</div>
<div className="range-row">
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
type="button"
className="date-btn"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
<span className="beetween">~</span>
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
type="button"
className="date-btn"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">요청상태</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">진행중</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">요청취소</span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">저리결과</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">실패</span>
<span
className="keyword-tag"
style={{ visibility: 'hidden' }}
></span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">결제수단</div>
<div className="opt-controls">
<select className="flex-1">
<option>전체</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">거래금액</div>
<div className="opt-controls">
<div className="input-wrapper ">
<input
type="text"
placeholder=""
/>
</div>
<span> ~ </span>
<div className="input-wrapper date">
<input
type="text"
placeholder=""
/>
</div>
</div>
</div>
</div>
<div className="apply-row">
<button className="btn-50 btn-blue flex-1">적용</button>
</div>
</div>
</motion.div>
</>
);
};

2
src/pages/account/password/manage-page.tsx
View File

@@ -27,7 +27,7 @@ export const PasswordManagePage = () => {
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="tab-pane pt-46 active">
<AccountTab activeTab={ activeTab }></AccountTab>
<PasswordManageWrap></PasswordManageWrap>
</div>

2
src/pages/account/user/manage-page.tsx
View File

@@ -30,7 +30,7 @@ export const UserManagePage = () => {
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="tab-pane pt-46 active">
<AccountTab activeTab={ activeTab }></AccountTab>
<UserManageWrap></UserManageWrap>
</div>

2
src/pages/additional-service/fund-transfer/request-list-page.tsx
View File

@@ -28,7 +28,7 @@ export const FundTransferRequestListPage = () => {
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="tab-pane pt-46 active">
<FundTransferTab activeTab={ activeTab }></FundTransferTab>
<FundTransferRequestListWrap></FundTransferRequestListWrap>
</div>

2
src/pages/business-member/info/info-page.tsx
View File

@@ -28,7 +28,7 @@ export const InfoPage = () => {
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="tab-pane pt-46 active">
<BusinessMemberTab activeTab={ activeTab }></BusinessMemberTab>
<InfoWrap></InfoWrap>
</div>

2
src/pages/business-member/registration-status/registration-status-page.tsx
View File

@@ -28,7 +28,7 @@ export const RegistrationStatusPage = () => {
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="tab-pane pt-46 active">
<BusinessMemberTab activeTab={ activeTab }></BusinessMemberTab>
<RegistrationStatusWrap></RegistrationStatusWrap>
</div>

2
src/pages/payment/data-notification/data-notification-page.tsx
View File

@@ -28,7 +28,7 @@ export const DataNotificationPage = () => {
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="tab-pane pt-46 active">
<PaymentTab activeTab={ activeTab }></PaymentTab>
<DataNotificationWrap></DataNotificationWrap>
</div>

2
src/pages/payment/info/info-page.tsx
View File

@@ -28,7 +28,7 @@ export const InfoPage = () => {
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="tab-pane pt-46 active">
<PaymentTab activeTab={ activeTab }></PaymentTab>
<InfoWrap></InfoWrap>
</div>

2
src/pages/settlement/calendar/calendar-page.tsx
View File

@@ -28,7 +28,7 @@ export const CalendarPage = () => {
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="tab-pane pt-46 active">
<SettlementTab activeTab={ activeTab }></SettlementTab>
<CalendarWrap></CalendarWrap>
</div>

2
src/pages/settlement/list/list-page.tsx
View File

@@ -31,7 +31,7 @@ export const ListPage = () => {
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="tab-pane pt-46 active">
<SettlementTab activeTab={ activeTab }></SettlementTab>
<ListWrap></ListWrap>
</div>

45
src/pages/transaction/billing/list-page.tsx
View File

@@ -5,11 +5,11 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { BillingList } from '@/entities/transaction/ui/billing-list';
import { BillingListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
import { BillingListItem, TransactionCategory, SortByKeys, BillingRequestStatus, BillingProcessResult, BillingPaymentMethod, BillingSearchType } from '@/entities/transaction/model/types';
import { useBillingListMutation } from '@/entities/transaction/api/use-billing-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 { BillingFilter } from '@/entities/transaction/ui/filter/billing-filter';
import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
import { HeaderType } from '@/entities/common/model/types';
import {
@@ -35,8 +35,15 @@ export const BillingListPage = () => {
const [listItems, setListItems] = useState({});
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
const [mid, setMid] = useState<string>('nictest001m');
const [searchType, setSearchType] = useState<BillingSearchType>(BillingSearchType.ALL);
const [searchKeyword, setSearchKeyword] = useState<string>('');
// 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 [requestStatus, setRequestStatus] = useState<BillingRequestStatus>(BillingRequestStatus.ALL);
const [processResult, setProcessResult] = useState<BillingProcessResult>(BillingProcessResult.ALL);
const [paymentMethod, setPaymentMethod] = useState<BillingPaymentMethod>(BillingPaymentMethod.ALL);
useSetHeaderTitle('빌링');
useSetHeaderType(HeaderType.LeftArrow);
@@ -55,14 +62,14 @@ export const BillingListPage = () => {
pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
setPageParam(pageParam);
let listParams = {
mid: 'nictest001m',
searchType: 'ALL',
searchKeyword: '',
mid: mid,
searchType: searchType,
searchKeyword: searchKeyword,
startDate: startDate,
endDate: endDate,
requestStatus: 'ALL',
processResult: 'ALL',
paymentMethod: 'ALL',
requestStatus: requestStatus,
processResult: processResult,
paymentMethod: paymentMethod,
pagination: pageParam
};
@@ -170,10 +177,26 @@ export const BillingListPage = () => {
</div>
</div>
</main>
<Filter
<BillingFilter
filterOn={ filterOn }
setFilterOn={ setFilterOn }
></Filter>
mid={ mid }
searchType={ searchType }
searchKeyword={searchKeyword }
startDate={ startDate }
endDate={ endDate }
requestStatus={ requestStatus }
processResult={ processResult }
paymentMethod={ paymentMethod }
setMid={ setMid }
setSearchType={ setSearchType }
setSearchKeyword={ setSearchKeyword }
setStartDate={ setStartDate }
setEndDate={ setEndDate }
setRequestStatus={ setRequestStatus }
setProcessResult={ setProcessResult }
setPaymentMethod={ setPaymentMethod }
></BillingFilter>
</>
);
};

2
src/pages/transaction/escrow/detail-page.tsx
View File

@@ -1,8 +1,6 @@
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { PATHS } from '@/shared/constants/paths';
import { Dialog } from '@/shared/ui/dialogs/dialog';
import { overlay } from 'overlay-kit';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useEscrowDetailMutation } from '@/entities/transaction/api/use-escrow-detail-mutation';
import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';

43
src/shared/ui/calendar/index.tsx Normal file
View File

@@ -0,0 +1,43 @@
import moment from 'moment';
import styled from "styled-components";
import { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
const NiceCalendar = ({
setNewDate
}: any) => {
const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
const [isOpen, setIsOpen] = useState<boolean>(false);
const onchangeToDate = (selectedDate: any) => {
setNewDate(selectedDate)
setIsOpen(false);
};
return (
<>
<CalendarContainer>
<CalendarWrapper isOpen={isOpen}>
<Calendar
onChange={ onchangeToDate }
value={ calendarDate }
></Calendar>
</CalendarWrapper>
</CalendarContainer>
</>
);
};
const CalendarContainer = styled.div`
position: relative;
`;
const CalendarWrapper: any = styled.div`
z-index: 11;
position: absolute;
top: 100%;
left: 0;
display: ${(props: any) => ((props.isOpen)? 'block': 'none')};
`;
export default NiceCalendar;