@uniai-fe/uds-templates 0.2.1 → 0.2.4

package/README.md

@@ -123,7 +123,7 @@ export default function LoginPage() {
 > 위 예시는 개념을 설명하기 위한 형태이며,
 > 실제 props 구조/이름은 `CONTEXT-AUTH.md`에서 확정·관리합니다.
 
-> modules 레포 내부(Storybook 등)에서는 개발 편의를 위해 `@uniai-fe/uds-templates/src/index.scss`를 직접 import하지만, 외부 서비스/패키지는 `@uniai-fe/uds-templates/css` 엔트리만 사용해야 한다.
+> modules 레포 내부(Storybook 등)에서는 개발 편의를 위해 `@uniai-fe/uds-templates/styles` 엔트리를 import하지만, 외부 서비스/패키지는 `@uniai-fe/uds-templates/css` 엔트리만 사용해야 한다.
 
 ### 최근 업데이트
 

package/dist/styles.css

@@ -13,7 +13,7 @@
   --uds-page-nav-logo-height: var(--uds-page-header-height, 7.2rem);
   --uds-page-nav-list-padding-horizontal: 0rem;
   --uds-page-nav-list-padding-vertical: var(--spacing-padding-9, 2.4rem);
-  --uds-page-nav-item-height: var(--theme-size-meduum-2, 4.8rem);
+  --uds-page-nav-item-height: var(--theme-size-medium-2, 4.8rem);
   --uds-page-nav-item-gap: var(--spacing-gap-6, 1.6rem);
   --uds-page-nav-item-color-default: var(--color-label-standard);
   --uds-page-nav-item-color-active: var(--color-primary-default);
@@ -456,7 +456,7 @@
 .uds-modal-root {
   position: fixed;
   inset: 0;
-  z-index: calc(400 + var(--modal-stack-index, 0));
+  z-index: calc(1000 + var(--modal-stack-index, 0));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -702,7 +702,7 @@
 }
 
 .uds-modal-dialog-body-content {
-  padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
+  padding: var(--modal-dialog-body-padding, var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px));
   text-align: center;
   word-break: keep-all;
   color: var(--modal-dialog-body-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/auth/login/types/api.ts

@@ -76,6 +76,13 @@ export interface API_Res_LoginUserInfo {
    * 사용자 주소
    */
   address: string;
+  /**
+   * 계정 권한/직책 코드
+   * - OWNER: 농장주
+   * - EMPLOYEE: 농장직원
+   * - REGIONAL_MANAGER: 지역소장
+   */
+  user_access_role: string;
   /**
    * 가입일 (UTC)
    * - yyyy-MM-ddTHH:mm:ss

package/src/cctv/components/video/Template.tsx

@@ -19,7 +19,7 @@ import type { CctvVideoTemplateProps } from "../../types/props";
  * @property {boolean} [isLive]
  * @property {React.Ref<HTMLVideoElement>} ref
  */
-const CCTVVideoTemplate = forwardRef(
+const CCTVVideoTemplate = forwardRef<HTMLVideoElement, CctvVideoTemplateProps>(
   (
     {
       className,
@@ -28,8 +28,8 @@ const CCTVVideoTemplate = forwardRef(
       isError,
       isLive,
       overlayMessage,
-    }: CctvVideoTemplateProps,
-    ref: React.Ref<HTMLVideoElement | null>,
+    },
+    ref,
   ) => {
     return (
       <CCTVVideoContainer className={className}>
@@ -46,4 +46,7 @@ const CCTVVideoTemplate = forwardRef(
   },
 );
 
+// forwardRef Tooltip 유지를 위해 displayName 지정.
+CCTVVideoTemplate.displayName = "CCTVVideoTemplate";
+
 export default CCTVVideoTemplate;

package/src/modal/core/components/Container.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+import type { CSSProperties } from "react";
+
+import { stylePaddingSize } from "@uniai-fe/util-functions";
+
 import type { ModalFooterButton, ModalSections } from "../../types";
 import { ModalFooterButtons } from "./FooterButtons";
 
@@ -12,6 +16,8 @@ import { ModalFooterButtons } from "./FooterButtons";
  * @param {React.ReactNode} props.body 본문 슬롯
  * @param {React.ReactNode} [props.footer] footer 슬롯
  * @param {ModalFooterButton[]} [props.footerButtons] footer 버튼 스펙 배열
+ * @param {number | string} [props.width] 커스텀 width
+ * @param {StyleSpacingType} [props.padding] 커스텀 padding
  */
 export function ModalContainer({
   stackKey,
@@ -19,14 +25,25 @@ export function ModalContainer({
   body,
   footer,
   footerButtons,
+  padding,
 }: ModalSections & {
   stackKey: string;
   footerButtons?: ModalFooterButton[];
 }) {
+  // modalProps에서 받은 padding을 직접 스타일에 주입해 템플릿 제어를 허용한다.
+  const bodyStyle =
+    typeof padding !== "undefined"
+      ? ({
+          "--modal-dialog-body-padding": stylePaddingSize("rem", padding),
+        } as CSSProperties)
+      : undefined;
+
   return (
     <div className="uds-modal-container">
       {header ? <div className="uds-modal-header">{header}</div> : null}
-      <div className="uds-modal-body">{body}</div>
+      <div className="uds-modal-body" style={bodyStyle}>
+        {body}
+      </div>
       {footer ? <div className="uds-modal-footer">{footer}</div> : null}
       {!footer && footerButtons && footerButtons.length ? (
         <div className="uds-modal-footer">

package/src/modal/core/components/Root.tsx

@@ -9,6 +9,10 @@ import { ModalContainer } from "./Container";
 
 import type { ModalRootProps } from "../../types";
 
+type ModalSurfaceStyle = CSSProperties & {
+  "--modal-panel-width"?: string | number;
+};
+
 /**
  * 모달 Root; overlay 클릭 닫기와 상태 전환을 담당한다.
  * @component
@@ -59,6 +63,17 @@ export function ModalRoot({
     [index],
   );
 
+  const surfaceStyle = useMemo<ModalSurfaceStyle>(() => {
+    const style: ModalSurfaceStyle = {};
+    if (typeof modalProps.width !== "undefined") {
+      style["--modal-panel-width"] =
+        typeof modalProps.width === "number"
+          ? `${modalProps.width}px`
+          : modalProps.width;
+    }
+    return style;
+  }, [modalProps.width]);
+
   return (
     <div
       className={clsx("uds-modal-root", className)}
@@ -73,14 +88,9 @@ export function ModalRoot({
         role="dialog"
         aria-modal="true"
         onClick={stopPropagation}
+        style={surfaceStyle}
       >
-        <ModalContainer
-          stackKey={stackKey}
-          header={modalProps.header}
-          body={modalProps.body}
-          footer={modalProps.footer}
-          footerButtons={modalProps.footerButtons}
-        />
+        <ModalContainer stackKey={stackKey} {...modalProps} />
       </div>
     </div>
   );

package/src/modal/styles/base.scss

@@ -26,7 +26,7 @@
 .uds-modal-root {
   position: fixed;
   inset: 0;
-  z-index: calc(400 + var(--modal-stack-index, 0));
+  z-index: calc(1000 + var(--modal-stack-index, 0));
   display: flex;
   align-items: center;
   justify-content: center;

package/src/modal/styles/container.scss

@@ -219,7 +219,10 @@
 }
 
 .uds-modal-dialog-body-content {
-  padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
+  padding: var(
+    --modal-dialog-body-padding,
+    var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px)
+  );
   text-align: center;
   word-break: keep-all;
   color: var(--modal-dialog-body-color);

package/src/modal/templates/Dialog.tsx

@@ -45,6 +45,8 @@ export function createDialogModal({
   cancel,
   footer,
   showDelay,
+  width,
+  padding,
 }: DialogTemplateOptions): ModalState {
   // confirm이 없을 때 기본 confirm 버튼을 생성한다.
   const primary: ModalTemplateButtonSpec = confirm ?? {
@@ -118,6 +120,8 @@ export function createDialogModal({
       footer,
       // footerButtons가 비어 있으면 undefined로 넘겨 footer 렌더를 생략한다.
       footerButtons: footerButtons.length ? footerButtons : undefined,
+      width,
+      padding,
     },
   };
 }

package/src/modal/templates/components/DialogBody.tsx

@@ -8,7 +8,6 @@ import type { DialogBodyProps } from "../../types";
  * Dialog 템플릿 body 컴포넌트.
  * @component
  * @param {DialogBodyProps} props body 구성 옵션
- * @returns {JSX.Element}
  */
 export function DialogBody({ content, className }: DialogBodyProps) {
   return (

package/src/modal/types/state.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
 import type { ModalFooterButton } from "./footer";
+import type { StyleSpacingType } from "@uniai-fe/util-functions";
 
 /**
  * Modal 노출 상태 표현값.
@@ -13,6 +14,8 @@ export type ModalShowState = "init" | boolean;
  * @property {ReactNode} [header] 헤더 콘텐츠
  * @property {ReactNode} body 본문 콘텐츠
  * @property {ReactNode} [footer] footer 콘텐츠
+ * @property {number | string} [width] 커스텀 width
+ * @property {StyleSpacingType} [padding] 커스텀 padding
  */
 export type ModalSections = {
   /**
@@ -27,6 +30,20 @@ export type ModalSections = {
    * footer 콘텐츠
    */
   footer?: ReactNode;
+  /**
+   * 커스텀 width
+   */
+  width?: number | string;
+  /**
+   * 커스텀 padding
+   * @desc
+   * - number | string: 단일 값
+   * - [상하좌우]: 일괄적용 처리
+   * - [상하, 좌우]
+   * - [상, 좌우, 하]
+   * - [상, 우, 하, 좌]
+   */
+  padding?: StyleSpacingType;
 };
 
 /**
@@ -34,6 +51,8 @@ export type ModalSections = {
  * @property {ReactNode} [header] 헤더 콘텐츠 (@see ModalSections)
  * @property {ReactNode} body 본문 콘텐츠 (@see ModalSections)
  * @property {ReactNode} [footer] footer 콘텐츠 (@see ModalSections)
+ * @property {number | string} [width] 커스텀 width
+ * @property {StyleSpacingType} [padding] 커스텀 padding
  * @property {ModalShowState} show 노출 상태
  * @property {number} [showDelay] close 후 제거 지연(ms)
  * @property {ModalFooterButton[]} [footerButtons] footer 버튼 스펙

package/src/modal/types/templates.ts

@@ -5,6 +5,7 @@ import type {
   ModalFooterButtonWidth,
 } from "./footer";
 import type { ModalState } from "./state";
+import type { StyleSpacingType } from "@uniai-fe/util-functions";
 
 /**
  * Dialog header 레이아웃.
@@ -52,6 +53,8 @@ export type ModalTemplateButtonSpec = {
  * 템플릿 공통 옵션.
  * @property {string} stackKey 모달 스택 키
  * @property {number} [showDelay] close 후 제거 지연(ms)
+ * @property {number | string} [width] 커스텀 width
+ * @property {StyleSpacingType} [padding] 커스텀 padding
  */
 type ModalTemplateBase = {
   /**
@@ -62,6 +65,20 @@ type ModalTemplateBase = {
    * close 후 제거 지연(ms)
    */
   showDelay?: number;
+  /**
+   * 커스텀 width
+   */
+  width?: number | string;
+  /**
+   * 커스텀 padding
+   * @desc
+   * - number | string: 단일 값
+   * - [상하좌우]: 일괄적용 처리
+   * - [상하, 좌우]
+   * - [상, 좌우, 하]
+   * - [상, 우, 하, 좌]
+   */
+  padding?: StyleSpacingType;
 };
 
 /**
@@ -72,6 +89,8 @@ type ModalTemplateBase = {
  * @property {ModalTemplateButtonSpec} [confirm] 확인 버튼 스펙
  * @property {ModalTemplateButtonSpec} [cancel] 취소 버튼 스펙
  * @property {ReactNode} [footer] 커스텀 footer
+ * @property {number | string} [width] 커스텀 width
+ * @property {StyleSpacingType} [padding] 커스텀 padding
  */
 export type AlertTemplateOptions = ModalTemplateBase & {
   /**
@@ -108,6 +127,8 @@ export type AlertTemplateOptions = ModalTemplateBase & {
  * @property {ModalTemplateButtonSpec} [confirm] 확인 버튼 스펙
  * @property {ModalTemplateButtonSpec} [cancel] 취소 버튼 스펙
  * @property {ReactNode} [footer] 커스텀 footer
+ * @property {number | string} [width] 커스텀 width
+ * @property {StyleSpacingType} [padding] 커스텀 padding
  */
 export type DialogTemplateOptions = ModalTemplateBase & {
   /**

package/src/page-frame/desktop/styles/variables.scss

@@ -16,7 +16,7 @@
 
   --uds-page-nav-list-padding-horizontal: 0rem;
   --uds-page-nav-list-padding-vertical: var(--spacing-padding-9, 2.4rem);
-  --uds-page-nav-item-height: var(--theme-size-meduum-2, 4.8rem);
+  --uds-page-nav-item-height: var(--theme-size-medium-2, 4.8rem);
   --uds-page-nav-item-gap: var(--spacing-gap-6, 1.6rem);
   --uds-page-nav-item-color-default: var(--color-label-standard);
   --uds-page-nav-item-color-active: var(--color-primary-default);