@uniai-fe/uds-templates 0.4.31 → 0.4.33

package/dist/styles.css

@@ -539,8 +539,10 @@
 }
 
 .uds-modal-container {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  flex: 1 1 auto;
+  min-height: 0;
   width: 100%;
 }
 
@@ -550,11 +552,22 @@
   margin: 0;
 }
 
+.uds-modal-header {
+  grid-row: 1;
+}
+
+.uds-modal-body {
+  grid-row: 2;
+  min-height: 0;
+  overflow: auto;
+}
+
 .uds-modal-header-close-button {
   font-size: 0;
 }
 
 .uds-modal-footer {
+  grid-row: 3;
   padding: 0;
   border-top: none;
 }

package/package.json

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

package/src/cctv/components/pagination/buttons/Base.tsx

@@ -42,13 +42,13 @@ export default function CCTVPaginationBaseButton({
     >
       {direction === "prev" && (
         <IconFigure className="cctv-prev-icon">
-          <LeftIcon width={24} height={24} alt="Previous CCTV" />
+          <LeftIcon width={24} height={24} />
         </IconFigure>
       )}
       {children}
       {direction === "next" && (
         <IconFigure className="cctv-next-icon">
-          <RightIcon width={24} height={24} alt="Next CCTV" />
+          <RightIcon width={24} height={24} />
         </IconFigure>
       )}
     </button>

package/src/cctv/components/video/overlay/body/Error.tsx

@@ -8,7 +8,7 @@ export default function CCTVVideoError({
   return (
     <div className="cctv-video-error">
       <figure className="cctv-video-error-icon">
-        <CCTVErrorIcon width={24} height={24} alt="CCTV 연결 오류" />
+        <CCTVErrorIcon width={24} height={24} />
       </figure>
       <p className="cctv-video-error-message">{children ?? "CCTV 연결 오류"}</p>
     </div>

package/src/cctv/components/video/overlay/footer/OpenButton.tsx

@@ -19,7 +19,7 @@ export default function CCTVVideoOpenButton({
       className={clsx("cctv-video-open-button", { on: isLive === true })}
       onClick={onOpen}
     >
-      <ViewerOpenIcon width={24} height={24} alt="크게 보기" />
+      <ViewerOpenIcon width={24} height={24} />
     </button>
   );
 }

package/src/cctv/components/video/overlay/header/CloseButton.tsx

@@ -12,7 +12,7 @@ export default function CCTVVideoCloseButton() {
 
   return (
     <button type="button" className="cctv-video-close-button" onClick={onClose}>
-      <ViewerCloseIcon width={36} height={36} alt="닫기" />
+      <ViewerCloseIcon width={36} height={36} />
     </button>
   );
 }

package/src/modal/components/core/header/CloseButton.tsx

@@ -30,7 +30,6 @@ export function ModalHeaderCloseButton({
       <CloseIcon
         width={20}
         height={20}
-        alt={ariaLabel}
         viewBox="0 0 20 20"
         preserveAspectRatio="xMidYMid meet"
       />

package/src/modal/styles/container.scss

@@ -1,6 +1,9 @@
 .uds-modal-container {
-  display: flex;
-  flex-direction: column;
+  // 변경: modal surface의 max-height 안에서 header/body/footer 3행 계약을 고정한다.
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  flex: 1 1 auto;
+  min-height: 0;
   width: 100%;
 }
 
@@ -9,11 +12,23 @@
   padding: 0;
   margin: 0;
 }
+
+.uds-modal-header {
+  grid-row: 1;
+}
+
+.uds-modal-body {
+  // 변경: body만 남는 높이를 차지하고 내부 스크롤을 담당한다.
+  grid-row: 2;
+  min-height: 0;
+  overflow: auto;
+}
 .uds-modal-header-close-button {
   font-size: 0;
 }
 
 .uds-modal-footer {
+  grid-row: 3;
   padding: 0;
   border-top: none;
 }

package/src/page-frame/mobile/components/header/Header.tsx

@@ -36,9 +36,7 @@ export function MobileFrameHeader({
               aria-label="뒤로가기"
             >
               <span className="page-frame-mobile-header__back-icon">
-                {backIcon ?? (
-                  <IconBackward width={24} height={24} alt="뒤로가기" />
-                )}
+                {backIcon ?? <IconBackward width={24} height={24} />}
               </span>
             </button>
           ) : (