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

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

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