(#0) npm publish (0.0.141)

thebbodek · Jan 7, 2024 · f864b36 · f864b36
1 parent 3ce3f3c
commit f864b36
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bbodek-ui",
-  "version": "0.0.135",
+  "version": "0.0.141",
   "type": "module",
   "author": "Bbodek",
   "license": "MIT",

diff --git a/src/core/components/Calendar/DatePickerCalendar/index.tsx b/src/core/components/Calendar/DatePickerCalendar/index.tsx
@@ -135,14 +135,15 @@ const DatePickerCalendar = ({
         monthButtonStatus = {monthButtonStatus}
       />
       <CalendarWeekDayComponent />
-      <div className = {clsx("mt-4")}>
+      <div className = {clsx("flex-v-stack 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) => {
               const disabled = calendarDate.isHoliday || !calendarDate.isThisMonth || disabledDates?.includes(calendarDate.dayjs.format("YYYY-MM-DD")) || isCutoffDateValidation({ cutoffDate, cutoffAfterDate, calendarDate: calendarDate.dayjs.format("YYYY-MM-DD") });
 
-              return <div key = {index} className = {clsx("h-16")}>
-                <button
+              return (
+                <div key = {index} className = {clsx("h-[3.75rem]")}>
+                  <button
                     type = "button"
                     className = {"w-full h-full"}
                     disabled = {disabled}
@@ -157,22 +158,22 @@ const DatePickerCalendar = ({
                       onDateClick(models.periodDates, afterAllDate);
                     }}
                   >
-                  <div className = {clsx("flex flex-col")}>
-                    <CalendarComponentDayText
+                    <div className = {clsx("flex flex-col")}>
+                      <CalendarComponentDayText
                         disabled = {disabled}
                         calendarDate = {calendarDate}
                         periodDates = {models.periodDates}
                         periodDateArray = {models.periodDateArray}
                         afterAllDate = {afterAllDate}
                       />
-                    <CalendarComponentDaySubText
+                      <CalendarComponentDaySubText
                         calendarDate = {calendarDate}
                         periodDates = {models.periodDates}
                         label = {label}
                       />
-                  </div>
-                </button>
-              </div>;
+                    </div>
+                  </button>
+                </div>);
             })}
           </div>
         ))}

diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx
@@ -19,7 +19,7 @@ export const CalendarComponentDaySubText = ({
 
   return (
     <div
-      className = {clsx("flex justify-center items-center text-sm font-light mt-1 z-10 whitespace-nowrap",
+      className = {clsx("flex justify-center items-center text-sm font-light mt-0.5 z-10 whitespace-nowrap",
         (isStartDate || isEndDate || singleSelectedDate) ? "text-[#007BC7]" : "text-black",
       )}
     >&nbsp;

diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
@@ -34,12 +34,12 @@ export const CalendarComponentDayText = ({
         },
     )}>
       <div
-        className = {clsx("relative z-20 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-[2.375rem] leading-none text-body-01-bold text-black",
           {
-            "rounded-full w-8 bg-primary-03 text-white": isStartDate || isEndDate || singleSelectedDate,
-            "bg-gray-03 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) && !disabled),
-            "!text-gray-03": disabled,
+            "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) && !disabled),
+            "!text-[#1018284d]": disabled,
             "!text-white": calendarDate.isToday && disabled,
           },
         )}

diff --git a/src/core/components/Calendar/ScheduleCalendar/index.tsx b/src/core/components/Calendar/ScheduleCalendar/index.tsx
@@ -41,13 +41,15 @@ const ScheduleCalendar = ({
         onNextMonthClick = {operations.onNextMonthClick}
         monthButtonStatus = {monthButtonStatus}
       />
-      <CalendarWeekDayComponent />
-      <CalendarDayComponent
-        defaultQuantity = {defaultQuantity}
-        schedulesData = {schedulesData}
-        calendarDates = {models.calendarDates}
-        onDateClick = {onDateClick}
-      />
+      <CalendarWeekDayComponent className = "gap-x-[1px] border border-b-0 border-gray-03 bg-gray-03" />
+      <div className = "flex-v-stack gap-y-[1px] border border-t-0 border-gray-03 bg-gray-03">
+        <CalendarDayComponent
+          defaultQuantity = {defaultQuantity}
+          schedulesData = {schedulesData}
+          calendarDates = {models.calendarDates}
+          onDateClick = {onDateClick}
+        />
+      </div>
     </div>
   );
 };

diff --git a/src/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent.tsx b/src/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent.tsx
@@ -16,10 +16,10 @@ export const CalendarDayComponent = ({
 }: CalendarDayComponentProps) => {
   return(
     <>
-      { calendarDates.map((calendarWeekDates: CalendarDateDto[], index) => (
+      {calendarDates.map((calendarWeekDates: CalendarDateDto[], index) => (
         <div
           key = {index}
-          className = {"grid grid-cols-7 h-36 overflow-hidden"}
+          className = {"grid grid-cols-7 gap-[1px] h-36 overflow-hidden"}
         >
           {calendarWeekDates.map((calendarDate: CalendarDateDto, index: number) => {
             const currentDate: string = calendarDate.dayjs.format("YYYY-MM-DD");
@@ -35,36 +35,37 @@ export const CalendarDayComponent = ({
                 key = {index}
                 type = "button"
                 disabled = {!calendarDate.isThisMonth}
-                className = "flex-v-stack items-center h-full text-center"
+                className = "flex-v-stack items-center h-full text-center bg-white"
                 onClick = {(): void => onDateClick(currentDate)}
               >
                 <div
-                  className = {clsx("relative flex justify-center items-center h-8",
+                  className = {clsx("relative flex justify-center items-center h-[1.5rem] my-1",
                     {
-                      "w-8 rounded-full bg-gray-01": calendarDate.isToday,
+                      "w-[1.5rem] rounded-full bg-gray-01": calendarDate.isToday,
                       "text-gray-03": !calendarDate.isThisMonth,
                     },
                   )}
                 >
                   <Typography
                     text = {`${calendarDate.dayjs.date()}`}
-                    theme = "body-01-bold"
+                    theme = "body-02-bold"
                     className = "text-inherit"
                   />
                   {quantity !== undefined &&
                     <Typography
                       key = {index}
                       text = {`(${quantity})`}
-                      className = "absolute top-[3px] end-0 translate-x-[calc(100%+0.625rem)]"
+                      theme = "body-02-bold"
+                      className = "absolute top-1/2 -translate-y-1/2 translate-x-[calc(100%+0.25rem)]"
                       color = {`${!calendarDate.isThisMonth ? "gray-03" : quantity === defaultQuantity ? "gray-06" : "primary-03"}`}
                     />
                   }
                 </div>
                 {schedulesData && Object.keys(schedulesData).map(markedDate => (
                   (markedDate === calendarDate.dayjs.format("YYYY-MM-DD")) &&
-                  <div className = "flex-v-stack gap-1 w-full pt-1" key = {markedDate}>
+                  <div className = "flex-v-stack gap-1 w-full" key = {markedDate}>
                     {
-                      schedulesData[markedDate].markedDates?.slice(0, 2).map((markedDateValue, index) => (
+                      schedulesData[markedDate].markedDates?.slice(0, 3).map((markedDateValue, index) => (
                         <div
                           key = {index}
                           className = {`${!calendarDate.isThisMonth ? "bg-gray-00 text-primary-00" : "bg-primary-00 text-primary-02"}`}
@@ -79,14 +80,13 @@ export const CalendarDayComponent = ({
                         </div>
                       ))
                     }
-                    {(schedulesData[markedDate].markedDates?.length ?? 0) > 2 &&
-                      <div className = "mt-1 px-[2px]">
+                    {(schedulesData[markedDate].markedDates?.length ?? 0) > 3 &&
+                      <div className = "px-2 text-left">
                         <Typography
                           element = "p"
-                          theme = "body-02-bold"
-                          text = "더보기"
-                          className = "bg-primary-02 rounded-2xl "
-                          color = "white"
+                          theme = "body-03-bold"
+                          text = {`${schedulesData[markedDate].markedDates?.slice(3, (schedulesData[markedDate].markedDates?.length ?? 0)).length}개 더보기`}
+                          color = "gray-06"
                         />
                       </div>
                     }

diff --git a/src/core/components/Calendar/common/subs/CalendarHeader.tsx b/src/core/components/Calendar/common/subs/CalendarHeader.tsx
@@ -17,7 +17,7 @@ export const CalendarHeader = ({
   const iconClassNames = "text-gray-05 group-disabled:text-gray-03 group-disabled:cursor-not-allowed";
 
   return (
-    <div className = {"flex gap-6 justify-center items-center mb-8"}>
+    <div className = {"flex gap-x-5 justify-center items-center mb-6"}>
       <button
         type = "button"
         className = {buttonClassNames}
@@ -26,7 +26,7 @@ export const CalendarHeader = ({
       >
         <CaretLeft size = {24} className = {iconClassNames}/>
       </button>
-      <Typography theme = "head-01-regular" text = {currentMonth} />
+      <Typography className = "w-[7.5rem] text-center" color = "black" theme = "head-01-regular" text = {currentMonth} />
       <button
         type = "button"
         className = {buttonClassNames}

diff --git a/src/core/components/Calendar/common/subs/CalendarWeekdayComponent.tsx b/src/core/components/Calendar/common/subs/CalendarWeekdayComponent.tsx
@@ -3,16 +3,17 @@ import "dayjs/locale/ko";
 
 import { Weekdays } from "@/constants";
 import Typography from "@/core/components/Typography";
+import clsx from "clsx";
 
-export const CalendarWeekDayComponent = () => {
+export const CalendarWeekDayComponent = ({ className }: { className?: string }) => {
   const convertWeekdayNumberToString = (weekdayNumber: number) => {
     return dayjs().startOf("week").add(weekdayNumber, "day").locale("ko").format("ddd");
   };
 
   return (
-    <div className = {"grid grid-cols-7 min-w-full w-full justify-center items-center mb-5 text-center bg-primary-00 py-2"}>
-      { Object.values(Weekdays).map(weekdayNumber => (
-        <Typography key = {weekdayNumber} text = {convertWeekdayNumberToString(weekdayNumber)} theme = "body-01-bold" color = "primary-06" />
+    <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" className = "bg-white" key = {weekdayNumber} text = {convertWeekdayNumberToString(weekdayNumber)} theme = "body-02-regular" color = "gray-07" />
       ))}
     </div>
   );

diff --git a/src/core/components/Drawer/index.tsx b/src/core/components/Drawer/index.tsx
@@ -37,7 +37,7 @@ const Drawer = forwardRef((
         <header className = "flex-v-stack gap-y-6 pt-6 pl-6 pr-4 after:content-[''] after:h-[0.0625rem] after:bg-gray-02">
           <div className = "flex items-center justify-between">
             <div className = {clsx(titleSub && "flex items-center gap-x-2")}>
-              <Typography element = "strong" theme = "head-01-bold" className = "text-[#000]" text = {title} />
+              <Typography element = "strong" theme = "head-01-bold" className = "text-black" text = {title} />
               {titleSub && <Typography theme = "body-02-regular" color = "gray-06" text = {titleSub} />}
             </div>
             <button onClick = {onClose} aria-label = "창 닫기">

diff --git a/src/core/components/Input/InputDatePicker/DatePicker.tsx b/src/core/components/Input/InputDatePicker/DatePicker.tsx
@@ -63,10 +63,12 @@ const DatePicker = ({
 
   return (
     <ModalPopUp isOpen = {isOpen}>
-      <div className = {"w-[30rem] pt-6 rounded-xl border bg-white"}>
-        <div className = 'px-4'>
-          <Typography element = 'h6' text = '날짜 선택' theme = 'subhead-01-bold' />
-          {useTab && <GeneralTab items = {tabItems} className = 'mt-4 mb-11' />}
+      <div className = {"w-[35.5rem] pt-5 rounded-xl bg-white"}>
+        <div className = 'px-6'>
+          <div className = "px-5 mb-6">
+            <Typography className = "mb-6" element = 'h6' text = '날짜 선택' theme = 'subhead-01-bold' />
+            {useTab && <GeneralTab items = {tabItems} />}
+          </div>
           <DatePickerCalendar
             variants = {variants}
             cutoffDate = {cutoffDate}
@@ -80,8 +82,8 @@ const DatePicker = ({
             label = {dateLabel}
           />
         </div>
-        <Divider />
-        <div className = 'flex gap-3 py-5 px-6'>
+        <Divider className = "mt-5" />
+        <div className = 'flex py-5 px-6'>
           <Button
             backgroundColor = 'white'
             color = 'gray-06'

diff --git a/src/core/components/Tab/GeneralTab/GeneralTab/index.tsx b/src/core/components/Tab/GeneralTab/GeneralTab/index.tsx
@@ -16,7 +16,7 @@ const GeneralTab = forwardRef((
   return (
     <ul
       ref = {ref}
-      className = {clsx("flex p-3 rounded-[1.25rem] bg-gray-01", className)}
+      className = {clsx("flex p-2.5 rounded-[1.25rem] bg-gray-01", className)}
       {...rest}
     >
       {items}

diff --git a/src/core/components/Tab/GeneralTab/GeneralTabItem/index.tsx b/src/core/components/Tab/GeneralTab/GeneralTabItem/index.tsx
@@ -14,7 +14,7 @@ const GeneralTabItem = forwardRef((
   const id = useId();
 
   return (
-    <li className = "flex rounded-[0.75rem] overflow-hidden flex-1">
+    <li className = "flex rounded-[1.25rem] overflow-hidden flex-1">
       <label className = "flex w-full" htmlFor = {id}>
         <input
           ref = {ref}
@@ -24,7 +24,7 @@ const GeneralTabItem = forwardRef((
           {...props}
         />
         <Typography
-          className = "flex-1 px-2.5 py-3 text-center bg-transparent cursor-pointer peer-checked:bg-white peer-checked:text-black"
+          className = "flex-1 p-2.5 text-center bg-transparent cursor-pointer peer-checked:bg-white peer-checked:text-black"
           theme = {theme}
           color = "gray-05"
           text = {label}