DESIGN-6 DatePicker 수정

dayjs 타임존 설정 기본 6주 사이즈 dateLabel default 옵션 제거 (사용일, 종료일)
thebbodek · Sep 11, 2024 · 83df339 · 83df339
1 parent 2458fc4
commit 83df339
Show file tree

Hide file tree

Showing 17 changed files with 84 additions and 57 deletions.
diff --git a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
@@ -49,6 +49,7 @@ export const PeriodDatesPicker = () => {
   return (
     <div className={'w-[500px] rounded-3xl border py-6'}>
       <DatePickerCalendar
+        label={['사용일']}
         variants={DATE_PICKER_TYPE['PERIOD']}
         cutoffDate='2024-01-23'
         periodDates={periodDates}

diff --git a/src/core/components/Calendar/DatePickerCalendar/index.tsx b/src/core/components/Calendar/DatePickerCalendar/index.tsx
@@ -7,13 +7,14 @@ import { CalendarHeader } from '@/core/components/Calendar/common/subs/CalendarH
 import { CalendarWeekDayComponent } from '@/core/components/Calendar/common/subs/CalendarWeekdayComponent';
 import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
 import { DATE_PICKER_TYPE } from './constants';
-import { CalendarComponentDaySubText } from './subs/CalendarComponentDaySubText';
-import { CalendarComponentDayText } from './subs/CalendarComponentDayText';
 import {
   DatePickerCalendarProps,
   DatePickerType,
   PeriodDates,
 } from './types/DatePickerCalendarProps';
+import { getDayjs, today } from '@/utilities/day';
+import { CalendarComponentDayText } from '@/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText';
+import { CalendarComponentDaySubText } from '@/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText';
 
 export interface UseDatePickerCalendarResponse {
   models: {
@@ -72,7 +73,7 @@ export const useDatePickerCalendar = ({
 
           return;
         } else {
-          if (!dayjs(periodDates.startDate).isAfter(calendarDate.dayjs)) {
+          if (!getDayjs(periodDates.startDate).isAfter(calendarDate.dayjs)) {
             newPeriodDates.endDate = currentDate;
           } else {
             newPeriodDates.startDate = currentDate;
@@ -94,8 +95,8 @@ export const useDatePickerCalendar = ({
         return;
       }
       const newPeriodDateArray: string[] = [];
-      const startDate: dayjs.Dayjs = dayjs(periodDates.startDate);
-      const endDate: dayjs.Dayjs = dayjs(periodDates.endDate);
+      const startDate: dayjs.Dayjs = getDayjs(periodDates.startDate);
+      const endDate: dayjs.Dayjs = getDayjs(periodDates.endDate);
       const diffDate: number = endDate.diff(startDate, 'day');
 
       for (let i = 0; i <= diffDate; i++) {
@@ -121,7 +122,7 @@ export const useDatePickerCalendar = ({
 
 const DatePickerCalendar = ({
   variants = DATE_PICKER_TYPE['SINGLE'],
-  label = ['사용일'],
+  label,
   initialDate,
   exceptionDay,
   periodDates,
@@ -138,7 +139,7 @@ const DatePickerCalendar = ({
   const { date: exceptionDate = '', label: exceptionLabel = '' } =
     exceptionDay ?? {};
   const { models: commonModels, operations: commonOperations } = useCalendar(
-    initialDate ? dayjs(initialDate) : dayjs(),
+    initialDate ? getDayjs(initialDate) : today,
   );
   const { models, operations } = useDatePickerCalendar({ isFixStartDate });
 
@@ -164,7 +165,7 @@ const DatePickerCalendar = ({
       const newPeriodDates = models.periodDates;
       newPeriodDates.startDate = periodDates.startDate;
       operations.setPeriodDates({ ...newPeriodDates });
-      commonOperations.setInitialSelectedDayjs(dayjs(periodDates.startDate));
+      commonOperations.setInitialSelectedDayjs(getDayjs(periodDates.startDate));
     }
   }, []);
 
@@ -193,26 +194,24 @@ const DatePickerCalendar = ({
     if (!cutoffDate && !cutoffAfterDate) return false;
 
     return (
-      (!!cutoffDate && dayjs(calendarDate).isBefore(cutoffDate)) ||
-      (!!cutoffAfterDate && dayjs(calendarDate).isAfter(cutoffAfterDate))
+      (!!cutoffDate && getDayjs(calendarDate).isBefore(cutoffDate)) ||
+      (!!cutoffAfterDate && getDayjs(calendarDate).isAfter(cutoffAfterDate))
     );
   };
 
   return (
     <div className={'flex-v-stack h-full w-full'}>
       <CalendarHeader
-        currentMonth={commonModels.selectedDayjs
-          .locale('ko')
-          .format('YYYY. MM')}
+        currentMonth={commonModels.selectedDayjs}
         onPreviousMonthClick={commonOperations.onPreviousMonthClick}
         onNextMonthClick={commonOperations.onNextMonthClick}
         monthButtonStatus={monthButtonStatus}
       />
       <CalendarWeekDayComponent className='text-gray-06' />
-      <div className={clsx('mt-4 grid flex-1 gap-y-2')}>
-        {commonModels.calendarDates.map(
-          (calendarWeekDates: CalendarDateDto[], index: number) => (
-            <div key={index} className={clsx('grid grid-cols-7')}>
+      <div className={clsx('mt-4 grid flex-1')}>
+        {commonModels.calendarDates.map((calendarWeekDates, index: number) => {
+          return (
+            <div key={index} className={'grid grid-cols-7'}>
               {calendarWeekDates.map(
                 (calendarDate: CalendarDateDto, index: number) => {
                   const disabled =
@@ -276,8 +275,8 @@ const DatePickerCalendar = ({
                 },
               )}
             </div>
-          ),
-        )}
+          );
+        })}
       </div>
     </div>
   );

diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx
@@ -31,15 +31,16 @@ export const CalendarComponentDaySubText = ({
 
     const hasCustomStartLabel = label && label[0];
     const hasCustomEndLabel = label && label[1];
-    const startLabel = hasCustomStartLabel ? label[0] : '시작일';
-    const endLabel = hasCustomEndLabel ? 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;
     }
 
@@ -50,7 +51,7 @@ export const CalendarComponentDaySubText = ({
     <Typography
       text={dayLabel()}
       theme='body-03-regular'
-      className='z-10 mt-0.5 h-[1.5rem] whitespace-nowrap md:text-body-02-regular'
+      className='flex h-[1.5rem] items-center justify-center whitespace-nowrap md:text-body-02-regular'
       color={isActiveDate ? 'primary-03' : 'gray-06'}
     />
   );

diff --git a/src/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps.ts b/src/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps.ts
@@ -19,7 +19,7 @@ export interface DatePickerCalendarProps
   isFixStartDate?: boolean;
   initialDate?: string;
   periodDates: PeriodDates;
-  label?: string[];
+  label: string[];
   disabledDates?: string[];
   afterAllDate?: boolean;
   cutoffDate?: string;

diff --git a/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx b/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx
@@ -2,8 +2,9 @@ import { Meta } from '@storybook/react';
 import { useEffect, useState } from 'react';
 
 import ScheduleCalendar from '@/core/components/Calendar/ScheduleCalendar';
-import dayjs from 'dayjs';
 import { PeriodDates } from '../DatePickerCalendar/types/DatePickerCalendarProps';
+import { getDayjs } from '@/utilities/day';
+
 const meta = {
   title: 'core/Calendar/ScheduleCalendar',
   component: ScheduleCalendar,
@@ -29,7 +30,7 @@ export const Default = () => {
   return (
     <div className={'w-[1000px]'}>
       <ScheduleCalendar
-        initialDate={dayjs('2023-12-02').unix()}
+        initialDate={getDayjs('2023-12-02').unix()}
         onRender={getCalendarDates}
         defaultQuantity={25}
         schedulesData={{

diff --git a/src/core/components/Calendar/ScheduleCalendar/index.tsx b/src/core/components/Calendar/ScheduleCalendar/index.tsx
@@ -1,4 +1,3 @@
-import dayjs from 'dayjs';
 import { useEffect } from 'react';
 
 import { CalendarDayComponent } from '@/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent';
@@ -7,6 +6,7 @@ import { useCalendar } from '@/core/components/Calendar/common/hooks/useCalendar
 import { CalendarHeader } from '@/core/components/Calendar/common/subs/CalendarHeader';
 import { CalendarWeekDayComponent } from '@/core/components/Calendar/common/subs/CalendarWeekdayComponent';
 import { PeriodDates } from '../DatePickerCalendar/types/DatePickerCalendarProps';
+import { getDayjs, today } from '@/utilities/day';
 
 const ScheduleCalendar = ({
   initialDate,
@@ -17,7 +17,7 @@ const ScheduleCalendar = ({
   monthButtonStatus,
 }: CalendarComponentProps) => {
   const { models, operations } = useCalendar(
-    initialDate ? dayjs(initialDate * 1000) : dayjs(),
+    initialDate ? getDayjs(initialDate * 1000) : today,
   );
 
   useEffect(() => {
@@ -40,7 +40,7 @@ const ScheduleCalendar = ({
   return (
     <div className={'flex h-full w-full flex-col'}>
       <CalendarHeader
-        currentMonth={models.selectedDayjs.locale('ko').format('YYYY. MM')}
+        currentMonth={models.selectedDayjs}
         onPreviousMonthClick={operations.onPreviousMonthClick}
         onNextMonthClick={operations.onNextMonthClick}
         monthButtonStatus={monthButtonStatus}

diff --git a/src/core/components/Calendar/common/hooks/useCalendar.ts b/src/core/components/Calendar/common/hooks/useCalendar.ts
@@ -4,10 +4,11 @@ import { useCallback, useState } from 'react';
 import { useMonthChangeEffect } from '@/core/components/Calendar/common/hooks/useMonthChangeEffect';
 import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
 import { UseCalendarResponse } from '@/core/components/Calendar/common/types/UseCalendarResponse';
+import { today } from '@/utilities/day';
 
 export const useCalendar = (initialDate?: dayjs.Dayjs): UseCalendarResponse => {
   const [selectedDayjs, setSelectedDayjs] = useState<dayjs.Dayjs>(
-    initialDate || dayjs(),
+    initialDate || today,
   );
   const [calendarDates, setCalendarDates] = useState<CalendarDateDto[][]>([[]]);
 

diff --git a/src/core/components/Calendar/common/hooks/useMonthChangeEffect.tsx b/src/core/components/Calendar/common/hooks/useMonthChangeEffect.tsx
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 
 import { HOLIDAYS, Weekdays } from '@/constants';
 import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
+import { getDayjs } from '@/utilities/day';
 
 export const useMonthChangeEffect = (
   selectedDayjs: dayjs.Dayjs,
@@ -12,26 +13,23 @@ export const useMonthChangeEffect = (
     function getNewCalendarDates() {
       const newCalendarDates: CalendarDateDto[][] = [];
       let calendarWeekDates: CalendarDateDto[] = [];
+
       let calendarDate: dayjs.Dayjs =
         selectedDayjs.startOf('month').startOf('week').get('d') ===
         Weekdays.SUNDAY
           ? selectedDayjs.startOf('month').startOf('week')
           : selectedDayjs.subtract(1, 'month').endOf('month').startOf('week');
 
-      while (
-        selectedDayjs.endOf('month').get('d') === Weekdays.SATURDAY
-          ? calendarDate.isBefore(
-              selectedDayjs.add(1, 'month').startOf('month'),
-            )
-          : calendarDate.isBefore(
-              selectedDayjs.add(1, 'month').startOf('month').endOf('week'),
-            )
-      ) {
+      const totalWeeks = 6;
+      const endCalendarDate = calendarDate.add(totalWeeks * 7, 'day');
+
+      while (calendarDate.isBefore(endCalendarDate)) {
         calendarWeekDates.push({
           dayjs: calendarDate,
           isThisMonth: calendarDate.isSame(selectedDayjs, 'month'),
           isToday:
-            calendarDate.format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD'),
+            calendarDate.format('YYYY-MM-DD') ===
+            getDayjs().format('YYYY-MM-DD'),
           isHoliday: HOLIDAYS.includes(calendarDate.get('d')),
         });
 

diff --git a/src/core/components/Calendar/common/subs/CalendarHeader.tsx b/src/core/components/Calendar/common/subs/CalendarHeader.tsx
@@ -3,13 +3,16 @@ import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import Typography from '@/core/components/Typography';
 import { MONTH_BUTTON_STATUS } from '../constants';
 import { CalendarHeaderProps } from '../types/CalendarHeader';
+import { getDayjs } from '@/utilities/day';
 
 export const CalendarHeader = ({
   currentMonth,
   onPreviousMonthClick,
   onNextMonthClick,
   monthButtonStatus = MONTH_BUTTON_STATUS['IDLE'],
 }: CalendarHeaderProps) => {
+  const year = getDayjs(currentMonth).format('YYYY.');
+  const month = getDayjs(currentMonth).format('MM');
   const isDisabledMonthBtn =
     monthButtonStatus === MONTH_BUTTON_STATUS['DISABLE_BOTH'];
   const isDisablePrev =
@@ -34,12 +37,21 @@ export const CalendarHeader = ({
       >
         <CaretLeft className={iconClassNames} />
       </button>
-      <Typography
-        className='text-center md:text-head-02-regular'
-        color='black'
-        theme='subhead-01-medium'
-        text={currentMonth}
-      />
+      <div
+        className={'flex min-w-[6rem] items-center justify-between text-black'}
+      >
+        <Typography
+          className='text-center md:text-head-02-regular'
+          theme='subhead-01-medium'
+          text={year}
+        />
+        <Typography
+          className='text-center md:text-head-02-regular'
+          color='black'
+          theme='subhead-01-medium'
+          text={month}
+        />
+      </div>
       <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
@@ -1,17 +1,17 @@
 import clsx from 'clsx';
-import dayjs from 'dayjs';
 import 'dayjs/locale/ko';
 
 import { Weekdays } from '@/constants';
 import Typography from '@/core/components/Typography';
+import { getDayjs } from '@/utilities/day';
 
 export const CalendarWeekDayComponent = ({
   className,
 }: {
   className?: string;
 }) => {
   const convertWeekdayNumberToString = (weekdayNumber: number) => {
-    return dayjs()
+    return getDayjs()
       .startOf('week')
       .add(weekdayNumber, 'day')
       .locale('ko')

diff --git a/src/core/components/Calendar/common/types/CalendarHeader.ts b/src/core/components/Calendar/common/types/CalendarHeader.ts
@@ -1,7 +1,9 @@
+import dayjs from 'dayjs';
+
 import { MONTH_BUTTON_STATUS } from '../constants';
 
 export interface CalendarHeaderProps {
-  currentMonth: string;
+  currentMonth: dayjs.Dayjs;
   onPreviousMonthClick?: () => void;
   onNextMonthClick?: () => void;
   monthButtonStatus?: MonthButtonStatusTypes;

diff --git a/src/core/components/Input/InputDatePicker/DatePicker.tsx b/src/core/components/Input/InputDatePicker/DatePicker.tsx
@@ -103,10 +103,8 @@ const DatePicker = ({
         </header>
         <div
           className={clsx(
-            'overflow-y-auto px-4 pb-2 md:pt-3',
-            useTab
-              ? 'max-h-[calc(100vh-13rem)] pt-1'
-              : 'max-h-[calc(100vh-10rem)]',
+            'overflow-y-auto px-4',
+            useTab ? 'max-h-[calc(100vh-13rem)]' : 'max-h-[calc(100vh-10rem)]',
           )}
         >
           <DatePickerCalendar

diff --git a/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx b/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
@@ -42,7 +42,7 @@ const DefaultLayout = () => {
           전체 날짜 변경
         </button>
         <InputDatePicker
-          variants='period'
+          variants='single'
           overlay={overlay}
           getPeriodDates={getDate}
           externalDates={myDates}
@@ -83,6 +83,7 @@ const InputDatePickerInModalPopUpLayout = () => {
       return (
         <ModalPopUp isOpen={isOpen}>
           <InputDatePicker
+            dateLabel={['사용일', '종료일']}
             overlay={inputDatePickerOverlay}
             useTab={false}
             getPeriodDates={getDate}

diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
@@ -1,13 +1,13 @@
 import { CalendarBlank } from '@phosphor-icons/react';
 import clsx from 'clsx';
-import dayjs from 'dayjs';
 import { HTMLAttributes, useEffect, useId, useState } from 'react';
 
 import { DATE_PICKER_TYPE } from '../../Calendar/DatePickerCalendar/constants';
 import { PeriodDates } from '../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps';
 import InputBase from '../InputBase';
 import DatePicker from './DatePicker';
 import { InputDatePickerProps } from './types';
+import { getDayjs } from '@/utilities/day';
 
 const InputDatePicker = ({
   variants = DATE_PICKER_TYPE['PERIOD'],
@@ -42,8 +42,8 @@ const InputDatePicker = ({
     startDate: '',
     endDate: '',
   });
-  const startDate = dayjs(periodDates.startDate).format('YYYY. MM. DD');
-  const endDate = dayjs(periodDates.endDate).format('YYYY. MM. DD');
+  const startDate = getDayjs(periodDates.startDate).format('YYYY. MM. DD');
+  const endDate = getDayjs(periodDates.endDate).format('YYYY. MM. DD');
   const isDisabled = readOnly || disabled;
 
   const onDatePickerClick = (): Promise<PeriodDates> => {