From 4cf6b38edc97e0e06957a747035534bfd3568afb Mon Sep 17 00:00:00 2001
From: JinJu <jj.park@bbodek.com>
Date: Thu, 7 Dec 2023 15:46:49 +0900
Subject: [PATCH] =?UTF-8?q?(#0)=20InputDatePicker=20style=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
index 00749ee..f7350f3 100644
--- a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
+++ b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
@@ -20,18 +20,19 @@ export const CalendarComponentDayText = ({
   const isStartDate = isPeriod && periodDates.startDate === currentDate;
   const isEndDate = isPeriod && periodDates.endDate === currentDate;
   const singleSelectedDate = (periodDates.startDate && !periodDates.endDate) && currentDate === periodDates.startDate;
+  console.log(isStartDate);
 
   return (
     <div
       className = {clsx("relative flex flex-col justify-between items-center",
         {
-          "before:absolute before:translate-x-1/2 before:content-[''] before:w-1/2 before:h-full before:bg-primary-00 before:block before:-z-10": isStartDate || isEndDate || afterAllDate && singleSelectedDate,
+          "before:absolute before:translate-x-1/2 before:content-[''] before:w-1/2 before:h-full before:bg-primary-00 before:block before:z-20": isStartDate || isEndDate || afterAllDate && singleSelectedDate,
           "before:translate-x-1/2": isStartDate,
           "before:translate-x-[-50%]": isEndDate,
         },
     )}>
       <div
-        className = {clsx("flex justify-center items-center h-8 leading-none text-xs text-gray-08",
+        className = {clsx("relative z-20 flex justify-center items-center h-8 leading-none text-xs text-gray-08",
           {
             "rounded-full w-8 bg-primary-03 text-white": isStartDate || isEndDate || singleSelectedDate,
             "bg-gray-03 text-white rounded-full w-8": calendarDate.isToday,
diff --git a/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx b/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
index b50b355..6e8fa58 100644
--- a/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
+++ b/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
@@ -21,9 +21,7 @@ export const Default = () => {
       <div id = "modal"/>
       <div className = "flex gap-2">
         <div className = "w-[500px]">
-          <InputDatePicker
-            useTab
-          />
+          <InputDatePicker useTab />
         </div>
       </div>
     </OverlayProvider>