From 83df339249aafa3cd2eee22762b0d8afe56c29a1 Mon Sep 17 00:00:00 2001 From: baegofda Date: Sun, 8 Sep 2024 01:34:25 +0900 Subject: [PATCH] =?UTF-8?q?DESIGN-6=20DatePicker=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit dayjs 타임존 설정 기본 6주 사이즈 dateLabel default 옵션 제거 (사용일, 종료일) --- .../DatePickerCalendar.stories.tsx | 1 + .../Calendar/DatePickerCalendar/index.tsx | 37 +++++++++---------- .../subs/CalendarComponentDaySubText.tsx | 7 ++-- .../types/DatePickerCalendarProps.ts | 2 +- .../ScheduleCalendar.stories.tsx | 5 ++- .../Calendar/ScheduleCalendar/index.tsx | 6 +-- .../Calendar/common/hooks/useCalendar.ts | 3 +- .../common/hooks/useMonthChangeEffect.tsx | 18 ++++----- .../Calendar/common/subs/CalendarHeader.tsx | 24 +++++++++--- .../common/subs/CalendarWeekdayComponent.tsx | 4 +- .../Calendar/common/types/CalendarHeader.ts | 4 +- .../Input/InputDatePicker/DatePicker.tsx | 6 +-- .../InputDatePicker.stories.tsx | 3 +- .../Input/InputDatePicker/index.tsx | 6 +-- .../Input/InputDatePicker/types/index.ts | 2 +- src/index.ts | 1 + src/utilities/day.ts | 12 ++++++ 17 files changed, 84 insertions(+), 57 deletions(-) create mode 100644 src/utilities/day.ts diff --git a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx index d9a0a5f..390e584 100644 --- 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 (
-
- {commonModels.calendarDates.map( - (calendarWeekDates: CalendarDateDto[], index: number) => ( -
+
+ {commonModels.calendarDates.map((calendarWeekDates, index: number) => { + return ( +
{calendarWeekDates.map( (calendarDate: CalendarDateDto, index: number) => { const disabled = @@ -276,8 +275,8 @@ const DatePickerCalendar = ({ }, )}
- ), - )} + ); + })}
); diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx index 3345682..b80e089 100644 --- a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx +++ b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx @@ -31,8 +31,8 @@ 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; @@ -40,6 +40,7 @@ export const CalendarComponentDaySubText = ({ if (calendarDate.isToday) { const todayLabel = isEndDate ? endLabel : '오늘'; + return todayLabel; } @@ -50,7 +51,7 @@ export const CalendarComponentDaySubText = ({ ); diff --git a/src/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps.ts b/src/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps.ts index 1643fdc..16434c1 100644 --- 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 index bab5f56..c2e354c 100644 --- 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 (
{ const { models, operations } = useCalendar( - initialDate ? dayjs(initialDate * 1000) : dayjs(), + initialDate ? getDayjs(initialDate * 1000) : today, ); useEffect(() => { @@ -40,7 +40,7 @@ const ScheduleCalendar = ({ return (
{ const [selectedDayjs, setSelectedDayjs] = useState( - initialDate || dayjs(), + initialDate || today, ); const [calendarDates, setCalendarDates] = useState([[]]); diff --git a/src/core/components/Calendar/common/hooks/useMonthChangeEffect.tsx b/src/core/components/Calendar/common/hooks/useMonthChangeEffect.tsx index 4d2d687..85ca3a1 100644 --- 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 index cf8fde5..77e9034 100644 --- a/src/core/components/Calendar/common/subs/CalendarHeader.tsx +++ b/src/core/components/Calendar/common/subs/CalendarHeader.tsx @@ -3,6 +3,7 @@ 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, @@ -10,6 +11,8 @@ export const CalendarHeader = ({ 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 = ({ > - +
+ + +
{ return ( => { diff --git a/src/core/components/Input/InputDatePicker/types/index.ts b/src/core/components/Input/InputDatePicker/types/index.ts index 480fcc9..e7166ba 100644 --- a/src/core/components/Input/InputDatePicker/types/index.ts +++ b/src/core/components/Input/InputDatePicker/types/index.ts @@ -22,7 +22,7 @@ export interface DatePickerProps isOpen: boolean; close: DatePickerCalendarProps['onDateClick']; useTab?: boolean; - dateLabel?: DatePickerCalendarProps['label']; + dateLabel: DatePickerCalendarProps['label']; hasDatePickerTitle?: boolean; } diff --git a/src/index.ts b/src/index.ts index fade61e..bfd7367 100644 --- a/src/index.ts +++ b/src/index.ts @@ -55,3 +55,4 @@ export { default as Tooltip } from '@/core/components/Tooltip'; export { default as Typography } from '@/core/components/Typography'; export { default as Chip } from '@/core/components/Chip'; export { default as Chips } from '@/core/components/Chips'; +export * from '@/utilities/day'; diff --git a/src/utilities/day.ts b/src/utilities/day.ts new file mode 100644 index 0000000..ccabe88 --- /dev/null +++ b/src/utilities/day.ts @@ -0,0 +1,12 @@ +import timezone from 'dayjs/plugin/timezone'; +import utc from 'dayjs/plugin/utc'; +import dayjs from 'dayjs'; +import 'dayjs/locale/ko'; + +dayjs.extend(utc); +dayjs.extend(timezone); + +export const getDayjs = (date?: dayjs.ConfigType, timezone = 'Asia/Seoul') => + dayjs(date).tz(timezone); + +export const today = getDayjs().startOf('day');