diff --git a/src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx b/src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx index e9141b9..c0d94a3 100644 --- a/src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx +++ b/src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx @@ -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(mid); - const [filterStartDate, setFilterStartDate] = useState(moment(startDate).format('YYYY.MM.DD')); - const [filterEndDate, setFilterEndDate] = useState(moment(endDate).format('YYYY.MM.DD')); - const [filterAuthStatus, setFilterAuthStatus] = useState(authStatus); + const [filterMid, setFilterMid] = useState(mid); + const [filterStartDate, setFilterStartDate] = useState(moment(startDate).format('YYYY.MM.DD')); + const [filterEndDate, setFilterEndDate] = useState(moment(endDate).format('YYYY.MM.DD')); + const [filterAuthStatus, setFilterAuthStatus] = useState(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 ( + <> + +
+
+
필터
+
+ +
+
- return ( - <> - -
-
-
필터
-
- -
-
+
+ -
- + - - - -
-
- -
-
- - - ) + +
+
+ +
+
+ + + ); } diff --git a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx b/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx index 1624046..e505962 100644 --- a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx +++ b/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx @@ -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(mid); - const [filterSearchType, setFilterSearchType] = useState(searchType); - const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); - const [filterStartDate, setFilterStartDate] = useState(moment(startDate).format('YYYY.MM.DD')); - const [filterEndDate, setFilterEndDate] = useState(moment(endDate).format('YYYY.MM.DD')); - const [filterBank, setFilterBank] = useState(bank) - const [filterProcessResult, setFilterProcessResult] = useState(processResult); + const [filterMid, setFilterMid] = useState(mid); + const [filterSearchType, setFilterSearchType] = useState(searchType); + const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); + const [filterStartDate, setFilterStartDate] = useState(moment(startDate).format('YYYY.MM.DD')); + const [filterEndDate, setFilterEndDate] = useState(moment(endDate).format('YYYY.MM.DD')); + const [filterBank, setFilterBank] = useState(bank) + const [filterProcessResult, setFilterProcessResult] = useState(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 ( + <> + +
+
+
필터
+
+ +
+
- return ( - <> - -
-
-
필터
-
- -
-
+
+ -
- + + - - - - - - -
-
- -
-
- - - ) + + +
+
+ +
+
+ + + ); } \ No newline at end of file diff --git a/src/entities/additional-service/ui/filter/alimtalk-filter.tsx b/src/entities/additional-service/ui/filter/alimtalk-filter.tsx index adfe816..ef3baa2 100644 --- a/src/entities/additional-service/ui/filter/alimtalk-filter.tsx +++ b/src/entities/additional-service/ui/filter/alimtalk-filter.tsx @@ -93,7 +93,6 @@ export const AlimtalkFilter = ({ return ( <> { - const [filterMid, setFilterMid] = useState(mid); - const [filterStartDate, setFilterStartDate] = useState(startDate); - const [filterEndDate, setFilterEndDate] = useState(endDate); - const [filterTransactionStatus, setFilterTransactionStatus] = useState(transactionStatus); - const [filterMinAmount, setFilterMinAmount] = useState(minAmount); - const [filterMaxAmount, setFilterMaxAmount] = useState(maxAmount); + const [filterMid, setFilterMid] = useState(mid); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterTransactionStatus, setFilterTransactionStatus] = useState(transactionStatus); + const [filterMinAmount, setFilterMinAmount] = useState(minAmount); + const [filterMaxAmount, setFilterMaxAmount] = useState(maxAmount); - const variants = { - hidden: { x: '100%' }, - visible: { x: '0%' }, - }; + const onClickToClose = () => { + setFilterOn(false); + }; - const 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 ( + <> + +
+
+
필터
+
+ +
+
- return ( - <> - -
-
-
필터
-
- -
-
+
+ + -
- - + - - - - -
-
- -
-
- - - ); + +
+
+ +
+
+ + + ); }; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx b/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx index 43145e1..d3d113a 100644 --- a/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx +++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx @@ -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(mid); - const [filterSearchType, setFilterSearchType] = useState(searchType); - const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); - const [filterStartDate, setFilterStartDate] = useState(startDate); - const [filterEndDate, setFilterEndDate] = useState(endDate); - const [filterTransactionStatus, setFilterTransactionStatus] = useState(transactionStatus) - const [filterProcessResult, setFilterProcessResult] = useState(processResult); - const [filterSendMethod, setFilterSendMethod] = useState(sendMethod); - const [dateReadOnly, setDateReadyOnly] = useState(true); - const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); + const [filterMid, setFilterMid] = useState(mid); + const [filterSearchType, setFilterSearchType] = useState(searchType); + const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterTransactionStatus, setFilterTransactionStatus] = useState(transactionStatus) + const [filterProcessResult, setFilterProcessResult] = useState(processResult); + const [filterSendMethod, setFilterSendMethod] = useState(sendMethod); + const [dateReadOnly, setDateReadyOnly] = useState(true); + const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); - const [calendarOpen, setCalendarOpen] = useState(false); + const [calendarOpen, setCalendarOpen] = useState(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 ( + <> + +
+
+
필터
+
+ +
+
- let sendMethodOption = [ - { name: '전체', value: LinkPaymentSendMethod.ALL }, - { name: 'SMS', value: LinkPaymentSendMethod.SMS }, - { name: '이메일', value: LinkPaymentSendMethod.EMAIL }, - { name: '카카오', value: LinkPaymentSendMethod.KAKAO }, - ] +
+ - return ( - <> - -
-
-
필터
-
- -
-
+ + -
- + - - + - - - - - -
-
- -
-
- - - ) + +
+
+ +
+
+ + + ) } \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx b/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx index 99d6ef6..f153dfa 100644 --- a/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx +++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx @@ -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(mid); - const [filterSearchType, setFilterSearchType] = useState(searchType); - const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); - const [filterStartDate, setFilterStartDate] = useState(startDate); - const [filterEndDate, setFilterEndDate] = useState(endDate); - const [filterSendMethod, setFilterSendMethod] = useState(sendMethod) - const [filterSendingStatus, setFilterSendingStatus] = useState(sendingStatus); - const [dateReadOnly, setDateReadyOnly] = useState(true); - const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); + const [filterMid, setFilterMid] = useState(mid); + const [filterSearchType, setFilterSearchType] = useState(searchType); + const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterSendMethod, setFilterSendMethod] = useState(sendMethod) + const [filterSendingStatus, setFilterSendingStatus] = useState(sendingStatus); + const [dateReadOnly, setDateReadyOnly] = useState(true); + const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); - const [calendarOpen, setCalendarOpen] = useState(false); + const [calendarOpen, setCalendarOpen] = useState(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 ( + <> + +
+
+
필터
+
+ +
+
- return ( - <> - -
-
-
필터
-
- -
-
+
+ -
- + + - - + - - - -
-
- -
-
- - - ) + +
+
+ +
+
+ + + ) } \ No newline at end of file diff --git a/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx b/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx index 22278a8..ad6f343 100644 --- a/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx +++ b/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx @@ -70,7 +70,6 @@ export const SmsPaymentFilter = ({ return ( <> setter: (value: any) => void; + addClassName?: string; + maxBtn?: 2 | 4; }; export interface ButtonItemProp { name?: string; diff --git a/src/entities/settlement/ui/filter/list-filter.tsx b/src/entities/settlement/ui/filter/list-filter.tsx index 7b48f25..2410eda 100644 --- a/src/entities/settlement/ui/filter/list-filter.tsx +++ b/src/entities/settlement/ui/filter/list-filter.tsx @@ -75,7 +75,6 @@ export const ListFilter = ({ return ( <> { - const variants = { - hidden: { x: '100%' }, - visible: { x: '0%' }, - }; - const onClickToClose = () => { setFilterOn(false); }; return ( <>
diff --git a/src/entities/transaction/ui/filter/all-transaction-filter.tsx b/src/entities/transaction/ui/filter/all-transaction-filter.tsx index 5577fab..a6a4044 100644 --- a/src/entities/transaction/ui/filter/all-transaction-filter.tsx +++ b/src/entities/transaction/ui/filter/all-transaction-filter.tsx @@ -156,7 +156,6 @@ export const AllTransactionFilter = ({ return ( <> void; +}; + +export const ReferenceRequestFail = ({ + pageOn, + setPageOn +}: ReferenceRequestFailProps) => { + const onClickToClose = () => { + setPageOn(false); + }; + return ( + <> + +
+
+
+ +

+ 부가세 참고 자료 +
+ 신청 실패하였습니다 +

+
+

+ 결과 : + [9997] 키인가맹점이 아닙니다.
NICEPAY로 문의하세요. +

+
+
+
+ +
+
+
+ + + ); +}; \ No newline at end of file diff --git a/src/entities/vat-return/ui/reference-request-success.tsx b/src/entities/vat-return/ui/reference-request-success.tsx new file mode 100644 index 0000000..761d1f6 --- /dev/null +++ b/src/entities/vat-return/ui/reference-request-success.tsx @@ -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 ( + <> + +
+
+ +

+ 부가세 참고 자료 +
+ 신청이 완료되었습니다. +

+

파일은 선택한 수령 방법으로 제공됩니다.

+
+

+ 신청일 : 2025.06.04 +
+ 메일주소 : TEST@NICEPAY.CO.KR +

+
+

참고용 자료이므로 반드시 내부 회계자료 등과
비교 후 사용해 주세요.

+
+
+ +
+
+ + + ); +}; \ No newline at end of file diff --git a/src/entities/vat-return/ui/reference-wrap.tsx b/src/entities/vat-return/ui/reference-wrap.tsx new file mode 100644 index 0000000..7efffbf --- /dev/null +++ b/src/entities/vat-return/ui/reference-wrap.tsx @@ -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(false); + + const [successPageOn, setSuccessPageOn] = useState(false); + const [failPageOn, setFailPageOn] = useState(false); + const [mid, setMid] = useState('nictest00m'); + const [startDate, setStartDate] = useState(moment().format('YYYY.MM.DD')); + const [endDate, setEndDate] = useState(moment().format('YYYY.MM.DD')); + const [payTax, setPayTax] = useState(VatReturnPayTax.Tax); + const [email, setEmail] = useState(''); + + 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 ( + <> +
+ + + + +
+ +
+
+ + + + ) +}; \ No newline at end of file diff --git a/src/entities/vat-return/ui/var-reference-req-fail.tsx b/src/entities/vat-return/ui/var-reference-req-fail.tsx deleted file mode 100644 index cb0ff8e..0000000 --- a/src/entities/vat-return/ui/var-reference-req-fail.tsx +++ /dev/null @@ -1,26 +0,0 @@ -export const VatReferenceReqFail = () => { - - return ( - <> -
-
- -

- 부가세 참고 자료 -
- 신청 실패하였습니다 -

-
-

- 결과 : - [9997] 키인가맹점이 아닙니다.
NICEPAY로 문의하세요. -

-
-
-
- -
-
- - ); -}; \ No newline at end of file diff --git a/src/entities/vat-return/ui/vat-reference-req-success.tsx b/src/entities/vat-return/ui/vat-reference-req-success.tsx deleted file mode 100644 index 96a124b..0000000 --- a/src/entities/vat-return/ui/vat-reference-req-success.tsx +++ /dev/null @@ -1,29 +0,0 @@ -export const VatReferenceReqSuccess = () => { - - return ( - <> -
-
- -

- 부가세 참고 자료 -
- 신청이 완료되었습니다. -

-

파일은 선택한 수령 방법으로 제공됩니다.

-
-

- 신청일 : 2025.06.04 -
- 메일주소 : TEST@NICEPAY.CO.KR -

-
-

참고용 자료이므로 반드시 내부 회계자료 등과
비교 후 사용해 주세요.

-
-
- -
-
- - ); -}; \ No newline at end of file diff --git a/src/entities/vat-return/ui/vat-reference-wrap.tsx b/src/entities/vat-return/ui/vat-reference-wrap.tsx deleted file mode 100644 index a553600..0000000 --- a/src/entities/vat-return/ui/vat-reference-wrap.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export const VatReferenceWrap = () => { - - return ( - <> - - - ) -}; \ No newline at end of file diff --git a/src/entities/vat-return/ui/vat-return-tab.tsx b/src/entities/vat-return/ui/vat-return-tab.tsx index b47c919..1f8fc3f 100644 --- a/src/entities/vat-return/ui/vat-return-tab.tsx +++ b/src/entities/vat-return/ui/vat-return-tab.tsx @@ -16,7 +16,7 @@ export const VatReturnTab = ({ navigate(PATHS.vatReturn.list); } else if(tab === VatReturnTabKeys.VatReference){ - navigate(PATHS.vatReturn.vatReference); + navigate(PATHS.vatReturn.reference); } } }; diff --git a/src/pages/vat-return/vat-reference-page.tsx b/src/pages/vat-return/reference-page.tsx similarity index 81% rename from src/pages/vat-return/vat-reference-page.tsx rename to src/pages/vat-return/reference-page.tsx index fb7aebf..76a24e2 100644 --- a/src/pages/vat-return/vat-reference-page.tsx +++ b/src/pages/vat-return/reference-page.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { VatReturnTab } from '@/entities/vat-return/ui/vat-return-tab'; -import { VatReferenceWrap } from '@/entities/vat-return/ui/vat-reference-wrap'; +import { ReferenceWrap } from '@/entities/vat-return/ui/reference-wrap'; import { VatReturnTabKeys } from '@/entities/vat-return/model/types'; import { HeaderType } from '@/entities/common/model/types'; import { @@ -12,8 +12,7 @@ import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; - -export const VatReferencePage = () => { +export const ReferencePage = () => { const { navigate } = useNavigate(); const [activeTab, setActiveTab] = useState(VatReturnTabKeys.VatReference); @@ -28,9 +27,9 @@ export const VatReferencePage = () => { <>
-
+
- +
diff --git a/src/pages/vat-return/vat-return-pages.tsx b/src/pages/vat-return/vat-return-pages.tsx index 03bfb47..13d83d4 100644 --- a/src/pages/vat-return/vat-return-pages.tsx +++ b/src/pages/vat-return/vat-return-pages.tsx @@ -3,7 +3,7 @@ import { SentryRoutes } from '@/shared/configs/sentry'; import { ROUTE_NAMES } from '@/shared/constants/route-names'; import { ListPage } from './list-page'; import { DetailPage } from './detail-page'; -import { VatReferencePage } from './vat-reference-page'; +import { ReferencePage } from './reference-page'; export const VatReturnPages = () => { return ( @@ -11,7 +11,7 @@ export const VatReturnPages = () => { } /> } /> - } /> + } /> ); diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts index b5c85a3..71c87b1 100644 --- a/src/shared/constants/paths.ts +++ b/src/shared/constants/paths.ts @@ -128,7 +128,7 @@ export const PATHS: RouteNamesType = { base: generatePath(ROUTE_NAMES.vatReturn.base), list: generatePath(ROUTE_NAMES.vatReturn.base, ROUTE_NAMES.vatReturn.list), detail: generatePath(ROUTE_NAMES.vatReturn.base, ROUTE_NAMES.vatReturn.detail), - vatReference: generatePath(ROUTE_NAMES.vatReturn.base, ROUTE_NAMES.vatReturn.vatReference), + reference: generatePath(ROUTE_NAMES.vatReturn.base, ROUTE_NAMES.vatReturn.reference), }, additionalService: { base: generatePath(ROUTE_NAMES.additionalService.base), @@ -301,13 +301,6 @@ export const PATHS: RouteNamesType = { ROUTE_NAMES.additionalService.payout.request, ), }, - paymentAgency: { - base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`), - list: generatePath( - `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`, - ROUTE_NAMES.additionalService.paymentAgency.list, - ), - }, }, support: { base: generatePath(ROUTE_NAMES.support.base), diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts index f68442a..85157fe 100644 --- a/src/shared/constants/route-names.ts +++ b/src/shared/constants/route-names.ts @@ -62,7 +62,7 @@ export const ROUTE_NAMES = { base: '/vat-return/*', list: 'list', detail: 'detail', - vatReference: 'vatReference' + reference: 'reference' }, additionalService: { base: '/additional-service/*', @@ -130,11 +130,7 @@ export const ROUTE_NAMES = { detail: 'detail', request: 'request', }, - paymentAgency: { - base: '/payment-agency/*', - list: 'list', - }, - + }, support: { base: '/support/*', diff --git a/src/shared/ui/assets/css/style.css b/src/shared/ui/assets/css/style.css index 53f7e11..528f223 100644 --- a/src/shared/ui/assets/css/style.css +++ b/src/shared/ui/assets/css/style.css @@ -383,7 +383,7 @@ main.pb-0 .tab-pane { } .tab-pane.sub { - padding-bottom: 60px; + padding-bottom: 60px !important; } .tab-pane.active { @@ -1493,8 +1493,18 @@ input[type="radio"] { gap: 16px; } +.option-list.no-padding { + gap: 26px +} + .option-list-nopadding { - padding: 0 10px + padding: 0 10px; +} + +.no-padding .opt-field { + padding: 0; + gap: 10px; + } .opt-field { @@ -1504,6 +1514,12 @@ input[type="radio"] { gap: 4px; padding: 0 16px; } +.opt-field.horizon { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + padding: 0; +} .opt-field.no-padding { padding: 0; @@ -4422,18 +4438,6 @@ ul.txn-amount-detail li span:last-child { background: #F5F5F5 url('../images/ico_del_minus.svg') no-repeat center center; } -.icon-btn.check { - width: 36px; - height: 36px; - border-radius: 6px; - background: #F5F5F5 url('../images/ico_alone_check.svg') no-repeat center center; -} - -.button-group { - display: flex; - gap: 8px; -} - .notice-bar { padding: 14px 16px; background: #F4F8FF; @@ -5605,12 +5609,6 @@ ul.txn-amount-detail li span:last-child { .faq-section { padding: 0 10px; } - -.faq-controlls { - display: grid; - gap: 16px; -} - .faq-search { position: relative; display: flex; @@ -5636,9 +5634,14 @@ ul.txn-amount-detail li span:last-child { } .faq-filter { display: flex; + align-items: center; + justify-content: space-between; height: 40px; + padding: 0 12px; + border: 1px solid #D9D9D9; + border-radius: 8px; + margin-top: 10px; } - .faq-filter .text { font-size: 15px; color: var(--color-2D3436); diff --git a/src/shared/ui/filter/button-groups.tsx b/src/shared/ui/filter/button-groups.tsx index 4a5bc0d..0495e28 100644 --- a/src/shared/ui/filter/button-groups.tsx +++ b/src/shared/ui/filter/button-groups.tsx @@ -5,13 +5,15 @@ export const FilterButtonGroups = ({ activeValue, btnGroups, setter, + addClassName, + maxBtn }: FilterButtonGroupsProps) => { - + const onwRowMaxBtn: 2 | 4 = maxBtn || 4; const getBtns = () => { let rs = []; if(!!btnGroups && btnGroups.length > 0){ - let emptySpanCnt = 4 - (btnGroups.length % 4); + let emptySpanCnt = onwRowMaxBtn - (btnGroups.length % onwRowMaxBtn); let innerList = []; for(let i=0;i setter(btnGroups[i]?.value || '') } >{ btnGroups[i]?.name } ); - if((i % 4) === 3 ){ + if((i % onwRowMaxBtn) === (onwRowMaxBtn - 1) ){ rs.push(
0 && emptySpanCnt < 4){ + if(emptySpanCnt > 0 && emptySpanCnt < onwRowMaxBtn){ for(let i=0;i -
+
{ title }
-
+
{ getBtns() }
diff --git a/src/shared/ui/menu/index.tsx b/src/shared/ui/menu/index.tsx index 83b0c3b..48ea5fc 100644 --- a/src/shared/ui/menu/index.tsx +++ b/src/shared/ui/menu/index.tsx @@ -5,6 +5,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { MenuCategory } from '@/entities/menu/ui/menu-category'; import { FavoriteWrapper } from '@/entities/home/ui/favorite-wrapper'; import { useStore } from '@/shared/model/store'; +import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant'; export interface MenuProps { menuOn: boolean; @@ -74,7 +75,7 @@ export const Menu = ({ categoryIcon: 'vat-icon', items: [ {title: '세금계산서', path: PATHS.vatReturn.list}, - {title: '부가세 참고', path: PATHS.vatReturn.vatReference}, + {title: '부가세 참고', path: PATHS.vatReturn.reference}, ] }, additionalService: { @@ -129,16 +130,12 @@ export const Menu = ({ return ( <>