달력 관련 수정

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

@@ -16,6 +16,8 @@ interface NiceCalendarProps {
   singleMonth?: string;
   calendarType: CalendarType;
   setNewMonth: (month: string) => void;
+  searchPeriod?: number;
+  periodType?: 'year' | 'month';
 };
 
 const NiceCalendarMonth = ({
@@ -25,7 +27,9 @@ const NiceCalendarMonth = ({
   endMonth,
   singleMonth,
   calendarType,
-  setNewMonth
+  setNewMonth,
+  searchPeriod,
+  periodType
 }: NiceCalendarProps) => {
   const { i18n } = useTranslation();
   const currentLocale = i18n.language || 'en';
@@ -39,11 +43,21 @@ const NiceCalendarMonth = ({
   };
     
   const onClickToClose = () => {
-    // setCalendarOpen(false);
+    setCalendarOpen(false);
   };
   const setMinMaxValueDate = () => {
     if(calendarType === CalendarType.Start){
-      setMinMonth(undefined);
+      if(!searchPeriod){
+        searchPeriod = 3;
+      }
+      if(!periodType){
+        periodType = 'year';
+      }
+      if(periodType && searchPeriod && searchPeriod > 0){
+        const endDate = moment(endMonth, ['YYYY.MM', 'YYYYMM'], true);
+        setMinMonth(moment(endDate, 'YYYY.MM.DD').subtract(searchPeriod, periodType).toDate());
+      }
+      // setMinMonth(undefined);
       if(!!endMonth){
         // Parse endMonth with moment, handling both YYYY.MM and YYYYMM formats
         const endDate = moment(endMonth, ['YYYY.MM', 'YYYYMM'], true);
@@ -131,7 +145,7 @@ const NiceCalendarMonth = ({
       { (calendarOpen) && 
         <>
         <div className="bg-dim"></div>
-        <CalendarWrapper onClick={ () => onClickToClose() }>
+        <CalendarWrapper className="calendar-container calendar-style">
           <FullMenuClose
             addClass='filter-calendar-close'
             onClickToCallback={ onClickToClose }
@@ -159,11 +173,6 @@ const NiceCalendarMonth = ({
 };
 const CalendarWrapper = styled.div`
   z-index: 1100;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 100px;
-  left: 0;
 `;
 
 export default NiceCalendarMonth;

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

@@ -18,6 +18,8 @@ interface NiceCalendarProps {
   setNewDate: (date: string) => void;
   minDate?: Date;
   maxDate?: Date;
+  searchPeriod?: number;
+  periodType?: 'year' | 'month' | 'day';
 };
 
 interface TileClassNameProps {
@@ -35,7 +37,9 @@ const NiceCalendar = ({
   calendarType,
   setNewDate,
   minDate: propMinDate,
-  maxDate: propMaxDate
+  maxDate: propMaxDate,
+  searchPeriod,
+  periodType
 }: NiceCalendarProps) => {
   const { i18n, t } = useTranslation();
   const currentLocale = i18n.language || 'en';
@@ -53,8 +57,16 @@ const NiceCalendar = ({
   };
   const setMinMaxValueDate = () => {
     if(calendarType === CalendarType.Start){
-      //setMinDate(propMinDate || moment(endDate, 'YYYY.MM.DD').subtract(1, 'month').toDate());
-      setMinDate(propMinDate || undefined);
+      if(!searchPeriod){
+        searchPeriod = 3;
+      }
+      if(!periodType){
+        periodType = 'month';
+      }
+      if(periodType && searchPeriod && searchPeriod > 0){
+        setMinDate(propMinDate || moment(endDate, 'YYYY.MM.DD').subtract(searchPeriod, periodType).toDate());
+      }
+      // setMinDate(propMinDate || undefined);
       if(!!endDate){
         setMaxDate(moment(endDate, 'YYYY.MM.DD').toDate());
       }

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

@@ -24,7 +24,7 @@ export const FilterCalendarMonth = ({
   const { t } = useTranslation();
   const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
   const [monthReadOnly, setMonthReadyOnly] = useState<boolean>(false);
-  const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Input);
+  const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Month1);
   const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
   const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);
   

src/shared/ui/filter/calendar.tsx

@@ -24,7 +24,7 @@ export const FilterCalendar = ({
   const { t } = useTranslation();
   const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
   const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false);
-  const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
+  const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Today);
   const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
   const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);