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-19 09:49:39 +09:00
parent 3a813420dd
commit 34dc536455
19 changed files with 49 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -78,6 +78,15 @@ export enum FooterItemActiveKey {
Settlement = 'Settlement',
Account = 'Account',
};
export enum SortByKeys {
New = 'New',
Amount = 'Amount',
};
export interface SortOptionsBoxProps {
sortBy: SortByKeys;
onClickToSort: (sortBy: SortByKeys) => void;
};
export interface CodesSelectParams {
codeCl?: string;
colNm?: string;

0
src/entities/settlement/ui/sort-options-box.tsx → src/entities/common/ui/sort-options-box.tsx
View File

8
src/entities/settlement/model/types.ts
View File

@@ -1,13 +1,5 @@
import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
export enum SortByKeys {
New = 'New',
Amount = 'Amount',
};
export interface SortOptionsBoxProps {
sortBy: SortByKeys;
onClickToSort: (sortBy: SortByKeys) => void;
};
export enum SettlementTabKeys {
Calendar = 'calendar',
List = 'list'

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

@@ -6,7 +6,7 @@ import { ListDateGroup } from './list-date-group';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { SortOptionsBox } from '@/entities/settlement/ui/sort-options-box';
import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
import { useSettlementsHistoryMutation } from '../api/use-settlements-history-mutation';
import { useSettlementsHistorySummaryMutation } from '../api/use-settlements-history-summary-mutation';
import { useSettlementsTransactionSummaryMutation } from '../api/use-settlements-transaction-summary-mutation';
@@ -18,13 +18,13 @@ import 'react-slidedown/lib/slidedown.css';
import { ListFilter } from './filter/list-filter';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import {
SortByKeys,
SettlementPeriodType,
SettlementPaymentMethod,
SettlementsHistoryContent,
ListDateGroupProps,
SettlementsTransactionListContent
} from '@/entities/settlement/model/types';
} from '../model/types';
import { SortByKeys } from '@/entities/common/model/types';
export interface ListWrapProps {
startDateFromCalendar?: string;

15
src/entities/tax/model/types.ts
View File

@@ -9,23 +9,14 @@ export interface InvoiceFilterProps {
filterOn: boolean;
setFilterOn: (filterOn: boolean) => void;
};
export enum SortByKeys {
New = 'New',
Amount = 'Amount',
};
export interface SortOptionsBoxProps {
sortBy: SortByKeys;
onCliCkToSort: (sortBy: SortByKeys) => void;
};
export enum DetailInfoSectionKeys {
Amount = 'Amount',
Publish = 'Publish',
Receiver = 'Receiver',
Supplier = 'Supplier',
};
export interface InvoiceArrowProps {
show?: boolean;
};
export interface InvoiceListParams {
};
@@ -77,7 +68,7 @@ export interface DetailResponse {
};
export interface DetailInfoSectionProps extends DetailResponse {
show?: boolean;
isOpen?: boolean;
tid?: string;
onClickToShowInfo?: (info: DetailInfoSectionKeys) => void;
};

6
src/entities/tax/ui/detail-amount-info-section.tsx
View File

@@ -1,9 +1,9 @@
import { DetailInfoSectionProps } from '../model/types';
import { InvoiceArrow } from './invoice-arrow';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
export const DetailAmountInfoSection = ({
amountInfo,
show,
isOpen,
onClickToShowInfo
}: DetailInfoSectionProps) => {
@@ -16,7 +16,7 @@ export const DetailAmountInfoSection = ({
className="chip-btn"
type="button"
>
<span>금액상세</span> <InvoiceArrow show={ show }></InvoiceArrow>
<span>금액상세</span> <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</button>
</div>
<div className="amount-expand">

2
src/entities/tax/ui/detail-publish-info-section.tsx
View File

@@ -2,7 +2,7 @@ import { DetailInfoSectionProps } from '../model/types';
export const DetailPublishInfoSection = ({
publishInfo,
show,
isOpen,
onClickToShowInfo
}: DetailInfoSectionProps) => {

2
src/entities/tax/ui/detail-receiver-info-section.tsx
View File

@@ -2,7 +2,7 @@ import { DetailInfoSectionProps } from '../model/types';
export const DetailReceiverInfoSection = ({
receiverInfo,
show,
isOpen,
onClickToShowInfo
}: DetailInfoSectionProps) => {

2
src/entities/tax/ui/detail-supplier-info-section.tsx
View File

@@ -2,7 +2,7 @@ import { DetailInfoSectionProps } from '../model/types';
export const DetailSupplierInfoSection = ({
supplierInfo,
show,
isOpen,
onClickToShowInfo
}: DetailInfoSectionProps) => {

24
src/entities/tax/ui/invoice-arrow.tsx
View File

@@ -1,24 +0,0 @@
import { useEffect, useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { AltMsgKeys } from '@/entities/common/model/types';
import { InvoiceArrowProps } from '../model/types';
export const InvoiceArrow = ({ show }: InvoiceArrowProps) => {
const [altMsg, setAltMsg] = useState<AltMsgKeys>(AltMsgKeys.Fold);
const [className, setClassName] = useState<string>('ic20 rot-180');
useEffect(() => {
setAltMsg((show)? AltMsgKeys.Fold: AltMsgKeys.UnFold);
setClassName(`ic20 ${(show)? 'rot-180': ''}`);
}, [show]);
return (
<>
<img
className={ className }
src={ IMAGE_ROOT + '/select_arrow.svg' }
alt={ altMsg }
/>
</>
);
};

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

@@ -1,8 +1,8 @@
import { useEffect, useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { InvoiceFilter } from './invoice-filter';
import { SortOptionsBox } from './sort-options-box';
import { SortByKeys } from '../model/types';
import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
import { SortByKeys } from '@/entities/common/model/types';
import { InvoiceList } from './invoice-list';
export const InvoiceListWrap = () => {
@@ -21,7 +21,7 @@ export const InvoiceListWrap = () => {
const onClickToOpenFIlter = () => {
setFilterOn(true);
};
const onCliCkToSort = (sort: SortByKeys) => {
const onClickToSort = (sort: SortByKeys) => {
setSortBy(sort);
};
@@ -60,7 +60,7 @@ export const InvoiceListWrap = () => {
<div className="filter-section mt-10">
<SortOptionsBox
sortBy={ sortBy }
onCliCkToSort={ onCliCkToSort }
onClickToSort={ onClickToSort }
></SortOptionsBox>
</div>
<InvoiceList

25
src/entities/tax/ui/sort-options-box.tsx
View File

@@ -1,25 +0,0 @@
import {
SortByKeys,
SortOptionsBoxProps
} from '../model/types';
export const SortOptionsBox = ({
sortBy,
onCliCkToSort
}: SortOptionsBoxProps) => {
return (
<>
<div className="sort-options">
<button
className={ `sort-btn ${(sortBy === SortByKeys.New)? 'active': ''}` }
onClick={ () => onCliCkToSort(SortByKeys.New) }
>최신순</button>
<span className="sort-divider">|</span>
<button
className={ `sort-btn ${(sortBy === SortByKeys.Amount)? 'active': ''}` }
onClick={ () => onCliCkToSort(SortByKeys.Amount) }
>고액순</button>
</div>
</>
);
};

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

@@ -4,10 +4,6 @@ export enum CancelTabKeys {
All = 'All',
Part = 'Part'
};
export enum SortByKeys {
New = 'New',
Amount = 'Amount',
};
export enum TransactionCategory {
AllTransaction = 'AllTransaction',
CashReceipt = 'CashReceipt',
@@ -130,10 +126,6 @@ export enum BillingPaymentMethod {
MOBILE_PAYMENT = 'MOBILE_PAYMENT'
};
export interface SortOptionsBoxProps {
sortBy: SortByKeys;
onCliCkToSort: (sortBy: SortByKeys) => void;
};
export interface ListItemProps extends AllTransactionListItem, CashReceiptListItem, EscrowListItem, BillingListItem {
transactionCategory?: TransactionCategory;
};

25
src/entities/transaction/ui/sort-options-box.tsx
View File

@@ -1,25 +0,0 @@
import {
SortByKeys,
SortOptionsBoxProps
} from '../model/types';
export const SortOptionsBox = ({
sortBy,
onCliCkToSort
}: SortOptionsBoxProps) => {
return (
<>
<div className="sort-options">
<button
className={ `sort-btn ${(sortBy === SortByKeys.New)? 'active': ''}` }
onClick={ () => onCliCkToSort(SortByKeys.New) }
>최신순</button>
<span className="sort-divider">|</span>
<button
className={ `sort-btn ${(sortBy === SortByKeys.Amount)? 'active': ''}` }
onClick={ () => onCliCkToSort(SortByKeys.Amount) }
>고액순</button>
</div>
</>
);
};

8
src/pages/tax/invoice/detail-page.tsx
View File

@@ -91,7 +91,7 @@ export const InvoiceDetailPage = () => {
<DetailAmountInfoSection
amountInfo={ amountInfo }
show={ showAmount }
isOpen={ showAmount }
tid={ tid }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></DetailAmountInfoSection>
@@ -100,7 +100,7 @@ export const InvoiceDetailPage = () => {
<DetailPublishInfoSection
publishInfo={ publishInfo }
show={ showAmount }
isOpen={ showAmount }
tid={ tid }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></DetailPublishInfoSection>
@@ -109,7 +109,7 @@ export const InvoiceDetailPage = () => {
<DetailReceiverInfoSection
receiverInfo={ receiverInfo }
show={ showAmount }
isOpen={ showAmount }
tid={ tid }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></DetailReceiverInfoSection>
@@ -118,7 +118,7 @@ export const InvoiceDetailPage = () => {
<DetailSupplierInfoSection
supplierInfo={ supplierInfo }
show={ showAmount }
isOpen={ showAmount }
tid={ tid }
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
></DetailSupplierInfoSection>

10
src/pages/transaction/all-transaction/list-page.tsx
View File

@@ -5,15 +5,15 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
import { AllTransactionListItem, TransactionCategory, SortByKeys, AllTransactionStateCode, AllTransactionServiceCode, AllTransactionSearchCl } from '@/entities/transaction/model/types';
import { AllTransactionListItem, TransactionCategory, AllTransactionStateCode, AllTransactionServiceCode, AllTransactionSearchCl } from '@/entities/transaction/model/types';
import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { AllTransactionFilter } from '@/entities/transaction/ui/filter/all-transaction-filter';
import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
import { FooterItemActiveKey } from '@/entities/common/model/types';
import { HeaderType } from '@/entities/common/model/types';
import { SortByKeys, HeaderType } from '@/entities/common/model/types';
import {
useSetOnBack,
useSetHeaderTitle,
@@ -128,7 +128,7 @@ export const AllTransactionListPage = () => {
});
};
const onCliCkToSort = (sort: SortByKeys) => {
const onClickToSort = (sort: SortByKeys) => {
setSortBy(sort);
callList({sortBy: sort});
};
@@ -227,7 +227,7 @@ export const AllTransactionListPage = () => {
<div className="filter-section">
<SortOptionsBox
sortBy={ sortBy }
onCliCkToSort={ onCliCkToSort }
onClickToSort={ onClickToSort }
></SortOptionsBox>
<select
value={ selectedServiceCode }

10
src/pages/transaction/billing/list-page.tsx
View File

@@ -5,14 +5,14 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { BillingList } from '@/entities/transaction/ui/billing-list';
import { BillingListItem, TransactionCategory, SortByKeys, BillingRequestStatus, BillingProcessResult, BillingPaymentMethod, BillingSearchType } from '@/entities/transaction/model/types';
import { BillingListItem, TransactionCategory, BillingRequestStatus, BillingProcessResult, BillingPaymentMethod, BillingSearchType } from '@/entities/transaction/model/types';
import { useBillingListMutation } from '@/entities/transaction/api/use-billing-list-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { BillingFilter } from '@/entities/transaction/ui/filter/billing-filter';
import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
import { BillingRequestStatusBtnGroup } from '@/entities/transaction/model/contant';
import { HeaderType } from '@/entities/common/model/types';
import { SortByKeys, HeaderType } from '@/entities/common/model/types';
import {
useSetOnBack,
useSetHeaderTitle,
@@ -110,7 +110,7 @@ export const BillingListPage = () => {
});
};
const onCliCkToSort = (sort: SortByKeys) => {
const onClickToSort = (sort: SortByKeys) => {
setSortBy(sort);
callList({sortBy: sort});
};
@@ -159,7 +159,7 @@ export const BillingListPage = () => {
<div className="filter-section">
<SortOptionsBox
sortBy={ sortBy }
onCliCkToSort={ onCliCkToSort }
onClickToSort={ onClickToSort }
></SortOptionsBox>
<div className="excrow">
<div className="full-menu-keywords no-padding">

10
src/pages/transaction/cash-receipt/list-page.tsx
View File

@@ -5,13 +5,13 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CashReceiptList } from '@/entities/transaction/ui/cash-receipt-list';
import { CashReceiptListItem, TransactionCategory, SortByKeys, CashReceiptPurposeType, CashReceiptIssueStatus, CashReceiptProcessResult } from '@/entities/transaction/model/types';
import { CashReceiptListItem, TransactionCategory, CashReceiptPurposeType, CashReceiptIssueStatus, CashReceiptProcessResult } from '@/entities/transaction/model/types';
import { useCashReceiptListMutation } from '@/entities/transaction/api/use-cash-receipt-list-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { CashReceiptFilter } from '@/entities/transaction/ui/filter/cash-receipt-filter';
import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
import { HeaderType } from '@/entities/common/model/types';
import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
import { SortByKeys, HeaderType } from '@/entities/common/model/types';
import {
useSetOnBack,
useSetHeaderTitle,
@@ -94,7 +94,7 @@ export const CashReceiptListPage = () => {
});
};
const onCliCkToSort = (sort: SortByKeys) => {
const onClickToSort = (sort: SortByKeys) => {
setSortBy(sort);
callList({ sortBy: sort });
};
@@ -185,7 +185,7 @@ export const CashReceiptListPage = () => {
<div className="filter-section">
<SortOptionsBox
sortBy={sortBy}
onCliCkToSort={onCliCkToSort}
onClickToSort={ onClickToSort }
></SortOptionsBox>
<div>
<div className="full-menu-keywords no-padding">

10
src/pages/transaction/escrow/list-page.tsx
View File

@@ -5,14 +5,14 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { EscrowList } from '@/entities/transaction/ui/escrow-list';
import { EscrowListItem, TransactionCategory, SortByKeys, EscrowDeliveryStatus, EscrowSearchType, EscrowSettlementStatus } from '@/entities/transaction/model/types';
import { EscrowListItem, TransactionCategory, EscrowDeliveryStatus, EscrowSearchType, EscrowSettlementStatus } from '@/entities/transaction/model/types';
import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { EscrowFilter } from '@/entities/transaction/ui/filter/escrow-filter';
import { EscrowDeliveryStatusBtnGroup } from '@/entities/transaction/model/contant';
import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
import { HeaderType } from '@/entities/common/model/types';
import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
import { SortByKeys, HeaderType } from '@/entities/common/model/types';
import {
useSetOnBack,
useSetHeaderTitle,
@@ -108,7 +108,7 @@ export const EscrowListPage = () => {
});
};
const onCliCkToSort = (sort: SortByKeys) => {
const onClickToSort = (sort: SortByKeys) => {
setSortBy(sort);
callList({sortBy: sort});
};
@@ -157,7 +157,7 @@ export const EscrowListPage = () => {
<div className="filter-section">
<SortOptionsBox
sortBy={ sortBy }
onCliCkToSort={ onCliCkToSort }
onClickToSort={ onClickToSort }
></SortOptionsBox>
<div className="excrow">
<div className="full-menu-keywords no-padding">