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

src/entities/common/model/types.ts

@@ -1,9 +1,3 @@
-import { 
-  BillingPaymentMethod, 
-  BillingProcessResult, 
-  BillingRequestStatus 
-} from '@/entities/transaction/model/types';
-
 export enum SuccessResult {
   SUCCESS = 'SUCCESS',
   FAIL = 'FAIL'
@@ -14,6 +8,12 @@ export enum FilterDateOptions {
   Month = 'Month',
   Input = 'Input'
 };
+export enum FilterMonthOptions {
+  Month1 = 'Month1',
+  Month2 = 'Month2',
+  Month3 = 'Month3',
+  Input = 'Input'
+};
 export enum CalendarType {
   Start = 'Start',
   End = 'End',

src/entities/vat-return/model/contant.ts

@@ -0,0 +1,14 @@
+import { VatReturnReceiptType, VatReturnTargetType } from './types';
+
+export const VatReturnReceiptTypeBtnGroup = [
+  {name: '전체', value: VatReturnReceiptType.ALL },
+  {name: '영수', value: VatReturnReceiptType.RECEIPT },
+  {name: '청구', value: VatReturnReceiptType.BILL }
+];
+
+export const VatReturnTargetTypeBtnGroup = [
+  {name: '전체', value: VatReturnTargetType.ALL },
+  {name: '일반', value: VatReturnTargetType.GENERAL },
+  {name: '차액정산', value: VatReturnTargetType.DIFFERENCE_COLLECTION },
+  {name: '환급정산', value: VatReturnTargetType.REFUND_SETTLEMENT }
+];

src/entities/vat-return/ui/filter/list-filter.tsx

@@ -0,0 +1,128 @@
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { VatReturnReceiptType, VatReturnTargetType } from '../../model/types';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { useState } from 'react';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { VatReturnReceiptTypeBtnGroup, VatReturnTargetTypeBtnGroup } from '../../model/contant';
+import { FilterCalendarMonth } from '@/shared/ui/filter/calendar-month';
+
+export interface ListFilterProps {
+  filterOn: boolean;
+  setFilterOn: (filterOn: boolean) => void;
+  mid: string;
+  startDate: string;
+  endDate: string;
+  receiptType: VatReturnReceiptType;
+  targetType: VatReturnTargetType;
+  setMid: (mid: string) => void;
+  setStartDate: (date: string) => void;
+  setEndDate: (date: string) => void;
+  setReceiptType: (receiptType: VatReturnReceiptType) => void;
+  setTargetType: (targetType: VatReturnTargetType) => void;
+};
+
+export const ListFilter = ({
+  filterOn,
+  setFilterOn,
+  mid,
+  startDate,
+  endDate,
+  receiptType,
+  targetType,
+  setMid,
+  setStartDate,
+  setEndDate,
+  setReceiptType,
+  setTargetType
+}: ListFilterProps) => {
+
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+  const [filterReceiptType, setFIlterReceiptType] = useState<VatReturnReceiptType>(receiptType);
+  const [filterTargetType, setFilterTargetType] = useState<VatReturnTargetType>(targetType);
+  
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+
+   const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setStartDate(filterStartDate);
+    setEndDate(filterEndDate);
+    setReceiptType(filterReceiptType);
+    setTargetType(filterTargetType);
+    onClickToClose();
+  };
+
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+  
+  return (
+    <>
+      <motion.div 
+        id="fullMenuModal" 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (filterOn)? 'visible': 'hidden' }
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button 
+                className="full-menu-close"
+                onClick={ () => onClickToClose() }
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                />
+              </button>
+            </div>
+          </div>
+    
+          <div className="option-list pt-16">
+            <FilterSelect
+              title='가맹점'
+              selectValue={ filterMid }
+              selectSetter={ setFilterMid }
+              selectOptions={ MidOptions }
+            ></FilterSelect>
+            <FilterCalendarMonth
+              title='발행월'
+              startMonth={ filterStartDate }
+              endMonth={ filterEndDate }
+              setStartMonth={ setFilterStartDate }
+              setEndMonth={ setFilterEndDate }
+            ></FilterCalendarMonth>
+            <FilterButtonGroups
+              title='영수구분'
+              activeValue={ filterReceiptType }
+              btnGroups={ VatReturnReceiptTypeBtnGroup }
+              setter={ setFIlterReceiptType }
+            ></FilterButtonGroups>
+            <FilterButtonGroups
+              title='발행대상'
+              activeValue={ filterTargetType }
+              btnGroups={ VatReturnTargetTypeBtnGroup }
+              setter={ setFilterTargetType }
+            ></FilterButtonGroups>
+          </div>
+          <div className="apply-row">
+            <button 
+              className="btn-50 btn-blue flex-1"
+              onClick={ onClickToSetFilter }
+            >적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

src/entities/vat-return/ui/list-filter.tsx

@@ -1,166 +0,0 @@
-import { motion } from 'framer-motion';
-import { IMAGE_ROOT } from '@/shared/constants/common';
-import { VatReturnReceiptType, VatReturnTargetType } from '../model/types';
-import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
-
-export interface ListFilterProps {
-  filterOn: boolean;
-  setFilterOn: (filterOn: boolean) => void;
-  mid: string;
-  startDate: string;
-  endDate: string;
-  receiptType: VatReturnReceiptType;
-  targetType: VatReturnTargetType;
-  setMid: (mid: string) => void;
-  setStartDate: (date: string) => void;
-  setEndDate: (date: string) => void;
-  setReceiptType: (receiptType: VatReturnReceiptType) => void;
-  setTargetType: (targetType: VatReturnTargetType) => void;
-};
-
-export const ListFilter = ({
-  filterOn,
-  setFilterOn,
-  mid,
-  startDate,
-  endDate,
-  receiptType,
-  targetType,
-  setMid,
-  setStartDate,
-  setEndDate,
-  setReceiptType,
-  setTargetType
-}: ListFilterProps) => {
-  const variants = {
-    hidden: { x: '100%' },
-    visible: { x: '0%' },
-  };
-
-  const onClickToClose = () => {
-    setFilterOn(false);
-  };
-  return (
-    <>
-      <motion.div 
-        id="fullMenuModal" 
-        className="full-menu-modal" 
-        initial="hidden"
-        animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ FilterMotionVariants }
-        transition={ FilterMotionDuration }
-        style={ FilterMotionStyle }
-      >
-        <div className="full-menu-container">
-          <div className="full-menu-header">
-            <div className="full-menu-title center">필터</div>
-            <div className="full-menu-actions">
-              <button 
-                className="full-menu-close"
-                onClick={ () => onClickToClose() }
-              >
-                <img 
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt="닫기"
-                />
-              </button>
-            </div>
-          </div>
-    
-          <div className="option-list pb-120">
-            <div className="opt-field">
-              <div className="opt-label">가맹점</div>
-              <div className="opt-controls">
-                <select className="flex-1">
-                  <option>nictest001m</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="opt-field mt_top">
-              <div className="opt-label">발행월</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">당월</span>
-                  <span className="keyword-tag">2개월</span>
-                  <span className="keyword-tag">3개월</span>
-                  <span className="keyword-tag">직접입력</span>
-                </div>
-                <div className="range-row">
-                  <div className="input-wrapper date">
-                    <input 
-                      className="date-input"
-                      type="text" 
-                      placeholder="날짜 선택" 
-                      value="2025.06.08" 
-                      readOnly={ true }
-                    />
-                    <button 
-                      className="date-btn"
-                      type="button" 
-                    >
-                      <img 
-                        src={ IMAGE_ROOT + '/ico_date.svg' }
-                        alt="날짜 선택"
-                      />
-                    </button>
-                  </div>
-                  <span className="beetween">~</span>
-                  <div className="input-wrapper date">
-                      <input 
-                        className="date-input"
-                        type="text"
-                        placeholder="날짜 선택"
-                        value="2025.06.08"
-                        readOnly={ true }
-                      />
-                      <button 
-                        className="date-btn"
-                        type="button"
-                      >
-                        <img 
-                          src={ IMAGE_ROOT + '/ico_date.svg' }
-                          alt="날짜 선택"
-                        />
-                      </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">영수 구분</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">영수</span>
-                  <span className="keyword-tag">청구</span>
-                  <span 
-                    className="keyword-tag" 
-                    style={{ visibility: 'hidden' }}
-                  ></span>
-                </div>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">발행 대상</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">일반</span>
-                  <span className="keyword-tag">차액정산</span>
-                  <span className="keyword-tag">환급정산</span>
-                </div>
-              </div>
-            </div>
-
-          </div>
-          <div className="apply-row">
-            <button className="btn-50 btn-blue flex-1">적용</button>
-          </div>
-        </div>
-      </motion.div>
-    </>
-  );
-};

src/entities/vat-return/ui/list-item.tsx

@@ -51,3 +51,4 @@ export const ListItem = ({
     </>
   );
 };
+                                               

src/entities/vat-return/ui/list-wrap.tsx

@@ -2,7 +2,7 @@ import moment from 'moment';
 
 import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { ListFilter } from './list-filter';
+import { ListFilter } from './filter/list-filter';
 import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
 import { SortByKeys } from '@/entities/common/model/types';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
@@ -21,18 +21,25 @@ export const ListWrap = () => {
   const [listItems, setListItems] = useState<Record<string, Array<VatReturnListContent>>>({});
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>('nictest00m');
-  const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+  const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY.MM'));
+	const [endDate, setEndDate] = useState(moment().format('YYYY.MM'));
   const [receiptType, setReceiptType] = useState<VatReturnReceiptType>(VatReturnReceiptType.ALL);
   const [targetType, setTargetType] = useState<VatReturnTargetType>(VatReturnTargetType.ALL);
 
   const { mutateAsync: vatReturnList } = useVatReturnListMutation();
 
   const callList = () => {
+    let strStartDate = moment(startDate).format('YYYYMM');
+    let newStartDate = moment(strStartDate+'01').format('YYYY-MM-DD');
+
+    let strEndtDate = moment(endDate).format('YYYYMM');
+    let lastDate = moment(endDate).endOf('month').date();
+    let newEndDate = moment(strEndtDate+lastDate).format('YYYY-MM-DD');
+
     let params: VatReturnListParams = {
       mid: mid,
-      startDate: startDate,
-      endDate: endDate,
+      startDate: newStartDate,
+      endDate: newEndDate,
       receiptType: receiptType,
       targetType: targetType,
     };
@@ -51,7 +58,7 @@ export const ListWrap = () => {
 
   useEffect(() => {
     callList();
-  }, []);
+  }, [mid, startDate, endDate, receiptType, targetType]);
 
   const getListDateGroup = () => {
     let rs = [];

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);
   };
     

src/shared/ui/filter/button-groups.tsx

@@ -11,7 +11,6 @@ export const FilterButtonGroups = ({
     let rs = [];
     
     if(!!btnGroups && btnGroups.length > 0){
-      console.log(' btnGroups.length : ',  btnGroups.length)
       let emptySpanCnt = 4 - (btnGroups.length % 4);
       let innerList = [];
 
@@ -25,7 +24,10 @@ export const FilterButtonGroups = ({
         );
         if((i % 4) === 3 ){
           rs.push(
-            <div className="chip-row">{ innerList }</div>
+            <div 
+              key={ `key-btngroup-chip-row-${i}` }
+              className="chip-row"
+            >{ innerList }</div>
           );
           innerList = [];
         }
@@ -41,7 +43,10 @@ export const FilterButtonGroups = ({
           );
         }
         rs.push(
-          <div className="chip-row">{ innerList }</div>
+          <div 
+            key={ `key-btngroup-chip-row-nodata` }
+            className="chip-row"
+          >{ innerList }</div>
         );
       }
     }

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

@@ -0,0 +1,160 @@
+import moment from 'moment';
+import { ChangeEvent, useState } from 'react';
+import { CalendarType, FilterMonthOptions } from '@/entities/common/model/types';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import NiceCalendarMonth from '../calendar/nice-calendar-month';
+import { useEffect } from 'react';
+
+interface FilterCalendarMonthProps {
+  title?: string;
+  startMonth: string;
+  endMonth: string;
+  setStartMonth: (startMonth: string) => void;
+  setEndMonth: (endMonth: string) => void;
+};
+
+export const FilterCalendarMonth = ({
+  title,
+  startMonth,
+  endMonth,
+  setStartMonth,
+  setEndMonth
+}: FilterCalendarMonthProps) => {
+  const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간');
+  const [monthReadOnly, setMonthReadyOnly] = useState<boolean>(false);
+  const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Input);
+  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
+  const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);
+  
+  const setFilterMonth = (monthOptions: FilterMonthOptions) => {
+    if(monthOptions === FilterMonthOptions.Month1){
+      setStartMonth(moment().format('YYYY.MM'));
+      setEndMonth(moment().format('YYYY.MM'));
+      setMonthReadyOnly(true);
+      setFilterMonthOptionsBtn(FilterMonthOptions.Month1);
+    } 
+    else if(monthOptions === FilterMonthOptions.Month2){
+      setStartMonth(moment().subtract(1, 'month').format('YYYY.MM'));
+      setEndMonth(moment().format('YYYY.MM'));
+      setMonthReadyOnly(true);
+      setFilterMonthOptionsBtn(FilterMonthOptions.Month2);
+    }
+    else if(monthOptions === FilterMonthOptions.Month3){
+      setStartMonth(moment().subtract(2, 'month').format('YYYY.MM'));
+      setEndMonth(moment().format('YYYY.MM'));
+      setMonthReadyOnly(true);
+      setFilterMonthOptionsBtn(FilterMonthOptions.Month3);
+    }
+    else if(monthOptions === FilterMonthOptions.Input){
+      setMonthReadyOnly(false);
+      setFilterMonthOptionsBtn(FilterMonthOptions.Input);
+    }
+    
+  };
+
+  const onClickToOpenCalendar = (calendarType: CalendarType) => {
+    if(!monthReadOnly){
+      setCalendarOpen(true);
+      setCalendarType(calendarType);
+    }
+    else{
+      setCalendarOpen(false);
+      
+    }
+  };
+
+  const setNewMonth = (month: string) => {
+    console.log(month)
+    if(calendarType === CalendarType.Start){
+      setStartMonth(month);
+    }
+    else if(calendarType === CalendarType.End){
+      setEndMonth(month);
+    }
+    setCalendarOpen(false);
+  }
+
+  useEffect(() => {
+    
+  }, []);
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ filterTitle }</div>
+        <div className="opt-controls col below h36">
+          <div className="chip-row">
+            <span 
+              className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month1)? 'active': ''}` }
+              onClick={ () => setFilterMonth(FilterMonthOptions.Month1) }
+            >당월</span>
+            <span 
+              className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month2)? 'active': ''}` }
+              onClick={ () => setFilterMonth(FilterMonthOptions.Month2) }
+            >2개월</span>
+            <span 
+              className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month3)? 'active': ''}` }
+              onClick={ () => setFilterMonth(FilterMonthOptions.Month3) }
+            >3개월</span>
+            <span 
+              className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Input)? 'active': ''}` }
+              onClick={ () => setFilterMonth(FilterMonthOptions.Input) }
+            >직접입력</span>
+          </div>
+          <div className="range-row">
+            <div className="input-wrapper date">
+              <input
+                id="startDate"
+                className="date-input"
+                type="text"
+                placeholder="날짜 선택"
+                value={ moment(startMonth).format('YYYY.MM') }
+                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
+                readOnly={ monthReadOnly }
+              />
+              <button
+                type="button"
+                className="date-btn"
+                onClick={ () => onClickToOpenCalendar(CalendarType.Start) }
+              >
+                <img
+                  src={ IMAGE_ROOT + '/ico_date.svg' }
+                  alt="날짜 선택"
+                />
+              </button>
+            </div>
+            <span className="beetween">~</span>
+            <div className="input-wrapper date">
+              <input
+                id="endDate"
+                className="date-input"
+                type="text"
+                placeholder="날짜 선택"
+                value={ moment(endMonth).format('YYYY.MM') }
+                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
+                readOnly={ monthReadOnly }
+              />
+              <button 
+                type="button" 
+                className="date-btn"
+                onClick={ () => onClickToOpenCalendar(CalendarType.End) }
+              >
+                <img
+                  src={ IMAGE_ROOT + '/ico_date.svg' }
+                  alt="날짜 선택"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <NiceCalendarMonth
+        calendarOpen={ calendarOpen }
+        setCalendarOpen={ setCalendarOpen }
+        startMonth={ startMonth }
+        endMonth={ endMonth }
+        calendarType={ calendarType }
+        setNewMonth={ setNewMonth }
+      ></NiceCalendarMonth>
+    </>
+  );
+};