@dotss/ui 1.0.2 → 1.0.3

package/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,1020 @@
+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;
+}