DatePicker 로직 수정

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

@@ -0,0 +1,100 @@
+import clsx from 'clsx';
+import { memo } from 'react';
+
+import { CalendarComponentDayText } from '@/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText';
+import { CalendarComponentDaySubText } from '@/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText';
+import {
+  DatePickerCalendarDayProps,
+  DatePickerCalendarProps,
+} from '@/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps';
+import { getDayjs } from '@/utilities/day';
+
+const DatePickerCalendarDay = ({
+  useHoliday,
+  disabledDates,
+  periodDates,
+  periodDateArray,
+  exceptionDay,
+  calendarDate,
+  cutoffDate,
+  cutoffAfterDate,
+  temporaryDates,
+  onDateClick,
+  variants,
+  label,
+  afterAllDate = false,
+  handleDateClick,
+  setCalendarPeriodDates,
+}: DatePickerCalendarDayProps) => {
+  const { startDate, endDate } = periodDates;
+  const { date: exceptionDate = '', label: exceptionLabel = '' } =
+    exceptionDay ?? {};
+  const currentDate = calendarDate.dayjs.format('YYYY-MM-DD');
+  const isExceptionDate = exceptionDay ? exceptionDate === currentDate : false;
+  const isTemporaryDate = temporaryDates?.includes(currentDate) ?? false;
+
+  const isCutoffDateValidation = ({
+    cutoffDate,
+    cutoffAfterDate,
+    calendarDate,
+  }: Pick<DatePickerCalendarProps, 'cutoffDate' | 'cutoffAfterDate'> & {
+    calendarDate: string;
+  }) => {
+    if (!cutoffDate && !cutoffAfterDate) return false;
+
+    return (
+      (!!cutoffDate && getDayjs(calendarDate).isBefore(cutoffDate)) ||
+      (!!cutoffAfterDate && getDayjs(calendarDate).isAfter(cutoffAfterDate))
+    );
+  };
+
+  const disabled =
+    (!useHoliday && calendarDate.isHoliday) ||
+    !calendarDate.isThisMonth ||
+    disabledDates?.includes(calendarDate.dayjs.format('YYYY-MM-DD')) ||
+    isCutoffDateValidation({
+      cutoffDate,
+      cutoffAfterDate,
+      calendarDate: calendarDate.dayjs.format('YYYY-MM-DD'),
+    });
+
+  return (
+    <button
+      type='button'
+      className={'h-full w-full'}
+      disabled={disabled}
+      onClick={(): void => {
+        if (startDate === endDate && endDate === currentDate) {
+          return;
+        }
+
+        handleDateClick(variants, afterAllDate, calendarDate);
+        setCalendarPeriodDates(periodDates);
+        onDateClick(periodDates, afterAllDate);
+      }}
+    >
+      <div className={clsx('flex flex-col')}>
+        <CalendarComponentDayText
+          disabled={disabled}
+          calendarDate={calendarDate}
+          periodDates={periodDates}
+          periodDateArray={periodDateArray}
+          afterAllDate={afterAllDate}
+          isExceptionDate={isExceptionDate}
+          isTemporaryDate={isTemporaryDate}
+        />
+        <CalendarComponentDaySubText
+          calendarDate={calendarDate}
+          periodDates={periodDates}
+          disabled={disabled}
+          isExceptionDate={isExceptionDate}
+          isTemporaryDate={isTemporaryDate}
+          exceptionDateLabel={exceptionLabel}
+          label={label}
+        />
+      </div>
+    </button>
+  );
+};
+
+export default memo(DatePickerCalendarDay);

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

@@ -0,0 +1,47 @@
+import DatePickerCalendarDay from '@/core/components/Calendar/DatePickerCalendar/DatePickerCalendarDay';
+import { DatePickerCalendarWeekProps } from '@/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps';
+
+const DatePickerCalendarWeek = ({
+  exceptionDay,
+  calendarWeekDates,
+  useHoliday,
+  cutoffDate,
+  cutoffAfterDate,
+  disabledDates,
+  temporaryDates,
+  handleDateClick,
+  label,
+  variants,
+  periodDates,
+  setCalendarPeriodDates,
+  onDateClick,
+  afterAllDate = false,
+  periodDateArray,
+}: DatePickerCalendarWeekProps) => {
+  return (
+    <div className={'grid grid-cols-7'}>
+      {calendarWeekDates.map((calendarDate, index) => (
+        <DatePickerCalendarDay
+          key={index}
+          calendarDate={calendarDate}
+          exceptionDay={exceptionDay}
+          useHoliday={useHoliday}
+          cutoffDate={cutoffDate}
+          cutoffAfterDate={cutoffAfterDate}
+          disabledDates={disabledDates}
+          temporaryDates={temporaryDates}
+          handleDateClick={handleDateClick}
+          label={label}
+          variants={variants}
+          setCalendarPeriodDates={setCalendarPeriodDates}
+          periodDates={periodDates}
+          onDateClick={onDateClick}
+          afterAllDate={afterAllDate}
+          periodDateArray={periodDateArray}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default DatePickerCalendarWeek;

src/core/components/Calendar/DatePickerCalendar/hooks/useDatePickerCalendar.ts

@@ -0,0 +1,136 @@
+import dayjs from 'dayjs';
+import { useCallback, useState } from 'react';
+
+import {
+  DatePickerCalendarProps,
+  DatePickerType,
+  PeriodDates,
+  UseDatePickerCalendarResponse,
+} from '@/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps';
+import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
+import { DATE_PICKER_TYPE } from '@/core/components/Calendar/DatePickerCalendar/constants';
+import { getDayjs } from '@/utilities/day';
+
+export const useDatePickerCalendar = ({
+  isFixStartDate,
+}: Pick<
+  DatePickerCalendarProps,
+  'isFixStartDate'
+>): UseDatePickerCalendarResponse => {
+  const [periodDates, setPeriodDates] = useState<PeriodDates>({
+    startDate: '',
+    endDate: '',
+  });
+  const [periodDateArray, setPeriodDateArray] = useState<string[]>([]);
+
+  const handleDateClick = useCallback(
+    (
+      variants: DatePickerType,
+      afterAllDate: boolean,
+      calendarDate: CalendarDateDto,
+    ) => {
+      const currentDate = calendarDate.dayjs.format('YYYY-MM-DD');
+      const newPeriodDates = periodDates;
+
+      if (variants === DATE_PICKER_TYPE['SINGLE']) {
+        newPeriodDates.startDate = currentDate;
+        newPeriodDates.endDate = currentDate;
+
+        return;
+      }
+
+      if (variants === DATE_PICKER_TYPE['PERIOD']) {
+        if (!isFixStartDate) {
+          if (afterAllDate) {
+            newPeriodDates.startDate = currentDate;
+            newPeriodDates.endDate = '';
+
+            return;
+          }
+
+          if (periodDates.startDate === '' && periodDates.endDate === '') {
+            newPeriodDates.startDate = currentDate;
+            newPeriodDates.endDate = currentDate;
+
+            return;
+          } else if (
+            periodDates.startDate !== '' &&
+            periodDates.endDate !== ''
+          ) {
+            if (periodDates.startDate === periodDates.endDate) {
+              if (
+                calendarDate.dayjs.isBefore(getDayjs(periodDates.startDate))
+              ) {
+                newPeriodDates.startDate = currentDate;
+                newPeriodDates.endDate = currentDate;
+
+                return;
+              }
+
+              newPeriodDates.endDate = currentDate;
+
+              return;
+            }
+            newPeriodDates.startDate = currentDate;
+            newPeriodDates.endDate = currentDate;
+
+            return;
+          } else if (
+            periodDates.startDate !== '' &&
+            periodDates.endDate === ''
+          ) {
+            if (calendarDate.dayjs.isBefore(getDayjs(periodDates.startDate))) {
+              newPeriodDates.startDate = currentDate;
+
+              return;
+            }
+            newPeriodDates.endDate = currentDate;
+
+            return;
+          }
+        } else {
+          if (afterAllDate) {
+            newPeriodDates.startDate = currentDate;
+            newPeriodDates.endDate = '';
+
+            return;
+          }
+
+          newPeriodDates.endDate = currentDate;
+        }
+      }
+    },
+    [periodDates],
+  );
+
+  const setCalendarPeriodDates = useCallback(
+    (periodDates: PeriodDates) => {
+      if (!periodDates.endDate || !periodDates.startDate) {
+        setPeriodDateArray([]);
+        return;
+      }
+      const newPeriodDateArray = [];
+      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++) {
+        newPeriodDateArray.push(startDate.add(i, 'day').format('YYYY-MM-DD'));
+      }
+      setPeriodDateArray(newPeriodDateArray);
+    },
+    [periodDates, setPeriodDateArray],
+  );
+
+  return {
+    models: {
+      periodDateArray,
+      periodDates,
+    },
+    operations: {
+      setCalendarPeriodDates,
+      setPeriodDates,
+      handleDateClick,
+    },
+  };
+};