정렬 박스 및 드랍다운 섹션 화살표 공통화 처리

src/entities/common/model/types.ts

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

src/entities/settlement/model/types.ts

@@ -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'

src/entities/settlement/ui/list-wrap.tsx

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

src/entities/tax/model/types.ts

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

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

@@ -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">

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

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

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

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

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

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

src/entities/tax/ui/invoice-arrow.tsx

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

src/entities/tax/ui/invoice-list-wrap.tsx

@@ -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 { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
-import { SortByKeys } from '../model/types';
+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 

src/entities/tax/ui/sort-options-box.tsx

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

src/entities/transaction/model/types.ts

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

src/entities/transaction/ui/sort-options-box.tsx

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

src/pages/tax/invoice/detail-page.tsx

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

src/pages/transaction/all-transaction/list-page.tsx

@@ -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 }

src/pages/transaction/billing/list-page.tsx

@@ -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">

src/pages/transaction/cash-receipt/list-page.tsx

@@ -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 { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
-import { HeaderType } from '@/entities/common/model/types';
+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">

src/pages/transaction/escrow/list-page.tsx

@@ -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 { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
-import { HeaderType } from '@/entities/common/model/types';
+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">