@uniai-fe/uds-primitives 0.6.0 → 0.6.1

package/README.md

@@ -53,10 +53,22 @@ export default function Page() {
 - `Alternate.LoadingDefault`
 - `Alternate.LoadingIcon`
 - `Alternate.Text`
+- `Alternate.Layout.Container`
+- `Alternate.Layout.Figure`
+- `Alternate.Layout.Title`
+- `Alternate.Layout.Contents`
+- `Alternate.Layout.TextButton`
+- `Alternate.Layout.Button`
 - `AlternateEmptyDataProps`
 - `AlternateLoadingDefaultProps`
 - `AlternateLoadingIconProps`
 - `AlternateTextProps`
+- `AlternateLayoutContainerProps`
+- `AlternateLayoutFigureProps`
+- `AlternateLayoutTitleProps`
+- `AlternateLayoutContentsProps`
+- `AlternateLayoutTextButtonProps`
+- `AlternateLayoutButtonProps`
 - `Badge`
 - `BadgeProps`
 - `Chip.Default`
@@ -422,10 +434,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 
 ```plaintext
 src/components/{category}/
-  markup/   // 컴포넌트 구현
-  types/    // 외부 노출 타입
-  styles/   // SCSS (foundation 토큰 기반)
-  hooks/    // 카테고리 전용 훅
+  markup|unit|layout/  // 컴포넌트 구현
+  types/               // 외부 노출 타입
+  styles/              // SCSS (foundation 토큰 기반)
+  hooks/               // 카테고리 전용 훅
 ```
 
 - 배럴(`components/{category}/index.tsx`)은 항상 `import "./index.scss"`를 포함합니다.

package/dist/styles.css

@@ -1,5 +1,32 @@
 @charset "UTF-8";
 :root {
+  --alternate-unit-text-color: var(--color-cool-gray-70);
+  --alternate-unit-text-font-size: 1.4rem;
+  --alternate-unit-text-line-height: 1.5;
+  --alternate-unit-gap: var(--spacing-gap-6);
+  --alternate-loading-icon-small-size: 2.4rem;
+  --alternate-loading-icon-medium-size: 3.6rem;
+  --alternate-loading-icon-large-size: 5.2rem;
+  --alternate-layout-min-block-size: 320px;
+  --alternate-layout-gap: var(--spacing-gap-7);
+  --alternate-layout-content-gap: var(--spacing-gap-4);
+  --alternate-layout-figure-size: 120px;
+  --alternate-layout-title-color: var(--color-label-strong);
+  --alternate-layout-title-font-size: var(--font-heading-small-size);
+  --alternate-layout-title-line-height: var(--font-heading-small-line-height);
+  --alternate-layout-title-letter-spacing: var(
+  --font-heading-small-letter-spacing
+  );
+  --alternate-layout-title-font-weight: var(--font-heading-small-weight);
+  --alternate-layout-contents-color: var(--color-label-neutral);
+  --alternate-layout-contents-font-size: var(--font-body-small-size);
+  --alternate-layout-contents-line-height: var(--font-body-small-line-height);
+  --alternate-layout-contents-letter-spacing: var(
+  --font-body-small-letter-spacing
+  );
+  --alternate-layout-contents-font-weight: var(--font-body-small-weight);
+  --alternate-layout-text-button-color: var(--color-primary-standard);
+  --alternate-layout-text-button-underline-offset: 0.2em;
   --theme-badge-height-xsmall: var(--theme-size-small-1);
   --theme-badge-height-small: var(--theme-size-small-2);
   /* 변경: Figma 2421:619 기준 medium 배지 높이 32px를 추가한다. */
@@ -821,17 +848,17 @@
   }
 }
 .empty-text {
-  font-size: 1.4rem;
-  color: var(--color-cool-gray-70);
-  line-height: 1.5;
+  color: var(--alternate-unit-text-color);
+  font-size: var(--alternate-unit-text-font-size);
+  line-height: var(--alternate-unit-text-line-height);
   word-break: keep-all;
   text-align: center;
 }
 
 .alternate-text {
-  font-size: 1.4rem;
-  color: var(--color-cool-gray-70);
-  line-height: 1.5;
+  color: var(--alternate-unit-text-color);
+  font-size: var(--alternate-unit-text-font-size);
+  line-height: var(--alternate-unit-text-line-height);
   word-break: keep-all;
   text-align: center;
 }
@@ -849,25 +876,25 @@
 }
 .alternate.is-horizontal.loading .empty-text {
   transform: translateY(0.2rem);
-  margin-left: 1rem;
+  margin-left: var(--alternate-unit-gap);
 }
 .alternate.is-horizontal.loading .alternate-text {
   transform: translateY(0.2rem);
-  margin-left: 1rem;
+  margin-left: var(--alternate-unit-gap);
 }
 .alternate.is-vertical {
   flex-direction: column;
 }
 .alternate.is-vertical .empty-text {
-  margin-top: 1rem;
+  margin-top: var(--alternate-unit-gap);
 }
 .alternate.is-vertical .alternate-text {
-  margin-top: 1rem;
+  margin-top: var(--alternate-unit-gap);
 }
 
 .alternate-loading-icon {
-  width: 2.4rem;
-  height: 2.4rem;
+  width: var(--alternate-loading-icon-small-size);
+  height: var(--alternate-loading-icon-small-size);
   position: relative;
   margin: 0;
   display: flex;
@@ -876,18 +903,81 @@
   animation: alternate-loading-spin 1s linear infinite;
 }
 .alternate-loading-icon.is-medium {
-  width: 3.6rem;
-  height: 3.6rem;
+  width: var(--alternate-loading-icon-medium-size);
+  height: var(--alternate-loading-icon-medium-size);
 }
 .alternate-loading-icon.is-large {
-  width: 5.2rem;
-  height: 5.2rem;
+  width: var(--alternate-loading-icon-large-size);
+  height: var(--alternate-loading-icon-large-size);
 }
 .alternate-loading-icon svg {
   width: 100%;
   height: 100%;
 }
 
+.alternate-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: var(--alternate-layout-min-block-size);
+  box-sizing: border-box;
+  gap: var(--alternate-layout-gap);
+  text-align: center;
+}
+
+.alternate-layout-figure {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--alternate-layout-figure-size);
+  height: var(--alternate-layout-figure-size);
+  margin: 0;
+}
+
+.alternate-layout-title {
+  margin: 0;
+  color: var(--alternate-layout-title-color);
+  font-size: var(--alternate-layout-title-font-size);
+  line-height: var(--alternate-layout-title-line-height);
+  letter-spacing: var(--alternate-layout-title-letter-spacing);
+  font-weight: var(--alternate-layout-title-font-weight);
+  word-break: keep-all;
+}
+
+.alternate-layout-contents {
+  max-width: 48rem;
+  margin: 0;
+  color: var(--alternate-layout-contents-color);
+  font-size: var(--alternate-layout-contents-font-size);
+  line-height: var(--alternate-layout-contents-line-height);
+  letter-spacing: var(--alternate-layout-contents-letter-spacing);
+  font-weight: var(--alternate-layout-contents-font-weight);
+  word-break: keep-all;
+}
+
+.alternate-layout-text-button {
+  display: inline;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--alternate-layout-text-button-color);
+  font: inherit;
+  text-decoration: underline;
+  text-underline-offset: var(--alternate-layout-text-button-underline-offset);
+  cursor: pointer;
+}
+
+.alternate-layout-text-button:where(:disabled) {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.alternate-layout-button {
+  flex-shrink: 0;
+}
+
 /* Badge 기본 토큰 래핑 */
 
 

package/package.json

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

package/src/components/alternate/{markup/index.tsx → Alternate.tsx}

@@ -1,7 +1,8 @@
-import AlternateEmptyData from "./empty/Data";
-import AlternateText from "./Label";
-import AlternateLoadingDefault from "./loading/Default";
-import AlternateLoadingIcon from "./loading/Icon";
+import AlternateLayout from "./layout/Layout";
+import AlternateEmptyData from "./unit/empty/Data";
+import AlternateText from "./unit/Text";
+import AlternateLoadingDefault from "./unit/loading/Default";
+import AlternateLoadingIcon from "./unit/loading/Icon";
 
 /**
  * Alternate; empty/loading fallback namespace
@@ -10,12 +11,14 @@ import AlternateLoadingIcon from "./loading/Icon";
  * - `Alternate.LoadingDefault`: 로딩 안내 레이아웃이다.
  * - `Alternate.LoadingIcon`: 단독 스피너 아이콘이다.
  * - `Alternate.Text`: 안내 문구 슬롯이다.
+ * - `Alternate.Layout`: edge-case 조합을 위한 anatomy namespace다.
  */
 const Alternate = {
   EmptyData: AlternateEmptyData,
   LoadingDefault: AlternateLoadingDefault,
   LoadingIcon: AlternateLoadingIcon,
   Text: AlternateText,
+  Layout: AlternateLayout,
 };
 
 export default Alternate;

package/src/components/alternate/index.tsx

@@ -5,6 +5,7 @@
  * - `Alternate.LoadingDefault`: 로딩 아이콘과 안내 문구를 함께 렌더링한다.
  * - `Alternate.LoadingIcon`: 단독 스피너 아이콘이다.
  * - `Alternate.Text`: fallback 문구 스타일 슬롯이다.
+ * - `Alternate.Layout`: edge-case 조합 anatomy다.
  */
-export { default as Alternate } from "./markup";
+export { default as Alternate } from "./Alternate";
 export type * from "./types";

package/src/components/alternate/layout/Button.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { clsx } from "clsx";
+import { Button } from "../../button";
+import type { AlternateLayoutButtonProps } from "../types";
+
+/**
+ * Alternate Layout Button; Button.Default preset adapter
+ * @component
+ * @param {AlternateLayoutButtonProps} props
+ * @param {React.ReactNode} [props.children] 버튼 라벨 또는 콘텐츠다.
+ * @param {string} [props.className] 버튼 className override다.
+ * @example
+ * <Alternate.Layout.Button as="a" href="/">홈으로 이동</Alternate.Layout.Button>
+ */
+export default function AlternateLayoutButton({
+  className,
+  ...buttonProps
+}: AlternateLayoutButtonProps) {
+  return (
+    <Button.Default
+      {...buttonProps}
+      className={clsx("alternate-layout-button", className)}
+      fill="outlined"
+      priority="secondary"
+      size="small"
+    />
+  );
+}

package/src/components/alternate/layout/Container.tsx

@@ -0,0 +1,24 @@
+import { clsx } from "clsx";
+import type { AlternateLayoutContainerProps } from "../types";
+
+/**
+ * Alternate Layout Container; edge-case anatomy 루트
+ * @component
+ * @param {AlternateLayoutContainerProps} props
+ * @param {string} [props.className] 루트 className override다.
+ * @param {React.ReactNode} [props.children] layout 내부 콘텐츠다.
+ * @example
+ * <Alternate.Layout.Container>
+ *   <Alternate.Layout.Title>데이터가 없습니다.</Alternate.Layout.Title>
+ * </Alternate.Layout.Container>
+ */
+export default function AlternateLayoutContainer({
+  className,
+  children,
+}: AlternateLayoutContainerProps) {
+  return (
+    <section className={clsx("alternate-layout", className)}>
+      {children}
+    </section>
+  );
+}

package/src/components/alternate/layout/Contents.tsx

@@ -0,0 +1,23 @@
+import { clsx } from "clsx";
+import { Slot } from "../../slot";
+import type { AlternateLayoutContentsProps } from "../types";
+
+/**
+ * Alternate Layout Contents; edge-case 본문
+ * @component
+ * @param {AlternateLayoutContentsProps} props
+ * @param {string} [props.className] 본문 className override다.
+ * @param {React.ReactNode} [props.children] 본문 콘텐츠다.
+ * @example
+ * <Alternate.Layout.Contents>다시 시도해 주세요.</Alternate.Layout.Contents>
+ */
+export default function AlternateLayoutContents({
+  className,
+  children,
+}: AlternateLayoutContentsProps) {
+  return (
+    <Slot.Text as="p" className={clsx("alternate-layout-contents", className)}>
+      {children}
+    </Slot.Text>
+  );
+}

package/src/components/alternate/layout/Figure.tsx

@@ -0,0 +1,24 @@
+import { clsx } from "clsx";
+import type { AlternateLayoutFigureProps } from "../types";
+
+/**
+ * Alternate Layout Figure; edge-case visual 영역
+ * @component
+ * @param {AlternateLayoutFigureProps} props
+ * @param {string} [props.className] figure className override다.
+ * @param {React.ReactNode} [props.children] 도입 측이 직접 제어하는 SVG, 이미지, 아이콘 콘텐츠다.
+ * @example
+ * <Alternate.Layout.Figure>
+ *   <img src="/empty.svg" alt="" />
+ * </Alternate.Layout.Figure>
+ */
+export default function AlternateLayoutFigure({
+  className,
+  children,
+}: AlternateLayoutFigureProps) {
+  return (
+    <figure className={clsx("alternate-layout-figure", className)}>
+      {children}
+    </figure>
+  );
+}

package/src/components/alternate/layout/Layout.tsx

@@ -0,0 +1,27 @@
+import AlternateLayoutButton from "./Button";
+import AlternateLayoutContainer from "./Container";
+import AlternateLayoutContents from "./Contents";
+import AlternateLayoutFigure from "./Figure";
+import AlternateLayoutTextButton from "./TextButton";
+import AlternateLayoutTitle from "./Title";
+
+/**
+ * Alternate Layout; edge-case anatomy namespace
+ * @desc
+ * - `Container`: 화면 상태 조합 루트다.
+ * - `Figure`: 도입 측이 제어하는 visual 영역이다.
+ * - `Title`: 제목 텍스트 영역이다.
+ * - `Contents`: 본문 텍스트 영역이다.
+ * - `TextButton`: paragraph 내부 text action이다.
+ * - `Button`: Button.Default 기반 action adapter다.
+ */
+const AlternateLayout = {
+  Container: AlternateLayoutContainer,
+  Figure: AlternateLayoutFigure,
+  Title: AlternateLayoutTitle,
+  Contents: AlternateLayoutContents,
+  TextButton: AlternateLayoutTextButton,
+  Button: AlternateLayoutButton,
+};
+
+export default AlternateLayout;

package/src/components/alternate/layout/TextButton.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { clsx } from "clsx";
+import type { AlternateLayoutTextButtonProps } from "../types";
+
+/**
+ * Alternate Layout TextButton; paragraph 내부 text action
+ * @component
+ * @param {AlternateLayoutTextButtonProps} props
+ * @param {string} [props.className] action className override다.
+ * @param {React.ReactNode} [props.children] action 라벨 콘텐츠다.
+ * @param {string} [props.href] 링크 action으로 렌더링할 href다.
+ * @param {string} [props.target] 링크 target 값이다.
+ * @example
+ * <Alternate.Layout.TextButton onClick={onRetry}>다시 시도</Alternate.Layout.TextButton>
+ */
+export default function AlternateLayoutTextButton({
+  className,
+  children,
+  href,
+  target,
+  type: typeProp,
+  ...htmlAttrs
+}: AlternateLayoutTextButtonProps) {
+  const textButtonClassName = clsx("alternate-layout-text-button", className);
+
+  if (href) {
+    return (
+      <a
+        className={textButtonClassName}
+        href={href}
+        target={target}
+        {...htmlAttrs}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  // 변경: href가 없으면 문장 내부 action을 native button으로 고정한다.
+  return (
+    <button
+      className={textButtonClassName}
+      type={typeProp ?? "button"}
+      {...htmlAttrs}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/alternate/layout/Title.tsx

@@ -0,0 +1,25 @@
+import { clsx } from "clsx";
+import { Slot } from "../../slot";
+import type { AlternateLayoutTitleProps } from "../types";
+
+/**
+ * Alternate Layout Title; edge-case 제목
+ * @component
+ * @param {AlternateLayoutTitleProps} props
+ * @param {React.ElementType} [props.as="strong"] 렌더링할 제목 요소다.
+ * @param {string} [props.className] 제목 className override다.
+ * @param {React.ReactNode} [props.children] 제목 콘텐츠다.
+ * @example
+ * <Alternate.Layout.Title as="h1">페이지를 찾을 수 없습니다.</Alternate.Layout.Title>
+ */
+export default function AlternateLayoutTitle({
+  as = "strong",
+  className,
+  children,
+}: AlternateLayoutTitleProps) {
+  return (
+    <Slot.Text as={as} className={clsx("alternate-layout-title", className)}>
+      {children}
+    </Slot.Text>
+  );
+}

package/src/components/alternate/layout/index.tsx

@@ -0,0 +1 @@
+export { default as AlternateLayout } from "./Layout";

package/src/components/alternate/styles/index.scss

@@ -1 +1,3 @@
-@forward "./alternate";
+@forward "./variables";
+@forward "./unit";
+@forward "./layout";

package/src/components/alternate/styles/layout.scss

@@ -0,0 +1,63 @@
+.alternate-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: var(--alternate-layout-min-block-size);
+  box-sizing: border-box;
+  gap: var(--alternate-layout-gap);
+  text-align: center;
+}
+
+.alternate-layout-figure {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--alternate-layout-figure-size);
+  height: var(--alternate-layout-figure-size);
+  margin: 0;
+}
+
+.alternate-layout-title {
+  margin: 0;
+  color: var(--alternate-layout-title-color);
+  font-size: var(--alternate-layout-title-font-size);
+  line-height: var(--alternate-layout-title-line-height);
+  letter-spacing: var(--alternate-layout-title-letter-spacing);
+  font-weight: var(--alternate-layout-title-font-weight);
+  word-break: keep-all;
+}
+
+.alternate-layout-contents {
+  max-width: 48rem;
+  margin: 0;
+  color: var(--alternate-layout-contents-color);
+  font-size: var(--alternate-layout-contents-font-size);
+  line-height: var(--alternate-layout-contents-line-height);
+  letter-spacing: var(--alternate-layout-contents-letter-spacing);
+  font-weight: var(--alternate-layout-contents-font-weight);
+  word-break: keep-all;
+}
+
+.alternate-layout-text-button {
+  // 변경: paragraph 내부 text action이라는 명시 계약에 따라 inline display 예외를 둔다.
+  display: inline;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--alternate-layout-text-button-color);
+  font: inherit;
+  text-decoration: underline;
+  text-underline-offset: var(--alternate-layout-text-button-underline-offset);
+  cursor: pointer;
+}
+
+.alternate-layout-text-button:where(:disabled) {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.alternate-layout-button {
+  flex-shrink: 0;
+}

package/src/components/alternate/styles/{alternate.scss → unit.scss}

@@ -9,17 +9,17 @@
 }
 
 .empty-text {
-  font-size: 1.4rem;
-  color: var(--color-cool-gray-70);
-  line-height: 1.5;
+  color: var(--alternate-unit-text-color);
+  font-size: var(--alternate-unit-text-font-size);
+  line-height: var(--alternate-unit-text-line-height);
   word-break: keep-all;
   text-align: center;
 }
 
 .alternate-text {
-  font-size: 1.4rem;
-  color: var(--color-cool-gray-70);
-  line-height: 1.5;
+  color: var(--alternate-unit-text-color);
+  font-size: var(--alternate-unit-text-font-size);
+  line-height: var(--alternate-unit-text-line-height);
   word-break: keep-all;
   text-align: center;
 }
@@ -38,11 +38,11 @@
     &.loading {
       .empty-text {
         transform: translateY(0.2rem);
-        margin-left: 1rem;
+        margin-left: var(--alternate-unit-gap);
       }
       .alternate-text {
         transform: translateY(0.2rem);
-        margin-left: 1rem;
+        margin-left: var(--alternate-unit-gap);
       }
     }
   }
@@ -50,17 +50,17 @@
   &.is-vertical {
     flex-direction: column;
     .empty-text {
-      margin-top: 1rem;
+      margin-top: var(--alternate-unit-gap);
     }
     .alternate-text {
-      margin-top: 1rem;
+      margin-top: var(--alternate-unit-gap);
     }
   }
 }
 
 .alternate-loading-icon {
-  width: 2.4rem;
-  height: 2.4rem;
+  width: var(--alternate-loading-icon-small-size);
+  height: var(--alternate-loading-icon-small-size);
   position: relative;
   margin: 0;
   display: flex;
@@ -69,13 +69,13 @@
   animation: alternate-loading-spin 1s linear infinite;
 
   &.is-medium {
-    width: 3.6rem;
-    height: 3.6rem;
+    width: var(--alternate-loading-icon-medium-size);
+    height: var(--alternate-loading-icon-medium-size);
   }
 
   &.is-large {
-    width: 5.2rem;
-    height: 5.2rem;
+    width: var(--alternate-loading-icon-large-size);
+    height: var(--alternate-loading-icon-large-size);
   }
 
   svg {

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

@@ -0,0 +1,30 @@
+:root {
+  --alternate-unit-text-color: var(--color-cool-gray-70);
+  --alternate-unit-text-font-size: 1.4rem;
+  --alternate-unit-text-line-height: 1.5;
+  --alternate-unit-gap: var(--spacing-gap-6);
+  --alternate-loading-icon-small-size: 2.4rem;
+  --alternate-loading-icon-medium-size: 3.6rem;
+  --alternate-loading-icon-large-size: 5.2rem;
+
+  --alternate-layout-min-block-size: 320px;
+  --alternate-layout-gap: var(--spacing-gap-7);
+  --alternate-layout-content-gap: var(--spacing-gap-4);
+  --alternate-layout-figure-size: 120px;
+  --alternate-layout-title-color: var(--color-label-strong);
+  --alternate-layout-title-font-size: var(--font-heading-small-size);
+  --alternate-layout-title-line-height: var(--font-heading-small-line-height);
+  --alternate-layout-title-letter-spacing: var(
+    --font-heading-small-letter-spacing
+  );
+  --alternate-layout-title-font-weight: var(--font-heading-small-weight);
+  --alternate-layout-contents-color: var(--color-label-neutral);
+  --alternate-layout-contents-font-size: var(--font-body-small-size);
+  --alternate-layout-contents-line-height: var(--font-body-small-line-height);
+  --alternate-layout-contents-letter-spacing: var(
+    --font-body-small-letter-spacing
+  );
+  --alternate-layout-contents-font-weight: var(--font-body-small-weight);
+  --alternate-layout-text-button-color: var(--color-primary-standard);
+  --alternate-layout-text-button-underline-offset: 0.2em;
+}

package/src/components/alternate/types/index.ts

@@ -1,77 +1,2 @@
-import type { ReactNode } from "react";
-
-/**
- * Alternate Direction; fallback 레이아웃 방향 축
- * @typedef {"vertical" | "horizontal"} AlternateDirection
- */
-export type AlternateDirection = "vertical" | "horizontal";
-
-/**
- * Alternate Loading Icon Size; 로딩 아이콘 스케일 축
- * @typedef {"small" | "medium" | "large"} AlternateLoadingIconSize
- */
-export type AlternateLoadingIconSize = "small" | "medium" | "large";
-
-/**
- * Alternate Text Props; fallback 문구 슬롯 props
- * @property {ReactNode} children 렌더링할 문구 콘텐츠다.
- */
-export interface AlternateTextProps {
-  /**
-   * 렌더링할 문구 콘텐츠다.
-   */
-  children: ReactNode;
-}
-
-/**
- * Alternate Empty Data Props; 빈 데이터 안내 레이아웃 props
- * @property {string} [className] 루트 className override다.
- * @property {"vertical" | "horizontal"} [direction] 아이콘/문구 배치 방향이다.
- * @property {ReactNode} [children] 안내 문구 콘텐츠다.
- */
-export interface AlternateEmptyDataProps {
-  /**
-   * 루트 className override다.
-   */
-  className?: string;
-  /**
-   * 아이콘/문구 배치 방향이다.
-   */
-  direction?: AlternateDirection;
-  /**
-   * 안내 문구 콘텐츠다.
-   */
-  children?: ReactNode;
-}
-
-/**
- * Alternate Loading Default Props; 로딩 안내 레이아웃 props
- * @property {"vertical" | "horizontal"} [direction] 아이콘/문구 배치 방향이다.
- * @property {ReactNode} [children] 안내 문구 콘텐츠다.
- */
-export interface AlternateLoadingDefaultProps {
-  /**
-   * 아이콘/문구 배치 방향이다.
-   */
-  direction?: AlternateDirection;
-  /**
-   * 안내 문구 콘텐츠다.
-   */
-  children?: ReactNode;
-}
-
-/**
- * Alternate Loading Icon Props; 단독 스피너 아이콘 props
- * @property {"small" | "medium" | "large"} [size] 로딩 아이콘 스케일이다.
- * @property {"vertical" | "horizontal"} [direction] 부모 레이아웃 방향 클래스 동기화용 값이다.
- */
-export interface AlternateLoadingIconProps {
-  /**
-   * 로딩 아이콘 스케일이다.
-   */
-  size?: AlternateLoadingIconSize;
-  /**
-   * 부모 레이아웃 방향 클래스 동기화용 값이다.
-   */
-  direction?: AlternateDirection;
-}
+export type * from "./unit";
+export type * from "./layout";

package/src/components/alternate/types/layout.ts

@@ -0,0 +1,126 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import type { ButtonProps } from "../../button/types";
+
+/**
+ * Alternate Layout Container Props; edge-case anatomy 루트 props
+ * @property {string} [className] 루트 className override다.
+ * @property {ReactNode} [children] layout 내부 콘텐츠다.
+ */
+export interface AlternateLayoutContainerProps {
+  /**
+   * 루트 className override다.
+   */
+  className?: string;
+  /**
+   * layout 내부 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Layout Figure Props; figure 영역 props
+ * @property {string} [className] figure className override다.
+ * @property {ReactNode} [children] 도입 측이 직접 제어하는 SVG, 이미지, 아이콘 콘텐츠다.
+ */
+export interface AlternateLayoutFigureProps {
+  /**
+   * figure className override다.
+   */
+  className?: string;
+  /**
+   * 도입 측이 직접 제어하는 SVG, 이미지, 아이콘 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Layout Title Props; 제목 텍스트 props
+ * @property {ElementType} [as] 렌더링할 제목 요소다. 기본값은 strong이다.
+ * @property {string} [className] 제목 className override다.
+ * @property {ReactNode} [children] 제목 콘텐츠다.
+ */
+export interface AlternateLayoutTitleProps {
+  /**
+   * 렌더링할 제목 요소다.
+   * 기본값은 strong이다.
+   */
+  as?: ElementType;
+  /**
+   * 제목 className override다.
+   */
+  className?: string;
+  /**
+   * 제목 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Layout Contents Props; 본문 텍스트 props
+ * @property {string} [className] 본문 className override다.
+ * @property {ReactNode} [children] 본문 콘텐츠다.
+ */
+export interface AlternateLayoutContentsProps {
+  /**
+   * 본문 className override다.
+   */
+  className?: string;
+  /**
+   * 본문 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Layout Text Button Native Props; 문장 내부 action native props
+ */
+type AlternateLayoutTextButtonNativeProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "children" | "className"
+> &
+  Omit<ComponentPropsWithoutRef<"a">, "children" | "className">;
+
+/**
+ * Alternate Layout Text Button Props; 문장 내부 action props
+ * @property {string} [className] action className override다.
+ * @property {ReactNode} [children] action 라벨 콘텐츠다.
+ * @property {string} [href] 링크 action으로 렌더링할 href다.
+ * @property {string} [target] 링크 target 값이다.
+ */
+export interface AlternateLayoutTextButtonProps extends AlternateLayoutTextButtonNativeProps {
+  /**
+   * action className override다.
+   */
+  className?: string;
+  /**
+   * action 라벨 콘텐츠다.
+   */
+  children?: ReactNode;
+  /**
+   * 링크 action으로 렌더링할 href다.
+   */
+  href?: string;
+  /**
+   * 링크 target 값이다.
+   */
+  target?: string;
+}
+
+/**
+ * Alternate Layout Button Props; Button.Default adapter props
+ * @extends ButtonProps
+ * @property {ElementType} [as] 렌더링할 요소다.
+ * @property {ReactNode} [children] 버튼 라벨 또는 콘텐츠다.
+ * @property {string} [className] 버튼 className override다.
+ * @property {"default" | "readonly" | "disabled"} [state] UI 상태다.
+ * @property {boolean} [block] width:100% 확장 여부다.
+ * @property {"full" | "fit" | "fill" | "auto" | number | string} [width] Form.Field width preset 또는 custom width다.
+ * @property {boolean} [loading] true면 readonly 상태로 렌더링한다.
+ * @property {ReactNode} [left] 라벨 왼쪽 콘텐츠다.
+ * @property {ReactNode} [right] 라벨 오른쪽 콘텐츠다.
+ * @property {"hover" | "pressed"} ["data-user-action"] Interaction 상태 강제 표현용 data attr이다.
+ */
+export interface AlternateLayoutButtonProps extends Omit<
+  ButtonProps,
+  "fill" | "priority" | "size" | "scale"
+> {}

package/src/components/alternate/types/unit.ts

@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+
+/**
+ * Alternate Direction; fallback 레이아웃 방향 축
+ * @typedef {"vertical" | "horizontal"} AlternateDirection
+ */
+export type AlternateDirection = "vertical" | "horizontal";
+
+/**
+ * Alternate Loading Icon Size; 로딩 아이콘 스케일 축
+ * @typedef {"small" | "medium" | "large"} AlternateLoadingIconSize
+ */
+export type AlternateLoadingIconSize = "small" | "medium" | "large";
+
+/**
+ * Alternate Text Props; fallback 문구 슬롯 props
+ * @property {ReactNode} children 렌더링할 문구 콘텐츠다.
+ */
+export interface AlternateTextProps {
+  /**
+   * 렌더링할 문구 콘텐츠다.
+   */
+  children: ReactNode;
+}
+
+/**
+ * Alternate Empty Data Props; 빈 데이터 안내 레이아웃 props
+ * @property {string} [className] 루트 className override다.
+ * @property {"vertical" | "horizontal"} [direction] 아이콘/문구 배치 방향이다.
+ * @property {ReactNode} [children] 안내 문구 콘텐츠다.
+ */
+export interface AlternateEmptyDataProps {
+  /**
+   * 루트 className override다.
+   */
+  className?: string;
+  /**
+   * 아이콘/문구 배치 방향이다.
+   */
+  direction?: AlternateDirection;
+  /**
+   * 안내 문구 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Loading Default Props; 로딩 안내 레이아웃 props
+ * @property {"vertical" | "horizontal"} [direction] 아이콘/문구 배치 방향이다.
+ * @property {ReactNode} [children] 안내 문구 콘텐츠다.
+ */
+export interface AlternateLoadingDefaultProps {
+  /**
+   * 아이콘/문구 배치 방향이다.
+   */
+  direction?: AlternateDirection;
+  /**
+   * 안내 문구 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Loading Icon Props; 단독 스피너 아이콘 props
+ * @property {"small" | "medium" | "large"} [size] 로딩 아이콘 스케일이다.
+ * @property {"vertical" | "horizontal"} [direction] 부모 레이아웃 방향 클래스 동기화용 값이다.
+ */
+export interface AlternateLoadingIconProps {
+  /**
+   * 로딩 아이콘 스케일이다.
+   */
+  size?: AlternateLoadingIconSize;
+  /**
+   * 부모 레이아웃 방향 클래스 동기화용 값이다.
+   */
+  direction?: AlternateDirection;
+}

package/src/components/alternate/{markup → unit}/empty/Data.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { clsx } from "clsx";
-import AlternateText from "../Label";
+import AlternateText from "../Text";
 import type { AlternateEmptyDataProps } from "../../types";
 
 /**

package/src/components/alternate/{markup → unit}/loading/Default.tsx

@@ -2,7 +2,7 @@
 
 import { clsx } from "clsx";
 import AlternateLoadingIcon from "./Icon";
-import AlternateText from "../Label";
+import AlternateText from "../Text";
 import type { AlternateLoadingDefaultProps } from "../../types";
 
 /**