mid 셋팅및 코드 정리

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

@@ -11,11 +11,14 @@ import {
   SettlementsCalendarResponse,
   SettlementStatus
 } from '../model/types';
+import { useStore } from '@/shared/model/store';
 
 export const CalendarWrap = () => {
   moment.locale('ko');
+  const midOptions = useStore.getState().UserStore.selectOptionsMids;
+  const userMid = useStore.getState().UserStore.mid;
 
-  const [mid, setMid] = useState<string>('nictest00m');
+  const [mid, setMid] = useState<string>(userMid);
   const [yearMonth, setYearMonth] = useState<string>(moment().format('YYYY-MM'));
   const [totalCompletedAmount, setTotalCompletedAmount] = useState<number>(0);
   const [totalScheduledAmount, setTotalScheduledAmount] = useState<number>(0);
@@ -28,9 +31,9 @@ export const CalendarWrap = () => {
 
   const { mutateAsync: settlementsCalendar } = useSettlementsCalendarMutation();
 
-  const callCalendar = () => {
+  const callCalendar = (selectedMid: string) => {
     let params: SettlementsCalendarParams = {
-      mid: mid,
+      mid: selectedMid,
       yearMonth: yearMonth
     };
     settlementsCalendar(params).then((rs: SettlementsCalendarResponse) => {
@@ -85,18 +88,28 @@ export const CalendarWrap = () => {
       setYearMonth(newYearMonth);
     }
   };
+
+  const onChangeMid = (value: string) => {
+    callCalendar(value);
+  };
   
   useEffect(() => {
-    callCalendar();
+    callCalendar(userMid);
   }, [yearMonth]);
   return (
     <>
       <div className="calendar-wrap pt-30">
         <div className="input-wrapper top-select">
-          <select>
-            <option value="1">nicetest00g</option>
-            <option value="2">nicetest00g</option>
-            <option value="3">nicetest00g</option>
+          <select onChange={ (e) => onChangeMid(e.target.value) }>
+          { 
+            midOptions.map((value, index) => (
+              <option
+                key={ value.value }
+                value={ value.value }
+                selected={ (userMid === value.value)? true: false }
+              >{ value.name }</option>
+            )) 
+          }
           </select>
         </div>
         

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

@@ -25,6 +25,7 @@ import {
   SettlementsTransactionListContent
 } from '../model/types';
 import { SortByKeys } from '@/entities/common/model/types';
+import { useStore } from '@/shared/model/store';
 
 export interface ListWrapProps {
   startDateFromCalendar?: string;
@@ -36,13 +37,14 @@ export const ListWrap = ({
   endDateFromCalendar
 }: ListWrapProps) => {
   const { navigate } = useNavigate();
+  const userMid = useStore.getState().UserStore.mid;
   
   const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
   const [settlementDateListItems, setSettlementDateListItems] = useState<Record<string, Array<SettlementsHistoryContent>>>({});
   const [transactionDatelistItems, setTransactionDateListItems] = useState<Record<string, Array<SettlementsTransactionListContent>>>({});
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-  const [mid, setMid] = useState<string>('nictest00m');
+  const [mid, setMid] = useState<string>(userMid);
   const [periodType, setPeriodType] = useState<SettlementPeriodType>(SettlementPeriodType.SETTLEMENT_DATE);
   const [startDate, setStartDate] = useState(startDateFromCalendar? moment(startDateFromCalendar).format('YYYY-MM-DD'):  moment().format('YYYY-MM-DD'));
   const [endDate, setEndDate] = useState(endDateFromCalendar? moment(endDateFromCalendar).format('YYYY-MM-DD'):  moment().format('YYYY-MM-DD'));