@uniai-fe/uds-primitives 0.11.0 → 0.12.1

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

@@ -0,0 +1,68 @@
+import MinusIcon from "../img/minus.svg";
+import PlusIcon from "../img/plus.svg";
+import type { TimePickerMinuteSectionProps } from "../types";
+
+const MINUTES = Array.from({ length: 12 }, (_, index) => index * 5);
+
+/**
+ * TimePicker Minute Section; 1분 stepper와 5분 선택 grid를 렌더한다.
+ * @component
+ * @param {TimePickerMinuteSectionProps} props
+ * @param {number | null} props.selectedMinute 선택한 분
+ * @param {boolean} props.disabled 비활성화 여부
+ * @param {(amount: 1 | -1) => void} props.onMinuteStep 1분 증감 핸들러
+ * @param {(minutes: number) => void} props.onMinuteSelect 분 선택 핸들러
+ * @returns {ReactNode} 분 선택 section
+ * @example
+ * <TimePickerMinuteSection
+ *   selectedMinute={30}
+ *   disabled={false}
+ *   onMinuteStep={onMinuteStep}
+ *   onMinuteSelect={onMinuteSelect}
+ * />
+ */
+export default function TimePickerMinuteSection({
+  selectedMinute,
+  disabled,
+  onMinuteStep,
+  onMinuteSelect,
+}: TimePickerMinuteSectionProps) {
+  return (
+    <section className="time-picker-template-section">
+      <h3>분 선택</h3>
+      <div className="time-picker-minute-stepper">
+        <button
+          type="button"
+          aria-label="1분 증가"
+          disabled={disabled}
+          onClick={() => onMinuteStep(1)}
+        >
+          <PlusIcon aria-hidden="true" />
+        </button>
+        <strong>{String(selectedMinute ?? 0).padStart(2, "0")}분</strong>
+        <button
+          type="button"
+          aria-label="1분 감소"
+          disabled={disabled}
+          onClick={() => onMinuteStep(-1)}
+        >
+          <MinusIcon aria-hidden="true" />
+        </button>
+      </div>
+      <div className="time-picker-option-grid">
+        {MINUTES.map(minute => (
+          <button
+            key={`time-picker/minute/${minute}`}
+            type="button"
+            className="time-picker-option"
+            aria-pressed={selectedMinute === minute}
+            disabled={disabled}
+            onClick={() => onMinuteSelect(minute)}
+          >
+            {String(minute).padStart(2, "0")}
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,19 @@
+import type { TimePickerSummaryProps } from "../types";
+
+/**
+ * TimePicker Summary; 현재 선택한 시간을 표시한다.
+ * @component
+ * @param {TimePickerSummaryProps} props
+ * @param {string} props.summary 선택한 시간 표시값
+ * @returns {ReactNode} 선택 시간 요약
+ * @example
+ * <TimePickerSummary summary="09:30 오전" />
+ */
+export default function TimePickerSummary({ summary }: TimePickerSummaryProps) {
+  return (
+    <div className="time-picker-summary">
+      <span>선택한 시간</span>
+      <strong>{summary}</strong>
+    </div>
+  );
+}

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,193 @@
+/**
+ * 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;
+}
+
+/**
+ * TimePicker Summary props.
+ * @property {string} summary 선택한 시간 표시값
+ */
+export interface TimePickerSummaryProps {
+  /**
+   * 선택한 시간 표시값.
+   */
+  summary: string;
+}
+
+/**
+ * TimePicker Hour Section props.
+ * @property {"12h" | "24h"} format 표시 형식
+ * @property {number | null} selectedHour 선택한 표시 시
+ * @property {"am" | "pm"} period 오전·오후 구분
+ * @property {boolean} disabled 비활성화 여부
+ * @property {(hours: number) => void} onHourSelect 시 선택 핸들러
+ * @property {(period: "am" | "pm") => void} onPeriodChange 오전·오후 변경 핸들러
+ */
+export interface TimePickerHourSectionProps {
+  /**
+   * "12h" | "24h".
+   */
+  format: TimePickerFormat;
+  /**
+   * 선택한 표시 시.
+   */
+  selectedHour: number | null;
+  /**
+   * "am" | "pm".
+   */
+  period: TimePickerPeriod;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 시 선택 핸들러.
+   */
+  onHourSelect: (hours: number) => void;
+  /**
+   * 오전·오후 변경 핸들러.
+   */
+  onPeriodChange: (period: TimePickerPeriod) => void;
+}
+
+/**
+ * TimePicker Minute Section props.
+ * @property {number | null} selectedMinute 선택한 분
+ * @property {boolean} disabled 비활성화 여부
+ * @property {(amount: 1 | -1) => void} onMinuteStep 1분 증감 핸들러
+ * @property {(minutes: number) => void} onMinuteSelect 분 선택 핸들러
+ */
+export interface TimePickerMinuteSectionProps {
+  /**
+   * 선택한 분.
+   */
+  selectedMinute: number | null;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 1분 증감 핸들러.
+   */
+  onMinuteStep: (amount: 1 | -1) => void;
+  /**
+   * 분 선택 핸들러.
+   */
+  onMinuteSelect: (minutes: number) => void;
+}
+
+/**
+ * TimePicker Footer props.
+ * @property {boolean} clearable 삭제 action 노출 여부
+ * @property {boolean} disabled 비활성화 여부
+ * @property {() => void} onClear 삭제 핸들러
+ * @property {() => void} onApply 적용 핸들러
+ */
+export interface TimePickerFooterProps {
+  /**
+   * 삭제 action 노출 여부.
+   */
+  clearable: boolean;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 삭제 핸들러.
+   */
+  onClear: () => void;
+  /**
+   * 적용 핸들러.
+   */
+  onApply: () => void;
+}

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

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