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

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

@@ -7,6 +7,7 @@ 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,
@@ -26,11 +27,6 @@ export const AccountHolderAuthFilter = ({
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' }
@@ -51,16 +47,12 @@ export const AccountHolderAuthFilter = ({
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">
@@ -110,5 +102,5 @@ export const AccountHolderAuthFilter = ({
</div>
</motion.div>
</>
)
);
}

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

@@ -12,6 +12,7 @@ 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,
@@ -40,11 +41,6 @@ export const AccountHolderSearchFilter = ({
const [filterBank, setFilterBank] = useState<string>(bank)
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
@@ -72,12 +68,12 @@ export const AccountHolderSearchFilter = ({
let bankOptions = [
{ name: '우리은행', value: '우리은행' },
{ name: '토스뱅킹', value: '토스뱅킹' }
]
];
let searchTypeOption = [
{ name: '예금주', value: AccountHolderSearchType.ACCOUNT_NAME },
{ name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NO },
]
];
let processResultBtnGroup = [
{ name: '전체', value: ProcessResult.ALL },
@@ -88,16 +84,12 @@ export const AccountHolderSearchFilter = ({
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">
@@ -162,6 +154,5 @@ export const AccountHolderSearchFilter = ({
</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' }

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

@@ -12,6 +12,7 @@ import {
KeyInPaymentFilterProps,
KeyInPaymentTransactionStatus
} from '../../../model/types';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
export const KeyInPaymentFilter = ({
filterOn,
@@ -37,11 +38,6 @@ export const KeyInPaymentFilter = ({
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);
};
@@ -68,21 +64,17 @@ export const KeyInPaymentFilter = ({
{ name: '승인', value: KeyInPaymentTransactionStatus.APPROVAL },
{ name: '전취소', value: KeyInPaymentTransactionStatus.PRE_CANCEL },
{ name: '후취소', value: KeyInPaymentTransactionStatus.POST_CANCEL },
]
];
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">
@@ -130,7 +122,6 @@ export const KeyInPaymentFilter = ({
setMinAmount={setFilterMinAmount}
setMaxAmount={setFilterMaxAmount}
></FilterRangeAmount>
</div>
<div className="apply-row">
<button

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

@@ -15,6 +15,7 @@ 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,
@@ -51,11 +52,6 @@ export const LinkPaymentHistoryFilter = ({
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
@@ -84,7 +80,7 @@ export const LinkPaymentHistoryFilter = ({
let searchTypeOption = [
{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
]
];
let transactionStatusOption = [
{ name: '전체', value: LinkPaymentTransactionStatus.ALL },
@@ -93,34 +89,30 @@ export const LinkPaymentHistoryFilter = ({
{ name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE },
{ name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL },
{ name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE },
]
];
let processResultOption = [
{ name: '전체', value: ProcessResult.ALL },
{ name: '성공', value: ProcessResult.SUCCESS },
{ name: '실패', value: ProcessResult.FAIL },
]
];
let sendMethodOption = [
{ name: '전체', value: LinkPaymentSendMethod.ALL },
{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
]
];
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">

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

@@ -14,6 +14,7 @@ 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,
@@ -47,11 +48,6 @@ export const LinkPaymentWaitSendFilter = ({
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
@@ -79,34 +75,30 @@ export const LinkPaymentWaitSendFilter = ({
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 sendingStatusOption = [
{ name: '전체', value: LinkPaymentSendingStatus.ALL },
{ name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
{ name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL },
]
];
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/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 },
@@ -12,3 +12,8 @@ export const VatReturnTargetTypeBtnGroup = [
{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);
}
}
};

9
src/pages/vat-return/vat-reference-page.tsx → src/pages/vat-return/reference-page.tsx
View File

@@ -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>(VatReturnTabKeys.VatReference);
@@ -28,9 +27,9 @@ export const VatReferencePage = () => {
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="tab-pane pt-46 active">
<VatReturnTab activeTab={ activeTab }></VatReturnTab>
<VatReferenceWrap></VatReferenceWrap>
<ReferenceWrap></ReferenceWrap>
</div>
</div>
</main>

4
src/pages/vat-return/vat-return-pages.tsx
View File

@@ -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 = () => {
<SentryRoutes>
<Route path={ROUTE_NAMES.vatReturn.list} element={<ListPage />} />
<Route path={ROUTE_NAMES.vatReturn.detail} element={<DetailPage />} />
<Route path={ROUTE_NAMES.vatReturn.vatReference} element={<VatReferencePage />} />
<Route path={ROUTE_NAMES.vatReturn.reference} element={<ReferencePage />} />
</SentryRoutes>
</>
);

9
src/shared/constants/paths.ts
View File

@@ -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),

6
src/shared/constants/route-names.ts
View File

@@ -62,7 +62,7 @@ export const ROUTE_NAMES = {
base: '/vat-return/*',
list: 'list',
detail: 'detail',
vatReference: 'vatReference'
reference: 'reference'
},
additionalService: {
base: '/additional-service/*',
@@ -130,10 +130,6 @@ export const ROUTE_NAMES = {
detail: 'detail',
request: 'request',
},
paymentAgency: {
base: '/payment-agency/*',
list: 'list',
},
},
support: {

45
src/shared/ui/assets/css/style.css
View File

@@ -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);

14
src/shared/ui/filter/button-groups.tsx
View File

@@ -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<btnGroups.length;i++){
@@ -22,7 +24,7 @@ export const FilterButtonGroups = ({
onClick={ () => setter(btnGroups[i]?.value || '') }
>{ btnGroups[i]?.name }</span>
);
if((i % 4) === 3 ){
if((i % onwRowMaxBtn) === (onwRowMaxBtn - 1) ){
rs.push(
<div
key={ `key-btngroup-chip-row-${i}` }
@@ -32,7 +34,7 @@ export const FilterButtonGroups = ({
innerList = [];
}
}
if(emptySpanCnt > 0 && emptySpanCnt < 4){
if(emptySpanCnt > 0 && emptySpanCnt < onwRowMaxBtn){
for(let i=0;i<emptySpanCnt;i++){
innerList.push(
<span
@@ -54,9 +56,9 @@ export const FilterButtonGroups = ({
};
return (
<>
<div className="opt-field">
<div className={ `opt-field ${addClassName || ''}` }>
<div className="opt-label">{ title }</div>
<div className="opt-controls col below h36">
<div className="opt-controls col h36">
{ getBtns() }
</div>
</div>

13
src/shared/ui/menu/index.tsx
View File

@@ -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 (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (menuOn)? '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">