캘린더 수정

src/shared/ui/calendar/nice-calendar.tsx

@@ -1,40 +1,101 @@
-import moment from 'moment';
+import moment, { locale } from 'moment';
 import styled from "styled-components";
 import { useState } from 'react';
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import { useEffect } from 'react';
+import { CalendarType } from '@/entities/common/model/types';
 
 interface NiceCalendarProps {
   calendarOpen: boolean;
+  setCalendarOpen: (calendarOpen: boolean) => void;
+  startDate: string;
+  endDate: string;
+  calendarType: CalendarType;
   setNewDate: (date: string) => void;
 };
 
 const NiceCalendar = ({
   calendarOpen,
+  setCalendarOpen,
+  startDate,
+  endDate,
+  calendarType,
   setNewDate
 }: NiceCalendarProps) => {
-  const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
-   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [valueDate, setValueDate] = useState<string>();
+  const [minDate, setMinDate] = useState<Date | undefined>();
+  const [maxDate, setMaxDate] = useState<Date | undefined>();
   const onchangeToDate = (selectedDate: any) => {
     setNewDate(moment(selectedDate).format('YYYY-MM-DD'));
-    setIsOpen(false);
+    setCalendarOpen(false);
+  };
+    
+  const onClickToClose = () => {
+    setCalendarOpen(false);
+  };
+  const setMinMaxValueDate = () => {
+    if(calendarType === CalendarType.Start){
+      setMinDate(undefined);
+      setMaxDate(new Date(endDate));
+      setValueDate(startDate);
+    }            
+    else if(calendarType === CalendarType.End){
+      setMinDate(new Date(startDate));
+      setMaxDate(new Date());
+      setValueDate(endDate);
+    }
+  };
+  
+  const formatMonthYear = (locale: string | undefined, date: Date) => {
+    return date.toLocaleDateString('en', { 
+      month: 'long',
+      year: 'numeric'
+    });
+  };
+  const formatYear = (locale: string | undefined, date: Date) => {
+    return date.toLocaleDateString('en', { 
+      year: 'numeric'
+    });
+  };
+  const formmatMonth = (locale: string | undefined, date: Date) => {
+    return date.toLocaleDateString('en', { 
+      month: 'short'
+    });
+  };
+  const formatDay = (locale: string | undefined, date: Date) => {
+    return date.toLocaleString('en', { 
+      day: 'numeric'
+    });
+  };
+  const formatShortWeekday = (locale: string | undefined, date: Date) => {
+    return date.toLocaleString('en', { 
+      weekday: 'short'
+    });
   };
 
   useEffect(() => {
-    console.log(calendarOpen)
-    setIsOpen(calendarOpen);
+    setMinMaxValueDate();
+    
   }, [calendarOpen])
 
   return (
     <>
-      { (isOpen) && 
+      { (calendarOpen) && 
         <>
         <div className="bg-dim"></div>
-        <CalendarWrapper>
+        <CalendarWrapper onClick={ () => onClickToClose() }>
           <Calendar
+            minDate={ minDate }
+            maxDate={ maxDate }
             onChange={ onchangeToDate }
-            value={ calendarDate }
+            value={ valueDate }
+            formatMonthYear={ formatMonthYear }
+            formatYear= { formatYear }
+            formatMonth={ formmatMonth }
+            formatDay={ formatDay }
+            formatShortWeekday={ formatShortWeekday }
+            showNeighboringMonth={ true }
           ></Calendar>
         </CalendarWrapper>
         </>