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

부가세 참고 및 컴포넌트 전체적 일부 수정

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-26 14:01:01 +09:00
parent bcd51e6971
commit 97a5153364
35 changed files with 889 additions and 805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx
View File

@@ -7,108 +7,100 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { AccountHolderAuthFilterProps, AuthAndTransferStatus } from '@/entities/additional-service/model/types';
import { authStatusBtnGroup } from '@/entities/additional-service/model/account-holder-auth/constant';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
export const AccountHolderAuthFilter = ({
filterOn,
setFilterOn,
mid,
startDate,
endDate,
authStatus,
setMid,
setStartDate,
setEndDate,
setAuthStatus
filterOn,
setFilterOn,
mid,
startDate,
endDate,
authStatus,
setMid,
setStartDate,
setEndDate,
setAuthStatus
}: AccountHolderAuthFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
const [filterAuthStatus, setFilterAuthStatus] = useState<AuthAndTransferStatus>(authStatus);
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
const [filterAuthStatus, setFilterAuthStatus] = useState<AuthAndTransferStatus>(authStatus);
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
const onClickToClose = () => {
setFilterOn(false);
};
const onClickToClose = () => {
setFilterOn(false);
};
const onClickToSetFilter = () => {
setMid(filterMid);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setAuthStatus(filterAuthStatus);
onClickToClose();
};
const onClickToSetFilter = () => {
setMid(filterMid);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setAuthStatus(filterAuthStatus);
onClickToClose();
};
return (
<>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={(filterOn) ? 'visible' : 'hidden'}
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
>
<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>
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>
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={mid}
selectSetter={setMid}
selectOptions={MidOptions}
></FilterSelect>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterButtonGroups
title='지급상태'
activeValue={filterAuthStatus}
btnGroups={authStatusBtnGroup}
setter={setFilterAuthStatus}
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>
</motion.div>
</>
)
<FilterButtonGroups
title='지급상태'
activeValue={filterAuthStatus}
btnGroups={authStatusBtnGroup}
setter={setFilterAuthStatus}
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>
</motion.div>
</>
);
}

269
src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
View File

@@ -3,165 +3,156 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { useState } from 'react';
import {
AccountHolderSearchType,
AccountHolderSearchFilterProps,
ProcessResult
AccountHolderSearchType,
AccountHolderSearchFilterProps,
ProcessResult
} from '../../../model/types';
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterDateOptions } from '@/entities/common/model/types';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
export const AccountHolderSearchFilter = ({
filterOn,
setFilterOn,
mid,
searchType,
searchKeyword,
startDate,
endDate,
bank,
processResult,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setBank,
setProcessResult
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>(moment(startDate).format('YYYY.MM.DD'));
const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
const [filterBank, setFilterBank] = useState<string>(bank)
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
const [filterBank, setFilterBank] = useState<string>(bank)
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
const onClickToClose = () => {
setFilterOn(false);
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setBank(filterBank);
setProcessResult(filterProcessResult);
onClickToClose();
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setBank(filterBank);
setProcessResult(filterProcessResult);
onClickToClose();
};
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
let bankOptions = [
{ name: '우리은행', value: '우리은행' },
{ name: '토스뱅킹', value: '토스뱅킹' }
];
let bankOptions = [
{ name: '우리은행', value: '우리은행' },
{ name: '토스뱅킹', value: '토스뱅킹' }
]
let searchTypeOption = [
{ name: '예금주', value: AccountHolderSearchType.ACCOUNT_NAME },
{ name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NO },
];
let searchTypeOption = [
{ name: '예금주', value: AccountHolderSearchType.ACCOUNT_NAME },
{ name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NO },
]
let processResultBtnGroup = [
{ name: '전체', value: ProcessResult.ALL },
{ name: '성공', value: ProcessResult.SUCCESS },
{ name: '실패', value: ProcessResult.FAIL },
];
let processResultBtnGroup = [
{ name: '전체', value: ProcessResult.ALL },
{ name: '성공', value: ProcessResult.SUCCESS },
{ name: '실패', value: ProcessResult.FAIL },
];
return (
<>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={(filterOn) ? 'visible' : 'hidden'}
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
>
<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>
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>
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={mid}
selectSetter={setMid}
selectOptions={MidOptions}
></FilterSelect>
<FilterSelectInput
title='예금주/계좌번호'
selectValue={searchType}
selectSetter={setSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}
inputSetter={setSearchKeyword}
></FilterSelectInput>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterSelectInput
title='예금주/계좌번호'
selectValue={searchType}
selectSetter={setSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}
inputSetter={setSearchKeyword}
></FilterSelectInput>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterSelect
title='은행'
selectValue={bank}
selectSetter={setBank}
selectOptions={bankOptions}
></FilterSelect>
<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>
</>
)
<FilterSelect
title='은행'
selectValue={bank}
selectSetter={setBank}
selectOptions={bankOptions}
></FilterSelect>
<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>
</>
);
}

1
src/entities/additional-service/ui/filter/alimtalk-filter.tsx
View File

@@ -93,7 +93,6 @@ export const AlimtalkFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

1
src/entities/additional-service/ui/filter/ars-filter.tsx
View File

@@ -93,7 +93,6 @@ export const ArsFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

1
src/entities/additional-service/ui/filter/fund-account-result-filter.tsx
View File

@@ -101,7 +101,6 @@ export const FundAccountResultFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

1
src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
View File

@@ -96,7 +96,6 @@ export const FundAccountTransactionFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

1
src/entities/additional-service/ui/filter/payout-filter.tsx
View File

@@ -92,7 +92,6 @@ export const PayoutFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

231
src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
View File

@@ -9,137 +9,128 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import {
KeyInPaymentFilterProps,
KeyInPaymentTransactionStatus
KeyInPaymentFilterProps,
KeyInPaymentTransactionStatus
} from '../../../model/types';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
export const KeyInPaymentFilter = ({
filterOn,
setFilterOn,
mid,
startDate,
endDate,
transactionStatus,
minAmount,
maxAmount,
setMid,
setStartDate,
setEndDate,
setTransactionStatus,
setMinAmount,
setMaxAmount
filterOn,
setFilterOn,
mid,
startDate,
endDate,
transactionStatus,
minAmount,
maxAmount,
setMid,
setStartDate,
setEndDate,
setTransactionStatus,
setMinAmount,
setMaxAmount
}: KeyInPaymentFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
const onClickToClose = () => {
setFilterOn(false);
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setTransactionStatus(filterTransactionStatus);
setMinAmount(filterMinAmount);
setMaxAmount(filterMaxAmount);
onClickToClose();
};
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' }
];
const onClickToSetFilter = () => {
setMid(filterMid);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setTransactionStatus(filterTransactionStatus);
setMinAmount(filterMinAmount);
setMaxAmount(filterMaxAmount);
onClickToClose();
};
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' }
];
let transactionStatusOption = [
{ name: '전체', value: KeyInPaymentTransactionStatus.ALL },
{ name: '승인', value: KeyInPaymentTransactionStatus.APPROVAL },
{ name: '전취소', value: KeyInPaymentTransactionStatus.PRE_CANCEL },
{ name: '후취소', value: KeyInPaymentTransactionStatus.POST_CANCEL },
];
let transactionStatusOption = [
{ name: '전체', value: KeyInPaymentTransactionStatus.ALL },
{ name: '승인', value: KeyInPaymentTransactionStatus.APPROVAL },
{ name: '전취소', value: KeyInPaymentTransactionStatus.PRE_CANCEL },
{ name: '후취소', value: KeyInPaymentTransactionStatus.POST_CANCEL },
]
return (
<>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={(filterOn) ? 'visible' : 'hidden'}
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
>
<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>
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={filterMid}
selectSetter={setMid}
selectOptions={MidOptions}
></FilterSelect>
<FilterCalendar
title='조회기간'
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={filterMid}
selectSetter={setMid}
selectOptions={MidOptions}
></FilterSelect>
<FilterCalendar
title='조회기간'
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterButtonGroups
title='거래상태'
activeValue={filterTransactionStatus}
btnGroups={transactionStatusOption}
setter={setFilterTransactionStatus}
></FilterButtonGroups>
<FilterButtonGroups
title='거래상태'
activeValue={filterTransactionStatus}
btnGroups={transactionStatusOption}
setter={setFilterTransactionStatus}
></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>
</>
);
<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>
</>
);
};

320
src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx
View File

@@ -4,193 +4,185 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { ChangeEvent, useState } from 'react';
import {
LinkPaymentSearchType,
LinkPaymentSendMethod,
LinkPaymentHistoryFilterProps,
LinkPaymentTransactionStatus,
ProcessResult
LinkPaymentSearchType,
LinkPaymentSendMethod,
LinkPaymentHistoryFilterProps,
LinkPaymentTransactionStatus,
ProcessResult
} from "../../../model/types";
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterDateOptions } from '@/entities/common/model/types';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
export const LinkPaymentHistoryFilter = ({
filterOn,
setFilterOn,
mid,
searchType,
searchKeyword,
startDate,
endDate,
transactionStatus,
processResult,
sendMethod,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setTransactionStatus,
setProcessResult,
setSendMethod
filterOn,
setFilterOn,
mid,
searchType,
searchKeyword,
startDate,
endDate,
transactionStatus,
processResult,
sendMethod,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setTransactionStatus,
setProcessResult,
setSendMethod
}: LinkPaymentHistoryFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentTransactionStatus>(transactionStatus)
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod);
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentTransactionStatus>(transactionStatus)
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod);
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const onClickToClose = () => {
setFilterOn(false);
};
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const onClickToClose = () => {
setFilterOn(false);
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setTransactionStatus(filterTransactionStatus);
setProcessResult(filterProcessResult);
setSendMethod(filterSendMethod);
onClickToClose();
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setTransactionStatus(filterTransactionStatus);
setProcessResult(filterProcessResult);
setSendMethod(filterSendMethod);
onClickToClose();
};
let searchTypeOption = [
{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
];
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
let transactionStatusOption = [
{ name: '전체', value: LinkPaymentTransactionStatus.ALL },
{ name: '미완료/활성화', value: LinkPaymentTransactionStatus.ACTIVATE },
{ name: '입금요청', value: LinkPaymentTransactionStatus.DEPOSIT_REQUEST },
{ name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE },
{ name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL },
{ name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE },
];
let searchTypeOption = [
{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
]
let processResultOption = [
{ name: '전체', value: ProcessResult.ALL },
{ name: '성공', value: ProcessResult.SUCCESS },
{ name: '실패', value: ProcessResult.FAIL },
];
let transactionStatusOption = [
{ name: '전체', value: LinkPaymentTransactionStatus.ALL },
{ name: '미완료/활성화', value: LinkPaymentTransactionStatus.ACTIVATE },
{ name: '입금요청', value: LinkPaymentTransactionStatus.DEPOSIT_REQUEST },
{ name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE },
{ name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL },
{ name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE },
]
let sendMethodOption = [
{ name: '전체', value: LinkPaymentSendMethod.ALL },
{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
];
let processResultOption = [
{ name: '전체', value: ProcessResult.ALL },
{ name: '성공', value: ProcessResult.SUCCESS },
{ name: '실패', value: ProcessResult.FAIL },
]
return (
<>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={(filterOn) ? 'visible' : 'hidden'}
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
>
<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>
let sendMethodOption = [
{ name: '전체', value: LinkPaymentSendMethod.ALL },
{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
]
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={MidOptions}
></FilterSelect>
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>
<FilterSelectInput
title='휴대폰번호/이메일'
selectValue={filterSearchType}
selectSetter={setFilterSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}
inputSetter={setSearchKeyword}
></FilterSelectInput>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={MidOptions}
></FilterSelect>
<FilterButtonGroups
title='거래상태'
activeValue={filterTransactionStatus}
btnGroups={transactionStatusOption}
setter={setFilterTransactionStatus}
></FilterButtonGroups>
<FilterSelectInput
title='휴대폰번호/이메일'
selectValue={filterSearchType}
selectSetter={setFilterSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}
inputSetter={setSearchKeyword}
></FilterSelectInput>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterButtonGroups
title='전송결과'
activeValue={filterProcessResult}
btnGroups={processResultOption}
setter={setFilterProcessResult}
></FilterButtonGroups>
<FilterButtonGroups
title='거래상태'
activeValue={filterTransactionStatus}
btnGroups={transactionStatusOption}
setter={setFilterTransactionStatus}
></FilterButtonGroups>
<FilterButtonGroups
title='전송결과'
activeValue={filterProcessResult}
btnGroups={processResultOption}
setter={setFilterProcessResult}
></FilterButtonGroups>
<FilterButtonGroups
title='발송수단'
activeValue={filterSendMethod}
btnGroups={sendMethodOption}
setter={setFilterSendMethod}
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>
</motion.div>
</>
)
<FilterButtonGroups
title='발송수단'
activeValue={filterSendMethod}
btnGroups={sendMethodOption}
setter={setFilterSendMethod}
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>
</motion.div>
</>
)
}

280
src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx
View File

@@ -4,172 +4,164 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { ChangeEvent, useState } from 'react';
import {
LinkPaymentWaitFilterProps,
LinkPaymentSearchType,
LinkPaymentSendMethod,
LinkPaymentSendingStatus,
LinkPaymentWaitFilterProps,
LinkPaymentSearchType,
LinkPaymentSendMethod,
LinkPaymentSendingStatus,
} from "../../../model/types";
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterDateOptions } from '@/entities/common/model/types';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
export const LinkPaymentWaitSendFilter = ({
filterOn,
setFilterOn,
mid,
searchType,
searchKeyword,
startDate,
endDate,
sendMethod,
sendingStatus,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setSendMethod,
setSendingStatus
filterOn,
setFilterOn,
mid,
searchType,
searchKeyword,
startDate,
endDate,
sendMethod,
sendingStatus,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setSendMethod,
setSendingStatus
}: LinkPaymentWaitFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod)
const [filterSendingStatus, setFilterSendingStatus] = useState<LinkPaymentSendingStatus>(sendingStatus);
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod)
const [filterSendingStatus, setFilterSendingStatus] = useState<LinkPaymentSendingStatus>(sendingStatus);
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
const onClickToClose = () => {
setFilterOn(false);
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setSendMethod(filterSendMethod);
setSendingStatus(filterSendingStatus);
onClickToClose();
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setSendMethod(filterSendMethod);
setSendingStatus(filterSendingStatus);
onClickToClose();
};
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
let searchTypeOption = [
{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
];
let searchTypeOption = [
{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
]
let sendMethodOption = [
{ name: '전체', value: LinkPaymentSendMethod.ALL },
{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
];
let sendMethodOption = [
{ name: '전체', value: LinkPaymentSendMethod.ALL },
{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
]
let sendingStatusOption = [
{ name: '전체', value: LinkPaymentSendingStatus.ALL },
{ name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
{ name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL },
];
let sendingStatusOption = [
{ name: '전체', value: LinkPaymentSendingStatus.ALL },
{ name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
{ name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL },
]
return (
<>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={(filterOn) ? 'visible' : 'hidden'}
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
>
<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>
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={setFilterMid}
selectOptions={MidOptions}
></FilterSelect>
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={mid}
selectSetter={setFilterMid}
selectOptions={MidOptions}
></FilterSelect>
<FilterSelectInput
title='휴대폰번호/이메일'
selectValue={searchType}
selectSetter={setFilterSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}
inputSetter={setSearchKeyword}
></FilterSelectInput>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterSelectInput
title='휴대폰번호/이메일'
selectValue={searchType}
selectSetter={setFilterSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}
inputSetter={setSearchKeyword}
></FilterSelectInput>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterButtonGroups
title='발송수단'
activeValue={filterSendMethod}
btnGroups={sendMethodOption}
setter={setFilterSendMethod}
></FilterButtonGroups>
<FilterButtonGroups
title='발송수단'
activeValue={filterSendMethod}
btnGroups={sendMethodOption}
setter={setFilterSendMethod}
></FilterButtonGroups>
<FilterButtonGroups
title='진행상태'
activeValue={filterSendingStatus}
btnGroups={sendingStatusOption}
setter={setFilterSendingStatus}
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>
</motion.div>
</>
)
<FilterButtonGroups
title='진행상태'
activeValue={filterSendingStatus}
btnGroups={sendingStatusOption}
setter={setFilterSendingStatus}
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>
</motion.div>
</>
)
}

1
src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
View File

@@ -70,7 +70,6 @@ export const SmsPaymentFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={(filterOn) ? 'visible' : 'hidden'}

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

@@ -54,6 +54,8 @@ export interface FilterButtonGroupsProps {
activeValue?: string;
btnGroups?: Array<ButtonItemProp>
setter: (value: any) => void;
addClassName?: string;
maxBtn?: 2 | 4;
};
export interface ButtonItemProp {
name?: string;

1
src/entities/settlement/ui/filter/list-filter.tsx
View File

@@ -75,7 +75,6 @@ export const ListFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

16
src/entities/transaction/ui/filter.tsx
View File

@@ -1,33 +1,25 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterProps } from '../model/types';
import { motion } from 'framer-motion';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
export const Filter = ({
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%',
}}
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
>
<div className="full-menu-container">
<div className="full-menu-header">

1
src/entities/transaction/ui/filter/all-transaction-filter.tsx
View File

@@ -156,7 +156,6 @@ export const AllTransactionFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

1
src/entities/transaction/ui/filter/billing-filter.tsx
View File

@@ -95,7 +95,6 @@ export const BillingFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

1
src/entities/transaction/ui/filter/cash-receipt-filter.tsx
View File

@@ -82,7 +82,6 @@ export const CashReceiptFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

1
src/entities/transaction/ui/filter/escrow-filter.tsx
View File

@@ -88,7 +88,6 @@ export const EscrowFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

7
src/entities/vat-return/model/contant.ts
View File

@@ -1,4 +1,4 @@
import { VatReturnReceiptType, VatReturnTargetType } from './types';
import { VatReturnPayTax, VatReturnReceiptType, VatReturnTargetType } from './types';
export const VatReturnReceiptTypeBtnGroup = [
{name: '전체', value: VatReturnReceiptType.ALL },
@@ -11,4 +11,9 @@ export const VatReturnTargetTypeBtnGroup = [
{name: '일반', value: VatReturnTargetType.GENERAL },
{name: '차액정산', value: VatReturnTargetType.DIFFERENCE_COLLECTION },
{name: '환급정산', value: VatReturnTargetType.REFUND_SETTLEMENT }
];
export const VatReturnTaxBtnGroups = [
{name: '과세', value: VatReturnPayTax.Tax },
{name: '면세', value: VatReturnPayTax.NoTax },
];

4
src/entities/vat-return/model/types.ts
View File

@@ -13,6 +13,10 @@ export enum VatReturnReceiptType {
RECEIPT = 'RECEIPT',
BILL = 'BILL '
};
export enum VatReturnPayTax {
Tax = 'Tax',
NoTax = 'NoTax'
};
export enum VatReturnTargetType {
ALL = 'ALL',
GENERAL = 'GENERAL',

1
src/entities/vat-return/ui/filter/list-filter.tsx
View File

@@ -64,7 +64,6 @@ export const ListFilter = ({
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }

60
src/entities/vat-return/ui/reference-request-fail.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { motion } from 'framer-motion';
import {
FilterMotionDuration,
FilterMotionStyle,
FilterMotionVariants
} from '@/entities/common/model/constant';
export interface ReferenceRequestFailProps {
pageOn: boolean;
setPageOn: (pageOn: boolean) => void;
};
export const ReferenceRequestFail = ({
pageOn,
setPageOn
}: ReferenceRequestFailProps) => {
const onClickToClose = () => {
setPageOn(false);
};
return (
<>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={(pageOn) ? 'visible' : 'hidden'}
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
>
<div className="full-menu-container">
<div
className="success-page"
style={{ margin: '0 auto' }}
>
<div className="success-body">
<div className="error-icon" aria-hidden="true"></div>
<h1 className="success-title">
<span>부가세 참고 자료</span>
<br/>
<span>신청 실패하였습니다</span>
</h1>
<div className="success-result">
<p className="result-text align-left position_label">
<span>결과 :</span>
<span>[9997] 키인가맹점이 아닙니다.<br/>NICEPAY로 문의하세요.</span>
</p>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ onClickToClose }
>확인</button>
</div>
</div>
</div>
</motion.div>
</>
);
};

61
src/entities/vat-return/ui/reference-request-success.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { motion } from 'framer-motion';
import {
FilterMotionDuration,
FilterMotionStyle,
FilterMotionVariants
} from '@/entities/common/model/constant';
export interface ReferenceRequestSuccessProps {
pageOn: boolean;
setPageOn: (pageOn: boolean) => void;
};
export const ReferenceRequestSuccess = ({
pageOn,
setPageOn
}: ReferenceRequestSuccessProps) => {
const onClickToClose = () => {
setPageOn(false);
};
return (
<>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={(pageOn) ? 'visible' : 'hidden'}
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
>
<div className="full-menu-container">
<div
className="success-body"
style={{ margin: '0 auto' }}
>
<div className="success-icon" aria-hidden="true"></div>
<h1 className="success-title">
<span>부가세 참고 자료</span>
<br/>
<span>신청이 완료되었습니다.</span>
</h1>
<p className="success-subtitle">파일은 선택한 수령 방법으로 제공됩니다.</p>
<div className="success-result">
<p className="result-text">
<span>신청일 :</span> <span>2025.06.04</span>
<br/>
<span>메일주소 :</span> <span>TEST@NICEPAY.CO.KR</span>
</p>
</div>
<p className="success-note dot">참고용 자료이므로 반드시 내부 회계자료 등과<br/>비교 후 사용해 주세요.</p>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ onClickToClose }
>확인</button>
</div>
</div>
</motion.div>
</>
);
};

87
src/entities/vat-return/ui/reference-wrap.tsx Normal file
View File

@@ -0,0 +1,87 @@
import moment from 'moment';
import { useState } from 'react';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterSelect } from '@/shared/ui/filter/select';
import { ReferenceRequestSuccess } from './reference-request-success';
import { ReferenceRequestFail } from './reference-request-fail';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { VatReturnTaxBtnGroups } from '../model/contant';
import { VatReturnPayTax } from '../model/types';
export const ReferenceWrap = () => {
const [success, setSuccess] = useState<boolean>(false);
const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
const [failPageOn, setFailPageOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>('nictest00m');
const [startDate, setStartDate] = useState<string>(moment().format('YYYY.MM.DD'));
const [endDate, setEndDate] = useState<string>(moment().format('YYYY.MM.DD'));
const [payTax, setPayTax] = useState<VatReturnPayTax>(VatReturnPayTax.Tax);
const [email, setEmail] = useState<string>('');
let MidOptions = [
{name: 'nictest001m', value: 'nictest001m'}
];
let EmailOptions = [
{name: 'focp212@naver.com', value: 'focp212@naver.com'}
];
const onClickToResquest = () => {
if(success){
setSuccessPageOn(true);
}
else{
setFailPageOn(true);
}
};
return (
<>
<div className="option-list no-padding pt-30">
<FilterSelect
title='가맹점'
selectValue={ mid }
selectSetter={ setMid }
selectOptions={ MidOptions }
></FilterSelect>
<FilterButtonGroups
title='거래 과세/면세 구분'
activeValue={ payTax }
btnGroups={ VatReturnTaxBtnGroups }
setter={ setPayTax }
addClassName='horizon'
maxBtn={ 2 }
></FilterButtonGroups>
<FilterCalendar
title='거래기간'
startDate={ startDate }
endDate={ endDate }
setStartDate={ setStartDate }
setEndDate={ setEndDate }
></FilterCalendar>
<FilterSelect
title='수령메일주소'
selectValue={ email }
selectSetter={ setEmail }
selectOptions={ EmailOptions }
></FilterSelect>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ onClickToResquest }
>자료신청</button>
</div>
</div>
<ReferenceRequestSuccess
pageOn={ successPageOn }
setPageOn={ setSuccessPageOn }
></ReferenceRequestSuccess>
<ReferenceRequestFail
pageOn={ failPageOn }
setPageOn={ setFailPageOn }
></ReferenceRequestFail>
</>
)
};

26
src/entities/vat-return/ui/var-reference-req-fail.tsx
View File

@@ -1,26 +0,0 @@
export const VatReferenceReqFail = () => {
return (
<>
<div className="success-page">
<div className="success-body">
<div className="error-icon" aria-hidden="true"></div>
<h1 className="success-title">
<span>부가세 참고 자료</span>
<br/>
<span>신청 실패하였습니다</span>
</h1>
<div className="success-result">
<p className="result-text align-left position_label">
<span>결과 :</span>
<span>[9997] 키인가맹점이 아닙니다.<br/>NICEPAY로 문의하세요.</span>
</p>
</div>
</div>
<div className="apply-row">
<button className="btn-50 btn-blue flex-1">확인</button>
</div>
</div>
</>
);
};

29
src/entities/vat-return/ui/vat-reference-req-success.tsx
View File

@@ -1,29 +0,0 @@
export const VatReferenceReqSuccess = () => {
return (
<>
<div className="success-page">
<div className="success-body">
<div className="success-icon" aria-hidden="true"></div>
<h1 className="success-title">
<span>부가세 참고 자료</span>
<br/>
<span>신청이 완료되었습니다.</span>
</h1>
<p className="success-subtitle">파일은 선택한 수령 방법으로 제공됩니다.</p>
<div className="success-result">
<p className="result-text">
<span>신청일 :</span> <span>2025.06.04</span>
<br/>
<span>메일주소 :</span> <span>TEST@NICEPAY.CO.KR</span>
</p>
</div>
<p className="success-note dot">참고용 자료이므로 반드시 내부 회계자료 등과<br/>비교 후 사용해 주세요.</p>
</div>
<div className="apply-row">
<button className="btn-50 btn-blue flex-1">확인</button>
</div>
</div>
</>
);
};

8
src/entities/vat-return/ui/vat-reference-wrap.tsx
View File

@@ -1,8 +0,0 @@
export const VatReferenceWrap = () => {
return (
<>
</>
)
};

2
src/entities/vat-return/ui/vat-return-tab.tsx
View File

@@ -16,7 +16,7 @@ export const VatReturnTab = ({
navigate(PATHS.vatReturn.list);
}
else if(tab === VatReturnTabKeys.VatReference){
navigate(PATHS.vatReturn.vatReference);
navigate(PATHS.vatReturn.reference);
}
}
};