feat: button, calendar, datePicker, input, pagination, icons 추가

2026-04-09 11:02:18 +09:00
parent 6da730f014
commit 34d5a56a80
19 changed files with 1048 additions and 27 deletions
--- a/web-app/app/shared/components/calendar/RangeCalendar.tsx
+++ b/web-app/app/shared/components/calendar/RangeCalendar.tsx
@@ -0,0 +1,195 @@
+import {
+  RangeCalendar as AriaRangeCalendar,
+  CalendarCell,
+  CalendarGrid,
+  CalendarGridBody,
+  type DateValue,
+} from 'react-aria-components';
+
+import { getLocalTimeZone, today } from '@internationalized/date';
+import { tv } from 'tailwind-variants';
+
+import { CalendarGridHeader, CalendarHeader } from './Calendar';
+import { calendarDateToDate, dateToCalendarDate } from './utils';
+
+const rangeCell = tv({
+  base: 'flex h-full w-full items-center justify-center rounded-full text-xs',
+  variants: {
+    selectionState: {
+      none: '',
+      middle: '',
+      cap: 'bg-primary font-bold text-white',
+    },
+    isDisabled: {
+      true: 'text-kc-gray-be',
+    },
+    isOutsideMonth: {
+      true: 'text-kc-gray-be',
+    },
+    isSunday: {
+      true: 'text-[#e48686]',
+    },
+    isSaturday: {
+      true: 'text-[#7b8cc8]',
+    },
+    isToday: {
+      true: 'font-bold text-primary',
+    },
+    isHovered: {
+      true: '',
+    },
+    isFocusVisible: {
+      true: 'ring-2 ring-offset-2 ring-primary',
+    },
+  },
+  compoundVariants: [
+    {
+      selectionState: 'cap',
+      isSunday: true,
+      className: 'text-white',
+    },
+    {
+      selectionState: 'cap',
+      isSaturday: true,
+      className: 'text-white',
+    },
+    {
+      selectionState: 'cap',
+      isToday: true,
+      className: 'text-white',
+    },
+    {
+      selectionState: 'none',
+      isHovered: true,
+      className: 'bg-primary-tertiary01 rounded-full',
+    },
+    {
+      selectionState: 'middle',
+      isHovered: true,
+      className: 'bg-primary-tertiary01',
+    },
+  ],
+});
+
+export interface RangeCalendarProps {
+  value?: { start: Date; end: Date } | null;
+  defaultValue?: { start: Date; end: Date } | null;
+  onChange?: (value: { start: Date; end: Date } | null) => void;
+  maxValue?: Date | null;
+  minValue?: Date | null;
+  isDisabled?: boolean;
+  className?: string;
+}
+
+export function RangeCalendar({
+  value,
+  defaultValue,
+  onChange,
+  maxValue,
+  minValue,
+  isDisabled,
+  className,
+}: RangeCalendarProps) {
+  const todayDate = today(getLocalTimeZone());
+
+  const ariaValue =
+    value !== undefined
+      ? value
+        ? { start: dateToCalendarDate(value.start)!, end: dateToCalendarDate(value.end)! }
+        : null
+      : undefined;
+
+  const ariaDefaultValue =
+    defaultValue !== undefined
+      ? defaultValue
+        ? { start: dateToCalendarDate(defaultValue.start)!, end: dateToCalendarDate(defaultValue.end)! }
+        : null
+      : undefined;
+
+  return (
+    <AriaRangeCalendar<DateValue>
+      aria-label="날짜 범위 선택"
+      value={ariaValue}
+      defaultValue={ariaDefaultValue}
+      onChange={(range) => {
+        if (!range) {
+          onChange?.(null);
+        } else {
+          onChange?.({
+            start: calendarDateToDate(range.start)!,
+            end: calendarDateToDate(range.end)!,
+          });
+        }
+      }}
+      maxValue={maxValue !== undefined ? dateToCalendarDate(maxValue) : undefined}
+      minValue={minValue !== undefined ? dateToCalendarDate(minValue) : undefined}
+      isDisabled={isDisabled}
+      firstDayOfWeek="sun"
+      className={className}
+    >
+      <CalendarHeader />
+      <CalendarGrid className="border-spacing-0 [&_td]:px-0 [&_td]:py-px">
+        <CalendarGridHeader />
+        <CalendarGridBody>
+          {(date) => {
+            const dayOfWeek = date.toDate('UTC').getDay();
+            const isSunday = dayOfWeek === 0;
+            const isSaturday = dayOfWeek === 6;
+            const isToday = date.compare(todayDate) === 0;
+
+            return (
+              <CalendarCell
+                date={date}
+                className={({ isSelected, isSelectionStart, isSelectionEnd }) => {
+                  const classes = ['group h-[30px] w-[30px] cursor-default text-sm outline-none'];
+                  if (isSelected) {
+                    classes.push('bg-primary/10');
+                    if (isSelectionStart) classes.push('rounded-s-full');
+                    if (isSelectionEnd) classes.push('rounded-e-full');
+                  }
+                  return classes.join(' ');
+                }}
+              >
+                {({
+                  formattedDate,
+                  isSelected,
+                  isSelectionStart,
+                  isSelectionEnd,
+                  isDisabled: isCellDisabled,
+                  isOutsideMonth,
+                  isHovered,
+                  isFocusVisible,
+                }) => {
+                  const selectionState =
+                    isSelected && (isSelectionStart || isSelectionEnd)
+                      ? ('cap' as const)
+                      : isSelected
+                        ? ('middle' as const)
+                        : ('none' as const);
+                  const showDayColor = selectionState !== 'cap' && !isCellDisabled && !isOutsideMonth;
+
+                  return (
+                    <span
+                      className={rangeCell({
+                        selectionState,
+                        isDisabled: isCellDisabled,
+                        isOutsideMonth,
+                        isSunday: showDayColor ? isSunday : false,
+                        isSaturday: showDayColor ? isSaturday : false,
+                        isToday: selectionState !== 'cap' ? isToday : false,
+                        isHovered: !isSelected ? isHovered : false,
+                        isFocusVisible,
+                      })}
+                    >
+                      {formattedDate}
+                    </span>
+                  );
+                }}
+              </CalendarCell>
+            );
+          }}
+        </CalendarGridBody>
+      </CalendarGrid>
+    </AriaRangeCalendar>
+  );
+}