@uniai-fe/uds-primitives 0.2.10 → 0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

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";

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

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

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

@@ -0,0 +1,61 @@
+.info-box {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--info-box-gap-icon);
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--info-box-padding-block) var(--info-box-padding-inline);
+  border: 1px solid var(--info-box-border-color);
+  border-radius: var(--info-box-radius);
+  background-color: var(--info-box-background-color);
+}
+
+.info-box:where([data-state="info"]) {
+  // 변경: 기본 border 톤(color-mix)을 유지하고 아이콘/heading 컬러만 state로 고정한다.
+  --info-box-icon-color: var(--color-feedback-information);
+  --info-box-heading-color: var(--color-feedback-information);
+}
+
+.info-box-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  width: var(--info-box-icon-size);
+  height: var(--info-box-icon-size);
+  color: var(--info-box-icon-color);
+  flex-shrink: 0;
+}
+
+.info-box-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.info-box-content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--info-box-gap-contents);
+}
+
+.info-box-heading {
+  margin: 0;
+  color: var(--info-box-heading-color);
+  font-size: var(--info-box-heading-font-size);
+  line-height: var(--info-box-heading-line-height);
+  letter-spacing: var(--info-box-heading-letter-spacing);
+  font-weight: var(--info-box-heading-font-weight);
+}
+
+.info-box-body {
+  margin: 0;
+  color: var(--info-box-body-color);
+  font-size: var(--info-box-body-font-size);
+  line-height: var(--info-box-body-line-height);
+  letter-spacing: var(--info-box-body-letter-spacing);
+  font-weight: var(--info-box-body-font-weight);
+}

package/src/components/info-box/styles/variables.scss

@@ -0,0 +1,33 @@
+:root {
+  // 변경: 실사용 캡처 톤에 맞춰 info 배경/보더 대비를 부드럽게 조정한다.
+  --info-box-background-color: color-mix(
+    in srgb,
+    var(--color-feedback-information) 9%,
+    var(--color-common-100)
+  );
+  --info-box-border-color: color-mix(
+    in srgb,
+    var(--color-feedback-information) 24%,
+    var(--color-common-100)
+  );
+  --info-box-icon-color: var(--color-feedback-information);
+  --info-box-heading-color: var(--color-feedback-information);
+  --info-box-body-color: var(--color-label-strong);
+
+  --info-box-radius: var(--theme-radius-120x120);
+  --info-box-padding-block: var(--spacing-padding-6);
+  --info-box-padding-inline: var(--spacing-padding-6);
+  --info-box-gap-icon: var(--spacing-gap-4);
+  --info-box-gap-contents: var(--spacing-gap-3);
+  --info-box-icon-size: 24px;
+
+  --info-box-heading-font-size: var(--font-heading-xsmall-size);
+  --info-box-heading-line-height: var(--font-heading-xsmall-line-height);
+  --info-box-heading-letter-spacing: var(--font-heading-xsmall-letter-spacing);
+  --info-box-heading-font-weight: var(--font-heading-xsmall-weight);
+
+  --info-box-body-font-size: var(--font-body-small-size);
+  --info-box-body-line-height: var(--font-body-small-line-height);
+  --info-box-body-letter-spacing: var(--font-body-small-letter-spacing);
+  --info-box-body-font-weight: var(--font-body-small-weight);
+}

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

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

package/src/components/info-box/types/props.ts

@@ -0,0 +1,34 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+// 변경: 단일 state 단계에서는 리터럴 유니온 타입으로 직접 선언한다.
+export type InfoBoxState = "info" | "caution" | "success" | "error";
+
+type NativeSectionProps = Omit<ComponentPropsWithoutRef<"section">, "title">;
+
+/**
+ * InfoBox Props; info-box 루트 속성
+ * @property {"info" | "caution" | "success" | "error"} [state] state 값. 현재는 info만 허용한다.
+ * @property {ReactNode} [heading] 상단 제목 콘텐츠
+ * @property {ReactNode} [children] 본문 콘텐츠
+ * @property {string} [className] 루트 section className
+ * @see React.ComponentPropsWithoutRef<"section">
+ */
+export interface InfoBoxProps extends Omit<NativeSectionProps, "children"> {
+  /**
+   * state 값. 현재는 info만 허용한다.
+   * - info, caution, success, error
+   */
+  state?: InfoBoxState;
+  /**
+   * 상단 제목 콘텐츠
+   */
+  heading?: ReactNode;
+  /**
+   * 본문 콘텐츠
+   */
+  children?: ReactNode;
+  /**
+   * 루트 section className
+   */
+  className?: string;
+}

package/src/index.tsx

@@ -27,6 +27,7 @@ export * from "./components/alternate";
 export * from "./components/segmented-control";
 export * from "./components/divider";
 export * from "./components/slot";
+export * from "./components/info-box";
 export * from "./types";
 
 // 기타 도구