@uniai-fe/uds-primitives 0.2.9 → 0.2.11

package/dist/styles.css

@@ -228,6 +228,17 @@
   --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
   --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
   --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
+  --tooltip-message-background: var(--color-cool-gray-20);
+  --tooltip-message-foreground: var(--color-common-100);
+  --tooltip-message-radius: var(--theme-radius-medium-3);
+  --tooltip-message-padding-inline: var(--spacing-padding-5);
+  --tooltip-message-padding-block: var(--spacing-padding-4);
+  --tooltip-message-font-size: var(--font-caption-large-size);
+  --tooltip-message-line-height: var(--font-caption-large-line-height);
+  --tooltip-message-letter-spacing: var(--font-caption-large-letter-spacing);
+  --tooltip-message-font-weight: 400;
+  --tooltip-trigger-icon-size: 16px;
+  --tooltip-trigger-icon-color: var(--color-label-alternative);
   /* Layout presets */
   --input-width: 100%;
   --input-flex: 0 1 auto;
@@ -241,6 +252,16 @@
   --input-default-gap: var(--spacing-gap-4);
   --input-default-radius-base: var(--theme-radius-large-1);
   --input-tertiary-radius-base: var(--theme-radius-large-2);
+  --input-table-radius-base: 0;
+  --input-table-text-small-size: var(--font-body-xxsmall-size);
+  --input-table-text-small-line-height: var(--font-body-xxsmall-line-height);
+  --input-table-text-small-weight: var(--font-body-xxsmall-weight);
+  --input-table-text-medium-size: var(--font-body-xsmall-size);
+  --input-table-text-medium-line-height: var(--font-body-xsmall-line-height);
+  --input-table-text-medium-weight: var(--font-body-xsmall-weight);
+  --input-table-text-large-size: var(--font-body-small-size);
+  --input-table-text-large-line-height: var(--font-body-small-line-height);
+  --input-table-text-large-weight: var(--font-body-small-weight);
   /* Label/helper colors */
   --input-label-color: var(--color-label-standard);
   --input-label-accent-color: var(--color-primary-default);
@@ -258,6 +279,7 @@
   --input-border-width-emphasis: 1.4px;
   --input-border-active-color: var(--color-blue-80);
   --input-border-success-color: var(--color-blue-80);
+  --input-border-table-default-color: transparent;
   /* error는 Figma 44% alpha */
   --input-border-error-color: rgba(218, 29, 11, 0.44);
   --input-border-disabled-color: var(--color-border-standard-cool-gray);
@@ -286,6 +308,32 @@
   --select-secondary-gap: var(--spacing-gap-2);
   --select-secondary-underline-width-default: 1px;
   --select-secondary-underline-width-focus: 1.4px;
+  --select-table-radius: var(--input-table-radius-base);
+  --select-table-border-default-color: var(--input-border-table-default-color);
+  --select-table-border-focus-color: var(--input-border-active-color);
+  --select-table-border-disabled-color: var(--input-border-disabled-color);
+  --select-table-surface-color: transparent;
+  --select-table-surface-disabled-color: var(--input-surface-disabled-color);
+  --select-table-color-text: var(--input-text-color);
+  --select-table-color-placeholder: var(--input-placeholder-color);
+  --select-table-icon-color-default: var(--select-icon-color-default);
+  --select-table-icon-color-focused: var(--select-icon-color-focused);
+  --select-table-icon-color-disabled: var(--select-icon-color-disabled);
+  --select-table-text-small-size: var(--input-table-text-small-size);
+  --select-table-text-small-line-height: var(
+  --input-table-text-small-line-height
+  );
+  --select-table-text-small-weight: var(--input-table-text-small-weight);
+  --select-table-text-medium-size: var(--input-table-text-medium-size);
+  --select-table-text-medium-line-height: var(
+  --input-table-text-medium-line-height
+  );
+  --select-table-text-medium-weight: var(--input-table-text-medium-weight);
+  --select-table-text-large-size: var(--input-table-text-large-size);
+  --select-table-text-large-line-height: var(
+  --input-table-text-large-line-height
+  );
+  --select-table-text-large-weight: var(--input-table-text-large-weight);
   --select-text-small-size: 15px;
   --select-text-small-line-height: 1.4;
   --select-text-small-letter-spacing: 0.2px;
@@ -402,6 +450,28 @@
   --theme-radio-card-badge-color: var(--color-primary-default);
   --theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-radio-disabled-selected-opacity: 0.28;
+  --table-border-color: var(--color-border-standard-cool-gray);
+  --table-line-head-background-color: var(--color-surface-static-cool-gray);
+  --table-grid-head-background-color: var(
+  --color-background-alternative-cool-gray
+  );
+  --table-cell-background-color: var(--color-surface-static-white);
+  --table-line-cell-height-head: 44px;
+  --table-line-cell-height-body: 56px;
+  --table-grid-cell-height: 48px;
+  --table-grid-border-radius: var(--theme-radius-large-1);
+  --table-line-cell-padding-inline: var(--spacing-padding-6);
+  --table-line-cell-padding-block: 9px;
+  --table-grid-cell-padding-inline: var(--spacing-padding-6);
+  --table-grid-cell-padding-block: 9px;
+  --table-th-text-color: var(--color-label-standard);
+  --table-th-text-size: 13px;
+  --table-th-text-weight: var(--font-label-small-weight);
+  --table-th-text-line-height: var(--font-label-small-line-height);
+  --table-td-text-color: var(--color-label-standard);
+  --table-td-text-size: 15px;
+  --table-td-text-weight: var(--font-body-xsmall-weight);
+  --table-td-text-line-height: var(--font-body-xsmall-line-height);
   --divider-width: 1px;
   --divider-height: 12px;
   --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
@@ -1911,6 +1981,55 @@ figure.chip {
 
 
 
+.tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip-template-trigger {
+  display: inline-flex;
+  width: var(--tooltip-trigger-icon-size);
+  height: var(--tooltip-trigger-icon-size);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--tooltip-trigger-icon-color);
+  cursor: pointer;
+}
+
+.tooltip-template-trigger svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.tooltip-message {
+  max-width: min(20rem, 100vw - 1.5rem);
+  box-sizing: border-box;
+  border-radius: var(--tooltip-message-radius);
+  background-color: var(--tooltip-message-background);
+  padding: var(--tooltip-message-padding-block) var(--tooltip-message-padding-inline);
+}
+
+.tooltip-message-text {
+  display: block;
+  color: var(--tooltip-message-foreground);
+  font-size: var(--tooltip-message-font-size);
+  line-height: var(--tooltip-message-line-height);
+  letter-spacing: var(--tooltip-message-letter-spacing);
+  font-weight: var(--tooltip-message-font-weight);
+  white-space: normal;
+}
+
+.tooltip-message-arrow {
+  fill: var(--tooltip-message-background);
+}
+
+
+
 .input {
   display: flex;
   flex-direction: column;
@@ -2043,6 +2162,11 @@ figure.chip {
   align-self: center;
   margin-left: 0;
 }
+.input-field[data-priority=table] {
+  border-radius: var(--input-table-radius-base);
+  border-color: var(--input-border-table-default-color);
+  background-color: transparent;
+}
 .input-field:not([data-priority=secondary])[data-state=active], .input-field:not([data-priority=secondary])[data-state=focused] {
   border-color: var(--input-border-active-color);
   border-width: var(--input-border-width-emphasis);
@@ -2125,6 +2249,24 @@ figure.chip {
   min-height: var(--theme-size-medium-2);
 }
 
+.input-field[data-priority=table][data-size=small] .input-element {
+  font-size: var(--input-table-text-small-size);
+  line-height: var(--input-table-text-small-line-height);
+  font-weight: var(--input-table-text-small-weight);
+}
+
+.input-field[data-priority=table][data-size=medium] .input-element {
+  font-size: var(--input-table-text-medium-size);
+  line-height: var(--input-table-text-medium-line-height);
+  font-weight: var(--input-table-text-medium-weight);
+}
+
+.input-field[data-priority=table][data-size=large] .input-element {
+  font-size: var(--input-table-text-large-size);
+  line-height: var(--input-table-text-large-line-height);
+  font-weight: var(--input-table-text-large-weight);
+}
+
 .input-helper-text {
   color: var(--input-helper-color);
   font-size: var(--font-label-small-size);
@@ -2211,6 +2353,9 @@ figure.chip {
 .input[data-state=disabled] .input-field[data-priority=secondary] {
   background-color: transparent;
 }
+.input[data-state=disabled] .input-field[data-priority=table] {
+  background-color: transparent;
+}
 
 .input-side {
   display: flex;
@@ -2326,6 +2471,21 @@ figure.chip {
   pointer-events: none;
 }
 
+.input-date-trigger-input.input-priority-table .input-field {
+  padding-inline: var(--spacing-padding-4);
+}
+.input-date-trigger-input.input-priority-table .input-field-control {
+  gap: var(--spacing-gap-3);
+}
+.input-date-trigger-input.input-priority-table .input-element {
+  font-size: var(--font-body-xsmall-size);
+  line-height: var(--font-body-xsmall-line-height);
+  font-weight: var(--font-body-xsmall-weight);
+}
+.input-date-trigger-input.input-priority-table .input-date-trigger-icon {
+  color: var(--color-label-alternative);
+}
+
 .input-date-footer-template {
   display: grid;
   gap: var(--spacing-gap-5);
@@ -2521,11 +2681,22 @@ figure.chip {
   color: var(--color-label-disabled);
   cursor: not-allowed;
 }
+.select-button[data-priority=table] {
+  border-radius: var(--select-table-radius);
+  border-color: var(--select-table-border-default-color);
+  background-color: var(--select-table-surface-color);
+  --select-icon-fill: var(--select-table-icon-color-default);
+}
 .select-button:not([data-priority=secondary])[data-state=focused], .select-button:not([data-priority=secondary])[data-open=true], .select-button:not([data-priority=secondary]):focus-visible {
   border-color: var(--select-primary-color-border-focused);
   border-width: var(--select-primary-border-width-focus);
   --select-icon-fill: var(--select-icon-color-focused);
 }
+.select-button[data-priority=table][data-state=focused], .select-button[data-priority=table][data-open=true], .select-button[data-priority=table]:focus-visible {
+  border-color: var(--select-table-border-focus-color);
+  border-width: var(--select-primary-border-width-focus);
+  --select-icon-fill: var(--select-table-icon-color-focused);
+}
 .select-button:not([data-priority=secondary])[data-state=disabled], .select-button:not([data-priority=secondary]):disabled {
   border-color: var(--select-primary-color-border-disabled);
   background-color: var(--select-primary-color-surface-disabled);
@@ -2540,6 +2711,12 @@ figure.chip {
   background-color: var(--select-color-border-secondary-disabled);
   height: var(--select-secondary-underline-width-default);
 }
+.select-button[data-priority=table][data-state=disabled], .select-button[data-priority=table]:disabled {
+  border-color: var(--select-table-border-disabled-color);
+  background-color: var(--select-table-surface-disabled-color);
+  cursor: not-allowed;
+  --select-icon-fill: var(--select-table-icon-color-disabled);
+}
 
 .select-value {
   flex: 1 1 auto;
@@ -2565,6 +2742,9 @@ figure.chip {
 .select-button[data-priority=secondary] .select-label {
   color: var(--select-secondary-color-text);
 }
+.select-button[data-priority=table] .select-label {
+  color: var(--select-table-color-text);
+}
 .select-button[data-state=focused] .select-label, .select-button[data-open=true] .select-label {
   color: var(--select-primary-color-text-focused);
 }
@@ -2581,6 +2761,9 @@ figure.chip {
 .select-button[data-priority=secondary] .select-label-placeholder {
   color: var(--select-secondary-color-placeholder);
 }
+.select-button[data-priority=table] .select-label-placeholder {
+  color: var(--select-table-color-placeholder);
+}
 
 .select-button[data-size=small] .select-label {
   font-size: var(--select-text-small-size);
@@ -2589,6 +2772,12 @@ figure.chip {
   font-weight: var(--select-text-small-weight);
 }
 
+.select-button[data-priority=table][data-size=small] .select-label {
+  font-size: var(--select-table-text-small-size);
+  line-height: var(--select-table-text-small-line-height);
+  font-weight: var(--select-table-text-small-weight);
+}
+
 .select-button[data-size=large] .select-label {
   font-size: var(--select-text-large-size);
   line-height: var(--select-text-large-line-height);
@@ -2596,6 +2785,18 @@ figure.chip {
   font-weight: var(--select-text-large-weight);
 }
 
+.select-button[data-priority=table][data-size=medium] .select-label {
+  font-size: var(--select-table-text-medium-size);
+  line-height: var(--select-table-text-medium-line-height);
+  font-weight: var(--select-table-text-medium-weight);
+}
+
+.select-button[data-priority=table][data-size=large] .select-label {
+  font-size: var(--select-table-text-large-size);
+  line-height: var(--select-table-text-large-line-height);
+  font-weight: var(--select-table-text-large-weight);
+}
+
 .select-button[data-priority=secondary][data-size=large] .select-label {
   font-weight: 600;
 }
@@ -3559,6 +3760,220 @@ figure.chip {
   padding: var(--spacing-padding-6) 0;
 }
 
+
+
+.table.table-container {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table.table-container .table-native-cell.table-th,
+.table.table-container .table-native-cell.table-td {
+  vertical-align: middle;
+  background-color: var(--table-cell-background-color);
+  text-align: left;
+}
+
+.table.table-container[data-layout=line] .table-native-cell.table-th,
+.table.table-container[data-layout=line] .table-native-cell.table-td {
+  --table-cell-padding-inline: var(--table-line-cell-padding-inline);
+  --table-cell-padding-block: var(--table-line-cell-padding-block);
+  border-bottom: 1px solid var(--table-border-color);
+}
+
+.table.table-container[data-layout=line] .table-head .table-native-cell.table-th {
+  height: var(--table-line-cell-height-head);
+  border-top: 1px solid var(--table-border-color);
+  background-color: var(--table-line-head-background-color);
+}
+
+.table.table-container[data-layout=line] .table-body .table-native-cell.table-td,
+.table.table-container[data-layout=line] .table-foot .table-native-cell.table-td {
+  height: var(--table-line-cell-height-body);
+}
+
+.table.table-container[data-layout=grid] .table-native-cell.table-th,
+.table.table-container[data-layout=grid] .table-native-cell.table-td {
+  --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
+  --table-cell-padding-block: var(--table-grid-cell-padding-block);
+  border: 1px solid var(--table-border-color);
+  height: var(--table-grid-cell-height);
+}
+
+.table.table-container[data-layout=grid] {
+  border-radius: var(--table-grid-border-radius);
+  overflow: hidden;
+}
+
+.table.table-container[data-layout=grid] .table-head .table-native-cell.table-th {
+  background-color: var(--table-grid-head-background-color);
+}
+
+.table-native-cell.table-th .table-native-cell-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+.table-native-cell.table-td .table-native-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+.table-cell-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  padding-inline: var(--table-cell-padding-inline);
+  padding-block: var(--table-cell-padding-block);
+}
+
+.table-cell-content[data-padding=none] {
+  padding: 0;
+}
+
+.table-cell-content[data-no-padding=true] {
+  padding: 0;
+}
+
+.table-cell-content[data-padding=default] .input[data-priority=table] {
+  width: calc(100% + var(--table-cell-padding-inline) * 2);
+  height: 100%;
+  min-height: calc(100% + var(--table-cell-padding-block) * 2);
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+  flex: 1 1 auto;
+}
+
+.table-cell-content[data-padding=default] :where(.input[data-priority=table] .input-box),
+.table-cell-content[data-padding=default] :where(.input[data-priority=table] .input-field) {
+  width: 100%;
+  height: 100%;
+}
+
+.table-cell-content[data-padding=default] .input-date-field {
+  width: calc(100% + var(--table-cell-padding-inline) * 2);
+  height: 100%;
+  min-height: calc(100% + var(--table-cell-padding-block) * 2);
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+}
+
+.table-cell-content[data-padding=default] :where(.select.select-container) {
+  width: calc(100% + var(--table-cell-padding-inline) * 2);
+  height: 100%;
+  min-height: calc(100% + var(--table-cell-padding-block) * 2);
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+  flex: 1 1 auto;
+}
+
+.table-cell-content[data-padding=default] :where(.select.select-container .select-button) {
+  width: 100%;
+  height: 100%;
+}
+
+.table-cell-content[data-padding=none] :where(.input[data-priority=table],
+.input[data-priority=table] .input-box,
+.input[data-priority=table] .input-field,
+.input-date-field,
+.select.select-container,
+.select.select-container .select-button),
+.table-cell-content[data-no-padding=true] :where(.input[data-priority=table],
+.input[data-priority=table] .input-box,
+.input[data-priority=table] .input-field,
+.input-date-field,
+.select.select-container,
+.select.select-container .select-button) {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+.table-cell-content .table-cell-text {
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.table-cell-content[data-align-x=left],
+.table-cell-content[data-align=left] {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.table-cell-content[data-align-x=center],
+.table-cell-content[data-align=center] {
+  justify-content: center;
+  text-align: center;
+}
+
+.table-cell-content[data-align-x=right],
+.table-cell-content[data-align=right] {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.table-cell-content[data-align-y=top] {
+  align-items: flex-start;
+}
+
+.table-cell-content[data-align-y=center] {
+  align-items: center;
+}
+
+.table-cell-content[data-align-y=bottom] {
+  align-items: flex-end;
+}
+
+.table-cell.table-head-cell .table-cell-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+.table-cell .input[data-priority=table] .input-element,
+.table-cell .select.select-container .select-button[data-priority=table] .select-label,
+.table-cell .select.select-container .select-button[data-priority=table] .select-label-placeholder {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+.table-cell.table-head-cell .radio-label-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+.table-cell.table-body-cell .table-cell-text,
+.table-cell.table-foot-cell .table-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+.table-cell.table-body-cell .radio-label-text,
+.table-cell.table-foot-cell .radio-label-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
 /* Divider 토큰도 전역 :root 범위에 선언한다. */
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -72,6 +72,7 @@
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",

package/src/components/calendar/types/calendar.ts

@@ -35,6 +35,7 @@ export type CalendarOnChange = (value: CalendarValue) => void;
 /**
  * Mantine DatePicker 공개 옵션.
  * @property {Partial<Record<DatePickerStylesNames, string>>} [classNames] Mantine 내부 스타일 클래스 매핑
+ * @property {string} [valueFormat] DatePicker 표시 포맷
  */
 export type CalendarDatePickerProps = Partial<
   Omit<
@@ -48,6 +49,10 @@ export type CalendarDatePickerProps = Partial<
     | "styles"
   >
 > & {
+  /**
+   * DatePicker 표시 포맷
+   */
+  valueFormat?: string;
   /**
    * Mantine 내부 스타일 classNames override.
    */

package/src/components/info-box/img/ban.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="9.2" fill="#313235" stroke="#313235" stroke-width="1.6"/>
+<path d="M9.00005 9L15 14.9999" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M15 9L9.00001 14.9999" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+</svg>

package/src/components/info-box/img/caution.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" fill="#313235"/>
+<path d="M12 8V13" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+<circle cx="12" cy="16" r="1" fill="white"/>
+</svg>

package/src/components/info-box/img/check.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" fill="#313235"/>
+<path d="M7.75735 11.3032L10.9393 14.4852L16.2426 9.1819" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/info-box/img/info.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" fill="#1A6AFF"/>
+<path d="M12 17V10H10" stroke="white" stroke-width="1.6"/>
+<path d="M10.5 17H13.5" stroke="white" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round"/>
+<circle cx="12" cy="7" r="0.5" fill="white" stroke="white"/>
+</svg>

package/src/components/info-box/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/info-box/index.tsx

@@ -0,0 +1,4 @@
+import "./index.scss";
+
+export * from "./markup";
+export * from "./types";

package/src/components/info-box/markup/Icon.tsx

@@ -0,0 +1,14 @@
+import BanIcon from "../img/ban.svg";
+import CautionIcon from "../img/caution.svg";
+import CheckIcon from "../img/check.svg";
+import InfoIcon from "../img/info.svg";
+
+/**
+ * InfoBox Icon Set; 상태별 아이콘 컴포넌트 맵
+ */
+export const InfoBoxIcon = {
+  info: InfoIcon,
+  check: CheckIcon,
+  caution: CautionIcon,
+  ban: BanIcon,
+} as const;

package/src/components/info-box/markup/InfoBox.tsx

@@ -0,0 +1,65 @@
+import clsx from "clsx";
+import { createElement, forwardRef } from "react";
+import type { InfoBoxProps } from "../types";
+import { InfoBoxIcon } from "./Icon";
+
+/**
+ * InfoBox Component; 안내 메시지 전용 정보 박스
+ * @component
+ * @param {InfoBoxProps} props
+ * @param {"info"} [props.state="info"] 현재는 info 상태만 지원한다.
+ * @param {React.ReactNode} [props.heading] 상단 제목 영역.
+ * @param {React.ReactNode} [props.children] 본문 콘텐츠.
+ * @param {string} [props.className] 루트 section className.
+ * @example
+ * <InfoBox heading="안내">설정 후 저장 버튼을 눌러주세요.</InfoBox>
+ */
+const InfoBox = forwardRef<HTMLElementTagNameMap["section"], InfoBoxProps>(
+  (
+    { state = "info", heading, children, className, role, ...restProps },
+    ref,
+  ) => {
+    return (
+      <section
+        {...restProps}
+        ref={ref}
+        className={clsx("info-box", className)}
+        data-state={state}
+        // 변경: 기본 role은 인라인으로 note를 적용한다.
+        role={role ?? "note"}
+      >
+        {/* 변경: 아이콘은 figure 래퍼 내부에서 상태별 Icon.tsx 맵으로 렌더링한다. */}
+        <figure className="info-box-icon" aria-hidden="true">
+          {createElement(
+            // 변경: InfoBoxState(success/error)를 아이콘 키(check/ban)와 명시적으로 매핑한다.
+            InfoBoxIcon[
+              state === "success" ? "check" : state === "error" ? "ban" : state
+            ],
+          )}
+        </figure>
+        <div className="info-box-content">
+          {heading ? (
+            ["string", "number"].includes(typeof heading) ? (
+              // 변경: 텍스트 heading은 p 태그로 감싼다.
+              <p className="info-box-heading">{heading}</p>
+            ) : (
+              heading
+            )
+          ) : null}
+          {children ? (
+            ["string", "number"].includes(typeof children) ? (
+              // 변경: 텍스트 본문은 p 태그로 감싼다.
+              <p className="info-box-body">{children}</p>
+            ) : (
+              <div className="info-box-body">{children}</div>
+            )
+          ) : null}
+        </div>
+      </section>
+    );
+  },
+);
+
+InfoBox.displayName = "InfoBox.Root";
+
+export default InfoBox;

package/src/components/info-box/markup/index.ts

@@ -0,0 +1,2 @@
+export { default as InfoBox } from "./InfoBox";
+export * from "./Icon";