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

65
package.json
View File

@@ -21,62 +21,63 @@
"@headlessui/react": "^2.2.7", "@headlessui/react": "^2.2.7",
"@lottiefiles/react-lottie-player": "^3.6.0", "@lottiefiles/react-lottie-player": "^3.6.0",
"@lukemorales/query-key-factory": "^1.3.4", "@lukemorales/query-key-factory": "^1.3.4",
"@mui/material": "^7.3.1", "@mui/material": "^7.3.2",
"@remix-run/router": "^1.23.0", "@remix-run/router": "^1.23.0",
"@rollup/plugin-node-resolve": "^16.0.1", "@rollup/plugin-node-resolve": "^16.0.1",
"@sentry/react": "^10.4.0", "@sentry/react": "^10.11.0",
"@sentry/vite-plugin": "^4.1.0", "@sentry/vite-plugin": "^4.3.0",
"@tanstack/react-query": "^5.84.2", "@tanstack/react-query": "^5.87.4",
"@tanstack/react-query-devtools": "^5.84.2", "@tanstack/react-query-devtools": "^5.87.4",
"@tanstack/react-router": "^1.131.7", "@tanstack/react-router": "^1.131.41",
"@tanstack/react-router-devtools": "^1.131.7", "@tanstack/react-router-devtools": "^1.131.41",
"@tanstack/router-devtools": "^1.131.7", "@tanstack/router-devtools": "^1.131.41",
"@testing-library/jest-dom": "^6.6.4", "@testing-library/jest-dom": "^6.8.0",
"@testing-library/react": "^16.3.0", "@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^14.6.1", "@testing-library/user-event": "^14.6.1",
"@types/jest": "^30.0.0", "@types/jest": "^30.0.0",
"@types/lodash-es": "^4.17.12", "@types/lodash-es": "^4.17.12",
"@types/node": "^24.2.1", "@types/node": "^24.3.1",
"@vitejs/plugin-legacy": "^7.2.1", "@vitejs/plugin-legacy": "^7.2.1",
"@vitejs/plugin-react-swc": "^3.11.0", "@vitejs/plugin-react-swc": "^3.11.0",
"@webview-bridge/react": "^1.7.8", "@webview-bridge/react": "^1.7.8",
"@webview-bridge/react-native": "^1.7.8", "@webview-bridge/react-native": "^1.7.8",
"@webview-bridge/web": "^1.7.8", "@webview-bridge/web": "^1.7.8",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.11.0", "axios": "^1.12.0",
"babel-plugin-styled-components": "^2.1.4", "babel-plugin-styled-components": "^2.1.4",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"compare-versions": "^6.1.1", "compare-versions": "^6.1.1",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"dotenv": "^17.2.1", "dotenv": "^17.2.2",
"env-cmd": "^10.1.0", "env-cmd": "^10.1.0",
"eslint-webpack-plugin": "^5.0.2", "eslint-webpack-plugin": "^5.0.2",
"express": "^5.1.0", "express": "^5.1.0",
"framer-motion": "^12.23.12", "framer-motion": "^12.23.12",
"glob": "^11.0.3", "glob": "^11.0.3",
"http-proxy-middleware": "^3.0.5", "http-proxy-middleware": "^3.0.5",
"i18next": "^25.3.4", "i18next": "^25.5.2",
"i18next-browser-languagedetector": "^8.2.0", "i18next-browser-languagedetector": "^8.2.0",
"immer": "^10.1.1", "immer": "^10.1.3",
"jsdom": "^26.1.0", "jsdom": "^26.1.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"module-resolver": "^1.0.0", "module-resolver": "^1.0.0",
"moment": "^2.30.1", "moment": "^2.30.1",
"overlay-kit": "^1.8.4", "overlay-kit": "^1.8.5",
"path": "^0.12.7", "path": "^0.12.7",
"pnpm": "^10.14.0", "pnpm": "^10.15.1",
"prettier": "^3.6.2", "prettier": "^3.6.2",
"react": "^19.1.1", "react": "^19.1.1",
"react-calendar": "^6.0.0",
"react-cookie": "^8.0.1", "react-cookie": "^8.0.1",
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-error-boundary": "^6.0.0", "react-error-boundary": "^6.0.0",
"react-hook-form": "^7.62.0", "react-hook-form": "^7.62.0",
"react-i18next": "^15.6.1", "react-i18next": "^15.7.3",
"react-intersection-observer": "^9.16.0", "react-intersection-observer": "^9.16.0",
"react-number-format": "^5.4.4", "react-number-format": "^5.4.4",
"react-player": "^3.3.1", "react-player": "^3.3.2",
"react-router": "^7.8.0", "react-router": "^7.8.2",
"react-router-dom": "^7.8.0", "react-router-dom": "^7.8.2",
"react-tabs": "^6.1.0", "react-tabs": "^6.1.0",
"react-toastify": "^11.0.5", "react-toastify": "^11.0.5",
"react-tooltip": "^5.29.1", "react-tooltip": "^5.29.1",
@@ -88,33 +89,33 @@
"source-map-loader": "^5.0.0", "source-map-loader": "^5.0.0",
"styled-components": "^6.1.19", "styled-components": "^6.1.19",
"swiper": "^11.2.10", "swiper": "^11.2.10",
"ts-loader": "^9.5.2", "ts-loader": "^9.5.4",
"tsconfig-paths-webpack-plugin": "^4.2.0", "tsconfig-paths-webpack-plugin": "^4.2.0",
"use-local-storage-state": "^19.5.0", "use-local-storage-state": "^19.5.0",
"vite-plugin-checker": "^0.10.2", "vite-plugin-checker": "^0.10.3",
"vite-tsconfig-paths": "^5.1.4", "vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4", "vitest": "^3.2.4",
"zustand": "^5.0.7" "zustand": "^5.0.8"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.33.0", "@eslint/js": "^9.35.0",
"@tanstack/router-plugin": "^1.131.7", "@tanstack/router-plugin": "^1.131.41",
"@types/react": "^19.1.10", "@types/react": "^19.1.12",
"@types/react-dom": "^19.1.7", "@types/react-dom": "^19.1.9",
"@typescript-eslint/eslint-plugin": "^8.39.1", "@typescript-eslint/eslint-plugin": "^8.43.0",
"@typescript-eslint/parser": "^8.39.1", "@typescript-eslint/parser": "^8.43.0",
"@vitejs/plugin-react": "^4.7.0", "@vitejs/plugin-react": "^4.7.0",
"autoprefixer": "^10.4.21", "autoprefixer": "^10.4.21",
"eslint": "^9.33.0", "eslint": "^9.35.0",
"eslint-plugin-react": "^7.37.5", "eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20", "eslint-plugin-react-refresh": "^0.4.20",
"jiti": "^2.5.1", "jiti": "^2.5.1",
"openapi-typescript": "^7.9.1", "openapi-typescript": "^7.9.1",
"postcss": "^8.5.6", "postcss": "^8.5.6",
"sass-embedded": "^1.90.0", "sass-embedded": "^1.92.1",
"tailwindcss": "^3.4.17", "tailwindcss": "^3.4.17",
"typescript": "^5.9.2", "typescript": "^5.9.2",
"vite": "^7.1.2" "vite": "^7.1.5"
} }
} }

3443
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -38,6 +38,30 @@ export enum CashReceiptPurpose {
INCOME_DEDUCTION = 'INCOME_DEDUCTION', INCOME_DEDUCTION = 'INCOME_DEDUCTION',
EXPENSE_PROOF = 'EXPENSE_PROOF', 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 { export interface SortOptionsBoxProps {
sortBy: SortByKeys; sortBy: SortByKeys;
onCliCkToSort: (sortBy: SortByKeys) => void; onCliCkToSort: (sortBy: SortByKeys) => void;
@@ -421,6 +445,33 @@ export interface FilterProps {
filterOn: boolean; filterOn: boolean;
setFilterOn: (filterOn: boolean) => void; 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 { export interface CashReceiptPurposeUpdateParams {
issueNumber: number; 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> <main>
<div className="tab-content"> <div className="tab-content">
<div className="tab-pane sub active"> <div className="tab-pane pt-46 active">
<AccountTab activeTab={ activeTab }></AccountTab> <AccountTab activeTab={ activeTab }></AccountTab>
<PasswordManageWrap></PasswordManageWrap> <PasswordManageWrap></PasswordManageWrap>
</div> </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -31,7 +31,7 @@ export const ListPage = () => {
<> <>
<main> <main>
<div className="tab-content"> <div className="tab-content">
<div className="tab-pane sub active"> <div className="tab-pane pt-46 active">
<SettlementTab activeTab={ activeTab }></SettlementTab> <SettlementTab activeTab={ activeTab }></SettlementTab>
<ListWrap></ListWrap> <ListWrap></ListWrap>
</div> </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 { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { BillingList } from '@/entities/transaction/ui/billing-list'; 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 { useBillingListMutation } from '@/entities/transaction/api/use-billing-list-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation'; import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants'; 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 { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
import { HeaderType } from '@/entities/common/model/types'; import { HeaderType } from '@/entities/common/model/types';
import { import {
@@ -35,8 +35,15 @@ export const BillingListPage = () => {
const [listItems, setListItems] = useState({}); const [listItems, setListItems] = useState({});
const [filterOn, setFilterOn] = useState<boolean>(false); const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); 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 [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('빌링'); useSetHeaderTitle('빌링');
useSetHeaderType(HeaderType.LeftArrow); useSetHeaderType(HeaderType.LeftArrow);
@@ -55,14 +62,14 @@ export const BillingListPage = () => {
pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy; pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
setPageParam(pageParam); setPageParam(pageParam);
let listParams = { let listParams = {
mid: 'nictest001m', mid: mid,
searchType: 'ALL', searchType: searchType,
searchKeyword: '', searchKeyword: searchKeyword,
startDate: startDate, startDate: startDate,
endDate: endDate, endDate: endDate,
requestStatus: 'ALL', requestStatus: requestStatus,
processResult: 'ALL', processResult: processResult,
paymentMethod: 'ALL', paymentMethod: paymentMethod,
pagination: pageParam pagination: pageParam
}; };
@@ -170,10 +177,26 @@ export const BillingListPage = () => {
</div> </div>
</div> </div>
</main> </main>
<Filter <BillingFilter
filterOn={ filterOn } filterOn={ filterOn }
setFilterOn={ setFilterOn } 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 { useEffect, useState } from 'react';
import { useLocation } from 'react-router'; import { useLocation } from 'react-router';
import { PATHS } from '@/shared/constants/paths'; 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 { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useEscrowDetailMutation } from '@/entities/transaction/api/use-escrow-detail-mutation'; import { useEscrowDetailMutation } from '@/entities/transaction/api/use-escrow-detail-mutation';
import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap'; 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;