부가세 신고 세금 계산서 리스트 및 상세, 필터, 캘린더 컴포넌트 month 형 추가

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

@@ -0,0 +1,126 @@
+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;
+  startMonth?: string;
+  endMonth?: string;
+  singleMonth?: string;
+  calendarType: CalendarType;
+  setNewMonth: (month: string) => void;
+};
+
+const NiceCalendarMonth = ({
+  calendarOpen,
+  setCalendarOpen,
+  startMonth,
+  endMonth,
+  singleMonth,
+  calendarType,
+  setNewMonth
+}: NiceCalendarProps) => {
+  const [valueMonth, setValueMonth] = useState<string>();
+  const [minMonth, setMinMonth] = useState<Date | undefined>();
+  const [maxMonth, setMaxMonth] = useState<Date | undefined>();
+  const onchangeToMonth = (selectedMonth: any) => {
+    setNewMonth(moment(selectedMonth).format('YYYY.MM'));
+    setCalendarOpen(false);
+  };
+    
+  const onClickToClose = () => {
+    // setCalendarOpen(false);
+  };
+  const setMinMaxValueDate = () => {
+    if(calendarType === CalendarType.Start){
+      setMinMonth(undefined);
+      if(!!endMonth){
+        setMaxMonth(new Date(endMonth));
+      }
+      setValueMonth(startMonth);
+    }            
+    else if(calendarType === CalendarType.End){
+      if(!!startMonth){
+        setMinMonth(new Date(startMonth));
+      }
+      setMaxMonth(new Date());
+      setValueMonth(endMonth);
+    }
+    else if(calendarType === CalendarType.Single){
+      setValueMonth(singleMonth);
+    }
+  };
+  
+  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(() => {
+    setMinMaxValueDate();
+    
+  }, [calendarOpen])
+
+  return (
+    <>
+      { (calendarOpen) && 
+        <>
+        <div className="bg-dim"></div>
+        <CalendarWrapper onClick={ () => onClickToClose() }>
+          <Calendar
+            minDate={ minMonth }
+            maxDate={ maxMonth }
+            onClickMonth={ onchangeToMonth }
+            value={ valueMonth }
+            formatMonthYear={ formatMonthYear }
+            formatYear= { formatYear }
+            formatMonth={ formmatMonth }
+            formatDay={ formatDay }
+            formatShortWeekday={ formatShortWeekday }
+            showNeighboringMonth={ true }
+            defaultView='year'
+            view='year'
+          ></Calendar>
+        </CalendarWrapper>
+        </>
+      }
+    </>
+  );
+};
+const CalendarWrapper = styled.div`
+  z-index: 1100;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+`;
+
+export default NiceCalendarMonth;

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

@@ -29,7 +29,7 @@ const NiceCalendar = ({
   const [minDate, setMinDate] = useState<Date | undefined>();
   const [maxDate, setMaxDate] = useState<Date | undefined>();
   const onchangeToDate = (selectedDate: any) => {
-    setNewDate(moment(selectedDate).format('YYYY-MM-DD'));
+    setNewDate(moment(selectedDate).format('YYYY.MM.DD'));
     setCalendarOpen(false);
   };