달력

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

@@ -3,29 +3,52 @@ import styled from "styled-components";
 import { useState } from 'react';
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
+import { useEffect } from 'react';
+
+interface NiceCalendarProps {
+  calendarOpen: boolean;
+  setNewDate: (date: string) => void;
+};
 
 const NiceCalendar = ({
   calendarOpen,
   setNewDate
-}: any) => {
+}: NiceCalendarProps) => {
   const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
-  const [isOpen, setIsOpen] = useState<boolean>(calendarOpen);
-  
+   const [isOpen, setIsOpen] = useState<boolean>(false);
   const onchangeToDate = (selectedDate: any) => {
-    setNewDate(selectedDate)
+    setNewDate(moment(selectedDate).format('YYYY-MM-DD'));
     setIsOpen(false);
   };
 
+  useEffect(() => {
+    console.log(calendarOpen)
+    setIsOpen(calendarOpen);
+  }, [calendarOpen])
+
   return (
     <>
-      
-        <Calendar
-          onChange={ onchangeToDate }
-          value={ calendarDate }
-        ></Calendar>
-        
+      { (isOpen) && 
+        <>
+        <div className="bg-dim"></div>
+        <CalendarWrapper>
+          <Calendar
+            onChange={ onchangeToDate }
+            value={ calendarDate }
+          ></Calendar>
+        </CalendarWrapper>
+        </>
+      }
     </>
   );
 };
+const CalendarWrapper = styled.div`
+  z-index: 1100;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+`;
 
 export default NiceCalendar;