달력

src/shared/ui/assets/css/style-fix.css

@@ -32,3 +32,7 @@ main {
 }
 
 /* calendar */
+.react-calendar{
+  margin: 10% auto;
+
+}

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;

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

@@ -21,9 +21,10 @@ export const FilterCalendar = ({
   setEndDate
 }: FilterCalendarProps) => {
   const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간');
-  const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
+  const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false);
   const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
   const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
+  const [activceCalendar, setActiveCalendar] = useState<string>();
   
   const setFilterDate = (dateOptions: FilterDateOptions) => {
     if(dateOptions === FilterDateOptions.Today){
@@ -51,15 +52,27 @@ export const FilterCalendar = ({
     
   };
 
-  const onClickToOpenCalendar = () => {
+  const onClickToOpenCalendar = (key: string) => {
     if(!dateReadOnly){
       setCalendarOpen(true);
+      setActiveCalendar(key);
     }
     else{
       setCalendarOpen(false);
+      setActiveCalendar('');
     }
   };
 
+  const setNewDate = (date: string) => {
+    if(activceCalendar === 'start'){
+      setStartDate(date);
+    }
+    else if(activceCalendar === 'end'){
+      setEndDate(date);
+    }
+    setCalendarOpen(false);
+  }
+
   useEffect(() => {
     
   }, []);
@@ -89,6 +102,7 @@ export const FilterCalendar = ({
           <div className="range-row">
             <div className="input-wrapper date">
               <input
+                id="startDate"
                 className="date-input"
                 type="text"
                 placeholder="날짜 선택"
@@ -98,7 +112,7 @@ export const FilterCalendar = ({
               <button
                 type="button"
                 className="date-btn"
-                onClick={ () => onClickToOpenCalendar() }
+                onClick={ () => onClickToOpenCalendar('start') }
               >
                 <img
                   src={ IMAGE_ROOT + '/ico_date.svg' }
@@ -109,6 +123,7 @@ export const FilterCalendar = ({
             <span className="beetween">~</span>
             <div className="input-wrapper date">
               <input
+                id="endDate"
                 className="date-input"
                 type="text"
                 placeholder="날짜 선택"
@@ -118,7 +133,7 @@ export const FilterCalendar = ({
               <button 
                 type="button" 
                 className="date-btn"
-                onClick={ () => onClickToOpenCalendar() }
+                onClick={ () => onClickToOpenCalendar('end') }
               >
                 <img
                   src={ IMAGE_ROOT + '/ico_date.svg' }
@@ -129,6 +144,10 @@ export const FilterCalendar = ({
           </div>
         </div>
       </div>
+      <NiceCalendar
+        calendarOpen={ calendarOpen }
+        setNewDate={ setNewDate }
+      ></NiceCalendar>
     </>
   );
 };