@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,387 @@
+"use client";
+
+import * as RadixPopover from "@radix-ui/react-popover";
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+
+import { Input, type InputSize } from "../Input";
+import { Icon } from "../Icon";
+import { Button } from "../Button";
+import styles from "./DatePicker.module.css";
+import { Calendar } from "./Calendar";
+import { TimeSelector } from "./TimeSelector";
+import {
+  defaultRangePresets,
+  defaultSinglePresets,
+  type RangePreset,
+  type SinglePreset,
+} from "./presets";
+import {
+  combineDateTime,
+  formatDate,
+  formatHM,
+  startOfMonth,
+  type DateFormat,
+} from "./utils";
+
+export type DatePickerMode = "single" | "range";
+
+export interface DatePickerProps {
+  mode?: DatePickerMode;
+  /** 달력을 몇 개 나란히 보일지. range에서 2를 권장. */
+  months?: 1 | 2;
+
+  /** single 모드 값 */
+  value?: Date | null;
+  /** range 모드 값 */
+  rangeValue?: { from: Date | null; to: Date | null };
+
+  onChange?: (v: Date | null) => void;
+  onRangeChange?: (v: { from: Date | null; to: Date | null }) => void;
+
+  /** 시간 선택 포함 여부 */
+  withTime?: boolean;
+
+  /** 퀵 프리셋 표시 */
+  withPresets?: boolean;
+  /** 커스텀 프리셋 (mode에 맞춰 전달). 지정 시 기본 프리셋 대체 */
+  presets?: SinglePreset[] | RangePreset[];
+
+  /** 하단 액션 바 표시 (재설정 / 확인). withTime일 때 자동 true. */
+  withFooter?: boolean;
+  /** footer 재설정 클릭 — 값을 null로 초기화 */
+  onReset?: () => void;
+  /** footer 확인 클릭 — Popover 닫기 트리거. inline일 땐 무시. */
+  onConfirm?: () => void;
+  /** footer 재설정 버튼 라벨 (기본 "재설정") */
+  resetLabel?: string;
+  /** footer 확인 버튼 라벨 (기본 "확인") */
+  confirmLabel?: string;
+
+  minDate?: Date;
+  maxDate?: Date;
+  /** 주 시작 요일 (0=일 ... 6=토). 기본 0(일). */
+  weekStartsOn?: number;
+
+  /** 트리거 인풋 표시 형식.
+   *  - "short":  25-01-15
+   *  - "iso":    2025-01-15 (기본)
+   *  - "medium": 2025년 1월 15일
+   *  - "long":   2025년 1월 15일 (수) */
+  dateFormat?: DateFormat;
+
+  placeholder?: string;
+  disabled?: boolean;
+  size?: InputSize;
+  /** popover 없이 인라인으로 노출. 트리거 input이 사라짐. */
+  inline?: boolean;
+  /** 인풋 커스텀 렌더링. asChild 형태로 rendered element를 감쌈. */
+  trigger?: ReactNode;
+
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+}
+
+function displayValue(props: {
+  mode: DatePickerMode;
+  value: Date | null;
+  from: Date | null;
+  to: Date | null;
+  withTime: boolean;
+  dateFormat: DateFormat;
+}): string {
+  const { mode, value, from, to, withTime, dateFormat } = props;
+  const fmt = (d: Date) =>
+    withTime ? `${formatDate(d, dateFormat)} ${formatHM(d)}` : formatDate(d, dateFormat);
+  if (mode === "single") {
+    if (!value) return "";
+    return fmt(value);
+  }
+  const f = from ? fmt(from) : "";
+  const t = to ? fmt(to) : "";
+  if (!f && !t) return "";
+  return `${f} ~ ${t}`;
+}
+
+export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
+  (
+    {
+      mode = "single",
+      months = mode === "range" ? 2 : 1,
+      value = null,
+      rangeValue = { from: null, to: null },
+      onChange,
+      onRangeChange,
+      withTime = false,
+      withPresets = false,
+      presets,
+      withFooter,
+      onReset,
+      onConfirm,
+      resetLabel = "재설정",
+      confirmLabel = "확인",
+      minDate,
+      maxDate,
+      weekStartsOn = 0,
+      dateFormat = "iso",
+      placeholder = "날짜 선택",
+      disabled = false,
+      size = "md",
+      inline = false,
+      trigger,
+      className,
+      id,
+      "aria-label": ariaLabel,
+    },
+    ref
+  ) => {
+    const [open, setOpen] = useState(false);
+    const anchorDate = value ?? rangeValue.from ?? new Date();
+    const [viewMonth, setViewMonth] = useState<Date>(startOfMonth(anchorDate));
+    const [hoverDate, setHoverDate] = useState<Date | null>(null);
+    const [rangeInProgress, setRangeInProgress] = useState(false);
+
+    const activePresets = useMemo(() => {
+      if (presets) return presets;
+      return mode === "single" ? defaultSinglePresets : defaultRangePresets;
+    }, [presets, mode]);
+
+    const handleSelectDay = useCallback(
+      (day: Date) => {
+        if (mode === "single") {
+          const next = withTime && value
+            ? combineDateTime(day, value.getHours(), value.getMinutes())
+            : day;
+          onChange?.(next);
+          if (!withTime && !(withFooter ?? withTime)) setOpen(false);
+          return;
+        }
+
+        // range
+        const { from, to } = rangeValue;
+        const firstPick = !from || (from && to) || rangeInProgress === false;
+        if (firstPick) {
+          const nextFrom = withTime && from
+            ? combineDateTime(day, from.getHours(), from.getMinutes())
+            : day;
+          onRangeChange?.({ from: nextFrom, to: null });
+          setRangeInProgress(true);
+          setHoverDate(day);
+          return;
+        }
+        // second pick
+        let start = from!;
+        let end = day;
+        if (end.getTime() < start.getTime()) [start, end] = [end, start];
+        if (withTime) {
+          if (from) start = combineDateTime(start, from.getHours(), from.getMinutes());
+          if (to) end = combineDateTime(end, to.getHours(), to.getMinutes());
+        }
+        onRangeChange?.({ from: start, to: end });
+        setRangeInProgress(false);
+        setHoverDate(null);
+        if (!withTime && !(withFooter ?? withTime)) setOpen(false);
+      },
+      [mode, value, rangeValue, withTime, withFooter, onChange, onRangeChange, rangeInProgress]
+    );
+
+    const handleTimeChange = useCallback(
+      (which: "single" | "from" | "to", t: { hours: number; minutes: number }) => {
+        if (which === "single") {
+          const base = value ?? new Date();
+          onChange?.(combineDateTime(base, t.hours, t.minutes));
+          return;
+        }
+        const { from, to } = rangeValue;
+        if (which === "from") {
+          const base = from ?? new Date();
+          onRangeChange?.({ from: combineDateTime(base, t.hours, t.minutes), to });
+        } else {
+          const base = to ?? from ?? new Date();
+          onRangeChange?.({ from, to: combineDateTime(base, t.hours, t.minutes) });
+        }
+      },
+      [value, rangeValue, onChange, onRangeChange]
+    );
+
+    const applyPreset = useCallback(
+      (preset: SinglePreset | RangePreset) => {
+        if (mode === "single") {
+          const d = (preset as SinglePreset).getValue();
+          onChange?.(d);
+          setViewMonth(startOfMonth(d));
+          if (!withTime && !(withFooter ?? withTime)) setOpen(false);
+        } else {
+          const { from, to } = (preset as RangePreset).getValue();
+          onRangeChange?.({ from, to });
+          setViewMonth(startOfMonth(from));
+          setRangeInProgress(false);
+          if (!withTime && !(withFooter ?? withTime)) setOpen(false);
+        }
+      },
+      [mode, withTime, withFooter, onChange, onRangeChange]
+    );
+
+    const display = displayValue({
+      mode,
+      value,
+      from: rangeValue.from,
+      to: rangeValue.to,
+      withTime,
+      dateFormat,
+    });
+
+    const showFooter = withFooter ?? withTime;
+
+    const handleReset = () => {
+      if (mode === "single") onChange?.(null);
+      else onRangeChange?.({ from: null, to: null });
+      setRangeInProgress(false);
+      onReset?.();
+    };
+
+    const handleConfirm = () => {
+      onConfirm?.();
+      if (!inline) setOpen(false);
+    };
+
+    const panel = (
+      <div className={styles.panel} data-with-presets={withPresets || undefined}>
+        {withPresets && (
+          <div className={styles.presets} role="listbox" aria-label="빠른 선택">
+            {activePresets.map((p) => (
+              <Button
+                key={p.label}
+                size="sm"
+                variant="outline"
+                className={styles.presetChip}
+                onClick={() => applyPreset(p)}
+              >
+                {p.label}
+              </Button>
+            ))}
+          </div>
+        )}
+
+        <div className={styles.panelMain} data-with-time={withTime || undefined}>
+          <Calendar
+            mode={mode}
+            months={months}
+            viewMonth={viewMonth}
+            onViewMonthChange={setViewMonth}
+            selectedFrom={mode === "single" ? value : rangeValue.from}
+            selectedTo={mode === "single" ? null : rangeValue.to}
+            hoverDate={hoverDate}
+            onHoverDate={setHoverDate}
+            rangeInProgress={rangeInProgress}
+            onSelectDay={handleSelectDay}
+            minDate={minDate}
+            maxDate={maxDate}
+            weekStartsOn={weekStartsOn}
+          />
+
+          {withTime && (
+            <div className={styles.timeArea} data-mode={mode}>
+              {mode === "single" ? (
+                <TimeSelector
+                  value={
+                    value
+                      ? { hours: value.getHours(), minutes: value.getMinutes() }
+                      : null
+                  }
+                  onChange={(t) => handleTimeChange("single", t)}
+                />
+              ) : (
+                <>
+                  <TimeSelector
+                    label="시작 시간"
+                    value={
+                      rangeValue.from
+                        ? { hours: rangeValue.from.getHours(), minutes: rangeValue.from.getMinutes() }
+                        : null
+                    }
+                    onChange={(t) => handleTimeChange("from", t)}
+                  />
+                  <TimeSelector
+                    label="종료 시간"
+                    value={
+                      rangeValue.to
+                        ? { hours: rangeValue.to.getHours(), minutes: rangeValue.to.getMinutes() }
+                        : null
+                    }
+                    onChange={(t) => handleTimeChange("to", t)}
+                  />
+                </>
+              )}
+            </div>
+          )}
+        </div>
+
+        {showFooter && (
+          <div className={styles.footer}>
+            <Button variant="ghost" size="sm" onClick={handleReset}>
+              {resetLabel}
+            </Button>
+            <Button variant="primary" size="sm" onClick={handleConfirm}>
+              {confirmLabel}
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+
+    if (inline) {
+      return (
+        <div className={[styles.inlineWrap, className ?? ""].filter(Boolean).join(" ")} id={id}>
+          {panel}
+        </div>
+      );
+    }
+
+    const calendarIcon = <Icon name="calendar-blank" />;
+
+    return (
+      <RadixPopover.Root open={open} onOpenChange={setOpen}>
+        <RadixPopover.Trigger asChild>
+          {trigger ?? (
+            <Input
+              ref={ref}
+              id={id}
+              size={size}
+              disabled={disabled}
+              value={display}
+              placeholder={placeholder}
+              rightIcon={calendarIcon}
+              className={[styles.triggerInput, className ?? ""].filter(Boolean).join(" ")}
+              aria-label={ariaLabel ?? placeholder}
+              aria-haspopup="dialog"
+              role="combobox"
+              aria-expanded={open}
+              style={{ cursor: "pointer" }}
+            />
+          )}
+        </RadixPopover.Trigger>
+        <RadixPopover.Portal>
+          <RadixPopover.Content
+            className={[styles.popoverContent, "m-float"].join(" ")}
+            sideOffset={6}
+            align="start"
+            collisionPadding={8}
+          >
+            {panel}
+          </RadixPopover.Content>
+        </RadixPopover.Portal>
+      </RadixPopover.Root>
+    );
+  }
+);
+
+DatePicker.displayName = "DatePicker";
+
+export type { SinglePreset, RangePreset };

package/assets/components/DatePicker/TimeSelector.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useMemo } from "react";
+import { MenuItem } from "../MenuItem";
+import styles from "./DatePicker.module.css";
+
+function formatHM12(h: number, m: number): string {
+  const suffix = h < 12 ? "AM" : "PM";
+  const hour12 = h % 12 === 0 ? 12 : h % 12;
+  return `${hour12}:${String(m).padStart(2, "0")} ${suffix}`;
+}
+
+export interface TimeSelectorProps {
+  /** null이면 시간이 아직 미설정. */
+  value: { hours: number; minutes: number } | null;
+  onChange: (v: { hours: number; minutes: number }) => void;
+  /** 표시 시작 시(포함). 기본 0 */
+  startHour?: number;
+  /** 표시 종료 시(제외). 기본 24 */
+  endHour?: number;
+  /** 라벨 (from/to 구분 등) */
+  label?: string;
+}
+
+export function TimeSelector({
+  value,
+  onChange,
+  startHour = 0,
+  endHour = 24,
+  label,
+}: TimeSelectorProps) {
+  const slots = useMemo(() => {
+    const list: { h: number; m: number }[] = [];
+    for (let h = startHour; h < endHour; h += 1) {
+      list.push({ h, m: 0 });
+      list.push({ h, m: 30 });
+    }
+    return list;
+  }, [startHour, endHour]);
+
+  return (
+    <div className={styles.timeSection}>
+      {label && <div className={styles.timeLabel}>{label}</div>}
+      <div
+        className={`${styles.timeList} scroll-fade-y`}
+        role="listbox"
+        aria-label="시간 선택"
+      >
+        <div className={styles.timeListTrack}>
+          {slots.map(({ h, m }) => {
+            const active = !!(value && value.hours === h && value.minutes === m);
+            return (
+              <MenuItem
+                key={`${h}-${m}`}
+                size="sm"
+                active={active}
+                role="option"
+                aria-selected={active}
+                onClick={() => onChange({ hours: h, minutes: m })}
+              >
+                {formatHM12(h, m)}
+              </MenuItem>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/assets/components/DatePicker/index.ts

@@ -0,0 +1,8 @@
+export { DatePicker } from "./DatePicker";
+export type {
+  DatePickerProps,
+  DatePickerMode,
+  SinglePreset,
+  RangePreset,
+} from "./DatePicker";
+export { defaultSinglePresets, defaultRangePresets } from "./presets";

package/assets/components/DatePicker/presets.ts

@@ -0,0 +1,80 @@
+import { addDays, startOfDay, endOfDay } from "./utils";
+
+export interface SinglePreset {
+  label: string;
+  getValue: () => Date;
+}
+
+export interface RangePreset {
+  label: string;
+  getValue: () => { from: Date; to: Date };
+}
+
+/** 요일 index: 0=일 ... 6=토 */
+function nextWeekday(from: Date, weekday: number): Date {
+  const d = startOfDay(from);
+  const diff = (weekday - d.getDay() + 7) % 7 || 7;
+  return addDays(d, diff);
+}
+
+export const defaultSinglePresets: SinglePreset[] = [
+  { label: "오늘", getValue: () => startOfDay(new Date()) },
+  { label: "내일", getValue: () => addDays(startOfDay(new Date()), 1) },
+  { label: "다음 월요일", getValue: () => nextWeekday(new Date(), 1) },
+];
+
+export const defaultRangePresets: RangePreset[] = [
+  {
+    label: "오늘",
+    getValue: () => {
+      const now = new Date();
+      return { from: startOfDay(now), to: endOfDay(now) };
+    },
+  },
+  {
+    label: "어제",
+    getValue: () => {
+      const y = addDays(startOfDay(new Date()), -1);
+      return { from: y, to: endOfDay(y) };
+    },
+  },
+  {
+    label: "이번 주",
+    getValue: () => {
+      const today = startOfDay(new Date());
+      const day = today.getDay();
+      const monday = addDays(today, day === 0 ? -6 : 1 - day);
+      return { from: monday, to: endOfDay(addDays(monday, 6)) };
+    },
+  },
+  {
+    label: "지난 7일",
+    getValue: () => ({
+      from: addDays(startOfDay(new Date()), -6),
+      to: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: "이번 달",
+    getValue: () => {
+      const now = new Date();
+      const from = new Date(now.getFullYear(), now.getMonth(), 1);
+      const to = endOfDay(new Date(now.getFullYear(), now.getMonth() + 1, 0));
+      return { from, to };
+    },
+  },
+  {
+    label: "지난 30일",
+    getValue: () => ({
+      from: addDays(startOfDay(new Date()), -29),
+      to: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: "올해",
+    getValue: () => {
+      const y = new Date().getFullYear();
+      return { from: new Date(y, 0, 1), to: endOfDay(new Date(y, 11, 31)) };
+    },
+  },
+];

package/assets/components/DatePicker/utils.ts

@@ -0,0 +1,148 @@
+export type DateValue = Date | null;
+export type DateRange = { from: Date | null; to: Date | null };
+
+export const MS_DAY = 86_400_000;
+
+export function startOfDay(d: Date): Date {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+}
+
+export function endOfDay(d: Date): Date {
+  const x = new Date(d);
+  x.setHours(23, 59, 59, 999);
+  return x;
+}
+
+export function isSameDay(a: Date | null, b: Date | null): boolean {
+  if (!a || !b) return false;
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function isSameMonth(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+
+export function addMonths(d: Date, n: number): Date {
+  const x = new Date(d);
+  x.setMonth(x.getMonth() + n);
+  return x;
+}
+
+export function addDays(d: Date, n: number): Date {
+  const x = new Date(d);
+  x.setDate(x.getDate() + n);
+  return x;
+}
+
+export function startOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+
+export function endOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth() + 1, 0);
+}
+
+export function startOfWeek(d: Date, weekStartsOn: number): Date {
+  const x = startOfDay(d);
+  const day = x.getDay();
+  const diff = (day - weekStartsOn + 7) % 7;
+  return addDays(x, -diff);
+}
+
+export function isBefore(a: Date, b: Date): boolean {
+  return a.getTime() < b.getTime();
+}
+
+export function isAfter(a: Date, b: Date): boolean {
+  return a.getTime() > b.getTime();
+}
+
+export function isWithin(d: Date, from: Date, to: Date): boolean {
+  const t = d.getTime();
+  return t >= from.getTime() && t <= to.getTime();
+}
+
+export function clampDate(d: Date, min?: Date, max?: Date): Date {
+  if (min && isBefore(d, min)) return min;
+  if (max && isAfter(d, max)) return max;
+  return d;
+}
+
+/** yyyy-MM-dd */
+export function formatISODate(d: Date): string {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+/** HH:mm */
+export function formatHM(d: Date): string {
+  const h = String(d.getHours()).padStart(2, "0");
+  const m = String(d.getMinutes()).padStart(2, "0");
+  return `${h}:${m}`;
+}
+
+/** 표시 포맷.
+ * - "short":  25-01-15
+ * - "iso":    2025-01-15   (기본)
+ * - "medium": 2025년 1월 15일
+ * - "long":   2025년 1월 15일 (수)
+ */
+export type DateFormat = "short" | "iso" | "medium" | "long";
+
+const KO_WEEKDAY = ["일", "월", "화", "수", "목", "금", "토"] as const;
+
+export function formatDate(d: Date, format: DateFormat = "iso"): string {
+  const y = d.getFullYear();
+  const m = d.getMonth() + 1;
+  const day = d.getDate();
+  const mm = String(m).padStart(2, "0");
+  const dd = String(day).padStart(2, "0");
+  const yy = String(y).slice(-2);
+  const w = KO_WEEKDAY[d.getDay()];
+
+  switch (format) {
+    case "short":
+      return `${yy}-${mm}-${dd}`;
+    case "medium":
+      return `${y}년 ${m}월 ${day}일`;
+    case "long":
+      return `${y}년 ${m}월 ${day}일 (${w})`;
+    case "iso":
+    default:
+      return `${y}-${mm}-${dd}`;
+  }
+}
+
+export function combineDateTime(date: Date, hours: number, minutes: number): Date {
+  const x = new Date(date);
+  x.setHours(hours, minutes, 0, 0);
+  return x;
+}
+
+/** month의 6행 x 7열 그리드에 들어갈 42일 배열 */
+export function buildMonthGrid(month: Date, weekStartsOn: number): Date[] {
+  const first = startOfMonth(month);
+  const last = endOfMonth(month);
+  const gridStart = startOfWeek(first, weekStartsOn);
+  const totalDays = Math.ceil(
+    (last.getTime() - gridStart.getTime()) / (24 * 60 * 60 * 1000)
+  ) + 1;
+  const weeks = Math.ceil(totalDays / 7);
+  const cells: Date[] = [];
+  for (let i = 0; i < weeks * 7; i += 1) cells.push(addDays(gridStart, i));
+  return cells;
+}
+
+export const WEEKDAY_LABELS_KO = ["일", "월", "화", "수", "목", "금", "토"];
+export const MONTH_LABELS_KO = [
+  "1월", "2월", "3월", "4월", "5월", "6월",
+  "7월", "8월", "9월", "10월", "11월", "12월",
+];