..

src/shared/ui/filter/calendar.tsx

@@ -26,22 +26,31 @@ export const FilterCalendar = ({
   const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
   const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);
   
+  const [newStartDate, setNewStartDate] = useState<string>('');
+  const [newEndDate, setNewEndDate] = useState<string>('');
+
   const setFilterDate = (dateOptions: FilterDateOptions) => {
     if(dateOptions === FilterDateOptions.Today){
-      setStartDate(moment().format('YYYY.MM.DD'));
-      setEndDate(moment().format('YYYY.MM.DD'));
+      setStartDate(moment().format('YYYYMMDD'));
+      setNewStartDate(moment().format('YYYY.MM.DD'));
+      setEndDate(moment().format('YYYYMMDD'));
+      setNewEndDate(moment().format('YYYY.MM.DD'));
       setDateReadyOnly(true);
       setFilterDateOptionsBtn(FilterDateOptions.Today);
     } 
     else if(dateOptions === FilterDateOptions.Week){
-      setStartDate(moment().subtract(1, 'week').format('YYYY.MM.DD'));
-      setEndDate(moment().format('YYYY.MM.DD'));
+      setStartDate(moment().subtract(1, 'week').format('YYYYMMDD'));
+      setNewStartDate(moment().subtract(1, 'week').format('YYYY.MM.DD'));
+      setEndDate(moment().format('YYYYMMDD'));
+      setNewEndDate(moment().format('YYYY.MM.DD'));
       setDateReadyOnly(true);
       setFilterDateOptionsBtn(FilterDateOptions.Week);
     }
     else if(dateOptions === FilterDateOptions.Month){
-      setStartDate(moment().subtract(1, 'month').format('YYYY.MM.DD'));
-      setEndDate(moment().format('YYYY.MM.DD'));
+      setStartDate(moment().subtract(1, 'month').format('YYYYMMDD'));
+      setNewStartDate(moment().subtract(1, 'month').format('YYYY.MM.DD'));
+      setEndDate(moment().format('YYYYMMDD'));
+      setNewEndDate(moment().format('YYYY.MM.DD'));
       setDateReadyOnly(true);
       setFilterDateOptionsBtn(FilterDateOptions.Month);
     }
@@ -65,16 +74,31 @@ export const FilterCalendar = ({
 
   const setNewDate = (date: string) => {
     if(calendarType === CalendarType.Start){
-      setStartDate(date);
+      setStartDate(moment(date).format('YYYYMMDD'));
+      setNewStartDate(moment(date).format('YYYY.MM.DD'));
     }
     else if(calendarType === CalendarType.End){
-      setEndDate(date);
+      setEndDate(moment(date).format('YYYYMMDD'));
+      setNewEndDate(moment(date).format('YYYY.MM.DD'));
     }
     setCalendarOpen(false);
   }
 
   useEffect(() => {
-    
+    if(startDate && startDate.length === 8){
+      let str = startDate.substring(0, 4)+'.'+startDate.substring(4, 6)+'.'+startDate.substring(6, 8);
+      setNewStartDate(str);
+    }
+    else{
+      setNewStartDate(startDate);
+    }
+    if(endDate && endDate.length === 8){
+      let str = endDate.substring(0, 4)+'.'+endDate.substring(4, 6)+'.'+endDate.substring(6, 8);
+      setNewEndDate(str);
+    }
+    else{
+      setNewEndDate(endDate);
+    }
   }, []);
   return (
     <>
@@ -106,7 +130,7 @@ export const FilterCalendar = ({
                 className="date-input"
                 type="text"
                 placeholder="날짜 선택"
-                value={ startDate }
+                value={ newStartDate }
                 onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                 readOnly={ dateReadOnly }
               />
@@ -128,7 +152,7 @@ export const FilterCalendar = ({
                 className="date-input"
                 type="text"
                 placeholder="날짜 선택"
-                value={ endDate }
+                value={ newEndDate }
                 onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                 readOnly={ dateReadOnly }
               />
@@ -149,8 +173,8 @@ export const FilterCalendar = ({
       <NiceCalendar
         calendarOpen={ calendarOpen }
         setCalendarOpen={ setCalendarOpen }
-        startDate={ startDate }
-        endDate={ endDate }
+        startDate={ newStartDate }
+        endDate={ newEndDate }
         calendarType={ calendarType }
         setNewDate={ setNewDate }
       ></NiceCalendar>