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

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/common/ui/sort-options-box.tsx

@@ -0,0 +1,22 @@
+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>
+    </>
+  );
+};