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> => {