DatePick Style 수정

src/core/components/Calendar/DatePickerCalendar/index.tsx

@@ -162,15 +162,15 @@ const DatePickerCalendar = ({
   };
 
   return (
-    <div className = {"flex flex-col h-full w-full"}>
+    <div className = {"flex-v-stack h-full w-full"}>
       <CalendarHeader
         currentMonth = {commonModels.selectedDayjs.locale("ko").format("YYYY. MM")}
         onPreviousMonthClick = {commonOperations.onPreviousMonthClick}
         onNextMonthClick = {commonOperations.onNextMonthClick}
         monthButtonStatus = {monthButtonStatus}
       />
-      <CalendarWeekDayComponent />
-      <div className = {clsx("flex-v-stack gap-y-2 mt-4")}>
+      <CalendarWeekDayComponent className = "text-gray-06"/>
+      <div className = {clsx("grid flex-1 gap-y-2 mt-4")}>
         {commonModels.calendarDates.map((calendarWeekDates: CalendarDateDto[], index: number) => (
           <div key = {index} className = {clsx("grid grid-cols-7")}>
             {calendarWeekDates.map((calendarDate: CalendarDateDto, index: number) => {
@@ -179,7 +179,7 @@ const DatePickerCalendar = ({
               const isExceptionDate = exceptionDay ? exceptionDate === currentDate : false;
 
               return (
-                <div key = {index} className = {"h-[3rem] md:h-[3.75rem]"}>
+                <div key = {index}>
                   <button
                     type = "button"
                     className = {"w-full h-full"}
@@ -213,7 +213,8 @@ const DatePickerCalendar = ({
                       />
                     </div>
                   </button>
-                </div>);
+                </div>
+              );
             })}
           </div>
         ))}

src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx

@@ -1,5 +1,5 @@
 import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
-import clsx from "clsx";
+import Typography from "@/core/components/Typography";
 import { DatePickerCalendarProps } from "../types/DatePickerCalendarProps";
 
 interface CalendarComponentDaySubTextProps extends Pick<DatePickerCalendarProps, "label" | "periodDates"> {
@@ -22,21 +22,32 @@ export const CalendarComponentDaySubText = ({
   const singleSelectedDate = (periodDates.startDate && !periodDates.endDate) && currentDate === periodDates.startDate;
   const isActiveDate = isStartDate || isEndDate || singleSelectedDate;
 
-  const dayLabel = !isExceptionDate ?
-    <>
-      &nbsp;
-      {isStartDate ? label && label[0] ? label[0] : "시작일" : isEndDate ? label && label[1] ? label[1] : "종료일" : ""}
-      {singleSelectedDate ? label && label[0] ? label[0] : "시작일" : (calendarDate.isToday ? "오늘" : "")}
-      &nbsp;
-    </> : exceptionDateLabel;
+  const dayLabel = () => {
+    if(isExceptionDate) return exceptionDateLabel;
+
+    const hasCustomStartLabel = label && label[0];
+    const hasCustomEndLabel = label && label[1];
+    const startLabel = hasCustomStartLabel ? label[0] : "시작일";
+    const endLabel = hasCustomEndLabel ? label[1] : "종료일";
+
+    if(isStartDate || singleSelectedDate) return startLabel;
+
+    if(isEndDate) return endLabel;
+
+    if(calendarDate.isToday) {
+      const todayLabel = isEndDate ? endLabel : "오늘";
+      return todayLabel;
+    }
+
+    return "";
+};
 
   return (
-    <div
-      className = {clsx("flex justify-center items-center text-body-03-regular md:text-body-02-regular font-light mt-0.5 z-10 whitespace-nowrap",
-        isActiveDate ? "text-[#007BC7]" : "text-black",
-      )}
-    >
-      {dayLabel}
-    </div>
+    <Typography
+      text = {dayLabel()}
+      theme = "body-03-regular"
+      className = "md:text-body-02-regular z-10 whitespace-nowrap h-[1.5rem] mt-0.5"
+      color = { isActiveDate ? "primary-03" : "gray-06"}
+    />
   );
 };

src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx

@@ -41,14 +41,15 @@ export const CalendarComponentDayText = ({
     )}>
       <div
         className = {clsx(
-          "relative z-20 flex justify-center items-center leading-none text-body-03-bold md:text-body-01-bold text-black h-[2rem] md:h-[2.375rem]",
+          "relative z-20 flex justify-center items-center leading-none text-body-02-bold md:text-body-01-bold text-black h-[2rem] md:h-[2.375rem]",
+          !isExceptionDate && disabled ? "text-gray-05" : "text-black",
           isMarkedDate && "rounded-full w-[2rem] h-[2rem] md:w-[2.375rem] !text-white md:h-[2.375rem]",
           isActiveDate && "bg-primary-03",
           calendarDate.isToday && "bg-gray-03 w-[2rem] h-[2rem] md:w-[2.375rem] md:h-[2.375rem]",
           isExceptionDate && "bg-gray-05",
           isMarkedPeriod && "w-full bg-primary-00 rounded-none",
+          isMarkedPeriod && calendarDate.isToday && "!w-full !text-primary-03",
           isActiveDate && disabled && "bg-primary-01",
-          !isExceptionDate && disabled && "!text-[#1018284d]",
         )}
       >
         {calendarDate.dayjs.date()}

src/core/components/Calendar/ScheduleCalendar/index.tsx

@@ -41,7 +41,7 @@ const ScheduleCalendar = ({
         onNextMonthClick = {operations.onNextMonthClick}
         monthButtonStatus = {monthButtonStatus}
       />
-      <CalendarWeekDayComponent className = "gap-x-[1px] border border-b-0 border-gray-03 bg-gray-03" />
+      <CalendarWeekDayComponent className = "gap-x-[1px] border border-b-0 border-gray-03 bg-gray-03 py-1 text-gray-07" />
       <div className = "flex-v-stack gap-y-[1px] border border-t-0 border-gray-03 bg-gray-03">
         <CalendarDayComponent
           defaultQuantity = {defaultQuantity}

src/core/components/Calendar/common/subs/CalendarHeader.tsx

@@ -14,7 +14,7 @@ export const CalendarHeader = ({
   const isDisablePrev = (isDisabledMonthBtn || monthButtonStatus === MONTH_BUTTON_STATUS["DISABLE_PREV"]) ?? false;
   const isDisableNext = (isDisabledMonthBtn || monthButtonStatus === MONTH_BUTTON_STATUS["DISABLE_NEXT"]) ?? false;
   const buttonClassNames = "group flex justify-center items-center";
-  const iconClassNames = "text-gray-05 group-disabled:text-gray-03 group-disabled:cursor-not-allowed";
+  const iconClassNames = "text-gray-05 group-disabled:text-gray-03 group-disabled:cursor-not-allowed text-subhead-01-regular md:text-head-01-regular";
 
   return (
     <div className = {"flex gap-x-5 justify-center items-center mb-6"}>
@@ -24,16 +24,16 @@ export const CalendarHeader = ({
         onClick = {() => !isDisablePrev && onPreviousMonthClick?.()}
         disabled = {isDisablePrev}
       >
-        <CaretLeft size = {24} className = {iconClassNames}/>
+        <CaretLeft className = {iconClassNames}/>
       </button>
-      <Typography className = "text-center md:text-head-01-regular" color = "black" theme = "subhead-01-regular" text = {currentMonth} />
+      <Typography className = "text-center md:text-head-02-regular" color = "black" theme = "subhead-01-medium" text = {currentMonth} />
       <button
         type = "button"
         className = {buttonClassNames}
         onClick = {() => !isDisableNext && onNextMonthClick?.()}
         disabled = {isDisableNext}
       >
-        <CaretRight size = {24} className = {iconClassNames}/>
+        <CaretRight className = {iconClassNames}/>
       </button>
     </div>
   );

src/core/components/Calendar/common/subs/CalendarWeekdayComponent.tsx

@@ -1,9 +1,9 @@
+import clsx from "clsx";
 import dayjs from "dayjs";
 import "dayjs/locale/ko";
 
 import { Weekdays } from "@/constants";
 import Typography from "@/core/components/Typography";
-import clsx from "clsx";
 
 export const CalendarWeekDayComponent = ({ className }: { className?: string }) => {
   const convertWeekdayNumberToString = (weekdayNumber: number) => {
@@ -13,7 +13,7 @@ export const CalendarWeekDayComponent = ({ className }: { className?: string })
   return (
     <div className = {clsx("grid grid-cols-7 min-w-full w-full justify-center items-center text-center", className)}>
       {Object.values(Weekdays).map(weekdayNumber => (
-        <Typography element = "strong" key = {weekdayNumber} text = {convertWeekdayNumberToString(weekdayNumber)} theme = "body-02-regular" color = "gray-07" />
+        <Typography element = "strong" key = {weekdayNumber} text = {convertWeekdayNumberToString(weekdayNumber)} theme = "body-02-regular" color = "gray-06" className = "md:text-body-01-regular !text-inherit"/>
       ))}
     </div>
   );

src/core/components/Input/InputDatePicker/DatePicker.tsx

@@ -1,11 +1,11 @@
+import { CalendarBlank } from "@phosphor-icons/react";
+import clsx from "clsx";
 import { useEffect, useId, useState } from "react";
 
-import clsx from "clsx";
 import Button from "../../Button/Button";
 import DatePickerCalendar from "../../Calendar/DatePickerCalendar";
 import { DATE_PICKER_TYPE } from "../../Calendar/DatePickerCalendar/constants";
 import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
-import Divider from "../../Divider";
 import ModalPopUp from "../../Modal/ModalPopUp";
 import GeneralTab from "../../Tab/GeneralTab/GeneralTab";
 import Typography from "../../Typography";
@@ -37,7 +37,7 @@ const DatePicker = ({
   const [ isAfterAllDate, setIsAfterAllDate ] = useState(false);
   const tabData = [
     { key: "selectedDate", label: "선택한 기간만 적용" },
-    { key: "afterAllDate", label: "시작일부터 모든 날짜 적용" },
+    { key: "afterAllDate", label: "선택일부터 모든 날짜 적용" },
   ];
 
   const handleClose = () => {
@@ -69,20 +69,22 @@ const DatePicker = ({
 
   return (
     <ModalPopUp isOpen = {isOpen}>
-      <div
-        className = {clsx("min-w-[20rem] w-[calc(100vw-1rem)] max-w-[30rem] pt-6 md:pt-8 rounded-xl bg-white", { "pt-4 md:pt-6 max-w-[35rem]": useTab })}>
-        <div className = 'px-2 pb-2'>
-          <div className = "px-2 md:px-5">
-            {hasDatePickerTitle &&
-              <Typography element = 'h6' text = '날짜 선택' className = "!text-body-02-bold md:!text-subhead-01-bold md:mb-2"/>
-            }
-            {useTab &&
-              <GeneralTab
-                items = {tabItems}
-                className = "[&_span]:text-body-03-bold md:[&_span]:text-subhead-02-bold md:[&_span]:p-2 [&_span]:p-1.5 !p-1.5 md:!p-2 !rounded-lg [&_li]:rounded-lg mb-6 md:mb-8"
-                />
-              }
-          </div>
+      <div className = {clsx("min-w-[20rem] w-[calc(100vw-1rem)] max-w-[26rem] rounded-xl bg-white", { "max-w-[35rem]": useTab })}>
+        <header className = "p-4">
+          {hasDatePickerTitle &&
+            <div className = "flex gap-2 items-center">
+              <CalendarBlank className = "text-subhead-02-medium md:text-subhead-01-medium" />
+              <Typography element = 'h6' text = '날짜 선택' theme = "body-01-medium" className = "md:text-subhead-02-medium" />
+            </div>
+          }
+          {useTab &&
+            <GeneralTab
+              items = {tabItems}
+              className = "[&_span]:text-body-02-bold md:[&_span]:text-body-01-bold md:[&_span]:p-2 [&_span]:p-1.5 !p-1.5 md:p-2 !rounded-xl [&_li]:rounded-lg mt-3 md:mt-4"
+            />
+          }
+        </header>
+        <div className = {clsx("px-4 pb-2 md:pt-3 overflow-y-auto", useTab ? "pt-1 max-h-[calc(100vh-13rem)]" : "max-h-[calc(100vh-10rem)]")}>
           <DatePickerCalendar
             isFixStartDate = {isFixStartDate}
             variants = {variants}
@@ -98,15 +100,12 @@ const DatePicker = ({
             label = {dateLabel}
           />
         </div>
-        <Divider className = "mt-5" />
-        <div className = 'flex py-3 md:py-5 px-4 md:px-6'>
+        <div className = 'p-3 md:p-4 border-t'>
           <Button
-            backgroundColor = 'white'
-            color = 'gray-06'
             content = {closeButtonText}
             size = 'h-52'
-            rounded = 'rounded-12'
-            className = 'w-full border'
+            colorTheme = "white"
+            className = 'w-full'
             onClick = {handleClose}
           />
         </div>