필터

src/shared/ui/calendar/index.tsx

@@ -0,0 +1,43 @@
+import moment from 'moment';
+import styled from "styled-components";
+import { useState } from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+
+const NiceCalendar = ({
+  setNewDate
+}: any) => {
+  const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  
+  const onchangeToDate = (selectedDate: any) => {
+    setNewDate(selectedDate)
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <CalendarContainer>
+        <CalendarWrapper isOpen={isOpen}>
+          <Calendar
+            onChange={ onchangeToDate }
+            value={ calendarDate }
+          ></Calendar>
+        </CalendarWrapper>
+      </CalendarContainer>
+    </>
+  );
+};
+
+const CalendarContainer = styled.div`
+  position: relative;
+`;
+const CalendarWrapper: any = styled.div`
+  z-index: 11;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  display: ${(props: any) => ((props.isOpen)? 'block': 'none')};
+`;
+
+export default NiceCalendar;