From f6974fa00825561b60e976ae1590ad806ea0ec88 Mon Sep 17 00:00:00 2001
From: JinJu <jj.park@bbodek.com>
Date: Wed, 6 Dec 2023 19:07:58 +0900
Subject: [PATCH] =?UTF-8?q?(#58)=20Calendar=20Component=20useId=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../subs/CalendarComponentDayText.tsx              | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/core/components/Calendar/DateSelectCalendar/subs/CalendarComponentDayText.tsx b/src/core/components/Calendar/DateSelectCalendar/subs/CalendarComponentDayText.tsx
index d625cd5..8b94d9e 100644
--- a/src/core/components/Calendar/DateSelectCalendar/subs/CalendarComponentDayText.tsx
+++ b/src/core/components/Calendar/DateSelectCalendar/subs/CalendarComponentDayText.tsx
@@ -22,14 +22,18 @@ export const CalendarComponentDayText = ({
   const singleSelectedDate = (periodDates.startDate && !periodDates.endDate) && currentDate === periodDates.startDate;
 
   return (
-    <div className = {clsx("flex flex-col justify-between items-center")}>
+    <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:translate-x-1/2": isStartDate,
+          "before:translate-x-[-50%]": isEndDate,
+        },
+    )}>
       <div
         className = {clsx("flex justify-center items-center h-8 leading-none text-xs",
           {
-            "relative rounded-full w-8 bg-primary-03 text-white": isStartDate || isEndDate || singleSelectedDate,
-            "before:absolute before:translate-x-1/2 before:content-[''] before:w-[calc(100%+5px)] before:h-full before:bg-primary-00 before:block before:-z-10": isStartDate || isEndDate || afterAllDate && singleSelectedDate,
-            "before:translate-x-1/2": isStartDate,
-            "before:translate-x-[-50%]": isEndDate,
+            "rounded-full w-8 bg-primary-03 text-white": isStartDate || isEndDate || singleSelectedDate,
             "bg-[#C9CCCF] 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-[#C9CCCF]": !calendarDate.isThisMonth && !periodDateArray?.includes(currentDate) && !calendarDate.isToday!,