From d4bbd003cb99edd087067e2802b11aad41ece759 Mon Sep 17 00:00:00 2001
From: JinJu <jin_jooo@naver.com>
Date: Wed, 17 Jan 2024 03:43:51 +0900
Subject: [PATCH] =?UTF-8?q?(#0)=20DatePickerCalendar=20disabled=20UI=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DatePickerCalendar/DatePickerCalendar.stories.tsx       | 5 +++--
 .../DatePickerCalendar/subs/CalendarComponentDayText.tsx    | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
index 2781c3c..5af837a 100644
--- 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
index 1bf74e7..7457765 100644
--- 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,
           },
         )}
       >