(#0) DatePickerCalendar disabled UI 수정

thebbodek · Jan 16, 2024 · d4bbd00 · d4bbd00
1 parent 0b738e5
commit d4bbd00
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
@@ -37,8 +37,8 @@ export const SingleDatePicker = () => {
 
 export const PeriodDatesPicker = () => {
   const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
-    startDate: "2023-12-08",
-    endDate: "",
+    startDate: "2024-01-19",
+    endDate: "2024-01-25",
   });
 
   const onDateClick = (date: PeriodDates) => {
@@ -49,6 +49,7 @@ export const PeriodDatesPicker = () => {
     <div className = {"w-[500px] border rounded-3xl py-6"}>
       <DatePickerCalendar
         variants = "period"
+        cutoffDate = "2024-01-23"
         periodDates = {periodDates}
         onDateClick = {onDateClick}
       />

diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
@@ -36,11 +36,11 @@ export const CalendarComponentDayText = ({
       <div
         className = {clsx("relative z-20 flex justify-center items-center h-[2.375rem] leading-none text-body-01-bold text-black",
           {
-            "rounded-full w-[2.375rem] bg-primary-03 text-white": isStartDate || isEndDate || singleSelectedDate,
+            "rounded-full w-[2.375rem] bg-primary-03 !text-white": isStartDate || isEndDate || singleSelectedDate,
             "bg-gray-03 text-white rounded-full w-[2.375rem]": calendarDate.isToday,
-            "w-full bg-primary-00 rounded-none !text-black": (periodDateArray?.slice(1, -1).includes(currentDate)) || (afterAllDate && calendarDate.dayjs.isAfter(periodDates.startDate)),
+            "w-full bg-primary-00 rounded-none": ((periodDateArray?.slice(1, -1).includes(currentDate)) || (afterAllDate && calendarDate.dayjs.isAfter(periodDates.startDate))),
+            "!bg-primary-01": (isStartDate || isEndDate || singleSelectedDate) && disabled,
             "!text-[#1018284d]": disabled,
-            "!text-white": calendarDate.isToday && disabled,
           },
         )}
       >