@uniai-fe/uds-templates 0.12.4 → 0.12.6

package/dist/styles.css

@@ -2360,6 +2360,44 @@
   width: 100%;
 }
 
+.edge-case:where([data-edge-case="empty"], [data-edge-case="loading"]) {
+  --alternate-layout-content-gap: var(--spacing-gap-3);
+  --alternate-layout-title-color: var(--color-label-standard);
+  --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-alternative);
+  --alternate-layout-contents-font-size: var(--font-body-xsmall-size);
+  --alternate-layout-contents-line-height: var(--font-body-xsmall-line-height);
+  --alternate-layout-contents-letter-spacing: var(
+    --font-body-xsmall-letter-spacing
+  );
+  --alternate-layout-contents-font-weight: var(--font-body-xsmall-weight);
+}
+
+.edge-case:where([data-edge-case="empty"]) {
+  --alternate-layout-gap: var(--spacing-gap-5);
+  --alternate-layout-figure-size: 128px;
+}
+
+.edge-case:where(.edge-case-loading-large, [data-edge-case="loading"]) {
+  --alternate-layout-gap: var(--spacing-gap-10);
+  --alternate-layout-figure-size: var(--alternate-loading-icon-large-size);
+}
+
+.edge-case:where(.edge-case-loading-medium) {
+  --alternate-layout-gap: var(--spacing-gap-10);
+  --alternate-layout-figure-size: var(--alternate-loading-icon-medium-size);
+}
+
+.edge-case:where(.edge-case-loading-small) {
+  --alternate-layout-gap: var(--spacing-gap-10);
+  --alternate-layout-figure-size: var(--alternate-loading-icon-small-size);
+}
+
 .edge-case:where(.edge-case-not-found, [data-edge-case="not-found"]) {
   --alternate-layout-min-block-size: 100dvh;
   --alternate-layout-gap: var(--spacing-gap-3);
@@ -2378,9 +2416,7 @@
   );
   --alternate-layout-contents-font-weight: var(--font-body-xsmall-weight);
   --button-default-font-label-medium-size: var(--font-label-small-size);
-  --button-default-font-label-medium-line-height: var(
-    --font-label-small-line-height
-  );
+  --button-default-font-label-medium-line-height: 1em;
   --button-default-font-label-medium-letter-spacing: var(
     --font-label-small-letter-spacing
   );
@@ -2388,8 +2424,6 @@
   --button-default-font-weight: var(--font-label-small-weight);
   padding: calc(var(--spacing-padding-11) + var(--spacing-padding-7))
     var(--spacing-padding-8);
-  border: 1px solid var(--color-border-assistive);
-  border-radius: var(--theme-radius-large-1);
   background: var(--color-common-100);
 }
 .edge-case:where(.edge-case-not-found, [data-edge-case="not-found"])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.12.4",
+  "version": "0.12.6",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@tanstack/react-query": ">=5 <6",
     "@uniai-fe/uds-foundation": "^0.4.8 || ^0.5.0 || ^0.6.0",
-    "@uniai-fe/uds-primitives": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0",
+    "@uniai-fe/uds-primitives": "^0.12.9",
     "@uniai-fe/util-api": "^0.1.15 || ^0.2.0",
     "@uniai-fe/util-functions": "^0.3.0 || ^0.4.0",
     "@uniai-fe/util-jotai": "^0.1.9 || ^0.2.0 || ^0.3.0",
@@ -52,32 +52,32 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.21"
+    "dayjs": "^1.11.23"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.101.4",
+    "@tanstack/react-query": "^5.102.6",
     "@types/node": "^24.13.3",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@types/react-dom": "^19.2.5",
     "eslint": "^9.39.5",
-    "jotai": "^2.20.2",
+    "jotai": "^2.20.3",
     "next": "16.2.12",
     "prettier": "^3.9.6",
-    "react-hook-form": "^7.84.0",
-    "sass": "^1.101.7",
+    "react-hook-form": "^7.86.0",
+    "sass": "^1.102.0",
     "typescript": "6.0.3",
-    "@uniai-fe/eslint-config": "0.4.2",
-    "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/next-devkit": "0.4.0",
+    "@uniai-fe/eslint-config": "0.4.3",
+    "@uniai-fe/next-devkit": "0.4.1",
     "@uniai-fe/react-hooks": "0.3.0",
-    "@uniai-fe/uds-primitives": "0.12.5",
+    "@uniai-fe/tsconfig": "0.2.0",
+    "@uniai-fe/uds-primitives": "0.12.9",
+    "@uniai-fe/util-api": "0.2.1",
     "@uniai-fe/uds-foundation": "0.6.0",
     "@uniai-fe/util-functions": "0.4.3",
-    "@uniai-fe/util-api": "0.2.1",
-    "@uniai-fe/util-jotai": "0.3.0",
+    "@uniai-fe/util-rtc": "0.2.1",
     "@uniai-fe/util-next": "0.5.0",
-    "@uniai-fe/util-rtc": "0.2.1"
+    "@uniai-fe/util-jotai": "0.3.0"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

package/src/edge-case/components/Empty.tsx

@@ -31,10 +31,12 @@ export default function EdgeCaseEmpty({
       {figure ? (
         <Alternate.Layout.Figure>{figure}</Alternate.Layout.Figure>
       ) : null}
-      <Alternate.Layout.Title>{title}</Alternate.Layout.Title>
-      {description ? (
-        <Alternate.Layout.Contents>{description}</Alternate.Layout.Contents>
-      ) : null}
+      <Alternate.Layout.Text>
+        <Alternate.Layout.Title>{title}</Alternate.Layout.Title>
+        {description ? (
+          <Alternate.Layout.Contents>{description}</Alternate.Layout.Contents>
+        ) : null}
+      </Alternate.Layout.Text>
       {/* 변경: templates는 action 정책을 확정하지 않고 소비 측 주입 지점만 연다. */}
       {children}
     </Alternate.Layout.Container>

package/src/edge-case/components/Loading.tsx

@@ -10,6 +10,7 @@ import type { EdgeCaseLoadingProps } from "../types";
  * @param {EdgeCaseLoadingProps} props
  * @param {string} [props.className] 최상위 edge-case container className override다.
  * @param {React.ReactNode} [props.figure] 로딩 상태 visual 콘텐츠다.
+ * @param {"small" | "medium" | "large"} [props.size="large"] 로딩 figure와 기본 spinner 크기다.
  * @param {React.ReactNode} [props.title] 로딩 상태 제목 콘텐츠다.
  * @param {React.ReactNode} [props.description] 로딩 상태 설명 콘텐츠다.
  * @param {React.ReactNode} [props.children] 하단에 주입할 custom action 또는 보조 콘텐츠다.
@@ -19,21 +20,28 @@ import type { EdgeCaseLoadingProps } from "../types";
 export default function EdgeCaseLoading({
   className,
   figure,
+  size = "large",
   title,
   description,
   children,
 }: EdgeCaseLoadingProps) {
   return (
     <Alternate.Layout.Container
-      className={clsx("edge-case", className)}
+      className={clsx("edge-case", `edge-case-loading-${size}`, className)}
       data-edge-case="loading"
     >
       <Alternate.Layout.Figure>
-        {figure ?? <Alternate.LoadingIcon size="large" direction="vertical" />}
+        {figure ?? <Alternate.LoadingIcon size={size} direction="vertical" />}
       </Alternate.Layout.Figure>
-      {title ? <Alternate.Layout.Title>{title}</Alternate.Layout.Title> : null}
-      {description ? (
-        <Alternate.Layout.Contents>{description}</Alternate.Layout.Contents>
+      {title || description ? (
+        <Alternate.Layout.Text>
+          {title ? (
+            <Alternate.Layout.Title>{title}</Alternate.Layout.Title>
+          ) : null}
+          {description ? (
+            <Alternate.Layout.Contents>{description}</Alternate.Layout.Contents>
+          ) : null}
+        </Alternate.Layout.Text>
       ) : null}
       {/* 변경: 로딩 취소/재시도 같은 정책은 서비스 앱이 children으로 주입한다. */}
       {children}

package/src/edge-case/styles/edge-case.scss

@@ -2,6 +2,44 @@
   width: 100%;
 }
 
+.edge-case:where([data-edge-case="empty"], [data-edge-case="loading"]) {
+  --alternate-layout-content-gap: var(--spacing-gap-3);
+  --alternate-layout-title-color: var(--color-label-standard);
+  --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-alternative);
+  --alternate-layout-contents-font-size: var(--font-body-xsmall-size);
+  --alternate-layout-contents-line-height: var(--font-body-xsmall-line-height);
+  --alternate-layout-contents-letter-spacing: var(
+    --font-body-xsmall-letter-spacing
+  );
+  --alternate-layout-contents-font-weight: var(--font-body-xsmall-weight);
+}
+
+.edge-case:where([data-edge-case="empty"]) {
+  --alternate-layout-gap: var(--spacing-gap-5);
+  --alternate-layout-figure-size: 128px;
+}
+
+.edge-case:where(.edge-case-loading-large, [data-edge-case="loading"]) {
+  --alternate-layout-gap: var(--spacing-gap-10);
+  --alternate-layout-figure-size: var(--alternate-loading-icon-large-size);
+}
+
+.edge-case:where(.edge-case-loading-medium) {
+  --alternate-layout-gap: var(--spacing-gap-10);
+  --alternate-layout-figure-size: var(--alternate-loading-icon-medium-size);
+}
+
+.edge-case:where(.edge-case-loading-small) {
+  --alternate-layout-gap: var(--spacing-gap-10);
+  --alternate-layout-figure-size: var(--alternate-loading-icon-small-size);
+}
+
 .edge-case:where(.edge-case-not-found, [data-edge-case="not-found"]) {
   // 변경: NotFound는 페이지 단위 fallback preset이므로 Alternate.Layout의 최소 높이를 전체 viewport로 확장한다.
   --alternate-layout-min-block-size: 100dvh;
@@ -21,9 +59,7 @@
   );
   --alternate-layout-contents-font-weight: var(--font-body-xsmall-weight);
   --button-default-font-label-medium-size: var(--font-label-small-size);
-  --button-default-font-label-medium-line-height: var(
-    --font-label-small-line-height
-  );
+  --button-default-font-label-medium-line-height: 1em;
   --button-default-font-label-medium-letter-spacing: var(
     --font-label-small-letter-spacing
   );
@@ -32,8 +68,6 @@
 
   padding: calc(var(--spacing-padding-11) + var(--spacing-padding-7))
     var(--spacing-padding-8);
-  border: 1px solid var(--color-border-assistive);
-  border-radius: var(--theme-radius-large-1);
   background: var(--color-common-100);
 
   :where(.alternate-layout-figure) {

package/src/edge-case/types/index.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { AlternateLoadingIconSize } from "@uniai-fe/uds-primitives";
 
 /**
  * Edge Case Empty Props; 빈 상태 화면 템플릿 props
@@ -35,6 +36,7 @@ export interface EdgeCaseEmptyProps {
  * Edge Case Loading Props; 로딩 상태 화면 템플릿 props
  * @property {string} [className] 최상위 edge-case container className override다.
  * @property {ReactNode} [figure] 로딩 상태 visual 콘텐츠다. 없으면 Alternate.LoadingIcon을 사용한다.
+ * @property {"small" | "medium" | "large"} [size="large"] 로딩 figure와 기본 spinner 크기다.
  * @property {ReactNode} [title] 로딩 상태 제목 콘텐츠다.
  * @property {ReactNode} [description] 로딩 상태 설명 콘텐츠다.
  * @property {ReactNode} [children] 하단에 주입할 custom action 또는 보조 콘텐츠다.
@@ -48,6 +50,10 @@ export interface EdgeCaseLoadingProps {
    * 로딩 상태 visual 콘텐츠다. 없으면 Alternate.LoadingIcon을 사용한다.
    */
   figure?: ReactNode;
+  /**
+   * 로딩 figure와 기본 spinner 크기다. 허용값은 "small", "medium", "large"다.
+   */
+  size?: AlternateLoadingIconSize;
   /**
    * 로딩 상태 제목 콘텐츠다.
    */