@uniai-fe/uds-primitives 0.12.0 → 0.12.2

package/src/components/input/styles/time.scss

@@ -31,11 +31,14 @@
   align-items: center;
   flex: 1 1 auto;
   min-width: 0;
-  min-height: var(--input-time-height-medium);
-  padding: var(--input-time-padding-block) var(--input-time-padding-inline);
+  height: var(--input-default-height-medium);
+  min-height: var(--input-default-height-medium);
+  padding: var(--input-default-padding-block)
+    var(--input-default-padding-inline);
   border: var(--input-time-border-width) solid var(--input-time-border-color);
   border-radius: var(--input-time-radius);
   background-color: var(--input-time-surface-color);
+  box-sizing: border-box;
 }
 
 .input-time-fields-group {
@@ -69,19 +72,6 @@
   letter-spacing: var(--input-time-letter-spacing);
   text-align: center;
 
-  &:first-child {
-    text-align: right;
-  }
-
-  &:last-of-type {
-    text-align: left;
-  }
-
-  &:not(:first-child):not(:last-of-type) {
-    width: var(--input-time-field-middle-width);
-    min-width: var(--input-time-field-middle-width);
-  }
-
   &::placeholder {
     color: var(--input-time-placeholder-color);
   }
@@ -116,8 +106,8 @@
 
   svg {
     display: block;
-    width: 100%;
-    height: 100%;
+    width: var(--input-time-icon-size);
+    height: var(--input-time-icon-size);
   }
 }
 
@@ -141,6 +131,7 @@
   background-color: var(--input-time-surface-color);
   color: var(--input-time-text-color);
   cursor: pointer;
+  box-sizing: border-box;
 
   &:first-child {
     border-radius: 0 var(--input-time-stepper-radius) 0 0;
@@ -163,26 +154,57 @@
 }
 
 .input-time:where([data-size="small"]) {
-  .input-time-trigger-input {
-    min-height: var(--input-time-height-small);
-  }
+  --input-time-radius: var(--input-default-radius-small);
+  --input-time-stepper-button-height: calc(
+    var(--input-default-height-small) / 2
+  );
+  --input-time-font-size: var(--input-time-text-small-size);
+  --input-time-line-height: var(--input-time-text-small-line-height);
+  --input-time-font-weight: var(--input-time-text-small-weight);
+  --input-time-letter-spacing: var(--input-time-text-small-letter-spacing);
 
-  .input-time-field {
-    font-size: var(--input-time-text-small-size);
-    line-height: var(--input-time-text-small-line-height);
-    font-weight: var(--input-time-text-small-weight);
+  .input-time-trigger-input {
+    height: var(--input-default-height-small);
+    min-height: var(--input-default-height-small);
   }
 }
 
 .input-time:where([data-size="large"]) {
+  --input-time-radius: var(--input-default-radius-large);
+  --input-time-stepper-button-height: calc(
+    var(--input-default-height-large) / 2
+  );
+  --input-time-font-size: var(--input-time-text-large-size);
+  --input-time-line-height: var(--input-time-text-large-line-height);
+  --input-time-font-weight: var(--input-time-text-large-weight);
+  --input-time-letter-spacing: var(--input-time-text-large-letter-spacing);
+
   .input-time-trigger-input {
-    min-height: var(--input-time-height-large);
+    height: var(--input-default-height-large);
+    min-height: var(--input-default-height-large);
   }
+}
 
-  .input-time-field {
-    font-size: var(--input-time-text-large-size);
-    line-height: var(--input-time-text-large-line-height);
-    font-weight: var(--input-time-text-large-weight);
+.input-time:where([data-state="active"]),
+.input-time:where([data-state="focused"]) {
+  .input-time-field::placeholder {
+    color: var(--input-time-text-color);
+  }
+}
+
+.input-time:where([data-priority="primary"][data-state="focused"]) {
+  .input-time-trigger-input,
+  .input-time-stepper-button {
+    border-color: var(--input-time-border-active-color);
+    border-width: var(--input-time-border-width-focus);
+  }
+
+  .input-time-stepper-button {
+    border-left: 0;
+
+    &:last-child {
+      border-top: 0;
+    }
   }
 }
 
@@ -199,8 +221,8 @@
 
 .input-time:where([data-priority="tertiary"]) {
   .input-time-trigger-input {
-    min-height: var(--input-time-tertiary-height);
-    border-radius: var(--input-time-tertiary-radius);
+    min-height: var(--input-tertiary-height-base);
+    border-radius: var(--input-tertiary-radius-base);
   }
 }
 
@@ -209,11 +231,11 @@
   height: 100%;
 
   .input-time-trigger-input {
-    min-height: var(--input-time-height-small);
+    min-height: var(--input-default-height-small);
     height: 100%;
     padding-inline: var(--input-time-table-padding-inline);
     border-color: var(--input-time-table-border-color);
-    border-radius: var(--input-time-table-radius);
+    border-radius: var(--input-table-radius-base);
     background-color: var(--input-time-table-surface-color);
   }
 
@@ -244,11 +266,16 @@
     background-color: var(--input-time-surface-disabled-color);
   }
 
-  .input-time-field {
+  .input-time-field,
+  .input-time-period-field {
     color: var(--input-time-text-disabled-color);
     cursor: default;
   }
 
+  .input-time-field::placeholder {
+    color: var(--input-time-text-disabled-color);
+  }
+
   .input-time-icon-button {
     color: var(--input-time-icon-disabled-color);
     cursor: default;

package/src/components/input/styles/variables.scss

@@ -17,25 +17,18 @@
   --input-utility-gap: var(--spacing-gap-2);
   --input-tertiary-row-gap: var(--spacing-gap-1);
   --input-tertiary-control-row-gap: var(--spacing-gap-1);
-  --input-default-radius-base: var(--theme-radius-large-1);
+  --input-default-radius-small: var(--theme-radius-medium-4);
+  --input-default-radius-medium: var(--theme-radius-large-1);
+  --input-default-radius-large: var(--theme-radius-large-2);
+  --input-default-radius-base: var(--input-default-radius-medium);
   --input-tertiary-radius-base: var(--theme-radius-large-2);
   --input-table-radius-base: 0;
   --input-tertiary-element-min-height: 1.5em;
   --input-textarea-min-height: calc(var(--input-default-height-medium) * 2);
   --input-textarea-height: 128px;
-  /* TextArea size token은 Input 기본 size token을 재할당해 축을 일치시킨다. */
-  --input-textarea-radius-small: var(--input-default-radius-base);
-  --input-textarea-radius-medium: var(--input-default-radius-base);
-  --input-textarea-radius-large: var(--input-default-radius-base);
-  --input-textarea-padding-inline-small: var(--spacing-padding-6);
-  --input-textarea-padding-inline-medium: var(--spacing-padding-6);
-  --input-textarea-padding-inline-large: var(--spacing-padding-6);
   --input-textarea-padding-block-small: var(--spacing-padding-5);
   --input-textarea-padding-block-medium: var(--spacing-padding-5);
   --input-textarea-padding-block-large: var(--spacing-padding-6);
-  --input-textarea-gap-small: var(--input-default-gap);
-  --input-textarea-gap-medium: var(--input-default-gap);
-  --input-textarea-gap-large: var(--input-default-gap);
   --input-textarea-counter-font-size: var(--font-label-medium-size);
   --input-textarea-counter-line-height: var(--font-label-medium-line-height);
   --input-textarea-counter-font-weight: var(--font-label-medium-weight);
@@ -122,33 +115,24 @@
 
   /* TimePicker tokens */
   --input-time-width: 100%;
-  --input-time-height-small: var(--input-default-height-small);
-  --input-time-height-medium: var(--input-default-height-medium);
-  --input-time-height-large: var(--input-default-height-large);
-  --input-time-tertiary-height: var(--input-tertiary-height-base);
-  --input-time-padding-inline: var(--input-default-padding-inline);
-  --input-time-padding-block: var(--input-default-padding-block);
-  --input-time-secondary-padding-block: var(--input-secondary-padding-block);
   --input-time-table-padding-inline: var(--spacing-padding-4);
-  --input-time-radius: var(--theme-radius-medium-3);
-  --input-time-tertiary-radius: var(--input-tertiary-radius-base);
-  --input-time-table-radius: var(--input-table-radius-base);
+  --input-time-radius: var(--input-default-radius-medium);
   --input-time-field-gap: 0;
-  --input-time-field-width: 2.7ch;
-  --input-time-field-middle-width: 2.2ch;
   --input-time-period-field-width: 4.2ch;
   --input-time-field-height: 100%;
   --input-time-icon-size: 24px;
   --input-time-stepper-width: 28px;
-  --input-time-stepper-button-height: 28px;
+  --input-time-stepper-button-height: calc(
+    var(--input-default-height-medium) / 2
+  );
   --input-time-stepper-radius: var(--theme-radius-medium-3);
   --input-time-stepper-icon-size: 16px;
-  --input-time-text-color: var(--input-text-color);
-  --input-time-text-disabled-color: var(--input-text-disabled-color);
-  --input-time-placeholder-color: var(--input-placeholder-color);
+  --input-time-text-color: var(--color-cool-gray-30);
+  --input-time-text-disabled-color: var(--color-cool-gray-60);
+  --input-time-placeholder-color: var(--color-cool-gray-40);
   --input-time-separator-color: var(--color-label-alternative);
-  --input-time-icon-color: var(--color-label-alternative);
-  --input-time-icon-disabled-color: var(--color-label-disabled);
+  --input-time-icon-color: var(--color-cool-gray-25);
+  --input-time-icon-disabled-color: var(--color-cool-gray-45);
   --input-time-font-size: var(--input-text-medium-size);
   --input-time-line-height: var(--input-text-medium-line-height);
   --input-time-font-weight: var(--input-text-medium-weight);
@@ -173,6 +157,7 @@
   --input-time-border-color: var(--input-border-color);
   --input-time-border-width: var(--input-border-width-default);
   --input-time-border-width-emphasis: var(--input-border-width-emphasis);
+  --input-time-border-width-focus: 2px;
   --input-time-border-active-color: var(--input-border-active-color);
   --input-time-border-success-color: var(--input-border-success-color);
   --input-time-border-error-color: var(--input-border-error-color);
@@ -180,6 +165,10 @@
   --input-time-table-border-color: var(--input-border-table-default-color);
   --input-time-surface-color: var(--input-surface-color);
   --input-time-secondary-surface-color: var(--input-secondary-surface-color);
-  --input-time-surface-disabled-color: var(--input-surface-disabled-color);
+  --input-time-surface-disabled-color: var(--color-cool-gray-85);
   --input-time-table-surface-color: var(--input-table-surface-color);
 }
+
+.input-time {
+  --input-time-field-width: 1.9em;
+}

package/src/components/input/types/time.ts

@@ -1,7 +1,16 @@
-import type { ComponentPropsWithoutRef, FocusEvent, ReactNode } from "react";
+import type {
+  ComponentPropsWithoutRef,
+  FocusEvent,
+  KeyboardEvent,
+  ReactNode,
+} from "react";
 import type { UseFormRegisterReturn } from "react-hook-form";
 import type { FormFieldWidth } from "../../form/types/props";
-import type { TimePickerFormat } from "../../time-picker/types";
+import type {
+  TimePickerFormat,
+  TimePickerPeriod,
+  TimePickerUnit,
+} from "../../time-picker/types";
 import type { InputPriority, InputSize, InputState } from "./foundation";
 
 /**
@@ -18,6 +27,199 @@ export type InputTimeHiddenInputProps = Omit<
   "type" | "value" | "defaultValue" | "name"
 >;
 
+/**
+ * Input Time draft field 값.
+ * @property {string} hours 시 입력값
+ * @property {string} minutes 분 입력값
+ * @property {string} seconds 초 입력값
+ */
+export interface InputTimeDraftFields {
+  /**
+   * 시 입력값.
+   */
+  hours: string;
+  /**
+   * 분 입력값.
+   */
+  minutes: string;
+  /**
+   * 초 입력값.
+   */
+  seconds: string;
+}
+
+/**
+ * Input Time 편집 중인 시간 값.
+ * @property {InputTimeDraftFields} fields 시·분·초 입력값
+ * @property {"am" | "pm"} period 오전·오후 구분
+ */
+export interface InputTimeDraft {
+  /**
+   * 시·분·초 입력값.
+   */
+  fields: InputTimeDraftFields;
+  /**
+   * "am" | "pm".
+   */
+  period: TimePickerPeriod;
+}
+
+/**
+ * Input Time trigger field 값.
+ * @see InputTimeDraftFields
+ */
+export type InputTimeTriggerFields = InputTimeDraftFields;
+
+/**
+ * Input Time Trigger props.
+ * @property {InputTimeTriggerFields} fields 시·분·초 입력값
+ * @property {"am" | "pm"} period 오전·오후 구분
+ * @property {"hours" | "minutes" | "seconds" | null} activeUnit 현재 활성 단위
+ * @property {"primary" | "secondary" | "tertiary" | "table"} priority input priority
+ * @property {"small" | "medium" | "large"} size input size
+ * @property {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} state input state
+ * @property {"12h" | "24h"} format 표시 형식
+ * @property {boolean} withSeconds 초 field 노출 여부
+ * @property {boolean} disabled 비활성화 여부
+ * @property {boolean} readOnly 읽기 전용 여부
+ * @property {ReactNode} icon clock icon
+ * @property {"left" | "right"} iconPosition clock icon 위치
+ * @property {string} iconLabel clock icon 접근성 라벨
+ * @property {string} hoursInputLabel 시 input 접근성 라벨
+ * @property {string} minutesInputLabel 분 input 접근성 라벨
+ * @property {string} secondsInputLabel 초 input 접근성 라벨
+ * @property {string} amPmInputLabel 오전·오후 input 접근성 라벨
+ * @property {string} hoursPlaceholder 시 placeholder
+ * @property {string} minutesPlaceholder 분 placeholder
+ * @property {string} secondsPlaceholder 초 placeholder
+ * @property {(unit: "hours" | "minutes" | "seconds", value: string) => void} onFieldChange field 변경 핸들러
+ * @property {(unit: "hours" | "minutes" | "seconds", event: FocusEvent<HTMLInputElement>) => void} onFieldFocus field focus 핸들러
+ * @property {(unit: "hours" | "minutes" | "seconds") => void} onFieldBlur field blur 핸들러
+ * @property {(unit: "hours" | "minutes" | "seconds", event: KeyboardEvent<HTMLInputElement>) => void} onFieldKeyDown field keyboard 핸들러
+ * @property {(period: "am" | "pm") => void} onPeriodChange 오전·오후 변경 핸들러
+ * @property {(amount: 1 | -1) => void} onStep 활성 단위 증감 핸들러
+ * @property {(event: FocusEvent<HTMLDivElement>) => void} onRootBlur root blur 핸들러
+ */
+export interface InputTimeTriggerProps extends Omit<
+  ComponentPropsWithoutRef<"div">,
+  "onBlur" | "onFocus"
+> {
+  /**
+   * 시·분·초 입력값.
+   */
+  fields: InputTimeTriggerFields;
+  /**
+   * "am" | "pm".
+   */
+  period: TimePickerPeriod;
+  /**
+   * "hours" | "minutes" | "seconds" | null.
+   */
+  activeUnit: TimePickerUnit | null;
+  /**
+   * "primary" | "secondary" | "tertiary" | "table".
+   */
+  priority: InputPriority;
+  /**
+   * "small" | "medium" | "large".
+   */
+  size: InputSize;
+  /**
+   * "default" | "active" | "focused" | "success" | "error" | "disabled" | "loading".
+   */
+  state: InputState;
+  /**
+   * "12h" | "24h".
+   */
+  format: TimePickerFormat;
+  /**
+   * 초 field 노출 여부.
+   */
+  withSeconds: boolean;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 읽기 전용 여부.
+   */
+  readOnly: boolean;
+  /**
+   * clock icon.
+   */
+  icon: ReactNode;
+  /**
+   * "left" | "right".
+   */
+  iconPosition: InputTimeIconPosition;
+  /**
+   * clock icon 접근성 라벨.
+   */
+  iconLabel: string;
+  /**
+   * 시 input 접근성 라벨.
+   */
+  hoursInputLabel: string;
+  /**
+   * 분 input 접근성 라벨.
+   */
+  minutesInputLabel: string;
+  /**
+   * 초 input 접근성 라벨.
+   */
+  secondsInputLabel: string;
+  /**
+   * 오전·오후 input 접근성 라벨.
+   */
+  amPmInputLabel: string;
+  /**
+   * 시 placeholder.
+   */
+  hoursPlaceholder: string;
+  /**
+   * 분 placeholder.
+   */
+  minutesPlaceholder: string;
+  /**
+   * 초 placeholder.
+   */
+  secondsPlaceholder: string;
+  /**
+   * field 변경 핸들러.
+   */
+  onFieldChange: (unit: TimePickerUnit, value: string) => void;
+  /**
+   * field focus 핸들러.
+   */
+  onFieldFocus: (
+    unit: TimePickerUnit,
+    event: FocusEvent<HTMLInputElement>,
+  ) => void;
+  /**
+   * field blur 핸들러.
+   */
+  onFieldBlur: (unit: TimePickerUnit) => void;
+  /**
+   * field keyboard 핸들러.
+   */
+  onFieldKeyDown: (
+    unit: TimePickerUnit,
+    event: KeyboardEvent<HTMLInputElement>,
+  ) => void;
+  /**
+   * 오전·오후 변경 핸들러.
+   */
+  onPeriodChange: (period: TimePickerPeriod) => void;
+  /**
+   * 활성 단위 증감 핸들러.
+   */
+  onStep: (amount: 1 | -1) => void;
+  /**
+   * root blur 핸들러.
+   */
+  onRootBlur: (event: FocusEvent<HTMLDivElement>) => void;
+}
+
 /**
  * Input Time Template props.
  * 저장값은 24시간 `HH:mm` 또는 `HH:mm:ss` 문자열을 사용한다.

package/src/components/select/styles/select.scss

@@ -49,13 +49,13 @@
   display: flex;
   width: 100%;
   align-items: center;
-  gap: var(--select-primary-gap-inline);
-  min-height: var(--select-primary-height-medium);
-  padding: var(--select-primary-padding-block)
-    var(--select-primary-padding-inline);
-  border: var(--select-primary-border-width-default) solid
+  gap: var(--input-default-gap);
+  min-height: var(--input-default-height-medium);
+  padding: var(--input-default-padding-block)
+    var(--input-default-padding-inline);
+  border: var(--input-border-width-default) solid
     var(--select-primary-color-border);
-  border-radius: var(--select-primary-radius-medium);
+  border-radius: var(--input-default-radius-medium);
   background-color: var(--select-primary-color-surface);
   cursor: pointer;
   transition:
@@ -65,8 +65,8 @@
   text-align: left;
 
   &:where([data-size="small"]) {
-    min-height: var(--select-primary-height-small);
-    border-radius: var(--select-primary-radius-small);
+    min-height: var(--input-default-height-small);
+    border-radius: var(--input-default-radius-small);
   }
 
   &:where([data-size="xsmall"]) {
@@ -81,8 +81,8 @@
   }
 
   &:where([data-size="large"]) {
-    min-height: var(--select-primary-height-large);
-    border-radius: var(--select-primary-radius-large);
+    min-height: var(--input-default-height-large);
+    border-radius: var(--input-default-radius-large);
   }
 
   &:where([data-multiple="true"]) {
@@ -146,7 +146,7 @@
   &:where(:not([data-priority="secondary"])):focus-visible,
   &:where(:not([data-priority="secondary"])):focus-within {
     border-color: var(--select-primary-color-border-focused);
-    border-width: var(--select-primary-border-width-focus);
+    border-width: var(--input-border-width-emphasis);
     --select-icon-fill: var(--select-icon-color-focused);
   }
 
@@ -155,7 +155,7 @@
   &:where([data-priority="table"]):focus-visible,
   &:where([data-priority="table"]):focus-within {
     border-color: var(--select-table-border-focus-color);
-    border-width: var(--select-primary-border-width-focus);
+    border-width: var(--input-border-width-emphasis);
     --select-icon-fill: var(--select-table-icon-color-focused);
   }
 

package/src/components/select/styles/variables.scss

@@ -1,4 +1,4 @@
-/* Select tokens mapped to Input primary tokens for visual parity */
+/* Select-specific tokens. Primary small/medium/large geometry consumes Input.Base directly. */
 :root {
   /* layout presets */
   --select-width: 100%;
@@ -6,25 +6,14 @@
   --select-layout-gap: var(--spacing-gap-2);
   --select-value-gap: var(--spacing-gap-2);
 
-  --select-primary-height-small: var(--input-default-height-small);
-  --select-primary-height-medium: var(--input-default-height-medium);
-  --select-primary-height-large: var(--input-default-height-large);
   --select-primary-height-xsmall: 24px;
 
-  --select-primary-radius-small: var(--input-default-radius-base);
-  --select-primary-radius-medium: var(--input-default-radius-base);
-  --select-primary-radius-large: var(--input-default-radius-base);
   --select-primary-radius-xsmall: var(--theme-radius-medium-2);
 
-  --select-primary-padding-inline: var(--input-default-padding-inline);
-  --select-primary-padding-block: var(--input-default-padding-block);
-  --select-primary-gap-inline: var(--input-default-gap);
   --select-primary-padding-inline-start-xsmall: var(--spacing-padding-4);
   --select-primary-padding-inline-end-xsmall: var(--spacing-padding-3);
   --select-primary-padding-block-xsmall: var(--spacing-padding-2);
   --select-primary-gap-inline-xsmall: var(--spacing-gap-1);
-  --select-primary-border-width-default: var(--input-border-width-default);
-  --select-primary-border-width-focus: var(--input-border-width-emphasis);
 
   --select-secondary-radius: var(--theme-radius-medium-1);
   --select-secondary-padding-inline: var(--spacing-padding-4);

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

@@ -1,23 +1,5 @@
 import { Button } from "../../button";
-
-interface TimePickerFooterProps {
-  /**
-   * 삭제 action 노출 여부.
-   */
-  clearable: boolean;
-  /**
-   * 비활성화 여부.
-   */
-  disabled: boolean;
-  /**
-   * 삭제 핸들러.
-   */
-  onClear: () => void;
-  /**
-   * 적용 핸들러.
-   */
-  onApply: () => void;
-}
+import type { TimePickerFooterProps } from "../types";
 
 /**
  * TimePicker Footer; 삭제와 적용 action을 렌더한다.

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

@@ -1,5 +1,5 @@
 import { SegmentedControl } from "../../segmented-control";
-import type { TimePickerFormat, TimePickerPeriod } from "../types";
+import type { TimePickerHourSectionProps } from "../types";
 
 const HOURS_12 = Array.from({ length: 12 }, (_, index) => index + 1);
 const HOURS_24 = Array.from({ length: 24 }, (_, index) => index);
@@ -8,33 +8,6 @@ const PERIOD_OPTIONS = [
   { value: "pm", label: "오후" },
 ];
 
-interface TimePickerHourSectionProps {
-  /**
-   * "12h" | "24h".
-   */
-  format: TimePickerFormat;
-  /**
-   * 선택한 표시 시.
-   */
-  selectedHour: number | null;
-  /**
-   * "am" | "pm".
-   */
-  period: TimePickerPeriod;
-  /**
-   * 비활성화 여부.
-   */
-  disabled: boolean;
-  /**
-   * 시 선택 핸들러.
-   */
-  onHourSelect: (hours: number) => void;
-  /**
-   * 오전·오후 변경 핸들러.
-   */
-  onPeriodChange: (period: TimePickerPeriod) => void;
-}
-
 /**
  * TimePicker Hour Section; 오전·오후와 시 선택 grid를 렌더한다.
  * @component

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

@@ -1,27 +1,9 @@
 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);
 
-interface TimePickerMinuteSectionProps {
-  /**
-   * 선택한 분.
-   */
-  selectedMinute: number | null;
-  /**
-   * 비활성화 여부.
-   */
-  disabled: boolean;
-  /**
-   * 1분 증감 핸들러.
-   */
-  onMinuteStep: (amount: 1 | -1) => void;
-  /**
-   * 분 선택 핸들러.
-   */
-  onMinuteSelect: (minutes: number) => void;
-}
-
 /**
  * TimePicker Minute Section; 1분 stepper와 5분 선택 grid를 렌더한다.
  * @component

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

@@ -1,9 +1,4 @@
-interface TimePickerSummaryProps {
-  /**
-   * 선택한 시간 표시값.
-   */
-  summary: string;
-}
+import type { TimePickerSummaryProps } from "../types";
 
 /**
  * TimePicker Summary; 현재 선택한 시간을 표시한다.