@uniai-fe/uds-templates 0.4.29 → 0.4.31

package/dist/styles.css

@@ -1519,6 +1519,9 @@
   border-radius: var(--cctv-video-radius);
   background: var(--cctv-video-bg);
 }
+.cctv-video-container[data-error=true] .cctv-video-box {
+  visibility: hidden;
+}
 
 .cctv-video-box {
   width: 100%;
@@ -1681,7 +1684,7 @@
 .cctv-cam-list-track {
   display: grid;
   width: 100%;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: var(--cctv-list-gap);
   padding: 0;
   margin: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.4.29",
+  "version": "0.4.31",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.96.0",
+    "@tanstack/react-query": "^5.97.0",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -86,11 +86,11 @@
     "@uniai-fe/util-next": "workspace:*",
     "@uniai-fe/util-rtc": "workspace:*",
     "eslint": "^9.39.2",
-    "jotai": "^2.19.0",
+    "jotai": "^2.19.1",
     "next": "^15.5.11",
-    "prettier": "^3.8.1",
-    "react-hook-form": "^7.72.0",
-    "sass": "^1.98.0",
+    "prettier": "^3.8.2",
+    "react-hook-form": "^7.72.1",
+    "sass": "^1.99.0",
     "typescript": "~5.9.3"
   }
 }

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

@@ -3,11 +3,18 @@ import clsx from "clsx";
 export default function CCTVVideoContainer({
   className,
   children,
+  isError,
 }: {
   className?: string;
   children: React.ReactNode;
+  isError?: boolean;
 }) {
   return (
-    <div className={clsx("cctv-video-container", className)}>{children}</div>
+    <div
+      className={clsx("cctv-video-container", className)}
+      data-error={isError ? "true" : undefined}
+    >
+      {children}
+    </div>
   );
 }

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

@@ -32,7 +32,7 @@ const CCTVVideoTemplate = forwardRef<HTMLVideoElement, CctvVideoTemplateProps>(
     ref,
   ) => {
     return (
-      <CCTVVideoContainer className={className}>
+      <CCTVVideoContainer className={className} isError={isError}>
         <CCTVVideoContents ref={ref} muted />
         <CCTVVideoOverlayContainer>
           <CCTVVideoOverlayHeader {...headerOptions} />

package/src/cctv/hooks/useRtcStream.ts

@@ -84,6 +84,12 @@ export function useCctvRtcStream({
   useEffect(() => {
     const currentVideo = videoRef.current;
 
+    // 토큰/카메라 에러로 전환되면 직전 MediaStream이 화면에 남지 않도록 비운다.
+    if (tokenQuery.isError || !cam?.cam_online) {
+      if (currentVideo) currentVideo.srcObject = null;
+      return;
+    }
+
     // 필수 값이 없으면 스트림을 시작하지 않는다.
     if (!tokenQuery.data?.token || !endpoint || !currentVideo) return;
 
@@ -110,6 +116,8 @@ export function useCctvRtcStream({
         handle = streamHandle;
       })
       .catch(error => {
+        // 스트림 실패 시에도 이전 프레임이 에러 오버레이 뒤에 남지 않도록 정리한다.
+        currentVideo.srcObject = null;
         // Error 객체 여부에 따라 메시지를 정규화한다.
         setStreamError(
           error instanceof Error
@@ -129,7 +137,13 @@ export function useCctvRtcStream({
       handle = null;
       currentVideo.srcObject = null;
     };
-  }, [endpoint, tokenQuery.data?.token, cam?.cam_id]);
+  }, [
+    endpoint,
+    tokenQuery.data?.token,
+    tokenQuery.isError,
+    cam?.cam_id,
+    cam?.cam_online,
+  ]);
 
   const liveState = useMemo(
     () =>

package/src/cctv/styles/cam-list.scss

@@ -17,7 +17,10 @@
 .cctv-cam-list-track {
   display: grid;
   width: 100%;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(320px, 1fr)
+  ); // 최소 너비 비율을 4:3으로 맞춤
   gap: var(--cctv-list-gap);
   padding: 0;
   margin: 0;

package/src/cctv/styles/video.scss

@@ -7,6 +7,13 @@
 
   background: var(--cctv-video-bg);
   // overflow: hidden;
+
+  &[data-error="true"] {
+    // 에러 오버레이가 활성화되면 직전 video frame이 메시지 뒤에 보이지 않게 숨긴다.
+    .cctv-video-box {
+      visibility: hidden;
+    }
+  }
 }
 
 .cctv-video-box {

package/src/cctv/utils/video-state.ts

@@ -40,9 +40,10 @@ export function getOverlayMessage({
   }
 
   if (!cam.cam_online) return CCTV_MESSAGE.offline;
-  if (isTokenLoading || isStreaming) return CCTV_MESSAGE.preparing;
+  // 에러 상태가 준비 상태와 겹칠 때는 에러 문구가 최종 표시 계약을 우선한다.
   if (isTokenError) return CCTV_MESSAGE.tokenError;
   if (streamError) return streamError;
+  if (isTokenLoading || isStreaming) return CCTV_MESSAGE.preparing;
   return null;
 }