@uniai-fe/uds-templates 0.3.7 → 0.3.9

package/dist/styles.css

@@ -103,20 +103,21 @@
 .page-frame-container {
   width: 100%;
   min-height: 100vh;
+  height: 100%;
   background-color: var(--uds-page-frame-background);
 }
 
 .page-frame-service-frame {
   width: 100%;
   min-height: 100vh;
+  height: 100%;
   display: flex;
 }
 
 .page-frame-service-main {
   width: calc(100% - var(--uds-page-nav-width));
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+  height: 100%;
 }
 
 .page-frame-service-main-wrapper {
@@ -124,6 +125,7 @@
   height: calc(100% - var(--uds-page-header-height));
   padding: var(--uds-page-body-padding-vertical) var(--uds-page-body-padding-horizontal);
   background-color: var(--uds-page-body-background);
+  overflow-y: auto;
   position: relative;
   z-index: 0;
 }

package/package.json

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

package/src/modal/components/dialog/Header.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import clsx from "clsx";
+import { useModal } from "../../hooks/useModal";
+import { ModalHeaderCloseButton } from "../core/header/CloseButton";
 
 import type { DialogHeaderProps } from "../../types";
 
@@ -13,6 +15,8 @@ import type { DialogHeaderProps } from "../../types";
  * @param {"center" | "split"} [props.layout] 헤더 레이아웃
  * @param {React.ReactNode} [props.leadingContent] 타이틀 왼쪽 콘텐츠
  * @param {React.ReactNode} [props.trailingContent] 우측 액션 콘텐츠
+ * @param {string} [props.stackKey] 모달 스택 키(기본 닫기 버튼 동작 연결용)
+ * @param {boolean} [props.activeCloseButton] 우측 기본 닫기 버튼 활성화 여부
  * @param {string} [props.className] 헤더 className
  * @example
  * <DialogHeader title="제목" description="설명" />
@@ -23,10 +27,22 @@ export function DialogHeader({
   layout = "center",
   leadingContent,
   trailingContent,
+  stackKey,
+  activeCloseButton = false,
   className,
 }: DialogHeaderProps) {
+  const { closeModal } = useModal();
   const hasRight = Boolean(trailingContent);
   const hasDescription = Boolean(description);
+  const shouldRenderDefaultCloseButton =
+    activeCloseButton && !hasRight && Boolean(stackKey);
+  const resolvedTrailingContent = shouldRenderDefaultCloseButton ? (
+    <ModalHeaderCloseButton
+      onClick={() => closeModal({ stackKey: String(stackKey) })}
+    />
+  ) : (
+    trailingContent
+  );
   // 변경: title/description은 string | number일 때만 래핑한다.
   const shouldWrapTitleAsText = ["string", "number"].includes(typeof title);
   const shouldWrapDescriptionAsText = ["string", "number"].includes(
@@ -56,9 +72,9 @@ export function DialogHeader({
               {shouldWrapTitleAsText ? <h3>{title}</h3> : title}
             </div>
           </div>
-          {hasRight ? (
+          {resolvedTrailingContent ? (
             <div className="uds-modal-dialog-header-trailing">
-              {trailingContent}
+              {resolvedTrailingContent}
             </div>
           ) : null}
         </div>

package/src/modal/components/dialog/Template.tsx

@@ -44,6 +44,7 @@ function createDialogFormSubmitHandler(stackKey: string): () => void {
  * @param {"center" | "split"} [options.headerLayout] 헤더 레이아웃
  * @param {React.ReactNode} [options.headerLeadingContent] 타이틀 왼쪽 콘텐츠
  * @param {React.ReactNode} [options.headerTrailingContent] 우측 액션 콘텐츠
+ * @param {boolean} [options.activeCloseButton] 우측 기본 닫기 버튼 표시 여부
  * @param {string} [options.headerClassName] 헤더 className
  * @param {React.ReactNode} [options.customHeader] 완전 커스텀 header
  * @param {React.ReactNode} options.content 본문 콘텐츠
@@ -66,6 +67,7 @@ export function createDialogModal<FormContext extends FieldValues>({
   headerLayout,
   headerLeadingContent,
   headerTrailingContent,
+  activeCloseButton,
   headerClassName,
   customHeader,
   content,
@@ -99,6 +101,8 @@ export function createDialogModal<FormContext extends FieldValues>({
         layout={headerLayout}
         leadingContent={headerLeadingContent}
         trailingContent={headerTrailingContent}
+        stackKey={stackKey}
+        activeCloseButton={activeCloseButton}
         className={headerClassName}
       />
     ) : null);

package/src/modal/types/components.ts

@@ -256,6 +256,8 @@ export type AlertContentsProps = {
  * @property {ModalDialogHeaderLayout} [layout] 레이아웃 정보
  * @property {ReactNode} [leadingContent] 타이틀 왼쪽 콘텐츠
  * @property {ReactNode} [trailingContent] 우측 액션 콘텐츠
+ * @property {string} [stackKey] 모달 스택 키(기본 닫기 버튼 동작 연결용)
+ * @property {boolean} [activeCloseButton] 우측 기본 닫기 버튼 활성화 여부
  * @property {string} [className] 추가 className
  */
 export interface DialogHeaderProps {
@@ -279,6 +281,14 @@ export interface DialogHeaderProps {
    * 우측 액션 콘텐츠
    */
   trailingContent?: ReactNode;
+  /**
+   * 모달 스택 키(기본 닫기 버튼 동작 연결용)
+   */
+  stackKey?: string;
+  /**
+   * 우측 기본 닫기 버튼 활성화 여부
+   */
+  activeCloseButton?: boolean;
   /**
    * 추가 className
    */

package/src/modal/types/templates.ts

@@ -135,6 +135,7 @@ export type AlertTemplateOptions<
  * @property {ModalDialogHeaderLayout} [headerLayout] 헤더 레이아웃
  * @property {ReactNode} [headerLeadingContent] 타이틀 왼쪽 콘텐츠
  * @property {ReactNode} [headerTrailingContent] 우측 액션 콘텐츠
+ * @property {boolean} [activeCloseButton] 우측 기본 닫기 버튼 표시 여부
  * @property {string} [headerClassName] header 추가 className
  * @property {ReactNode} [customHeader] 완전 커스텀 header
  * @property {ReactNode} content 본문 콘텐츠
@@ -169,6 +170,10 @@ export type DialogTemplateOptions<
    * 우측 액션 콘텐츠
    */
   headerTrailingContent?: ReactNode;
+  /**
+   * 우측 기본 닫기 버튼 표시 여부
+   */
+  activeCloseButton?: boolean;
   /**
    * header 추가 className
    */

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

@@ -2,6 +2,7 @@
 .page-frame-container {
   width: 100%;
   min-height: 100vh;
+  height: 100%;
   background-color: var(--uds-page-frame-background);
 }
 
@@ -9,6 +10,7 @@
 .page-frame-service-frame {
   width: 100%;
   min-height: 100vh;
+  height: 100%;
   display: flex;
 }
 
@@ -16,8 +18,9 @@
 .page-frame-service-main {
   width: calc(100% - var(--uds-page-nav-width));
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+  height: 100%;
+  // display: flex;
+  // flex-direction: column;
 }
 
 // 본문 스크롤 영역: 헤더 높이를 제외하고 padding을 CSS 변수로 제어한다.
@@ -27,7 +30,7 @@
   padding: var(--uds-page-body-padding-vertical)
     var(--uds-page-body-padding-horizontal);
   background-color: var(--uds-page-body-background);
-  // overflow-y: auto;
+  overflow-y: auto;
 
   position: relative;
   z-index: 0;