(#0) npm publish (0.0.105)

thebbodek · Dec 13, 2023 · 87eac2c · 87eac2c
1 parent 2fc3c35
commit 87eac2c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bbodek-ui",
-  "version": "0.0.104",
+  "version": "0.0.105",
   "type": "module",
   "author": "Bbodek",
   "license": "MIT",

diff --git a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
@@ -24,6 +24,7 @@ export const SingleDatePicker = () => {
   return (
     <div className = {"w-[500px] border rounded-3xl py-6"}>
       <DatePickerCalendar
+        cutoffDate = "2023-12-08"
         variants = "single"
         label = {["해지 신청일"]}
         periodDates = {periodDates}

diff --git a/src/core/components/Calendar/DatePickerCalendar/index.tsx b/src/core/components/Calendar/DatePickerCalendar/index.tsx
@@ -86,6 +86,7 @@ const DatePickerCalendar = ({
   label = ["사용일"],
   periodDates,
   disabledDates,
+  cutoffDate,
   afterAllDate = false,
   onDateClick,
 }: DatePickerCalendarProps) => {
@@ -116,6 +117,12 @@ const DatePickerCalendar = ({
     operations.setCalendarPeriodDates(periodDates);
   }, [periodDates]);
 
+  const isCutoffDateValidation = ({ cutoffDate, calendarDate }: Pick<DatePickerCalendarProps, "cutoffDate"> & { calendarDate: string }) => {
+    if(!cutoffDate) return false;
+
+    return dayjs(calendarDate).isBefore(cutoffDate);
+  };
+
   return (
     <div className = {"flex flex-col h-full w-full"}>
       <CalendarHeader
@@ -133,7 +140,7 @@ const DatePickerCalendar = ({
                 <button
                   type = "button"
                   className = {"w-full h-full"}
-                  disabled = {(!calendarDate.isThisMonth || disabledDates?.includes(calendarDate.dayjs.format("YYYY-MM-DD")))}
+                  disabled = {!calendarDate.isThisMonth || disabledDates?.includes(calendarDate.dayjs.format("YYYY-MM-DD")) || isCutoffDateValidation({ cutoffDate, calendarDate: calendarDate.dayjs.format("YYYY-MM-DD") })}
                   onClick = {(): void => {
                     const currentDate = calendarDate.dayjs.format("YYYY-MM-DD");
 
@@ -147,6 +154,7 @@ const DatePickerCalendar = ({
                 >
                   <div className = {clsx("flex flex-col")}>
                     <CalendarComponentDayText
+                      disabled = {isCutoffDateValidation({ cutoffDate, calendarDate: calendarDate.dayjs.format("YYYY-MM-DD") })}
                       calendarDate = {calendarDate}
                       periodDates = {models.periodDates}
                       periodDateArray = {models.periodDateArray}

diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
@@ -8,13 +8,15 @@ interface CalendarComponentDayTextProps {
   afterAllDate: boolean;
   periodDates: PeriodDates;
   periodDateArray?: string[];
+  disabled: boolean
 }
 
 export const CalendarComponentDayText = ({
   calendarDate,
   afterAllDate,
   periodDates,
   periodDateArray,
+  disabled,
 }: CalendarComponentDayTextProps) => {
   const currentDate = calendarDate.dayjs.format("YYYY-MM-DD");
   const isPeriod = periodDates.startDate && periodDates.endDate;
@@ -37,7 +39,7 @@ export const CalendarComponentDayText = ({
             "rounded-full w-8 bg-primary-03 text-white": isStartDate || isEndDate || singleSelectedDate,
             "bg-gray-03 text-white rounded-full w-8": calendarDate.isToday,
             "w-full bg-primary-00 rounded-none !text-gray-08": (periodDateArray?.slice(1, -1).includes(currentDate)) || (afterAllDate && calendarDate.dayjs.isAfter(periodDates.startDate)),
-            "!text-gray-03": !calendarDate.isThisMonth && !periodDateArray?.includes(currentDate) && !calendarDate.isToday!,
+            "!text-gray-03": disabled || !calendarDate.isThisMonth && !periodDateArray?.includes(currentDate) && !calendarDate.isToday!,
           },
         )}
       >

diff --git a/src/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps.ts b/src/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps.ts
@@ -13,6 +13,7 @@ export interface DatePickerCalendarProps {
   label?: string[];
   disabledDates?: string[];
   afterAllDate?: boolean;
+  cutoffDate?: string;
   disabled?: boolean;
   onDateClick: (periodDates: PeriodDates) => void;
 }