Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web
This commit is contained in:
Jay Sheen
65
package.json
65
package.json
@@ -21,62 +21,63 @@
|
||||
"@headlessui/react": "^2.2.7",
|
||||
"@lottiefiles/react-lottie-player": "^3.6.0",
|
||||
"@lukemorales/query-key-factory": "^1.3.4",
|
||||
"@mui/material": "^7.3.1",
|
||||
"@mui/material": "^7.3.2",
|
||||
"@remix-run/router": "^1.23.0",
|
||||
"@rollup/plugin-node-resolve": "^16.0.1",
|
||||
"@sentry/react": "^10.4.0",
|
||||
"@sentry/vite-plugin": "^4.1.0",
|
||||
"@tanstack/react-query": "^5.84.2",
|
||||
"@tanstack/react-query-devtools": "^5.84.2",
|
||||
"@tanstack/react-router": "^1.131.7",
|
||||
"@tanstack/react-router-devtools": "^1.131.7",
|
||||
"@tanstack/router-devtools": "^1.131.7",
|
||||
"@testing-library/jest-dom": "^6.6.4",
|
||||
"@sentry/react": "^10.11.0",
|
||||
"@sentry/vite-plugin": "^4.3.0",
|
||||
"@tanstack/react-query": "^5.87.4",
|
||||
"@tanstack/react-query-devtools": "^5.87.4",
|
||||
"@tanstack/react-router": "^1.131.41",
|
||||
"@tanstack/react-router-devtools": "^1.131.41",
|
||||
"@tanstack/router-devtools": "^1.131.41",
|
||||
"@testing-library/jest-dom": "^6.8.0",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/jest": "^30.0.0",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/node": "^24.2.1",
|
||||
"@types/node": "^24.3.1",
|
||||
"@vitejs/plugin-legacy": "^7.2.1",
|
||||
"@vitejs/plugin-react-swc": "^3.11.0",
|
||||
"@webview-bridge/react": "^1.7.8",
|
||||
"@webview-bridge/react-native": "^1.7.8",
|
||||
"@webview-bridge/web": "^1.7.8",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.11.0",
|
||||
"axios": "^1.12.0",
|
||||
"babel-plugin-styled-components": "^2.1.4",
|
||||
"clsx": "^2.1.1",
|
||||
"compare-versions": "^6.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"dotenv": "^17.2.1",
|
||||
"dotenv": "^17.2.2",
|
||||
"env-cmd": "^10.1.0",
|
||||
"eslint-webpack-plugin": "^5.0.2",
|
||||
"express": "^5.1.0",
|
||||
"framer-motion": "^12.23.12",
|
||||
"glob": "^11.0.3",
|
||||
"http-proxy-middleware": "^3.0.5",
|
||||
"i18next": "^25.3.4",
|
||||
"i18next": "^25.5.2",
|
||||
"i18next-browser-languagedetector": "^8.2.0",
|
||||
"immer": "^10.1.1",
|
||||
"immer": "^10.1.3",
|
||||
"jsdom": "^26.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"module-resolver": "^1.0.0",
|
||||
"moment": "^2.30.1",
|
||||
"overlay-kit": "^1.8.4",
|
||||
"overlay-kit": "^1.8.5",
|
||||
"path": "^0.12.7",
|
||||
"pnpm": "^10.14.0",
|
||||
"pnpm": "^10.15.1",
|
||||
"prettier": "^3.6.2",
|
||||
"react": "^19.1.1",
|
||||
"react-calendar": "^6.0.0",
|
||||
"react-cookie": "^8.0.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-error-boundary": "^6.0.0",
|
||||
"react-hook-form": "^7.62.0",
|
||||
"react-i18next": "^15.6.1",
|
||||
"react-i18next": "^15.7.3",
|
||||
"react-intersection-observer": "^9.16.0",
|
||||
"react-number-format": "^5.4.4",
|
||||
"react-player": "^3.3.1",
|
||||
"react-router": "^7.8.0",
|
||||
"react-router-dom": "^7.8.0",
|
||||
"react-player": "^3.3.2",
|
||||
"react-router": "^7.8.2",
|
||||
"react-router-dom": "^7.8.2",
|
||||
"react-tabs": "^6.1.0",
|
||||
"react-toastify": "^11.0.5",
|
||||
"react-tooltip": "^5.29.1",
|
||||
@@ -88,33 +89,33 @@
|
||||
"source-map-loader": "^5.0.0",
|
||||
"styled-components": "^6.1.19",
|
||||
"swiper": "^11.2.10",
|
||||
"ts-loader": "^9.5.2",
|
||||
"ts-loader": "^9.5.4",
|
||||
"tsconfig-paths-webpack-plugin": "^4.2.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",
|
||||
"vitest": "^3.2.4",
|
||||
"zustand": "^5.0.7"
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.33.0",
|
||||
"@tanstack/router-plugin": "^1.131.7",
|
||||
"@types/react": "^19.1.10",
|
||||
"@types/react-dom": "^19.1.7",
|
||||
"@typescript-eslint/eslint-plugin": "^8.39.1",
|
||||
"@typescript-eslint/parser": "^8.39.1",
|
||||
"@eslint/js": "^9.35.0",
|
||||
"@tanstack/router-plugin": "^1.131.41",
|
||||
"@types/react": "^19.1.12",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@typescript-eslint/eslint-plugin": "^8.43.0",
|
||||
"@typescript-eslint/parser": "^8.43.0",
|
||||
"@vitejs/plugin-react": "^4.7.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.33.0",
|
||||
"eslint": "^9.35.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"jiti": "^2.5.1",
|
||||
"openapi-typescript": "^7.9.1",
|
||||
"postcss": "^8.5.6",
|
||||
"sass-embedded": "^1.90.0",
|
||||
"sass-embedded": "^1.92.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.2"
|
||||
"vite": "^7.1.5"
|
||||
}
|
||||
}
|
||||
|
||||
3443
pnpm-lock.yaml
generated
3443
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -5,10 +5,12 @@ import { App } from './app';
|
||||
import { initAxios } from '@/shared/configs/axios';
|
||||
import { initSentry } from '@/shared/configs/sentry';
|
||||
import { AppProvider } from './providers/app-provider';
|
||||
// import appBridge from '@/shared/lib/appBridge';
|
||||
|
||||
const initApp = async () => {
|
||||
initAxios();
|
||||
initSentry();
|
||||
// appBridge.sendMessage('login')
|
||||
};
|
||||
|
||||
(async () => {
|
||||
|
||||
@@ -17,7 +17,7 @@ export const extensionKeyinApply = (params: ExtensionKeyinApplyParams) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const useExtensionKeyinListMutation = (options?: UseMutationOptions<ExtensionKeyinApplyResponse, CBDCAxiosError, ExtensionKeyinApplyParams>) => {
|
||||
export const useExtensionKeyinApplyMutation = (options?: UseMutationOptions<ExtensionKeyinApplyResponse, CBDCAxiosError, ExtensionKeyinApplyParams>) => {
|
||||
const mutation = useMutation<ExtensionKeyinApplyResponse, CBDCAxiosError, ExtensionKeyinApplyParams>({
|
||||
...options,
|
||||
mutationFn: (params: ExtensionKeyinApplyParams) => extensionKeyinApply(params),
|
||||
|
||||
@@ -23,6 +23,16 @@ export enum SortByKeys {
|
||||
New = 'New',
|
||||
Amount = 'Amount',
|
||||
};
|
||||
export enum AccountHolderSearchType {
|
||||
ALL = 'ALL',
|
||||
ACCOUNT_HOLDER = 'ACCOUNT_HOLDER',
|
||||
ACCOUNT_NUMBER = 'ACCOUNT_NUMBER'
|
||||
};
|
||||
export enum AccountHolderSearchProcessResult {
|
||||
ALL = 'ALL',
|
||||
SUCCESS = 'SUCCESS',
|
||||
FAILURE = 'FAILURE'
|
||||
};
|
||||
export interface SortOptionsBoxProps {
|
||||
sortBy: SortByKeys;
|
||||
onClickToSort: (sortBy: SortByKeys) => void;
|
||||
@@ -232,7 +242,7 @@ export interface ExtensionAlimtalkSettingSaveResponse {
|
||||
|
||||
};
|
||||
export interface ExtensionAlimtalkSettingDetailParams extends ExtensionRequestParams {
|
||||
|
||||
|
||||
};
|
||||
export interface ExtensionAlimtalkSettingDetailItem {
|
||||
sendMerchantInfo: SendMerchantInfoItem;
|
||||
@@ -311,10 +321,34 @@ export interface SettlementAgencyBottomAgreeProps {
|
||||
bottomAgreeOn: boolean;
|
||||
setBottomAgreeOn: (bottomAgreeOn: boolean) => void;
|
||||
};
|
||||
export interface LinkPaymentFilterProps {
|
||||
filterOn: boolean;
|
||||
setFilterOn: (filterOn: boolean) => void;
|
||||
/**
|
||||
* FilterProps
|
||||
*/
|
||||
export interface FilterProps {
|
||||
filterOn: boolean;
|
||||
setFilterOn: (filterOn: boolean) => void;
|
||||
};
|
||||
|
||||
export interface AccountHolderSearchFilterProps extends FilterProps {
|
||||
mid: string;
|
||||
searchType: AccountHolderSearchType;
|
||||
searchKeyword: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
bank: string;
|
||||
processResult: AccountHolderSearchProcessResult;
|
||||
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;
|
||||
}
|
||||
export interface LinkPaymentFilterProps extends FilterProps {
|
||||
|
||||
};
|
||||
|
||||
export enum DetailInfoSectionKeys {
|
||||
Payment = 'Payment',
|
||||
Deets = 'Deets'
|
||||
|
||||
@@ -0,0 +1,210 @@
|
||||
import moment from 'moment';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import {
|
||||
AccountHolderSearchType,
|
||||
AccountHolderSearchFilterProps,
|
||||
AccountHolderSearchProcessResult
|
||||
} from '../../model/types';
|
||||
import { FilterDateOptions } from '@/entities/common/model/types';
|
||||
import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
|
||||
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
|
||||
|
||||
export const AccountHolderSearchFilter = ({
|
||||
filterOn,
|
||||
setFilterOn,
|
||||
mid,
|
||||
searchType,
|
||||
searchKeyword,
|
||||
startDate,
|
||||
endDate,
|
||||
bank,
|
||||
processResult,
|
||||
setMid,
|
||||
setSearchType,
|
||||
setSearchKeyword,
|
||||
setStartDate,
|
||||
setEndDate,
|
||||
setBank,
|
||||
setProcessResult
|
||||
}: AccountHolderSearchFilterProps) => {
|
||||
|
||||
const [filterMid, setFilterMid] = useState<string>(mid);
|
||||
const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchType>(searchType);
|
||||
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
|
||||
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
|
||||
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
|
||||
const [filterBank, setFilterBank] = useState<string>(bank)
|
||||
const [filterProcessResult, setFilterProcessResult] = useState<AccountHolderSearchProcessResult>(processResult);
|
||||
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);
|
||||
setBank(filterBank);
|
||||
setProcessResult(filterProcessResult);
|
||||
};
|
||||
|
||||
let processResultBtnGroup = [
|
||||
{ name: '전체', value: AccountHolderSearchProcessResult.ALL },
|
||||
{ name: '성공', value: AccountHolderSearchProcessResult.SUCCESS },
|
||||
{ name: '실패', value: AccountHolderSearchProcessResult.FAILURE },
|
||||
];
|
||||
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 pt-16">
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">가맹점</div>
|
||||
<div className="opt-controls">
|
||||
<select
|
||||
className="flex-1"
|
||||
value={filterMid}
|
||||
onChange={(e: any) => setFilterMid(e.target.value)}
|
||||
>
|
||||
<option>nictest001m</option>
|
||||
<option>nictest002m</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">예금주/계좌번호</div>
|
||||
<div className="opt-controls">
|
||||
<select
|
||||
className="w-110"
|
||||
value={filterSearchType}
|
||||
onChange={(e: any) => setFilterSearchType(e.target.value)}
|
||||
>
|
||||
<option value={AccountHolderSearchType.ACCOUNT_HOLDER}>예금주</option>
|
||||
<option value={AccountHolderSearchType.ACCOUNT_NUMBER}>계좌번호</option>
|
||||
</select>
|
||||
<input
|
||||
className="flex-1"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={filterSearchKeyword}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterSearchKeyword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<FilterCalendar
|
||||
startDate={filterStartDate}
|
||||
endDate={filterEndDate}
|
||||
setStartDate={setFilterStartDate}
|
||||
setEndDate={setFilterEndDate}
|
||||
></FilterCalendar>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">은행</div>
|
||||
<div className="opt-controls">
|
||||
<select
|
||||
className="flex-1"
|
||||
value={filterBank}
|
||||
onChange={(e: any) => setFilterBank(e.target.value)}
|
||||
>
|
||||
<option>선택</option>
|
||||
<option>우리은행</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FilterButtonGroups
|
||||
title='조회결과'
|
||||
activeValue={filterProcessResult}
|
||||
btnGroups={processResultBtnGroup}
|
||||
setter={setFilterProcessResult}
|
||||
></FilterButtonGroups>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToSetFilter()}
|
||||
>적용</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -4,7 +4,7 @@ export const FundTransferRequestListWrap = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="summary-section">
|
||||
<section className="summary-section pt-30">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
|
||||
@@ -4,7 +4,7 @@ export const FundTransferResultInquiryWrap = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="summary-section">
|
||||
<section className="summary-section pt-30">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
|
||||
@@ -36,7 +36,7 @@ export const LinkPaymentStep1 = () => {
|
||||
<div className="issue-row gap-10">
|
||||
<div className="issue-label">가맹점</div>
|
||||
<div className="issue-field">
|
||||
<select
|
||||
<select
|
||||
className="wid-100"
|
||||
value={formData.merchant}
|
||||
onChange={(e) => handleInputChange('merchant', e.target.value)}
|
||||
@@ -50,19 +50,19 @@ export const LinkPaymentStep1 = () => {
|
||||
<div className="issue-label">발송 수단</div>
|
||||
<div className="issue-field">
|
||||
<div className="chip-row">
|
||||
<span
|
||||
<span
|
||||
className={`keyword-tag flex-1 ${selectedPaymentMethod === 'SMS' ? 'active' : ''}`}
|
||||
onClick={() => handlePaymentMethodChange('SMS')}
|
||||
>
|
||||
SMS
|
||||
</span>
|
||||
<span
|
||||
<span
|
||||
className={`keyword-tag flex-1 ${selectedPaymentMethod === '이메일' ? 'active' : ''}`}
|
||||
onClick={() => handlePaymentMethodChange('이메일')}
|
||||
>
|
||||
이메일
|
||||
</span>
|
||||
<span
|
||||
<span
|
||||
className={`keyword-tag flex-1 ${selectedPaymentMethod === '카카오' ? 'active' : ''}`}
|
||||
onClick={() => handlePaymentMethodChange('카카오')}
|
||||
>
|
||||
@@ -75,9 +75,9 @@ export const LinkPaymentStep1 = () => {
|
||||
<div className="issue-row gap-10">
|
||||
<div className="issue-label">상품명</div>
|
||||
<div className="issue-field">
|
||||
<input
|
||||
type="text"
|
||||
placeholder=""
|
||||
<input
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={formData.productName}
|
||||
onChange={(e) => handleInputChange('productName', e.target.value)}
|
||||
/>
|
||||
@@ -87,9 +87,9 @@ export const LinkPaymentStep1 = () => {
|
||||
<div className="issue-row gap-10">
|
||||
<div className="issue-label">상품가격</div>
|
||||
<div className="issue-field">
|
||||
<input
|
||||
type="text"
|
||||
placeholder=""
|
||||
<input
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={formData.productPrice}
|
||||
onChange={(e) => handleInputChange('productPrice', e.target.value)}
|
||||
/>
|
||||
@@ -99,9 +99,9 @@ export const LinkPaymentStep1 = () => {
|
||||
<div className="issue-row gap-10">
|
||||
<div className="issue-label">상품 주문번호</div>
|
||||
<div className="issue-field">
|
||||
<input
|
||||
type="text"
|
||||
placeholder=""
|
||||
<input
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={formData.orderNumber}
|
||||
onChange={(e) => handleInputChange('orderNumber', e.target.value)}
|
||||
/>
|
||||
@@ -113,15 +113,15 @@ export const LinkPaymentStep1 = () => {
|
||||
<div className="issue-field">
|
||||
<div className="link-apply-date">
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
type="text"
|
||||
value={formData.validDate}
|
||||
<input
|
||||
type="text"
|
||||
value={formData.validDate}
|
||||
className="date-input"
|
||||
onChange={(e) => handleInputChange('validDate', e.target.value)}
|
||||
/>
|
||||
<button type="button" className="date-btn">
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_date.svg'}
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_date.svg'}
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
|
||||
@@ -78,7 +78,7 @@ export const LinkPaymentDispatchListWrap = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="summary-section">
|
||||
<section className="summary-section pt-30">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
|
||||
@@ -64,7 +64,7 @@ export const LinkPaymentPendingSendWrap = () => {
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<section className="summary-section">
|
||||
<section className="summary-section pt-30">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
|
||||
@@ -11,7 +11,7 @@ export const SettlementAgencyDepositWrap = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="summary-section">
|
||||
<div className="summary-section pt-30">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
|
||||
@@ -14,7 +14,7 @@ export const SettlementAgencyManageWrap = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="summary-section">
|
||||
<section className="summary-section pt-30">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
|
||||
@@ -1,7 +1,19 @@
|
||||
import {
|
||||
BillingPaymentMethod,
|
||||
BillingProcessResult,
|
||||
BillingRequestStatus
|
||||
} from '@/entities/transaction/model/types';
|
||||
|
||||
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;
|
||||
@@ -21,6 +33,23 @@ export enum HeaderType {
|
||||
LeftArrow = 'LeftArrow',
|
||||
RightClose = 'RightClose',
|
||||
};
|
||||
export interface FilterRangeAmountProps {
|
||||
title?: string;
|
||||
minAmount?: number | string;
|
||||
maxAmount?: number | string;
|
||||
setMinAmount: (minAmount: number | string) => void;
|
||||
setMaxAmount: (maxAmount: number | string) => void;
|
||||
};
|
||||
export interface FilterButtonGroupsProps {
|
||||
title: string;
|
||||
activeValue?: string;
|
||||
btnGroups?: Array<ButtonItemProp>
|
||||
setter: (value: any) => void;
|
||||
};
|
||||
export interface ButtonItemProp {
|
||||
name?: string;
|
||||
value?: string;
|
||||
};
|
||||
export interface HeaderNavigationProps {
|
||||
onBack?: (() => void) | undefined;
|
||||
headerTitle?: string;
|
||||
|
||||
@@ -92,7 +92,7 @@ export const ListWrap = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="summary-section">
|
||||
<div className="summary-section pt-30">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
|
||||
@@ -30,7 +30,7 @@ export const InvoiceListWrap = () => {
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className="summary-section">
|
||||
<div className="summary-section pt-30">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
|
||||
@@ -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,37 @@ 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;
|
||||
minAmount?: number | string;
|
||||
maxAmount?: number | string;
|
||||
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;
|
||||
setMinAmount: (minAmount: string | number) => void;
|
||||
setMaxAmount: (maxAmount: string | number) => void;
|
||||
};
|
||||
|
||||
export interface CashReceiptPurposeUpdateParams {
|
||||
issueNumber: number;
|
||||
|
||||
187
src/entities/transaction/ui/filter/all-transaction-filter.tsx
Normal file
187
src/entities/transaction/ui/filter/all-transaction-filter.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
201
src/entities/transaction/ui/filter/billing-filter.tsx
Normal file
201
src/entities/transaction/ui/filter/billing-filter.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import moment from 'moment';
|
||||
import { useEffect } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { FilterSelect } from '@/shared/ui/filter/select';
|
||||
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
|
||||
import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
|
||||
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
|
||||
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
|
||||
import {
|
||||
BillingFilterProps,
|
||||
BillingPaymentMethod,
|
||||
BillingProcessResult,
|
||||
BillingRequestStatus,
|
||||
BillingSearchType
|
||||
} from '../../model/types';
|
||||
|
||||
export const BillingFilter = ({
|
||||
filterOn,
|
||||
setFilterOn,
|
||||
mid,
|
||||
searchType,
|
||||
searchKeyword,
|
||||
startDate,
|
||||
endDate,
|
||||
requestStatus,
|
||||
processResult,
|
||||
paymentMethod,
|
||||
minAmount,
|
||||
maxAmount,
|
||||
setMid,
|
||||
setSearchType,
|
||||
setSearchKeyword,
|
||||
setStartDate,
|
||||
setEndDate,
|
||||
setRequestStatus,
|
||||
setProcessResult,
|
||||
setPaymentMethod,
|
||||
setMinAmount,
|
||||
setMaxAmount
|
||||
}: 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 [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
|
||||
const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
|
||||
|
||||
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);
|
||||
setRequestStatus(filterRequestStatus);
|
||||
setProcessResult(filterProcessResult);
|
||||
setPaymentMethod(filterPaymentMethod);
|
||||
onClickToClose();
|
||||
};
|
||||
let MidOptions = [
|
||||
{name: 'nictest001m', value: 'nictest001m'}
|
||||
];
|
||||
let SearchTypeOptions = [
|
||||
{name: '주문번호', value: BillingSearchType.ORDER_NUMBER },
|
||||
{name: 'TID', value: BillingSearchType.TID }
|
||||
];
|
||||
|
||||
let requestStatusBtnGroup = [
|
||||
{name: '전체', value: BillingRequestStatus.ALL},
|
||||
{name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
|
||||
{name: '성공', value: BillingRequestStatus.SUCCESS},
|
||||
{name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL},
|
||||
];
|
||||
let processResultBtnGroup = [
|
||||
{name: '전체', value: BillingProcessResult.ALL},
|
||||
{name: '성공', value: BillingProcessResult.SUCCESS},
|
||||
{name: '실패', value: BillingProcessResult.FAILURE},
|
||||
];
|
||||
let paymentMethodBtnGroup = [
|
||||
{name: '전체', value: BillingPaymentMethod.ALL},
|
||||
{name: '신용카드', value: BillingPaymentMethod.CREDIT_CARD},
|
||||
{name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
|
||||
{name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
setFilterRequestStatus(requestStatus);
|
||||
}, [requestStatus]);
|
||||
|
||||
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 pt-16">
|
||||
<FilterSelect
|
||||
title='가맹점'
|
||||
selectValue={ mid }
|
||||
selectSetter={ setMid }
|
||||
selectOptions={ MidOptions }
|
||||
></FilterSelect>
|
||||
<FilterSelectInput
|
||||
title='주문번호/ID'
|
||||
selectValue={ searchType }
|
||||
selectSetter={ setSearchType }
|
||||
selectOptions={ SearchTypeOptions }
|
||||
inputValue={ searchKeyword }
|
||||
inputSetter={ setSearchKeyword }
|
||||
></FilterSelectInput>
|
||||
<FilterCalendar
|
||||
title='조회기간'
|
||||
startDate={ filterStartDate }
|
||||
endDate={ filterEndDate }
|
||||
setStartDate={ setFilterStartDate }
|
||||
setEndDate={ setFilterEndDate }
|
||||
></FilterCalendar>
|
||||
|
||||
<FilterButtonGroups
|
||||
title='요청상태'
|
||||
activeValue={ filterRequestStatus }
|
||||
btnGroups={ requestStatusBtnGroup }
|
||||
setter={ setFilterRequestStatus }
|
||||
></FilterButtonGroups>
|
||||
<FilterButtonGroups
|
||||
title='처리결과'
|
||||
activeValue={ filterProcessResult }
|
||||
btnGroups={ processResultBtnGroup }
|
||||
setter={ setFilterProcessResult }
|
||||
></FilterButtonGroups>
|
||||
<FilterButtonGroups
|
||||
title='결제수단'
|
||||
activeValue={ filterPaymentMethod }
|
||||
btnGroups={ paymentMethodBtnGroup }
|
||||
setter={ setFilterPaymentMethod }
|
||||
></FilterButtonGroups>
|
||||
|
||||
<FilterRangeAmount
|
||||
title='거래금액'
|
||||
minAmount={ filterMinAmount }
|
||||
maxAmount={ filterMaxAmount }
|
||||
setMinAmount={ setFilterMinAmount }
|
||||
setMaxAmount={ setFilterMaxAmount }
|
||||
></FilterRangeAmount>
|
||||
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToSetFilter() }
|
||||
>적용</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
187
src/entities/transaction/ui/filter/cash-receipt-filter.tsx
Normal file
187
src/entities/transaction/ui/filter/cash-receipt-filter.tsx
Normal 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
187
src/entities/transaction/ui/filter/escrow-filter.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -112,18 +112,25 @@ export const ListItem = ({
|
||||
let rs = [];
|
||||
if(transactionCategory === TransactionCategory.AllTransaction){
|
||||
rs.push(
|
||||
<>
|
||||
<div className="transaction-details">
|
||||
<span>{ getTime() }</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ stateName }</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ mid }</span>
|
||||
</>
|
||||
{
|
||||
(!!installmentMonth && parseInt(installmentMonth) > 1) &&
|
||||
<>
|
||||
<span className="separator">|</span>
|
||||
<span>{ installmentMonth }개월 할부</span>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else if(transactionCategory === TransactionCategory.CashReceipt){
|
||||
rs.push(
|
||||
<>
|
||||
<div className="transaction-details">
|
||||
<span>{ getTime() }</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ issueStatus }</span>
|
||||
@@ -131,12 +138,12 @@ export const ListItem = ({
|
||||
<span>{ paymentMethod }</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ processResult }</span>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else if(transactionCategory === TransactionCategory.Escrow){
|
||||
rs.push(
|
||||
<>
|
||||
<div className="transaction-details">
|
||||
<span>{ getTime() }</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ deliveryStatus }</span>
|
||||
@@ -144,18 +151,25 @@ export const ListItem = ({
|
||||
<span>{ settlementStatus }</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ cancelStatus }</span>
|
||||
</>
|
||||
{
|
||||
(!!installmentMonth && parseInt(installmentMonth) > 1) &&
|
||||
<>
|
||||
<span className="separator">|</span>
|
||||
<span>{ installmentMonth }개월 할부</span>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else if(transactionCategory === TransactionCategory.Billing){
|
||||
rs.push(
|
||||
<>
|
||||
<div className="transaction-details">
|
||||
<span>{ getTime() }</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ processResult }</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ paymentMethod }</span>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return rs;
|
||||
@@ -172,15 +186,7 @@ export const ListItem = ({
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">{ getTitle() }</div>
|
||||
<div className="transaction-details">
|
||||
{ getDetail() }
|
||||
{ (!!installmentMonth && parseInt(installmentMonth) > 1) &&
|
||||
<>
|
||||
<span className="separator">|</span>
|
||||
<span>{ installmentMonth }개월 할부</span>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
{ getDetail() }
|
||||
</div>
|
||||
<div className="transaction-amount">
|
||||
<NumericFormat
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,18 +1,212 @@
|
||||
import moment from 'moment';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
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 {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
|
||||
|
||||
export const AccountHolderSearchPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [mid, setMid] = useState<string>('nictest001m');
|
||||
const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ALL)
|
||||
const [searchKeyword, setSearchKeyword] = useState<string>('');
|
||||
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [bank, setBank] = useState<string>('');
|
||||
const [processResult, setProcessResult] = useState<AccountHolderSearchProcessResult>(AccountHolderSearchProcessResult.ALL);
|
||||
|
||||
useSetHeaderTitle('계좌성명조회');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(true);
|
||||
|
||||
const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
|
||||
|
||||
const transactionData = [
|
||||
{
|
||||
id: '1',
|
||||
accountNumber: '10002464******',
|
||||
time: '20:00',
|
||||
bank: '우리은행',
|
||||
status: 'success',
|
||||
statusColor: 'blue',
|
||||
className: 'approved'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
accountNumber: '10002464******',
|
||||
time: '20:00',
|
||||
details: '결제완료ㅣ결제성공ㅣ호전환',
|
||||
status: 'success',
|
||||
statusColor: 'gray',
|
||||
className: 'refund'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
accountNumber: '10002464******',
|
||||
time: '20:00',
|
||||
details: '결제완료ㅣ결제성공ㅣ호전환',
|
||||
status: 'success',
|
||||
statusColor: 'blue',
|
||||
className: 'approved'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
accountNumber: '10002464******',
|
||||
time: '20:00',
|
||||
details: '미결제ㅣ취소완료ㅣSMS',
|
||||
status: 'success',
|
||||
statusColor: 'gray',
|
||||
className: 'refund'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
accountNumber: '10002464******',
|
||||
time: '20:00',
|
||||
details: '미결제ㅣ기간만료ㅣSMS',
|
||||
status: 'fail',
|
||||
statusColor: 'blue',
|
||||
className: 'approved'
|
||||
}
|
||||
];
|
||||
|
||||
const onClickToOpenFilter = () => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
|
||||
const onClickToDownloadExcel = () => {
|
||||
// tid??? 확인 필요
|
||||
downloadExcel({
|
||||
// tid: tid
|
||||
}).then((rs) => {
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToNavigation = () => {
|
||||
navigate(PATHS.additionalService.accountHolderSearch.request);
|
||||
};
|
||||
|
||||
const onClickToGoDetail = (tid?: string) => {
|
||||
navigate(PATHS.additionalService.accountHolderSearch.detail);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<section className="summary-section">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value="2025.06.01 ~ 2025.06.30"
|
||||
readOnly={true}
|
||||
/>
|
||||
<button
|
||||
className="filter-btn"
|
||||
aria-label="필터"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||
alt="검색옵션"
|
||||
onClick={() => onClickToOpenFilter()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="download-btn"
|
||||
aria-label="다운로드"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="filter-section">
|
||||
<div className="sort-options">
|
||||
<button className="sort-btn active">최신순</button>
|
||||
<span className="sort-divider">|</span>
|
||||
<button className="sort-btn">고액순</button>
|
||||
</div>
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
<span className="keyword-tag active">전체</span>
|
||||
<span className="keyword-tag">성공</span>
|
||||
<span className="keyword-tag">실패</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="transaction-list">
|
||||
<div className="date-group">
|
||||
<div className="date-header">25.06.08(일)</div>
|
||||
{transactionData.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`transaction-item ${item.className}`}
|
||||
onClick={() => onClickToGoDetail(item.id)}
|
||||
>
|
||||
<div className="transaction-status">
|
||||
<div className={`status-dot ${item.statusColor}`}></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">{item.accountNumber}</div>
|
||||
<div className="transaction-details">
|
||||
<span>
|
||||
{item.time}ㅣ{item.bank || item.details}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`status-label ${item.status}`}>
|
||||
{item.status === 'success' ? '성공' : '실패'}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToNavigation()}
|
||||
>조회 신청</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<AccountHolderSearchFilter
|
||||
filterOn={filterOn}
|
||||
setFilterOn={setFilterOn}
|
||||
mid={mid}
|
||||
searchType={searchType}
|
||||
searchKeyword={searchKeyword}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
bank={bank}
|
||||
processResult={processResult}
|
||||
setMid={setMid}
|
||||
setSearchType={setSearchType}
|
||||
setSearchKeyword={setSearchKeyword}
|
||||
setStartDate={setStartDate}
|
||||
setEndDate={setEndDate}
|
||||
setBank={setBank}
|
||||
setProcessResult={setProcessResult}
|
||||
></AccountHolderSearchFilter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
import { useState } from 'react';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
|
||||
export const AccountHolderSearchDetailPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
useSetHeaderTitle('계좌성명조회 상세');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.additionalService.accountHolderSearch.list);
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className="full-height">
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="pay-top">
|
||||
<div className="num-amount">
|
||||
<span className="amount">10002464******</span>
|
||||
</div>
|
||||
<div className="num-store">기업은행</div>
|
||||
<div className="num-day">2025.09.12 16:12:37</div>
|
||||
</div>
|
||||
<div className="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">상세 정보</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">예금주</span>
|
||||
<span className="v"> </span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">조회 일시</span>
|
||||
<span className="v">2025.09.12 16:12:37</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">결과</span>
|
||||
<span className="v">실패</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">실패사유</span>
|
||||
<span className="v">기관미개시</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">은행</span>
|
||||
<span className="v">기업은행</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">계좌번호</span>
|
||||
<span className="v">1002464642587</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">요청구분</span>
|
||||
<span className="v">API</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { useState } from 'react';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
|
||||
export const AccountHolderSearchRequestPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
|
||||
useSetHeaderTitle('계좌성명조회_신청');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.additionalService.accountHolderSearch.list);
|
||||
});
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
mid: 'nictest001m',
|
||||
bank: '',
|
||||
accountNum: ''
|
||||
})
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}));
|
||||
};
|
||||
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.additionalService.accountHolderSearch.list);
|
||||
});
|
||||
|
||||
const onClickToRequest = () => {
|
||||
navigate(PATHS.additionalService.accountHolderSearch.list)
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="option-list">
|
||||
<div className="billing-form gap-16">
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">가맹점</div>
|
||||
<div className="billing-field">
|
||||
<select
|
||||
className="wid-100"
|
||||
value={formData.mid}
|
||||
onChange={(e) => handleInputChange('mid', e.target.value)}
|
||||
>
|
||||
<option>nictest001m</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">은행</div>
|
||||
<div className="billing-field">
|
||||
<select
|
||||
className="wid-100"
|
||||
value={formData.bank}
|
||||
onChange={(e) => handleInputChange('bank', e.target.value)}
|
||||
>
|
||||
<option>우리은행</option>
|
||||
<option>카카오뱅크</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">계좌번호</div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="number"
|
||||
value="10002464******"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToRequest() }
|
||||
>신청</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -29,6 +29,10 @@ import { LinkPaymentApplyConfirmPage } from './link-payment/apply/link-payment-a
|
||||
import { LinkPaymentApplySuccessPage } from './link-payment/apply/link-payment-apply-success-page';
|
||||
import { LinkPaymentDetailPage } from './link-payment/link-payment-detail-page';
|
||||
import { LinkPaymentPendingDetailPage } from './link-payment/link-payment-pending-detail-page';
|
||||
import { KeyInPaymentRequestPage } from './key-in-payment/requeset-page';
|
||||
import { KeyInPaymentRequestSuccessPage } from './key-in-payment/request-success-page';
|
||||
import { AccountHolderSearchRequestPage } from './account-holder-search/request-page';
|
||||
import { AccountHolderSearchDetailPage } from './account-holder-search/detail-page';
|
||||
|
||||
export const AdditionalServicePages = () => {
|
||||
return (
|
||||
@@ -41,12 +45,20 @@ export const AdditionalServicePages = () => {
|
||||
<Route path={ROUTE_NAMES.additionalService.arsCardPayment.request} element={<ArsCardPaymentRequestPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess} element={<ArsCardPaymentRequestSuccessPage />} />
|
||||
</Route>
|
||||
<Route path={ROUTE_NAMES.additionalService.keyInPayment} element={<KeyInPaymentPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.keyInPayment.base}>
|
||||
<Route path={ROUTE_NAMES.additionalService.keyInPayment.list} element={<KeyInPaymentPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.keyInPayment.request} element={<KeyInPaymentRequestPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.keyInPayment.requestSuccess} element={<KeyInPaymentRequestSuccessPage />} />
|
||||
</Route>
|
||||
<Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentNotificationPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch} element={<AccountHolderSearchPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch.base}>
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch.list} element={<AccountHolderSearchPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch.detail} element={<AccountHolderSearchDetailPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch.request} element={<AccountHolderSearchRequestPage />} />
|
||||
</Route>
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.base}>
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.dispatchList} element={<LinkPaymentDispatchListPage/>} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.dispatchList} element={<LinkPaymentDispatchListPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.pendingSend} element={<LinkPaymentPendingSendPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.request} element={<LinkPaymentApplyPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.requestConfirm} element={<LinkPaymentApplyConfirmPage />} />
|
||||
@@ -73,7 +85,7 @@ export const AdditionalServicePages = () => {
|
||||
<Route path={ROUTE_NAMES.additionalService.paymentAgency.base}>
|
||||
<Route path={ROUTE_NAMES.additionalService.paymentAgency.list} element={<PaymentAgencyListPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.paymentAgency.detail} element={<PaymentAgencyDetailPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.paymentAgency.request} element={<PaymentAgencyRequestPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.paymentAgency.request} element={<PaymentAgencyRequestPage />} />
|
||||
</Route>
|
||||
</SentryRoutes>
|
||||
</>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -31,11 +31,11 @@ export const IntroPage = () => {
|
||||
},
|
||||
{
|
||||
className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원',
|
||||
icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment
|
||||
icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment.list
|
||||
},
|
||||
{
|
||||
className: 'list-wrap01', serviceName: '계좌성명조회', serviceDesc: '예금주 정보 입력으로 즉시 예금주 확인',
|
||||
icon: IMAGE_ROOT + '/icon_ing04.svg', path: PATHS.additionalService.accountHolderSearch
|
||||
icon: IMAGE_ROOT + '/icon_ing04.svg', path: PATHS.additionalService.accountHolderSearch.list
|
||||
},
|
||||
];
|
||||
const requestList = [
|
||||
|
||||
@@ -1,18 +1,156 @@
|
||||
import { 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';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
|
||||
export const KeyInPaymentPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
useSetHeaderTitle('KEY-IN 결제');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(true);
|
||||
useSetFooterMode(false);
|
||||
|
||||
const onClickToNavigation = () => {
|
||||
navigate(PATHS.additionalService.keyInPayment.request)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<section className="summary-section no-border">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value="2025.06.01 ~ 2025.06.31"
|
||||
readOnly={true}
|
||||
/>
|
||||
<button
|
||||
className="filter-btn"
|
||||
aria-label="필터"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||
alt="검색옵션"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="download-btn"
|
||||
aria-label="다운로드"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="filter-section">
|
||||
<div className="sort-options">
|
||||
<button className="sort-btn active">최신순</button>
|
||||
<span className="sort-divider">|</span>
|
||||
<button className="sort-btn">고액순</button>
|
||||
</div>
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
<span className="keyword-tag active">전체</span>
|
||||
<span className="keyword-tag">승인</span>
|
||||
<span className="keyword-tag">전취소</span>
|
||||
<span className="keyword-tag">후취소</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="transaction-list">
|
||||
<div className="date-group">
|
||||
<div className="date-header">2025.06.08(일)</div>
|
||||
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>20:00ㅣ승인</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
|
||||
<div className="transaction-item refund">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot gray"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">최*길(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>08:35ㅣ승인</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">23,845,000원</div>
|
||||
</div>
|
||||
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>20:00ㅣ승인</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>20:00ㅣ후취소</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
|
||||
<div className="transaction-item refund">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot gray"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">최*길(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>20:00ㅣ후취소</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">23,845,000원</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToNavigation()}
|
||||
>결제 신청</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
199
src/pages/additional-service/key-in-payment/requeset-page.tsx
Normal file
199
src/pages/additional-service/key-in-payment/requeset-page.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import { useState } from 'react';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import { useExtensionKeyinApplyMutation } from '@/entities/additional-service/api/use-extension-keyin-apply-mutation';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { number } from 'framer-motion';
|
||||
|
||||
export const KeyInPaymentRequestPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();
|
||||
|
||||
useSetHeaderTitle('KEY-IN 결제');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.additionalService.keyInPayment.list);
|
||||
});
|
||||
|
||||
const callKeyInPaymentRequest = () => {
|
||||
let keyInApplyParams = {
|
||||
mid: 'string',
|
||||
goodsName: 'string',
|
||||
amount: 0,
|
||||
buyerName: 'string',
|
||||
email: 'string',
|
||||
phoneNumber: 'string',
|
||||
cardNo: 'string',
|
||||
cardExpirationDate: 'string',
|
||||
instmntMonth: 'string',
|
||||
moid: 'SMS',
|
||||
};
|
||||
keyInApply(keyInApplyParams).then((rs) => {
|
||||
navigate(PATHS.additionalService.arsCardPayment.requestSuccess);
|
||||
console.log(rs)
|
||||
}).catch(() => {
|
||||
|
||||
}).finally(() => {
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const onClickToRequest = () => {
|
||||
callKeyInPaymentRequest();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="option-list">
|
||||
<div className="billing-form gap-16">
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">가맹점 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<select
|
||||
className="wid-100"
|
||||
>
|
||||
<option>nictest001m</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">상품명 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">상품가격 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">구매자명 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">구매자 이메일 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="email"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">구매자 전화번호 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="tel"
|
||||
value=""
|
||||
placeholder=" '-' 제외하고 입력"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">카드번호 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">유효기간(월/년)<span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
placeholder='MM/YY'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">할부 기간<span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<select
|
||||
className="wid-100"
|
||||
>
|
||||
<option>일시불</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">주문번호</div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToRequest() }
|
||||
>결제 신청</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
export const KeyInPaymentRequestSuccessPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
useSetHeaderType(HeaderType.NoHeader);
|
||||
useSetFooterMode(false);
|
||||
|
||||
const onClickToNavigate = () => {
|
||||
navigate(PATHS.additionalService.keyInPayment.list);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="success-page" >
|
||||
<div className="success-body">
|
||||
<div
|
||||
className="success-icon"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<h1 className="success-title">
|
||||
<span>KEY-IN 결제</span><br/>
|
||||
<span>결제 신청이 완료되었습니다.</span>
|
||||
</h1>
|
||||
<div className="success-result">
|
||||
<p className="result-text">결과 : [0000] ARS 요청 처리 완료</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToNavigate() }
|
||||
>확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -13,6 +13,9 @@ import {
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
|
||||
/**
|
||||
* 발송내역 탭 화면
|
||||
*/
|
||||
|
||||
export const LinkPaymentDispatchListPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
@@ -30,7 +33,7 @@ export const LinkPaymentDispatchListPage = () => {
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="tab-pane pt-46 active">
|
||||
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
|
||||
<LinkPaymentDispatchListWrap></LinkPaymentDispatchListWrap>
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,9 @@ import {
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment/link-payment-filter';
|
||||
|
||||
/**
|
||||
* 발송대기 탭 화면
|
||||
*/
|
||||
export const LinkPaymentPendingSendPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
@@ -30,7 +33,7 @@ export const LinkPaymentPendingSendPage = () => {
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="tab-pane pt-46 active">
|
||||
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
|
||||
<LinkPaymentPendingSendWrap></LinkPaymentPendingSendWrap>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
@@ -19,25 +19,33 @@ import {
|
||||
useSetFooterMode
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
|
||||
const serviceCodes = [
|
||||
{name: '전체', key: 'all'},
|
||||
{name: '진행중', key: 'process'},
|
||||
{name: '성공', key: 'success'},
|
||||
{name: '요청취소', key: 'cancel'}
|
||||
const requestStatusBtnGroup = [
|
||||
{name: '전체', value: BillingRequestStatus.ALL},
|
||||
{name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
|
||||
{name: '성공', value: BillingRequestStatus.SUCCESS},
|
||||
{name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL}
|
||||
];
|
||||
|
||||
export const BillingListPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const userInfo = useStore((state) => state.UserStore.UserInfo);
|
||||
|
||||
const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
|
||||
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
|
||||
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);
|
||||
const [minAmount, setMinAmount] = useState<number | string>();
|
||||
const [maxAmount, setMaxAmount] = useState<number | string>();
|
||||
|
||||
useSetHeaderTitle('빌링');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetOnBack(() => {
|
||||
@@ -54,15 +62,25 @@ export const BillingListPage = () => {
|
||||
}) => {
|
||||
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: 'ALL',
|
||||
searchKeyword: '',
|
||||
mid: mid,
|
||||
searchType: searchType,
|
||||
searchKeyword: searchKeyword,
|
||||
startDate: startDate,
|
||||
endDate: endDate,
|
||||
requestStatus: 'ALL',
|
||||
processResult: 'ALL',
|
||||
paymentMethod: 'ALL',
|
||||
requestStatus: requestStatus,
|
||||
processResult: processResult,
|
||||
paymentMethod: paymentMethod,
|
||||
minAmount: newMinAmount,
|
||||
maxAmount: newMaxAmount,
|
||||
pagination: pageParam
|
||||
};
|
||||
|
||||
@@ -103,8 +121,8 @@ export const BillingListPage = () => {
|
||||
callList({sortBy: sort});
|
||||
};
|
||||
|
||||
const onClickToServiceCode = (val: string) => {
|
||||
setSelectedServiceCode(val);
|
||||
const onClickToRequestStatus = (val: BillingRequestStatus) => {
|
||||
setRequestStatus(val);
|
||||
callList({val: val});
|
||||
};
|
||||
|
||||
@@ -152,11 +170,11 @@ export const BillingListPage = () => {
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
{
|
||||
serviceCodes.map((value, index) => (
|
||||
requestStatusBtnGroup.map((value, index) => (
|
||||
<span
|
||||
key={ `key-service-code=${ index }` }
|
||||
className={ `keyword-tag ${(selectedServiceCode === value.key)? 'active': ''}` }
|
||||
onClick={ () => onClickToServiceCode(value.key) }
|
||||
className={ `keyword-tag ${(requestStatus === value.value)? 'active': ''}` }
|
||||
onClick={ () => onClickToRequestStatus(value.value) }
|
||||
>{ value.name }</span>
|
||||
))
|
||||
}
|
||||
@@ -170,10 +188,30 @@ 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 }
|
||||
minAmount={ minAmount }
|
||||
maxAmount={ maxAmount }
|
||||
setMid={ setMid }
|
||||
setSearchType={ setSearchType }
|
||||
setSearchKeyword={ setSearchKeyword }
|
||||
setStartDate={ setStartDate }
|
||||
setEndDate={ setEndDate }
|
||||
setRequestStatus={ setRequestStatus }
|
||||
setProcessResult={ setProcessResult }
|
||||
setPaymentMethod={ setPaymentMethod }
|
||||
setMinAmount={ setMinAmount }
|
||||
setMaxAmount={ setMaxAmount }
|
||||
></BillingFilter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -12,7 +12,7 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
|
||||
import { Filter } from '@/entities/transaction/ui/filter';
|
||||
import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
import {
|
||||
useSetOnBack,
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
@@ -20,22 +20,22 @@ import {
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
|
||||
const serviceCodes = [
|
||||
{name: '전체', key: 'all'},
|
||||
{name: '승인', key: 'approval'},
|
||||
{name: '취소', key: 'cancel'}
|
||||
{ name: '전체', key: 'all' },
|
||||
{ name: '승인', key: 'approval' },
|
||||
{ name: '취소', key: 'cancel' }
|
||||
];
|
||||
|
||||
export const CashReceiptListPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
|
||||
const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
|
||||
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
|
||||
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('YYYYMMDD'));
|
||||
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
|
||||
|
||||
|
||||
useSetHeaderTitle('현금영수증');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetOnBack(() => {
|
||||
@@ -45,70 +45,70 @@ export const CashReceiptListPage = () => {
|
||||
|
||||
const { mutateAsync: cashReceiptList } = useCashReceiptListMutation();
|
||||
const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
|
||||
|
||||
|
||||
const callList = (option?: {
|
||||
sortBy?: string,
|
||||
val?: string
|
||||
}) => {
|
||||
pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
|
||||
setPageParam(pageParam);
|
||||
sortBy?: string,
|
||||
val?: string
|
||||
}) => {
|
||||
pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
|
||||
setPageParam(pageParam);
|
||||
let listParams = {
|
||||
mid: 'string',
|
||||
startDate: '2025-06-08',
|
||||
endDate: '2025-06-08',
|
||||
purposeType: 'ALL',
|
||||
issueStatus: 'ALL',
|
||||
processResult: 'ALL',
|
||||
mid: 'string',
|
||||
startDate: '2025-06-08',
|
||||
endDate: '2025-06-08',
|
||||
purposeType: 'ALL',
|
||||
issueStatus: 'ALL',
|
||||
processResult: 'ALL',
|
||||
pagination: pageParam
|
||||
};
|
||||
|
||||
cashReceiptList(listParams).then((rs) => {
|
||||
};
|
||||
|
||||
cashReceiptList(listParams).then((rs) => {
|
||||
console.log(rs)
|
||||
setListItems(assembleData(rs.content));
|
||||
});
|
||||
|
||||
};
|
||||
setListItems(assembleData(rs.content));
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const assembleData = (content: Array<CashReceiptListItem>) => {
|
||||
let data: any = {};
|
||||
if(content && content.length > 0){
|
||||
for(let i=0;i<content?.length;i++){
|
||||
let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
|
||||
if(!!groupDate && !data.hasOwnProperty(groupDate)){
|
||||
data[groupDate] = [];
|
||||
}
|
||||
if(!!groupDate && data.hasOwnProperty(groupDate)){
|
||||
data[groupDate].push(content[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return data;
|
||||
};
|
||||
let data: any = {};
|
||||
if (content && content.length > 0) {
|
||||
for (let i = 0; i < content?.length; i++) {
|
||||
let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
|
||||
if (!!groupDate && !data.hasOwnProperty(groupDate)) {
|
||||
data[groupDate] = [];
|
||||
}
|
||||
if (!!groupDate && data.hasOwnProperty(groupDate)) {
|
||||
data[groupDate].push(content[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
const onClickToOpenFilter = () => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
const onClickToDownloadExcel = () => {
|
||||
// tid??? 확인 필요
|
||||
downloadExcel({
|
||||
// tid: tid
|
||||
}).then((rs) => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
const onClickToDownloadExcel = () => {
|
||||
// tid??? 확인 필요
|
||||
downloadExcel({
|
||||
// tid: tid
|
||||
}).then((rs) => {
|
||||
|
||||
});
|
||||
};
|
||||
const onCliCkToSort = (sort: SortByKeys) => {
|
||||
setSortBy(sort);
|
||||
callList({ sortBy: sort });
|
||||
};
|
||||
|
||||
});
|
||||
};
|
||||
const onCliCkToSort = (sort: SortByKeys) => {
|
||||
setSortBy(sort);
|
||||
callList({sortBy: sort});
|
||||
};
|
||||
|
||||
const onClickToServiceCode = (val: string) => {
|
||||
setSelectedServiceCode(val);
|
||||
callList({val: val});
|
||||
};
|
||||
setSelectedServiceCode(val);
|
||||
callList({ val: val });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -118,26 +118,26 @@ export const CashReceiptListPage = () => {
|
||||
<div className="summary-section">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
className="credit-period"
|
||||
value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') }
|
||||
readOnly={ true }
|
||||
<input
|
||||
type="text"
|
||||
className="credit-period"
|
||||
value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
|
||||
readOnly={true}
|
||||
/>
|
||||
<button className="filter-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
||||
alt="검색옵션"
|
||||
onClick={ () => onClickToOpenFilter() }
|
||||
/>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||
alt="검색옵션"
|
||||
onClick={() => onClickToOpenFilter()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button className="download-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_download.svg' }
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
onClick={ () => onClickToDownloadExcel() }
|
||||
/>
|
||||
onClick={() => onClickToDownloadExcel()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="credit-summary">
|
||||
@@ -145,19 +145,19 @@ export const CashReceiptListPage = () => {
|
||||
<span className="label">승인</span>
|
||||
<strong className="amount22">
|
||||
<NumericFormat
|
||||
value={ 83745200 }
|
||||
value={83745200}
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ '원' }
|
||||
></NumericFormat>
|
||||
suffix={'원'}
|
||||
></NumericFormat>
|
||||
</strong>
|
||||
<span className="count">
|
||||
<NumericFormat
|
||||
value={ 2745 }
|
||||
value={2745}
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
prefix={ '(' }
|
||||
suffix={ '건)' }
|
||||
prefix={'('}
|
||||
suffix={'건)'}
|
||||
></NumericFormat>
|
||||
</span>
|
||||
</div>
|
||||
@@ -165,55 +165,55 @@ export const CashReceiptListPage = () => {
|
||||
<span className="label">취소</span>
|
||||
<strong className="amount19">
|
||||
<NumericFormat
|
||||
value={ 534407 }
|
||||
value={534407}
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ '원' }
|
||||
suffix={'원'}
|
||||
></NumericFormat>
|
||||
</strong>
|
||||
<span className="count">
|
||||
<NumericFormat
|
||||
value={ 32 }
|
||||
value={32}
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
prefix={ '(' }
|
||||
suffix={ '건)' }
|
||||
prefix={'('}
|
||||
suffix={'건)'}
|
||||
></NumericFormat>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="filter-section">
|
||||
<SortOptionsBox
|
||||
sortBy={ sortBy }
|
||||
onCliCkToSort={ onCliCkToSort }
|
||||
></SortOptionsBox>
|
||||
<div>
|
||||
sortBy={sortBy}
|
||||
onCliCkToSort={onCliCkToSort}
|
||||
></SortOptionsBox>
|
||||
<div>
|
||||
<div className="full-menu-keywords no-padding">
|
||||
{
|
||||
serviceCodes.map((value, index) => (
|
||||
<span
|
||||
key={ `key-service-code=${ index }` }
|
||||
className={ `keyword-tag ${(selectedServiceCode === value.key)? 'active': ''}` }
|
||||
onClick={ () => onClickToServiceCode(value.key) }
|
||||
>{ value.name }</span>
|
||||
))
|
||||
}
|
||||
{
|
||||
serviceCodes.map((value, index) => (
|
||||
<span
|
||||
key={`key-service-code=${index}`}
|
||||
className={`keyword-tag ${(selectedServiceCode === value.key) ? 'active' : ''}`}
|
||||
onClick={() => onClickToServiceCode(value.key)}
|
||||
>{value.name}</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CashReceiptList
|
||||
listItems={ listItems }
|
||||
transactionCategory={ TransactionCategory.CashReceipt }
|
||||
></CashReceiptList>
|
||||
<CashReceiptList
|
||||
listItems={listItems}
|
||||
transactionCategory={TransactionCategory.CashReceipt}
|
||||
></CashReceiptList>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Filter
|
||||
filterOn={ filterOn }
|
||||
setFilterOn={ setFilterOn }
|
||||
></Filter>
|
||||
filterOn={filterOn}
|
||||
setFilterOn={setFilterOn}
|
||||
></Filter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -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';
|
||||
|
||||
@@ -157,9 +157,37 @@ export const PATHS: RouteNamesType = {
|
||||
ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess,
|
||||
),
|
||||
},
|
||||
keyInPayment: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.keyInPayment),
|
||||
keyInPayment: {
|
||||
base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`),
|
||||
list: generatePath(
|
||||
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`,
|
||||
ROUTE_NAMES.additionalService.keyInPayment.list
|
||||
),
|
||||
request: generatePath(
|
||||
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`,
|
||||
ROUTE_NAMES.additionalService.keyInPayment.request,
|
||||
),
|
||||
requestSuccess: generatePath(
|
||||
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`,
|
||||
ROUTE_NAMES.additionalService.keyInPayment.requestSuccess,
|
||||
),
|
||||
},
|
||||
smsPaymentNotification: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.smsPaymentNotification),
|
||||
accountHolderSearch: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderSearch),
|
||||
accountHolderSearch: {
|
||||
base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.accountHolderSearch.base}`),
|
||||
list: generatePath(
|
||||
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.accountHolderSearch.base}`,
|
||||
ROUTE_NAMES.additionalService.accountHolderSearch.list
|
||||
),
|
||||
detail: generatePath(
|
||||
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.accountHolderSearch.base}`,
|
||||
ROUTE_NAMES.additionalService.accountHolderSearch.detail
|
||||
),
|
||||
request: generatePath(
|
||||
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.accountHolderSearch.base}`,
|
||||
ROUTE_NAMES.additionalService.accountHolderSearch.request,
|
||||
)
|
||||
},
|
||||
accountHolderAuth: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderAuth),
|
||||
linkPayment: {
|
||||
base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`),
|
||||
|
||||
@@ -76,9 +76,19 @@ export const ROUTE_NAMES = {
|
||||
request: 'request',
|
||||
requestSuccess: 'request-success',
|
||||
},
|
||||
keyInPayment: 'key-in-payment',
|
||||
keyInPayment: {
|
||||
base: '/key-in-payment/*',
|
||||
list: 'list',
|
||||
request: 'request',
|
||||
requestSuccess: 'request-success',
|
||||
},
|
||||
smsPaymentNotification: 'sms-payment-notification',
|
||||
accountHolderSearch: 'account-holder-search',
|
||||
accountHolderSearch: {
|
||||
base: '/account-holder-search/*',
|
||||
list: 'list',
|
||||
detail: 'detail',
|
||||
request: 'request'
|
||||
},
|
||||
accountHolderAuth: 'account-holder-auth',
|
||||
linkPayment: {
|
||||
base: '/link-payment/*',
|
||||
@@ -107,7 +117,7 @@ export const ROUTE_NAMES = {
|
||||
deposit: 'deposit',
|
||||
member: 'member',
|
||||
register: 'register',
|
||||
detail: 'detail',
|
||||
detail: 'detail',
|
||||
},
|
||||
paymentAgency: {
|
||||
base: '/payment-agency/*',
|
||||
@@ -115,7 +125,7 @@ export const ROUTE_NAMES = {
|
||||
detail: 'detail',
|
||||
request: 'request',
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
support: {
|
||||
base: '/support/*',
|
||||
|
||||
255
src/shared/lib/appBridge.ts
Normal file
255
src/shared/lib/appBridge.ts
Normal file
@@ -0,0 +1,255 @@
|
||||
import {
|
||||
AppBridgeMessage,
|
||||
AppBridgeResponse,
|
||||
BridgeMessageType,
|
||||
DeviceInfo,
|
||||
ShareContent
|
||||
} from '@/types';
|
||||
import { LoginCredentials, UserInfo } from '@/types/auth';
|
||||
|
||||
class AppBridge {
|
||||
private static instance: AppBridge;
|
||||
private messageId = 0;
|
||||
private pendingCallbacks = new Map<string, (response: AppBridgeResponse) => void>();
|
||||
private responseListeners: Set<(response: AppBridgeResponse) => void> = new Set();
|
||||
|
||||
private constructor() {
|
||||
this.setupMessageListener();
|
||||
}
|
||||
|
||||
// 외부에서 네이티브 응답을 구독할 수 있도록 리스너 등록/해제 메서드 추가
|
||||
public addResponseListener(listener: (response: AppBridgeResponse) => void) {
|
||||
this.responseListeners.add(listener);
|
||||
}
|
||||
|
||||
public removeResponseListener(listener: (response: AppBridgeResponse) => void) {
|
||||
this.responseListeners.delete(listener);
|
||||
}
|
||||
|
||||
static getInstance(): AppBridge {
|
||||
if (!AppBridge.instance) {
|
||||
AppBridge.instance = new AppBridge();
|
||||
}
|
||||
return AppBridge.instance;
|
||||
}
|
||||
|
||||
private setupMessageListener(): void {
|
||||
window.addEventListener('message', (event) => {
|
||||
try {
|
||||
const response: AppBridgeResponse & { callbackId?: string } = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
|
||||
console.log('response', response);
|
||||
if (response.callbackId && this.pendingCallbacks.has(response.callbackId)) {
|
||||
const callback = this.pendingCallbacks.get(response.callbackId);
|
||||
if (callback) {
|
||||
callback(response);
|
||||
this.pendingCallbacks.delete(response.callbackId);
|
||||
}
|
||||
}
|
||||
// 등록된 리스너들에게 모든 응답 전달
|
||||
this.responseListeners.forEach(listener => listener(response));
|
||||
} catch (error) {
|
||||
console.error('Failed to parse bridge message:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private generateMessageId(): string {
|
||||
return `bridge_${++this.messageId}_${Date.now()}`;
|
||||
}
|
||||
|
||||
private sendMessage<T>(type: BridgeMessageType, data?: unknown): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const callbackId = this.generateMessageId();
|
||||
const message: AppBridgeMessage & { callbackId: string } = {
|
||||
type,
|
||||
data,
|
||||
callbackId
|
||||
};
|
||||
|
||||
this.pendingCallbacks.set(callbackId, (response: AppBridgeResponse) => {
|
||||
if (response.success) {
|
||||
resolve(response.data);
|
||||
} else {
|
||||
reject(new Error(response.error || 'Bridge call failed'));
|
||||
}
|
||||
});
|
||||
|
||||
// Android WebView 인터페이스
|
||||
if (window.AndroidBridge && window.AndroidBridge.postMessage) {
|
||||
console.log('Android postMessage', message);
|
||||
window.AndroidBridge.postMessage(JSON.stringify(message));
|
||||
return;
|
||||
}
|
||||
|
||||
// iOS WKWebView 인터페이스
|
||||
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.bridge) {
|
||||
console.log('iOS postMessage', message);
|
||||
window.webkit.messageHandlers.bridge.postMessage(message);
|
||||
return;
|
||||
}
|
||||
|
||||
// 네이티브 환경이 아닌 경우 에러 발생
|
||||
setTimeout(() => {
|
||||
this.pendingCallbacks.delete(callbackId);
|
||||
reject(new Error('Native bridge not available'));
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
// 앱 정보 관련
|
||||
async getAppInfo(): Promise<{ version: string; buildNumber: string }> {
|
||||
return this.sendMessage(BridgeMessageType.GET_APP_INFO);
|
||||
}
|
||||
|
||||
async getDeviceInfo(): Promise<DeviceInfo> {
|
||||
return this.sendMessage(BridgeMessageType.GET_DEVICE_INFO);
|
||||
}
|
||||
|
||||
// 네비게이션 관련
|
||||
async navigateBack(): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.NAVIGATE_BACK);
|
||||
}
|
||||
|
||||
async navigateTo(path: string): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.NAVIGATE_TO, { path });
|
||||
}
|
||||
|
||||
async navigateToLogin(): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.NAVIGATE_TO_LOGIN);
|
||||
}
|
||||
|
||||
async closeWebView(): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.CLOSE_WEBVIEW);
|
||||
}
|
||||
|
||||
// 알림 관련
|
||||
async showToast(message: string, duration: number = 3000): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.SHOW_TOAST, { message, duration });
|
||||
}
|
||||
|
||||
async showAlert(title: string, message: string): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.SHOW_ALERT, { title, message });
|
||||
}
|
||||
|
||||
async showConfirm(title: string, message: string): Promise<boolean> {
|
||||
return this.sendMessage(BridgeMessageType.SHOW_CONFIRM, { title, message });
|
||||
}
|
||||
|
||||
// 저장소 관련
|
||||
async setStorage(key: string, value: unknown): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.SET_STORAGE, { key, value: JSON.stringify(value) });
|
||||
}
|
||||
|
||||
async getStorage<T>(key: string): Promise<T | null> {
|
||||
try {
|
||||
const result = await this.sendMessage<string>(BridgeMessageType.GET_STORAGE, { key });
|
||||
return result ? JSON.parse(result) : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async removeStorage(key: string): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.REMOVE_STORAGE, { key });
|
||||
}
|
||||
|
||||
// 공유 관련
|
||||
async shareContent(content: ShareContent): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.SHARE_CONTENT, content);
|
||||
}
|
||||
|
||||
// 로그인 요청
|
||||
async login(credentials?: LoginCredentials): Promise<UserInfo> {
|
||||
return this.sendMessage(BridgeMessageType.LOGIN, credentials);
|
||||
}
|
||||
|
||||
async logout(): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.LOGOUT);
|
||||
}
|
||||
|
||||
// 언어 설정
|
||||
async setLanguage(language: string): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.SET_LANGUAGE, { language });
|
||||
}
|
||||
|
||||
async getLanguage(): Promise<string> {
|
||||
return this.sendMessage(BridgeMessageType.GET_LANGUAGE);
|
||||
}
|
||||
|
||||
// 메시지 카운트 업데이트
|
||||
async updateMessageCount(count: number): Promise<void> {
|
||||
return this.sendMessage(BridgeMessageType.UPDATE_MESSAGE_COUNT, { count });
|
||||
}
|
||||
|
||||
// 네이티브 환경 체크
|
||||
isNativeEnvironment(): boolean {
|
||||
return !!(
|
||||
(window.AndroidBridge && window.AndroidBridge.postMessage) ||
|
||||
(window.Android && window.Android.processMessage) ||
|
||||
(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.bridge)
|
||||
);
|
||||
}
|
||||
|
||||
isAndroid(): boolean {
|
||||
return !!(
|
||||
(window.AndroidBridge && window.AndroidBridge.postMessage) ||
|
||||
(window.Android && window.Android.processMessage)
|
||||
);
|
||||
}
|
||||
|
||||
isIOS(): boolean {
|
||||
return !!(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.bridge);
|
||||
}
|
||||
|
||||
// 에러 핸들링을 위한 래퍼 메소드들
|
||||
async safeCall<T>(
|
||||
bridgeMethod: () => Promise<T>,
|
||||
fallback?: T,
|
||||
onError?: (error: Error) => void
|
||||
): Promise<T | undefined> {
|
||||
try {
|
||||
return await bridgeMethod();
|
||||
} catch (error) {
|
||||
console.error('Bridge call failed:', error);
|
||||
if (onError) {
|
||||
onError(error as Error);
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
// 타임아웃을 가진 브리지 호출
|
||||
async callWithTimeout<T>(
|
||||
bridgeMethod: () => Promise<T>,
|
||||
timeout: number = 5000
|
||||
): Promise<T> {
|
||||
return Promise.race([
|
||||
bridgeMethod(),
|
||||
new Promise<never>((_, reject) =>
|
||||
setTimeout(() => reject(new Error('Bridge call timeout')), timeout)
|
||||
)
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
// 글로벌 타입 선언 확장
|
||||
declare global {
|
||||
interface Window {
|
||||
AndroidBridge?: {
|
||||
postMessage: (message: string) => void;
|
||||
};
|
||||
Android?: {
|
||||
processMessage: (message: string) => void;
|
||||
};
|
||||
webkit?: {
|
||||
messageHandlers?: {
|
||||
bridge?: {
|
||||
postMessage: (message: unknown) => void;
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const appBridge = AppBridge.getInstance();
|
||||
export default appBridge;
|
||||
@@ -29,4 +29,10 @@ main {
|
||||
.kv-list{
|
||||
padding-bottom: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* calendar */
|
||||
.react-calendar{
|
||||
margin: 10% auto;
|
||||
|
||||
}
|
||||
54
src/shared/ui/calendar/nice-calendar.tsx
Normal file
54
src/shared/ui/calendar/nice-calendar.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import moment 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';
|
||||
|
||||
interface NiceCalendarProps {
|
||||
calendarOpen: boolean;
|
||||
setNewDate: (date: string) => void;
|
||||
};
|
||||
|
||||
const NiceCalendar = ({
|
||||
calendarOpen,
|
||||
setNewDate
|
||||
}: NiceCalendarProps) => {
|
||||
const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
const onchangeToDate = (selectedDate: any) => {
|
||||
setNewDate(moment(selectedDate).format('YYYY-MM-DD'));
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log(calendarOpen)
|
||||
setIsOpen(calendarOpen);
|
||||
}, [calendarOpen])
|
||||
|
||||
return (
|
||||
<>
|
||||
{ (isOpen) &&
|
||||
<>
|
||||
<div className="bg-dim"></div>
|
||||
<CalendarWrapper>
|
||||
<Calendar
|
||||
onChange={ onchangeToDate }
|
||||
value={ calendarDate }
|
||||
></Calendar>
|
||||
</CalendarWrapper>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
const CalendarWrapper = styled.div`
|
||||
z-index: 1100;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
`;
|
||||
|
||||
export default NiceCalendar;
|
||||
47
src/shared/ui/filter/button-groups.tsx
Normal file
47
src/shared/ui/filter/button-groups.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { FilterButtonGroupsProps } from '@/entities/common/model/types';
|
||||
|
||||
export const FilterButtonGroups = ({
|
||||
title,
|
||||
activeValue,
|
||||
btnGroups,
|
||||
setter,
|
||||
}: FilterButtonGroupsProps) => {
|
||||
|
||||
const getBtns = () => {
|
||||
let rs = [];
|
||||
if(!!btnGroups && btnGroups.length > 0){
|
||||
let emptySpanCnt = 4 % btnGroups.length;
|
||||
for(let i=0;i<btnGroups.length;i++){
|
||||
rs.push(
|
||||
<span
|
||||
key={ `key-btngroup-span-${i}` }
|
||||
className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
|
||||
onClick={ () => setter(btnGroups[i]?.value || '') }
|
||||
>{ btnGroups[i]?.name }</span>
|
||||
)
|
||||
}
|
||||
for(let i=0;i<emptySpanCnt;i++){
|
||||
rs.push(
|
||||
<span
|
||||
key={ `key-btngroup-span-nodata-${i}` }
|
||||
className="keyword-tag flex-1"
|
||||
style={{ visibility: 'hidden' }}
|
||||
></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">{ title }</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
{ getBtns() }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
153
src/shared/ui/filter/filter-calendar.tsx
Normal file
153
src/shared/ui/filter/filter-calendar.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import moment from 'moment';
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import { FilterDateOptions } from '@/entities/common/model/types';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import NiceCalendar from '../calendar/nice-calendar';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
interface FilterCalendarProps {
|
||||
title?: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
setStartDate: (startDate: string) => void;
|
||||
setEndDate: (endDate: string) => void;
|
||||
};
|
||||
|
||||
export const FilterCalendar = ({
|
||||
title,
|
||||
startDate,
|
||||
endDate,
|
||||
setStartDate,
|
||||
setEndDate
|
||||
}: FilterCalendarProps) => {
|
||||
const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간');
|
||||
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false);
|
||||
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
|
||||
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
|
||||
const [activceCalendar, setActiveCalendar] = useState<string>();
|
||||
|
||||
const setFilterDate = (dateOptions: FilterDateOptions) => {
|
||||
if(dateOptions === FilterDateOptions.Today){
|
||||
setStartDate(moment().format('YYYY-MM-DD'));
|
||||
setEndDate(moment().format('YYYY-MM-DD'));
|
||||
setDateReadyOnly(true);
|
||||
setFilterDateOptionsBtn(FilterDateOptions.Today);
|
||||
}
|
||||
else if(dateOptions === FilterDateOptions.Week){
|
||||
setStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
|
||||
setEndDate(moment().format('YYYY-MM-DD'));
|
||||
setDateReadyOnly(true);
|
||||
setFilterDateOptionsBtn(FilterDateOptions.Week);
|
||||
}
|
||||
else if(dateOptions === FilterDateOptions.Month){
|
||||
setStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
|
||||
setEndDate(moment().format('YYYY-MM-DD'));
|
||||
setDateReadyOnly(true);
|
||||
setFilterDateOptionsBtn(FilterDateOptions.Month);
|
||||
}
|
||||
else if(dateOptions === FilterDateOptions.Input){
|
||||
setDateReadyOnly(false);
|
||||
setFilterDateOptionsBtn(FilterDateOptions.Input);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const onClickToOpenCalendar = (key: string) => {
|
||||
if(!dateReadOnly){
|
||||
setCalendarOpen(true);
|
||||
setActiveCalendar(key);
|
||||
}
|
||||
else{
|
||||
setCalendarOpen(false);
|
||||
setActiveCalendar('');
|
||||
}
|
||||
};
|
||||
|
||||
const setNewDate = (date: string) => {
|
||||
if(activceCalendar === 'start'){
|
||||
setStartDate(date);
|
||||
}
|
||||
else if(activceCalendar === 'end'){
|
||||
setEndDate(date);
|
||||
}
|
||||
setCalendarOpen(false);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">{ filterTitle }</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
|
||||
id="startDate"
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value={ startDate }
|
||||
readOnly={ true }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="date-btn"
|
||||
onClick={ () => onClickToOpenCalendar('start') }
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<span className="beetween">~</span>
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
id="endDate"
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value={ endDate }
|
||||
readOnly={ true }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="date-btn"
|
||||
onClick={ () => onClickToOpenCalendar('end') }
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NiceCalendar
|
||||
calendarOpen={ calendarOpen }
|
||||
setNewDate={ setNewDate }
|
||||
></NiceCalendar>
|
||||
</>
|
||||
);
|
||||
};
|
||||
30
src/shared/ui/filter/input.tsx
Normal file
30
src/shared/ui/filter/input.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { ChangeEvent } from 'react';
|
||||
|
||||
export interface FilterInputProps {
|
||||
title: string;
|
||||
inputValue: string;
|
||||
inputSetter: (value: any) => void;
|
||||
};
|
||||
export const FilterInput = ({
|
||||
title,
|
||||
inputValue,
|
||||
inputSetter
|
||||
}: FilterInputProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">{ title }</div>
|
||||
<div className="opt-controls">
|
||||
<input
|
||||
className="flex-1"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={ inputValue }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => inputSetter(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
44
src/shared/ui/filter/range-amount.tsx
Normal file
44
src/shared/ui/filter/range-amount.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { FilterRangeAmountProps } from '@/entities/common/model/types';
|
||||
import { useEffect } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { ChangeEvent } from 'react';
|
||||
|
||||
export const FilterRangeAmount = ({
|
||||
title,
|
||||
minAmount,
|
||||
maxAmount,
|
||||
setMinAmount,
|
||||
setMaxAmount,
|
||||
}: FilterRangeAmountProps) => {
|
||||
const [filterTitle, setFilterTitle] = useState<string>(title || '거래금액');
|
||||
|
||||
useEffect(() => {
|
||||
setFilterTitle(title || '거래금액');
|
||||
}, [title])
|
||||
return (
|
||||
<>
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">{ filterTitle }</div>
|
||||
<div className="opt-controls">
|
||||
<div className="input-wrapper ">
|
||||
<input
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={ minAmount }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
<span> ~ </span>
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={ maxAmount }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
};
|
||||
56
src/shared/ui/filter/select-input.tsx
Normal file
56
src/shared/ui/filter/select-input.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { ChangeEvent } from 'react';
|
||||
|
||||
export interface FilterSelectInputProps {
|
||||
title: string;
|
||||
selectValue: string;
|
||||
selectSetter: (value: any) => void;
|
||||
selectOptions: Array<Record<string, string>>;
|
||||
inputValue: string;
|
||||
inputSetter: (value: any) => void;
|
||||
};
|
||||
export const FilterSelectInput = ({
|
||||
title,
|
||||
selectValue,
|
||||
selectSetter,
|
||||
selectOptions,
|
||||
inputValue,
|
||||
inputSetter
|
||||
}: FilterSelectInputProps) => {
|
||||
|
||||
const getSelectOptions = () => {
|
||||
let rs = [];
|
||||
for(let i=0;i<selectOptions.length;i++){
|
||||
rs.push(
|
||||
<option
|
||||
key={ `key-filter-select-input-${i}` }
|
||||
value={ selectOptions[i]?.value }
|
||||
>{ selectOptions[i]?.name }</option>
|
||||
);
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">{ title }</div>
|
||||
<div className="opt-controls">
|
||||
<select
|
||||
className="w-110"
|
||||
value={ selectValue }
|
||||
onChange={ (e: any) => selectSetter(e.target.value)}
|
||||
>
|
||||
{ getSelectOptions() }
|
||||
</select>
|
||||
<input
|
||||
className="flex-1"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={ inputValue }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => inputSetter(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
43
src/shared/ui/filter/select.tsx
Normal file
43
src/shared/ui/filter/select.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
export interface FilterSelectProps {
|
||||
title: string;
|
||||
selectValue: string;
|
||||
selectSetter: (value: any) => void;
|
||||
selectOptions: Array<Record<string, string>>;
|
||||
};
|
||||
export const FilterSelect = ({
|
||||
title,
|
||||
selectValue,
|
||||
selectSetter,
|
||||
selectOptions,
|
||||
}: FilterSelectProps) => {
|
||||
|
||||
const getSelectOptions = () => {
|
||||
let rs = [];
|
||||
for(let i=0;i<selectOptions.length;i++){
|
||||
rs.push(
|
||||
<option
|
||||
key={ `key-filter-select-${i}` }
|
||||
value={ selectOptions[i]?.value }
|
||||
>{ selectOptions[i]?.name }</option>
|
||||
);
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">{ title }</div>
|
||||
<div className="opt-controls">
|
||||
<select
|
||||
className="flex-1"
|
||||
value={ selectValue }
|
||||
onChange={ (e: any) => selectSetter(e.target.value)}
|
||||
>
|
||||
{ getSelectOptions() }
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -83,9 +83,9 @@ export const Menu = ({
|
||||
items: [
|
||||
{title: '부가서비스소개', path: PATHS.additionalService.intro},
|
||||
{title: 'ARS 카드결제', path: PATHS.additionalService.arsCardPayment.list},
|
||||
{title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment},
|
||||
{title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment.list},
|
||||
{title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification},
|
||||
{title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch},
|
||||
{title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch.list},
|
||||
{title: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth},
|
||||
{title: '링크결제', path: PATHS.additionalService.linkPayment.dispatchList},
|
||||
{title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification.list},
|
||||
|
||||
Reference in New Issue
Block a user