@dotss/ui 1.0.3 → 1.0.4

package/components/DatePicker/DatePicker.tsx

@@ -1,1020 +0,0 @@
-import type {
-  HTMLAttributes,
-  KeyboardEvent,
-  MouseEvent,
-  ReactNode,
-  SyntheticEvent,
-  TouchEvent
-} from 'react';
-import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-import Flexbox from '@components/Flexbox';
-import Icon from '@components/Icon/Icon';
-import IconButton from '@components/IconButton';
-import Menu from '@components/Menu';
-import MenuBlock from '@components/Menu/MenuBlock';
-import MenuButton from '@components/Menu/MenuButton';
-import useTheme from '@core/useTheme';
-import type { GeneralComponentProps } from '@typings/component';
-
-import {
-  DateChanger,
-  Day,
-  EmptyEvent,
-  StyledDatePicker,
-  Title,
-  TitleBox,
-  WeekBody,
-  WeekContainer,
-  WeekHead,
-  WeekPanel,
-  WeekRow
-} from './DatePicker.styles';
-
-export type DateValue = string | number | Date | null;
-
-export type DatePickerValue = DateValue[] | DateValue;
-
-export type DateFormatter<T> = typeof formatDate<T>;
-
-export interface DatePickerProps
-  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
-  onChange?: (date: string | string[], dateFormatter: DateFormatter<string>) => void;
-  onChangeMonth?: (date: string, dateFormatter: DateFormatter<string>) => void;
-  value?: DatePickerValue;
-  date?: DateValue;
-  minDate?: DateValue;
-  maxDate?: DateValue;
-  holidayDates?: DatePickerValue;
-  disableDates?: DatePickerValue;
-  showWeekHead?: boolean;
-  multiple?: boolean;
-  period?: boolean;
-  enableMonthSelect?: boolean;
-  showToday?: boolean;
-  edgeSpacing?: number;
-  renderEvent?: (date: string) => ReactNode;
-  monthProps?: HTMLAttributes<HTMLElement>;
-}
-
-const WEEK_ROW_HEIGHT = 30;
-const SWIPE_THRESHOLD = 5;
-
-const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(function DatePicker(
-  {
-    children,
-    onChange,
-    onChangeMonth,
-    value,
-    date,
-    minDate,
-    maxDate,
-    holidayDates,
-    disableDates,
-    showWeekHead = false,
-    multiple = false,
-    period = false,
-    enableMonthSelect = false,
-    showToday = false,
-    edgeSpacing = 0,
-    renderEvent,
-    inlineCSS,
-    monthProps,
-    ...props
-  },
-  ref
-) {
-  const { spacing } = useTheme();
-
-  const [currentDate, setCurrentDate] = useState(
-    (typeof date === 'string' || typeof date === 'number' ? new Date(date) : date) || new Date()
-  );
-  const [startDate, setStartDate] = useState<DateValue | null>(() => {
-    if (Array.isArray(value) && value.length > 0) {
-      return formatDate(value[0]);
-    }
-    return formatDate(value);
-  });
-  const [endDate, setEndDate] = useState<DateValue | null>(() => {
-    if (Array.isArray(value) && value.length > 1) {
-      return formatDate(value[value.length - 1]);
-    }
-    return null;
-  });
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [currentIndex, setCurrentIndex] = useState(1);
-  const [isOnWeekPanelTransformInitTimer, setIsOnWeekPanelTransformInitTimer] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const weekContainerRef = useRef<HTMLDivElement>(null);
-  const weekPanelRef = useRef<HTMLDivElement>(null);
-  const startXRef = useRef(0);
-  const startYRef = useRef(0);
-  const currentXRef = useRef(0);
-  const isSwipingRef = useRef(false);
-  const prevCurrentIndexRef = useRef(currentIndex);
-  const weekPanelTransformInitTimerRef = useRef<ReturnType<typeof setTimeout>>();
-  const titleBoxRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const currentYear = currentDate.getFullYear();
-  const currentMonth = currentDate.getMonth();
-  const currentWeeks = initMonthDays(currentYear, currentMonth);
-  const currentDisplayMonth = getDisplayMonth(currentMonth);
-  const currentSelectedDates = formatDate<string | string[]>(value);
-  const currentHolidayDates = formatDate<string | string[]>(holidayDates);
-  const currentDisableDates = formatDate<string | string[]>(disableDates);
-  const isDisabledPrevButton = isBefore(currentDate, minDate) || isSameMonth(currentDate, minDate);
-  const isDisabledNextButton = isAfter(currentDate, maxDate) || isSameMonth(currentDate, maxDate);
-  const prevDate = new Date(currentYear, currentMonth - 1);
-  const nextDate = new Date(currentYear, currentMonth + 1);
-  const title = `${currentYear}. ${currentDisplayMonth}`;
-  const titleForAria = `${currentYear}년 ${currentDisplayMonth}월`;
-  const activePeriodMode = period && !!startDate && !!endDate;
-
-  const weekPanelDates = [
-    {
-      year: prevDate.getFullYear(),
-      month: getDisplayMonth(prevDate.getMonth()),
-      weeks: initMonthDays(prevDate.getFullYear(), prevDate.getMonth())
-    },
-    {
-      year: currentYear,
-      month: currentDisplayMonth,
-      weeks: currentWeeks
-    },
-    {
-      year: nextDate.getFullYear(),
-      month: getDisplayMonth(nextDate.getMonth()),
-      weeks: initMonthDays(nextDate.getFullYear(), nextDate.getMonth())
-    }
-  ];
-
-  const hasRenderEvent = typeof renderEvent === 'function';
-  // TODO: 추후 동적으로 계산하도록 개선
-  const maxHeight =
-    weekPanelDates[1].weeks.length *
-      (WEEK_ROW_HEIGHT + (hasRenderEvent ? 10 : 0) + spacing.content(2)) +
-    spacing.content(2);
-
-  const startSwipe = (clientX: number, clientY: number) => () => {
-    if (weekPanelRef.current) {
-      weekPanelRef.current.style.transition = 'none';
-      weekPanelRef.current.style.cursor = 'grabbing';
-    }
-
-    startXRef.current = clientX;
-    startYRef.current = clientY;
-  };
-
-  const endSwipe = useCallback(() => {
-    if (!isSwipingRef.current) return;
-
-    const endClientX = containerWidth - currentXRef.current;
-    const diff = Math.abs(containerWidth - endClientX);
-    const limitDiff = containerWidth * 0.1;
-
-    if (weekPanelRef.current) {
-      weekPanelRef.current.style.transform = `translate3d(-${containerWidth * currentIndex}px, 0, 0)`;
-      weekPanelRef.current.style.cursor = 'grab';
-      weekPanelRef.current.style.transition = 'transform 0.2s';
-    }
-
-    startXRef.current = 0;
-    currentXRef.current = 0;
-    isSwipingRef.current = false;
-
-    if (diff <= limitDiff) {
-      return;
-    }
-
-    if (containerWidth < endClientX) {
-      setCurrentIndex((prevState) => prevState + 1);
-    } else if (containerWidth > endClientX) {
-      setCurrentIndex((prevState) => prevState - 1);
-    }
-  }, [containerWidth, currentIndex]);
-
-  const handleClick = (newDate: string, isDisabled: boolean) => () => {
-    if (isSwipingRef.current || currentIndex !== 1) return;
-    if (isDisabled) return;
-
-    if (!period) {
-      onChange?.(newDate, formatDate);
-      return;
-    }
-
-    if (isSame(newDate, startDate) && Array.isArray(value) && value.length === 1) {
-      setStartDate(null);
-      setEndDate(null);
-      onChange?.([], formatDate);
-      return;
-    } else if (isSame(newDate, startDate) && !Array.isArray(value) && isSame(newDate, value)) {
-      setStartDate(null);
-      setEndDate(null);
-      onChange?.([], formatDate);
-      return;
-    }
-
-    if (!startDate) {
-      setStartDate(newDate);
-      onChange?.(newDate, formatDate);
-      return;
-    }
-
-    if (!endDate && startDate) {
-      const [newStartDate, newEndDate] = isAfter(newDate, startDate)
-        ? [startDate, newDate]
-        : [newDate, startDate];
-
-      setStartDate(newStartDate);
-      setEndDate(newEndDate);
-
-      const datesInRange = getDatesInRange([newStartDate, newEndDate], disableDates);
-      onChange?.(datesInRange, formatDate);
-      return;
-    }
-
-    if (startDate && endDate) {
-      setStartDate(newDate);
-      setEndDate(null);
-      onChange?.(newDate, formatDate);
-    }
-  };
-
-  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
-    if (!multiple) return;
-
-    isSwipingRef.current = true;
-    startSwipe(e.clientX, e.clientY)();
-  };
-
-  const handleTouchStart = (e: TouchEvent<HTMLDivElement>) => {
-    if (!multiple) return;
-
-    startSwipe(e.touches[0].clientX, e.touches[0].clientY)();
-  };
-
-  const handleClickPrev = () => {
-    if (isOnWeekPanelTransformInitTimer) return;
-
-    if (weekPanelRef.current) {
-      weekPanelRef.current.style.transition = 'transform 0.2s';
-    }
-
-    setCurrentIndex((prevState) => prevState - 1);
-  };
-
-  const handleClickNext = () => {
-    if (isOnWeekPanelTransformInitTimer) return;
-
-    if (weekPanelRef.current) {
-      weekPanelRef.current.style.transition = 'transform 0.2s';
-    }
-
-    setCurrentIndex((prevState) => prevState + 1);
-  };
-
-  const handleOpen = (e: SyntheticEvent) => {
-    e.stopPropagation();
-    setIsOpen((prevState) => !prevState);
-  };
-
-  const handleClose = () => setIsOpen(false);
-
-  const handleChangeMonth = (value?: string | number) => {
-    if (!value) return;
-
-    const [year, month] = value.toString().split('.').map(Number);
-
-    setCurrentDate(new Date(year, month - 1));
-
-    if (onChangeMonth && typeof onChangeMonth === 'function') {
-      onChangeMonth(formatDate<string>(new Date(year, month - 1)), formatDate);
-    }
-
-    setIsOpen(false);
-  };
-
-  const handleKeyDownDay =
-    (date: string, isDisabled: boolean) => (e: KeyboardEvent<HTMLDivElement>) => {
-      const currentDate = new Date(date);
-      let targetDate: Date | null = null;
-      e.stopPropagation();
-
-      if (e.key === 'ArrowRight') {
-        targetDate = new Date(currentDate);
-        targetDate.setDate(currentDate.getDate() + 1);
-      } else if (e.key === 'ArrowLeft') {
-        targetDate = new Date(currentDate);
-        targetDate.setDate(currentDate.getDate() - 1);
-      } else if (e.key === 'ArrowDown') {
-        targetDate = new Date(currentDate);
-        targetDate.setDate(currentDate.getDate() + 7);
-      } else if (e.key === 'ArrowUp') {
-        targetDate = new Date(currentDate);
-        targetDate.setDate(currentDate.getDate() - 7);
-      } else if (e.key === 'Home') {
-        targetDate = new Date(currentDate);
-        targetDate.setDate(currentDate.getDate() - currentDate.getDay());
-      } else if (e.key === 'End') {
-        targetDate = new Date(currentDate);
-        targetDate.setDate(currentDate.getDate() + (6 - currentDate.getDay()));
-      } else if (e.key === 'PageUp') {
-        targetDate = new Date(currentDate);
-        targetDate.setMonth(currentDate.getMonth() - 1);
-      } else if (e.key === 'PageDown') {
-        targetDate = new Date(currentDate);
-        targetDate.setMonth(currentDate.getMonth() + 1);
-      } else if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        handleClick(date, isDisabled)();
-        return;
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onChange?.([], formatDate);
-        return;
-      }
-
-      if (targetDate && weekContainerRef.current) {
-        const currentMonth = currentDate.getMonth();
-        const currentYear = currentDate.getFullYear();
-        const targetMonth = targetDate.getMonth();
-        const targetYear = targetDate.getFullYear();
-        const targetDateString = formatDate<string>(targetDate);
-        const targetElement = weekContainerRef.current.querySelector<HTMLElement>(
-          `[data-date="${targetDateString}"]`
-        );
-
-        if (targetElement) {
-          if (currentMonth !== targetMonth || currentYear !== targetYear) {
-            if (targetDate > currentDate) {
-              handleClickNext();
-              setTimeout(() => {
-                targetElement.focus();
-              }, 0);
-            } else {
-              handleClickPrev();
-              setTimeout(() => {
-                targetElement.focus();
-              }, 0);
-            }
-            return;
-          }
-          targetElement.focus();
-        }
-      }
-    };
-
-  useLayoutEffect(() => {
-    setContainerWidth(weekContainerRef.current?.clientWidth || 0);
-  }, [multiple]);
-
-  useEffect(() => {
-    const handleResizeAndScroll = () => {
-      setContainerWidth(weekContainerRef.current?.clientWidth || 0);
-    };
-
-    window.addEventListener('resize', handleResizeAndScroll);
-    window.addEventListener('scroll', handleResizeAndScroll);
-
-    return () => {
-      window.removeEventListener('resize', handleResizeAndScroll);
-      window.removeEventListener('scroll', handleResizeAndScroll);
-    };
-  }, [multiple]);
-
-  useEffect(() => {
-    const weekPanelElement = weekPanelRef.current;
-
-    const moveSwipe = (
-      clientX: number,
-      clientY: number,
-      e: globalThis.TouchEvent | globalThis.MouseEvent
-    ) => {
-      if (!weekPanelElement) return;
-
-      currentXRef.current = clientX - startXRef.current;
-      const movedTouchClientY = clientY - startYRef.current;
-
-      isSwipingRef.current =
-        isSwipingRef.current ||
-        (Math.abs(currentXRef.current) > SWIPE_THRESHOLD &&
-          Math.abs(movedTouchClientY) < SWIPE_THRESHOLD * 2);
-
-      if (isSwipingRef.current && e.cancelable) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-
-      if (isSwipingRef.current) {
-        if (isDisabledPrevButton && currentXRef.current > 0) {
-          endSwipe();
-          return;
-        }
-
-        if (isDisabledNextButton && currentXRef.current < 0) {
-          endSwipe();
-          return;
-        }
-
-        if (Math.abs(currentXRef.current) >= 10) {
-          weekPanelElement.style.transform = `translate3d(${currentXRef.current - containerWidth * currentIndex}px, 0, 0)`;
-          weekPanelElement.style.cursor = 'grabbing';
-        }
-      }
-    };
-
-    const handleTouchMove = (e: globalThis.TouchEvent) =>
-      moveSwipe(e.touches[0].clientX, e.touches[0].clientY, e);
-
-    const handleMouseMove = (e: globalThis.MouseEvent) => {
-      if (!isSwipingRef.current) return;
-      moveSwipe(e.clientX, e.clientY, e);
-    };
-
-    weekPanelElement?.addEventListener('mousemove', handleMouseMove);
-    weekPanelElement?.addEventListener('touchmove', handleTouchMove);
-
-    return () => {
-      weekPanelElement?.removeEventListener('mousemove', handleMouseMove);
-      weekPanelElement?.removeEventListener('touchmove', handleTouchMove);
-    };
-  }, [containerWidth, currentIndex, endSwipe, isDisabledNextButton, isDisabledPrevButton]);
-
-  useEffect(() => {
-    setIsOnWeekPanelTransformInitTimer(true);
-
-    weekPanelTransformInitTimerRef.current = setTimeout(() => {
-      if (weekPanelRef.current) {
-        weekPanelRef.current.style.transition = 'none';
-      }
-
-      if (currentIndex > prevCurrentIndexRef.current) {
-        setCurrentIndex(1);
-        const newDate = new Date(currentDate.setMonth(currentDate.getMonth() + 1));
-        setCurrentDate(newDate);
-        if (onChangeMonth && typeof onChangeMonth === 'function') {
-          onChangeMonth(formatDate<string>(newDate), formatDate);
-        }
-        prevCurrentIndexRef.current = 1;
-      } else if (currentIndex < prevCurrentIndexRef.current) {
-        const newDate = new Date(currentDate.setMonth(currentDate.getMonth() - 1));
-        setCurrentDate(newDate);
-        if (onChangeMonth && typeof onChangeMonth === 'function') {
-          onChangeMonth(formatDate<string>(newDate), formatDate);
-        }
-        setCurrentIndex(1);
-        prevCurrentIndexRef.current = 1;
-      } else {
-        prevCurrentIndexRef.current = currentIndex;
-      }
-
-      setIsOnWeekPanelTransformInitTimer(false);
-    }, 200);
-  }, [currentIndex, currentDate, onChangeMonth]);
-
-  useLayoutEffect(() => {
-    if (!period || !Array.isArray(value)) return;
-
-    const datesInRange = getDatesInRange(value, disableDates);
-
-    if (value.length < datesInRange.length) {
-      onChange?.(datesInRange, formatDate);
-    }
-  }, [period, value, onChange, disableDates]);
-
-  useEffect(() => {
-    let timer: ReturnType<typeof setTimeout>;
-
-    if (isOpen) {
-      timer = setTimeout(() => {
-        if (menuRef.current) {
-          const menuListElement = menuRef.current.querySelector('ul');
-          const selectedElement = menuListElement?.querySelector(`[data-value="${title}"]`);
-
-          selectedElement?.scrollIntoView({
-            block: 'start'
-          });
-        }
-      }, 200);
-    }
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [isOpen, title]);
-
-  useEffect(() => {
-    return () => {
-      if (weekPanelTransformInitTimerRef.current) {
-        clearTimeout(weekPanelTransformInitTimerRef.current);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (date) {
-      setCurrentDate(
-        (typeof date === 'string' || typeof date === 'number' ? new Date(date) : date) || new Date()
-      );
-    }
-  }, [date]);
-
-  return (
-    <StyledDatePicker ref={ref} aria-label="달력" role="application" {...props} css={inlineCSS}>
-      {multiple ? (
-        <DateChanger>
-          <IconButton
-            name="ChevronLeftLine"
-            size="small"
-            onClick={handleClickPrev}
-            disabled={isDisabledPrevButton}
-            aria-label={`이전 달로 이동, 현재 ${titleForAria}`}
-          />
-          {enableMonthSelect && (
-            <TitleBox
-              ref={titleBoxRef}
-              clickable={true}
-              onClick={handleOpen}
-              aria-label={titleForAria}
-              {...monthProps}
-            >
-              {title}
-              <MenuButton
-                iconOnly
-                isMenuOpen={false}
-                size="xSmall"
-                variant="text"
-                menuId="date-picker-month-menu"
-                onClick={handleOpen}
-                aria-label={`달 변경, 현재 ${titleForAria}`}
-                startAdornment={<Icon name="ArrowDownFill" size="xSmall" />}
-              />
-            </TitleBox>
-          )}
-          {!enableMonthSelect && (
-            <TitleBox
-              ref={titleBoxRef}
-              id="date-picker-title"
-              clickable={false}
-              aria-label={titleForAria}
-              {...monthProps}
-            >
-              {title}
-            </TitleBox>
-          )}
-          <IconButton
-            name="ChevronRightLine"
-            size="small"
-            onClick={handleClickNext}
-            disabled={isDisabledNextButton}
-            aria-label={`다음 달로 이동, 현재 ${titleForAria}`}
-          />
-        </DateChanger>
-      ) : (
-        <>
-          {enableMonthSelect && (
-            <Title
-              ref={titleBoxRef}
-              clickable={true}
-              onClick={handleOpen}
-              aria-label={titleForAria}
-              {...monthProps}
-            >
-              {title}
-              <MenuButton
-                iconOnly
-                isMenuOpen={false}
-                size="xSmall"
-                variant="text"
-                menuId="date-picker-month-menu"
-                onClick={handleOpen}
-                aria-label={`달 변경, 현재 ${titleForAria}`}
-                startAdornment={<Icon name="ArrowDownFill" size="xSmall" />}
-              />
-            </Title>
-          )}
-          {!enableMonthSelect && (
-            <Title id="date-picker-title" clickable={false} {...monthProps}>
-              {title}
-            </Title>
-          )}
-        </>
-      )}
-      {enableMonthSelect && (
-        <Menu
-          id="date-picker-month-menu"
-          anchorRef={titleBoxRef}
-          ref={menuRef}
-          open={isOpen}
-          onClose={handleClose}
-          onChange={handleChangeMonth}
-          value={title}
-          placement={multiple ? 'bottom-center' : 'bottom-left'}
-          width={160}
-          fitToAnchorWidth={false}
-          maxHeight={368}
-        >
-          {Array.from({ length: 130 }, (_, index) => {
-            const year = 1970 + index;
-            return Array.from({ length: 12 }, (_, monthIndex) => {
-              const month = monthIndex + 1;
-              const formattedMonth = month < 10 ? `0${month}` : month;
-              const lastDay = new Date(year, monthIndex + 1, 0).getDate();
-              const minCompareDate = `${year}-${formattedMonth}-${lastDay}`;
-              const maxCompareDate = `${year}-${formattedMonth}-01`;
-
-              if (isBefore(minCompareDate, minDate) || isAfter(maxCompareDate, maxDate))
-                return null;
-
-              return (
-                <MenuBlock
-                  key={`${year}-${formattedMonth}`}
-                  value={`${year}. ${formattedMonth}`}
-                  aria-label={`${year}년 ${formattedMonth}월 선택`}
-                >
-                  {`${year}. ${formattedMonth}`}
-                </MenuBlock>
-              );
-            });
-          })}
-        </Menu>
-      )}
-      <Flexbox
-        flexDirection="column"
-        role="grid"
-        aria-label={`${currentYear}년 ${currentDisplayMonth}월 달력`}
-      >
-        {showWeekHead && (
-          <WeekHead id="date-picker-week-head" role="row" edgeSpacing={edgeSpacing}>
-            <span role="columnheader">일</span>
-            <span role="columnheader">월</span>
-            <span role="columnheader">화</span>
-            <span role="columnheader">수</span>
-            <span role="columnheader">목</span>
-            <span role="columnheader">금</span>
-            <span role="columnheader">토</span>
-          </WeekHead>
-        )}
-        <WeekContainer ref={weekContainerRef} role="presentation">
-          <WeekPanel
-            role="presentation"
-            ref={weekPanelRef}
-            onMouseDown={handleMouseDown}
-            onMouseUp={endSwipe}
-            onMouseLeave={endSwipe}
-            onTouchStart={handleTouchStart}
-            onTouchEnd={endSwipe}
-            onTouchCancel={endSwipe}
-            style={{
-              transform: multiple
-                ? `translate3d(-${containerWidth * currentIndex}px, 0, 0)`
-                : undefined,
-              cursor: multiple ? 'grab' : undefined,
-              maxHeight
-            }}
-          >
-            {multiple &&
-              weekPanelDates.map(
-                ({ year: weekPanelYear, month: weekPanelMonth, weeks }, weekPanelIndex) => (
-                  <WeekBody
-                    role="rowgroup"
-                    key={`week-body-${weekPanelYear}-${weekPanelMonth}`}
-                    edgeSpacing={edgeSpacing}
-                    className={weekPanelIndex === 1 ? 'week-body-current' : ''}
-                  >
-                    {weeks.map((week, weekIndex) => (
-                      <WeekRow
-                        role="row"
-                        key={`${weekPanelYear}-${weekPanelMonth}-week-row-${String(week)}`}
-                      >
-                        {week.map((day, dayIndex) => {
-                          const thisDate = `${weekPanelYear}-${weekPanelMonth}-${getDisplayDay(day || 0)}`;
-                          const isEmpty = !day;
-                          const isToday = isSame(thisDate, new Date());
-                          const isHoliday = Array.isArray(currentHolidayDates)
-                            ? currentHolidayDates.includes(thisDate)
-                            : currentHolidayDates === thisDate;
-                          const isSelected = Array.isArray(currentSelectedDates)
-                            ? currentSelectedDates.includes(thisDate)
-                            : currentSelectedDates === thisDate;
-                          const isDisabled =
-                            !day ||
-                            (Array.isArray(currentDisableDates)
-                              ? currentDisableDates.includes(thisDate)
-                              : currentDisableDates === thisDate) ||
-                            isAfter(thisDate, maxDate) ||
-                            isBefore(thisDate, minDate);
-                          const isStartDate = activePeriodMode && isSame(thisDate, startDate);
-                          const isEndDate = activePeriodMode && isSame(thisDate, endDate);
-                          const isInRange =
-                            activePeriodMode &&
-                            isAfter(thisDate, startDate) &&
-                            isBefore(thisDate, endDate);
-                          const isCurrentMonth = isSameMonth(thisDate, currentDate);
-                          const canFocus =
-                            (isCurrentMonth && weekIndex === 0 && day === 1) ||
-                            (isCurrentMonth && isSelected);
-                          const event = renderEvent?.(thisDate);
-
-                          return (
-                            <Day
-                              as="button"
-                              key={`${weekPanelYear}-${weekPanelMonth}-week-row-${dayIndex}-${day ? thisDate : `${weekIndex}-${dayIndex}`}`}
-                              role="gridcell"
-                              variant={
-                                isStartDate
-                                  ? 'start'
-                                  : isEndDate
-                                    ? 'end'
-                                    : isInRange
-                                      ? 'middle'
-                                      : undefined
-                              }
-                              onClick={handleClick(thisDate, isDisabled)}
-                              today={showToday && isToday}
-                              holiday={isHoliday}
-                              tabIndex={canFocus ? 0 : -1}
-                              aria-rowindex={weekIndex + 1}
-                              aria-colindex={dayIndex + 1}
-                              selected={isSelected}
-                              aria-selected={isSelected}
-                              aria-disabled={isDisabled}
-                              aria-hidden={day === null}
-                              data-date={thisDate}
-                              onKeyDown={handleKeyDownDay(thisDate, isDisabled)}
-                            >
-                              <div aria-label={`${formatDateForAria(thisDate)}`}>
-                                <span>{day}</span>
-                              </div>
-                              {!isEmpty && event}
-                              {!isEmpty && hasRenderEvent && !event && <EmptyEvent />}
-                            </Day>
-                          );
-                        })}
-                      </WeekRow>
-                    ))}
-                  </WeekBody>
-                )
-              )}
-            {!multiple && (
-              <WeekBody role="rowgroup" edgeSpacing={edgeSpacing}>
-                {currentWeeks.map((week, weekIndex) => (
-                  <WeekRow
-                    role="row"
-                    key={`${currentYear}-${currentDisplayMonth}-week-row-${String(week)}`}
-                  >
-                    {week.map((day, dayIndex) => {
-                      const thisDate = `${currentYear}-${currentDisplayMonth}-${getDisplayDay(day || 0)}`;
-                      const isEmpty = !day;
-                      const isToday = isSame(thisDate, new Date());
-                      const isHoliday = Array.isArray(currentHolidayDates)
-                        ? currentHolidayDates.includes(thisDate)
-                        : currentHolidayDates === thisDate;
-                      const isSelected = Array.isArray(currentSelectedDates)
-                        ? currentSelectedDates.includes(thisDate)
-                        : currentSelectedDates === thisDate;
-                      const isDisabled =
-                        !day ||
-                        (Array.isArray(currentDisableDates)
-                          ? currentDisableDates.includes(thisDate)
-                          : currentDisableDates === thisDate) ||
-                        isAfter(thisDate, maxDate) ||
-                        isBefore(thisDate, minDate);
-                      const isStartDate = activePeriodMode && isSame(thisDate, startDate);
-                      const isEndDate = activePeriodMode && isSame(thisDate, endDate);
-                      const isInRange =
-                        activePeriodMode &&
-                        isAfter(thisDate, startDate) &&
-                        isBefore(thisDate, endDate);
-                      const isCurrentMonth = isSameMonth(thisDate, currentDate);
-                      const canFocus =
-                        (isCurrentMonth && weekIndex === 0 && day === 1) ||
-                        (isCurrentMonth && isSelected);
-                      const event = renderEvent?.(thisDate);
-
-                      return (
-                        <Day
-                          as="button"
-                          key={`${currentYear}-${currentDisplayMonth}-week-row-${week}-${day ? thisDate : `${weekIndex}-${dayIndex}`}`}
-                          variant={
-                            isStartDate
-                              ? 'start'
-                              : isEndDate
-                                ? 'end'
-                                : isInRange
-                                  ? 'middle'
-                                  : undefined
-                          }
-                          role="gridcell"
-                          onClick={handleClick(thisDate, isDisabled)}
-                          today={showToday && isToday}
-                          holiday={isHoliday}
-                          aria-rowindex={weekIndex + 1}
-                          aria-colindex={dayIndex + 1}
-                          selected={isSelected}
-                          aria-selected={isSelected}
-                          aria-disabled={isDisabled}
-                          aria-hidden={day === null}
-                          tabIndex={canFocus ? 0 : -1}
-                          data-date={thisDate}
-                          onKeyDown={handleKeyDownDay(thisDate, isDisabled)}
-                        >
-                          <div aria-label={`${formatDateForAria(thisDate)}`}>
-                            <span>{day}</span>
-                          </div>
-                          {!isEmpty && event}
-                          {!isEmpty && hasRenderEvent && !event && <EmptyEvent />}
-                        </Day>
-                      );
-                    })}
-                  </WeekRow>
-                ))}
-              </WeekBody>
-            )}
-          </WeekPanel>
-        </WeekContainer>
-      </Flexbox>
-      {children}
-    </StyledDatePicker>
-  );
-});
-
-export default DatePicker;
-
-function initMonthDays(year: number, month: number) {
-  let result: (number | null)[][] = [];
-  const date = new Date(year, month, 1);
-  const daysInMonth = new Date(year, month + 1, 0).getDate();
-  const dayOfWeek = date.getDay();
-
-  let week = Array.from({ length: dayOfWeek }).fill(null) as (number | null)[];
-
-  for (let day = 1; day <= daysInMonth; day += 1) {
-    week.push(day);
-
-    if (week.length === 7 || day === daysInMonth) {
-      result.push(week);
-      week = [];
-    }
-  }
-
-  result = result.map((resultWeek) =>
-    Array.from({ length: 7 }).map((_, index) => resultWeek[index] || null)
-  );
-
-  return result;
-}
-
-function getDisplayMonth(month: number) {
-  return String(month + 1).length === 1 ? `0${month + 1}` : month + 1;
-}
-
-function getDisplayDay(day: number) {
-  return String(day).length === 1 ? `0${day}` : day;
-}
-
-function formatDate<T>(value?: DatePickerValue): T {
-  if (Array.isArray(value)) {
-    return value.map((d) => {
-      if (d instanceof Date) {
-        return `${d.getFullYear()}-${getDisplayMonth(d.getMonth())}-${getDisplayDay(d.getDate())}`;
-      }
-      return d;
-    }) as T;
-  }
-
-  if (value instanceof Date) {
-    return `${value.getFullYear()}-${getDisplayMonth(value.getMonth())}-${getDisplayDay(value.getDate())}` as T;
-  }
-
-  if (typeof value === 'number') {
-    const date = new Date(value);
-    return `${date.getFullYear()}-${getDisplayMonth(date.getMonth())}-${getDisplayDay(date.getDate())}` as T;
-  }
-
-  return value as T;
-}
-
-function formatDateForAria(date: string): string {
-  const [year, month, day] = date.split('-');
-  return `${year}년 ${Number(month)}월 ${Number(day)}일`;
-}
-
-function isAfter(a?: DateValue, b?: DateValue) {
-  if (!a || !b) {
-    return false;
-  }
-
-  const aDate = a instanceof Date ? a : new Date(a);
-  aDate.setHours(0);
-  aDate.setMinutes(0);
-  aDate.setSeconds(0);
-  aDate.setMilliseconds(0);
-  const aTime = aDate.getTime();
-  const bDate = b instanceof Date ? b : new Date(b);
-  bDate.setHours(0);
-  bDate.setMinutes(0);
-  bDate.setSeconds(0);
-  bDate.setMilliseconds(0);
-  const bTime = bDate.getTime();
-
-  return aTime > bTime;
-}
-
-function isBefore(a?: DateValue, b?: DateValue) {
-  if (!a || !b) {
-    return false;
-  }
-
-  const aDate = a instanceof Date ? a : new Date(a);
-  aDate.setHours(0);
-  aDate.setMinutes(0);
-  aDate.setSeconds(0);
-  aDate.setMilliseconds(0);
-  const aTime = aDate.getTime();
-  const bDate = b instanceof Date ? b : new Date(b);
-  bDate.setHours(0);
-  bDate.setMinutes(0);
-  bDate.setSeconds(0);
-  bDate.setMilliseconds(0);
-  const bTime = bDate.getTime();
-
-  return aTime < bTime;
-}
-
-function isSameMonth(a?: DateValue, b?: DateValue) {
-  if (!a || !b) {
-    return false;
-  }
-
-  const aDate = a instanceof Date ? a : new Date(a);
-  const bDate = b instanceof Date ? b : new Date(b);
-
-  return (
-    `${aDate.getFullYear()}-${aDate.getMonth()}` === `${bDate.getFullYear()}-${bDate.getMonth()}`
-  );
-}
-
-function isSame(a?: DateValue, b?: DateValue) {
-  if (!a || !b) {
-    return false;
-  }
-
-  const aDate = a instanceof Date ? a : new Date(a);
-  aDate.setHours(0);
-  aDate.setMinutes(0);
-  aDate.setSeconds(0);
-  aDate.setMilliseconds(0);
-  const aTime = aDate.getTime();
-  const bDate = b instanceof Date ? b : new Date(b);
-  bDate.setHours(0);
-  bDate.setMinutes(0);
-  bDate.setSeconds(0);
-  bDate.setMilliseconds(0);
-  const bTime = bDate.getTime();
-
-  return aTime === bTime;
-}
-
-function getDatesInRange(value?: DatePickerValue, disableDates?: DatePickerValue): string[] {
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    return [];
-  }
-
-  const dates = value.map((date) => {
-    if (date instanceof Date) {
-      return date;
-    }
-    if (date === null) {
-      return new Date();
-    }
-    return new Date(date);
-  });
-
-  const startDate = new Date(Math.min(...dates.map((date) => date.getTime())));
-  const endDate = new Date(Math.max(...dates.map((date) => date.getTime())));
-
-  const result: string[] = [];
-  const currentDate = new Date(startDate);
-
-  while (currentDate <= endDate) {
-    if (Array.isArray(disableDates) && disableDates.includes(currentDate)) {
-      currentDate.setDate(currentDate.getDate() + 1);
-      continue;
-    } else if (disableDates === currentDate) {
-      currentDate.setDate(currentDate.getDate() + 1);
-      continue;
-    }
-
-    result.push(
-      `${currentDate.getFullYear()}-${getDisplayMonth(currentDate.getMonth())}-${getDisplayDay(
-        currentDate.getDate()
-      )}`
-    );
-    currentDate.setDate(currentDate.getDate() + 1);
-  }
-
-  return result;
-}