@uniai-fe/uds-primitives 0.11.0 → 0.12.0

package/src/components/time-picker/markup/Template.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import type { TimePickerTemplateProps } from "../types";
+import { getTimePeriod, parseTimeValue, toDisplayHour } from "../utils";
+import TimePickerFooter from "./Footer";
+import TimePickerHourSection from "./HourSection";
+import TimePickerMinuteSection from "./MinuteSection";
+import TimePickerSummary from "./Summary";
+
+/**
+ * TimePicker Template; Figma의 시간·분 선택과 footer action을 렌더한다.
+ * @component
+ * @param {TimePickerTemplateProps} props
+ * @param {string} props.value 24시간 형식 시간 값
+ * @param {"12h" | "24h"} props.format 표시 형식
+ * @param {boolean} props.clearable 삭제 action 노출 여부
+ * @param {boolean} props.disabled 비활성화 여부
+ * @param {(hours: number) => void} props.onHourSelect 시 선택 핸들러
+ * @param {(minutes: number) => void} props.onMinuteSelect 분 선택 핸들러
+ * @param {(period: "am" | "pm") => void} props.onPeriodChange 오전·오후 변경 핸들러
+ * @param {(amount: 1 | -1) => void} props.onMinuteStep 1분 증감 핸들러
+ * @param {() => void} props.onClear 삭제 핸들러
+ * @param {() => void} props.onApply 적용 핸들러
+ * @returns {ReactNode} 시간 선택 panel
+ * @example
+ * <TimePicker.Template
+ *   value="09:30"
+ *   format="24h"
+ *   clearable
+ *   disabled={false}
+ *   onHourSelect={onHourSelect}
+ *   onMinuteSelect={onMinuteSelect}
+ *   onPeriodChange={onPeriodChange}
+ *   onMinuteStep={onMinuteStep}
+ *   onClear={onClear}
+ *   onApply={onApply}
+ * />
+ */
+export default function TimePickerTemplate({
+  value,
+  format,
+  clearable,
+  disabled,
+  onHourSelect,
+  onMinuteSelect,
+  onPeriodChange,
+  onMinuteStep,
+  onClear,
+  onApply,
+}: TimePickerTemplateProps) {
+  const parts = parseTimeValue(value);
+  const selectedHour = parts ? toDisplayHour(parts.hours, format) : null;
+  const selectedMinute = parts?.minutes ?? null;
+  const period = parts ? getTimePeriod(parts.hours) : "am";
+  const summary = parts
+    ? `${String(selectedHour).padStart(2, "0")}:${String(parts.minutes).padStart(2, "0")}${
+        format === "12h" ? ` ${period === "am" ? "오전" : "오후"}` : ""
+      }`
+    : "--";
+
+  return (
+    <div className="time-picker-template">
+      <TimePickerSummary summary={summary} />
+      <TimePickerHourSection
+        format={format}
+        selectedHour={selectedHour}
+        period={period}
+        disabled={disabled}
+        onHourSelect={onHourSelect}
+        onPeriodChange={onPeriodChange}
+      />
+      <TimePickerMinuteSection
+        selectedMinute={selectedMinute}
+        disabled={disabled}
+        onMinuteStep={onMinuteStep}
+        onMinuteSelect={onMinuteSelect}
+      />
+      <TimePickerFooter
+        clearable={clearable}
+        disabled={disabled}
+        onClear={onClear}
+        onApply={onApply}
+      />
+    </div>
+  );
+}

package/src/components/time-picker/markup/index.tsx

@@ -0,0 +1,10 @@
+import TimePickerTemplate from "./Template";
+
+/**
+ * TimePicker; 시간 선택 namespace.
+ * @desc
+ * - `TimePicker.Template`: 시간·분 선택과 footer action을 제공한다.
+ */
+export const TimePicker = {
+  Template: TimePickerTemplate,
+};

package/src/components/time-picker/styles/index.scss

@@ -0,0 +1,2 @@
+@use "./variables.scss";
+@use "./template.scss";

package/src/components/time-picker/styles/template.scss

@@ -0,0 +1,174 @@
+.time-picker-template {
+  display: flex;
+  flex-direction: column;
+  max-height: min(
+    var(--time-picker-template-max-height),
+    calc(100vh - var(--time-picker-template-viewport-gap))
+  );
+  overflow-y: auto;
+  gap: var(--time-picker-template-gap);
+  padding: var(--time-picker-template-padding);
+  color: var(--time-picker-template-text-color);
+}
+
+.time-picker-summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--time-picker-summary-gap);
+  height: var(--time-picker-summary-height);
+  padding-block: var(--time-picker-summary-padding-block);
+  border: var(--time-picker-option-border-width) solid
+    var(--time-picker-summary-border-color);
+  border-radius: var(--time-picker-summary-radius);
+  background-color: var(--time-picker-summary-surface-color);
+  color: var(--time-picker-summary-border-color);
+  text-align: center;
+
+  span {
+    font-size: var(--time-picker-summary-label-size);
+    line-height: var(--time-picker-summary-label-line-height);
+    font-weight: var(--time-picker-summary-label-weight);
+    letter-spacing: var(--time-picker-summary-label-letter-spacing);
+  }
+
+  strong {
+    font-size: var(--time-picker-summary-value-size);
+    line-height: var(--time-picker-summary-value-line-height);
+    font-weight: var(--time-picker-summary-value-weight);
+    letter-spacing: var(--time-picker-summary-value-letter-spacing);
+  }
+}
+
+.time-picker-template-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--time-picker-template-section-gap);
+
+  h3 {
+    margin: 0;
+    font-size: var(--time-picker-template-heading-size);
+    line-height: var(--time-picker-template-heading-line-height);
+    font-weight: var(--time-picker-template-heading-weight);
+  }
+}
+
+.time-picker-period-control.segmented-control {
+  --segmented-height: var(--time-picker-period-height);
+  --segmented-padding: var(--time-picker-period-padding);
+  --segmented-radius: var(--time-picker-period-radius);
+  --segmented-bg: var(--time-picker-period-surface-color);
+  --segmented-indicator-bg: var(--time-picker-period-item-surface-color);
+  --segmented-indicator-shadow: var(--time-picker-period-item-shadow);
+  --segmented-label-color: var(--time-picker-period-item-color);
+  --segmented-label-active-color: var(--time-picker-period-item-color);
+  --segmented-gap: 0px;
+  --segmented-item-font-size: var(--time-picker-period-item-font-size);
+  --segmented-item-font-weight: var(--time-picker-period-item-font-weight);
+  --segmented-item-line-height: var(--time-picker-period-item-line-height);
+  width: 100%;
+  height: var(--time-picker-period-height);
+  border-radius: var(--time-picker-period-radius);
+
+  .segmented-control-indicator,
+  .segmented-control-button {
+    border-radius: var(--time-picker-period-item-radius);
+  }
+
+  .segmented-control-list {
+    width: 100%;
+    height: 100%;
+  }
+
+  .segmented-control-item {
+    display: flex;
+    flex: 1;
+  }
+
+  .segmented-control-button {
+    height: 100%;
+  }
+
+  .segmented-control-label {
+    letter-spacing: 0;
+  }
+}
+
+.time-picker-option-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--time-picker-option-gap);
+}
+
+.time-picker-option {
+  min-width: 0;
+  height: var(--time-picker-option-height);
+  padding: 0;
+  border: var(--time-picker-option-border-width) solid
+    var(--time-picker-option-border-color);
+  border-radius: var(--time-picker-option-radius);
+  background-color: var(--time-picker-option-surface-color);
+  color: var(--time-picker-option-color);
+  font-size: var(--time-picker-option-font-size);
+  line-height: var(--time-picker-option-line-height);
+  cursor: pointer;
+
+  &:where([aria-pressed="true"]) {
+    border-color: var(--time-picker-option-selected-color);
+    background-color: var(--time-picker-option-selected-surface-color);
+    color: var(--time-picker-option-selected-color);
+  }
+}
+
+.time-picker-minute-stepper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--time-picker-minute-stepper-gap);
+  height: var(--time-picker-minute-stepper-height);
+  border-radius: var(--time-picker-minute-stepper-radius);
+  background-color: var(--time-picker-minute-stepper-surface-color);
+  text-align: center;
+
+  strong {
+    font-size: var(--time-picker-minute-value-size);
+    line-height: var(--time-picker-minute-value-line-height);
+    font-weight: var(--time-picker-minute-value-weight);
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--time-picker-minute-control-size);
+    height: var(--time-picker-minute-control-size);
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.time-picker-template-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--time-picker-template-footer-gap);
+}
+
+.time-picker-clear-action {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--time-picker-clear-color);
+  font-size: var(--time-picker-clear-size);
+  line-height: var(--time-picker-clear-line-height);
+  cursor: pointer;
+}

package/src/components/time-picker/styles/variables.scss

@@ -0,0 +1,64 @@
+:root {
+  --time-picker-template-max-height: 800px;
+  --time-picker-template-viewport-gap: var(--spacing-gap-8);
+  --time-picker-template-padding: var(--spacing-padding-6);
+  --time-picker-template-gap: var(--spacing-gap-6);
+  --time-picker-template-section-gap: var(--spacing-gap-5);
+  --time-picker-template-text-color: var(--color-label-standard);
+  --time-picker-template-heading-size: var(--font-heading-small-size);
+  --time-picker-template-heading-line-height: var(
+    --font-heading-small-line-height
+  );
+  --time-picker-template-heading-weight: var(--font-heading-small-weight);
+  --time-picker-summary-height: 82px;
+  --time-picker-summary-padding-block: var(--spacing-padding-5);
+  --time-picker-summary-gap: var(--spacing-gap-3);
+  --time-picker-summary-radius: var(--theme-radius-large-2);
+  --time-picker-summary-surface-color: var(--color-surface-standard);
+  --time-picker-summary-border-color: var(--color-cool-gray-20);
+  --time-picker-summary-label-size: var(--font-body-xsmall-size);
+  --time-picker-summary-label-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-summary-label-weight: var(--font-body-xsmall-weight);
+  --time-picker-summary-label-letter-spacing: var(
+    --font-body-xsmall-letter-spacing
+  );
+  --time-picker-summary-value-size: var(--font-heading-small-size);
+  --time-picker-summary-value-line-height: var(--font-body-large-line-height);
+  --time-picker-summary-value-weight: var(--font-heading-small-weight);
+  --time-picker-summary-value-letter-spacing: 0.2px;
+  --time-picker-option-gap: var(--spacing-gap-5);
+  --time-picker-option-height: var(--theme-size-medium-1);
+  --time-picker-option-border-width: 1px;
+  --time-picker-option-border-color: var(--color-border-standard-cool-gray);
+  --time-picker-option-radius: var(--theme-radius-medium-3);
+  --time-picker-option-surface-color: var(--color-common-100);
+  --time-picker-option-color: var(--color-label-standard);
+  --time-picker-option-selected-color: var(--color-primary-default);
+  --time-picker-option-selected-surface-color: var(--color-neutral-99);
+  --time-picker-option-font-size: var(--font-body-xsmall-size);
+  --time-picker-option-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-period-height: var(--theme-size-medium-1);
+  --time-picker-period-padding: var(--spacing-padding-1);
+  --time-picker-period-radius: var(--theme-radius-large-1);
+  --time-picker-period-item-radius: var(--theme-radius-medium-4);
+  --time-picker-period-surface-color: var(--color-cool-gray-85);
+  --time-picker-period-item-surface-color: var(--color-common-100);
+  --time-picker-period-item-color: var(--color-label-standard);
+  --time-picker-period-item-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.06), 0 0 4px rgba(0, 0, 0, 0.12);
+  --time-picker-period-item-font-size: var(--font-body-xsmall-size);
+  --time-picker-period-item-font-weight: var(--font-body-medium-weight);
+  --time-picker-period-item-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-minute-stepper-height: var(--theme-size-medium-1);
+  --time-picker-minute-stepper-gap: var(--spacing-gap-13);
+  --time-picker-minute-stepper-radius: var(--theme-radius-large-1);
+  --time-picker-minute-stepper-surface-color: var(--color-cool-gray-85);
+  --time-picker-minute-control-size: var(--theme-size-small-2);
+  --time-picker-minute-value-size: var(--font-body-xsmall-size);
+  --time-picker-minute-value-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-minute-value-weight: var(--font-body-medium-weight);
+  --time-picker-template-footer-gap: var(--spacing-gap-6);
+  --time-picker-clear-color: var(--color-error);
+  --time-picker-clear-size: var(--font-body-xsmall-size);
+  --time-picker-clear-line-height: var(--font-body-xsmall-line-height);
+}

package/src/components/time-picker/types/index.ts

@@ -0,0 +1 @@
+export type * from "./time-picker";

package/src/components/time-picker/types/time-picker.ts

@@ -0,0 +1,94 @@
+/**
+ * TimePicker 표시 형식.
+ * @typedef {"12h" | "24h"} TimePickerFormat
+ */
+export type TimePickerFormat = "12h" | "24h";
+
+/**
+ * TimePicker 오전·오후 구분.
+ * @typedef {"am" | "pm"} TimePickerPeriod
+ */
+export type TimePickerPeriod = "am" | "pm";
+
+/**
+ * TimePicker 시간 단위.
+ * @typedef {"hours" | "minutes" | "seconds"} TimePickerUnit
+ */
+export type TimePickerUnit = "hours" | "minutes" | "seconds";
+
+/**
+ * TimePicker 시간 값 구성.
+ * @property {number} hours 시
+ * @property {number} minutes 분
+ * @property {number} seconds 초
+ */
+export interface TimePickerParts {
+  /**
+   * 시.
+   */
+  hours: number;
+  /**
+   * 분.
+   */
+  minutes: number;
+  /**
+   * 초.
+   */
+  seconds: number;
+}
+
+/**
+ * TimePicker Template props.
+ * @property {string} value 24시간 형식 시간 값
+ * @property {"12h" | "24h"} format 표시 형식
+ * @property {boolean} clearable 삭제 action 노출 여부
+ * @property {boolean} disabled 비활성화 여부
+ * @property {(hours: number) => void} onHourSelect 시 선택 핸들러
+ * @property {(minutes: number) => void} onMinuteSelect 분 선택 핸들러
+ * @property {(period: "am" | "pm") => void} onPeriodChange 오전·오후 변경 핸들러
+ * @property {(amount: 1 | -1) => void} onMinuteStep 1분 증감 핸들러
+ * @property {() => void} onClear 삭제 핸들러
+ * @property {() => void} onApply 적용 핸들러
+ */
+export interface TimePickerTemplateProps {
+  /**
+   * 24시간 형식 시간 값.
+   */
+  value: string;
+  /**
+   * "12h" | "24h".
+   */
+  format: TimePickerFormat;
+  /**
+   * 삭제 action 노출 여부.
+   */
+  clearable: boolean;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 시 선택 핸들러.
+   */
+  onHourSelect: (hours: number) => void;
+  /**
+   * 분 선택 핸들러.
+   */
+  onMinuteSelect: (minutes: number) => void;
+  /**
+   * 오전·오후 변경 핸들러.
+   */
+  onPeriodChange: (period: TimePickerPeriod) => void;
+  /**
+   * 1분 증감 핸들러.
+   */
+  onMinuteStep: (amount: 1 | -1) => void;
+  /**
+   * 삭제 핸들러.
+   */
+  onClear: () => void;
+  /**
+   * 적용 핸들러.
+   */
+  onApply: () => void;
+}

package/src/components/time-picker/utils/index.ts

@@ -0,0 +1 @@
+export * from "./time";

package/src/components/time-picker/utils/time.ts

@@ -0,0 +1,110 @@
+import type {
+  TimePickerFormat,
+  TimePickerParts,
+  TimePickerPeriod,
+  TimePickerUnit,
+} from "../types";
+
+const padTimePart = (value: number) => String(value).padStart(2, "0");
+
+const wrapTimePart = (value: number, limit: number) =>
+  ((value % limit) + limit) % limit;
+
+/**
+ * TimePicker Utility; 24시간 문자열을 시간 값으로 파싱한다.
+ * @param {string} value HH:mm 또는 HH:mm:ss 값
+ * @returns {TimePickerParts | null} 파싱 결과
+ */
+export const parseTimeValue = (value: string): TimePickerParts | null => {
+  const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(value);
+  if (!match) {
+    return null;
+  }
+
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  const seconds = Number(match[3] ?? 0);
+  if (hours > 23 || minutes > 59 || seconds > 59) {
+    return null;
+  }
+
+  return { hours, minutes, seconds };
+};
+
+/**
+ * TimePicker Utility; 시간 값을 24시간 문자열로 직렬화한다.
+ * @param {TimePickerParts} parts 시간 값
+ * @param {boolean} withSeconds 초 포함 여부
+ * @returns {string} HH:mm 또는 HH:mm:ss 값
+ */
+export const serializeTimeValue = (
+  parts: TimePickerParts,
+  withSeconds: boolean,
+) =>
+  [parts.hours, parts.minutes, ...(withSeconds ? [parts.seconds] : [])]
+    .map(padTimePart)
+    .join(":");
+
+/**
+ * TimePicker Utility; 지정 단위만 순환 증감한다.
+ * @param {string} value 시간 값
+ * @param {TimePickerUnit} unit 증감 단위
+ * @param {number} amount 증감량
+ * @param {boolean} withSeconds 초 포함 여부
+ * @returns {string} 증감한 시간 값
+ */
+export const stepTimeValue = (
+  value: string,
+  unit: TimePickerUnit,
+  amount: number,
+  withSeconds: boolean,
+) => {
+  const parts = parseTimeValue(value) ?? {
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  };
+  const limit = unit === "hours" ? 24 : 60;
+  return serializeTimeValue(
+    { ...parts, [unit]: wrapTimePart(parts[unit] + amount, limit) },
+    withSeconds,
+  );
+};
+
+/**
+ * TimePicker Utility; 저장 시를 표시 시로 변환한다.
+ * @param {number} hours 24시간 시 값
+ * @param {TimePickerFormat} format 표시 형식
+ * @returns {number} 표시 시 값
+ */
+export const toDisplayHour = (hours: number, format: TimePickerFormat) =>
+  format === "12h" ? hours % 12 || 12 : hours;
+
+/**
+ * TimePicker Utility; 24시간 시 값의 오전·오후를 반환한다.
+ * @param {number} hours 24시간 시 값
+ * @returns {TimePickerPeriod} 오전·오후
+ */
+export const getTimePeriod = (hours: number): TimePickerPeriod =>
+  hours >= 12 ? "pm" : "am";
+
+/**
+ * TimePicker Utility; 오전·오후를 24시간 저장값에 반영한다.
+ * @param {string} value 시간 값
+ * @param {TimePickerPeriod} period 오전·오후
+ * @param {boolean} withSeconds 초 포함 여부
+ * @returns {string} 변경한 시간 값
+ */
+export const setTimePeriod = (
+  value: string,
+  period: TimePickerPeriod,
+  withSeconds: boolean,
+) => {
+  const parts = parseTimeValue(value) ?? {
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  };
+  const hours = (parts.hours % 12) + (period === "pm" ? 12 : 0);
+  return serializeTimeValue({ ...parts, hours }, withSeconds);
+};

package/src/index.scss

@@ -22,5 +22,6 @@
 @use "./components/switch";
 @use "./components/tab";
 @use "./components/table";
+@use "./components/time-picker";
 @use "./components/toast";
 @use "./components/tooltip";

package/src/index.tsx

@@ -28,6 +28,7 @@ export * from "./components/spinner";
 export * from "./components/switch";
 export * from "./components/tab";
 export * from "./components/table";
+export * from "./components/time-picker";
 export * from "./components/toast";
 export * from "./components/tooltip";
 export type * from "./types";