캘린더 수정

src/entities/common/model/types.ts

@@ -14,6 +14,10 @@ export enum FilterDateOptions {
   Month = 'Month',
   Input = 'Input'
 };
+export enum CalendarType {
+  Start = 'Start',
+  End = 'End'
+};
 export interface DefaultRequestPagination {
   cursor: string;
   size: number;

src/entities/transaction/ui/filter/billing-filter.tsx

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
-import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { 

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

@@ -1,40 +1,101 @@
-import moment from 'moment';
+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;
+  startDate: string;
+  endDate: string;
+  calendarType: CalendarType;
   setNewDate: (date: string) => void;
 };
 
 const NiceCalendar = ({
   calendarOpen,
+  setCalendarOpen,
+  startDate,
+  endDate,
+  calendarType,
   setNewDate
 }: NiceCalendarProps) => {
-  const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
+  const [valueDate, setValueDate] = useState<string>();
-   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [minDate, setMinDate] = useState<Date | undefined>();
+  const [maxDate, setMaxDate] = useState<Date | undefined>();
   const onchangeToDate = (selectedDate: any) => {
     setNewDate(moment(selectedDate).format('YYYY-MM-DD'));
-    setIsOpen(false);
+    setCalendarOpen(false);
+  };
+    
+  const onClickToClose = () => {
+    setCalendarOpen(false);
+  };
+  const setMinMaxValueDate = () => {
+    if(calendarType === CalendarType.Start){
+      setMinDate(undefined);
+      setMaxDate(new Date(endDate));
+      setValueDate(startDate);
+    }            
+    else if(calendarType === CalendarType.End){
+      setMinDate(new Date(startDate));
+      setMaxDate(new Date());
+      setValueDate(endDate);
+    }
+  };
+  
+  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(() => {
-    console.log(calendarOpen)
+    setMinMaxValueDate();
-    setIsOpen(calendarOpen);
+    
   }, [calendarOpen])
 
   return (
     <>
-      { (isOpen) && 
+      { (calendarOpen) && 
         <>
         <div className="bg-dim"></div>
-        <CalendarWrapper>
+        <CalendarWrapper onClick={ () => onClickToClose() }>
           <Calendar
+            minDate={ minDate }
+            maxDate={ maxDate }
             onChange={ onchangeToDate }
-            value={ calendarDate }
+            value={ valueDate }
+            formatMonthYear={ formatMonthYear }
+            formatYear= { formatYear }
+            formatMonth={ formmatMonth }
+            formatDay={ formatDay }
+            formatShortWeekday={ formatShortWeekday }
+            showNeighboringMonth={ true }
           ></Calendar>
         </CalendarWrapper>
         </>

src/shared/ui/filter/calendar.tsx

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { ChangeEvent, useState } from 'react';
-import { FilterDateOptions } from '@/entities/common/model/types';
+import { CalendarType, FilterDateOptions } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import NiceCalendar from '../calendar/nice-calendar';
 import { useEffect } from 'react';
@@ -24,7 +24,7 @@ export const FilterCalendar = ({
   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 [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);
   
   const setFilterDate = (dateOptions: FilterDateOptions) => {
     if(dateOptions === FilterDateOptions.Today){
@@ -52,22 +52,22 @@ export const FilterCalendar = ({
     
   };
 
-  const onClickToOpenCalendar = (key: string) => {
+  const onClickToOpenCalendar = (calendarType: CalendarType) => {
     if(!dateReadOnly){
       setCalendarOpen(true);
-      setActiveCalendar(key);
+      setCalendarType(calendarType);
     }
     else{
       setCalendarOpen(false);
-      setActiveCalendar('');
+      
     }
   };
 
   const setNewDate = (date: string) => {
-    if(activceCalendar === 'start'){
+    if(calendarType === CalendarType.Start){
       setStartDate(date);
     }
-    else if(activceCalendar === 'end'){
+    else if(calendarType === CalendarType.End){
       setEndDate(date);
     }
     setCalendarOpen(false);
@@ -107,12 +107,13 @@ export const FilterCalendar = ({
                 type="text"
                 placeholder="날짜 선택"
                 value={ startDate }
-                readOnly={ true }
+                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
+                readOnly={ dateReadOnly }
               />
               <button
                 type="button"
                 className="date-btn"
-                onClick={ () => onClickToOpenCalendar('start') }
+                onClick={ () => onClickToOpenCalendar(CalendarType.Start) }
               >
                 <img
                   src={ IMAGE_ROOT + '/ico_date.svg' }
@@ -128,12 +129,13 @@ export const FilterCalendar = ({
                 type="text"
                 placeholder="날짜 선택"
                 value={ endDate }
-                readOnly={ true }
+                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
+                readOnly={ dateReadOnly }
               />
               <button 
                 type="button" 
                 className="date-btn"
-                onClick={ () => onClickToOpenCalendar('end') }
+                onClick={ () => onClickToOpenCalendar(CalendarType.End) }
               >
                 <img
                   src={ IMAGE_ROOT + '/ico_date.svg' }
@@ -146,6 +148,10 @@ export const FilterCalendar = ({
       </div>
       <NiceCalendar
         calendarOpen={ calendarOpen }
+        setCalendarOpen={ setCalendarOpen }
+        startDate={ startDate }
+        endDate={ endDate }
+        calendarType={ calendarType }
         setNewDate={ setNewDate }
       ></NiceCalendar>
     </>