@uniai-fe/uds-templates 0.6.4 → 0.6.6

package/dist/styles.css

@@ -110,6 +110,7 @@
   --cctv-live-state-dot-off: var(--color-border-strong);
   --cctv-live-state-text-off: var(--color-label-disabled);
   /* Error */
+  --cctv-status-text-color: var(--color-common-99);
   --cctv-error-text-color: var(--color-label-disabled);
   --cctv-error-icon-color: var(--color-label-disabled);
   /* Pagination */
@@ -1798,14 +1799,23 @@
 }
 
 .cctv-video-error-icon {
+  display: none;
   margin-bottom: 2px;
   fill: var(--cctv-error-icon-color);
 }
 
 .cctv-video-error-message {
   font-size: 13px;
-  color: var(--cctv-error-text-color);
+  color: var(--cctv-status-text-color);
   line-height: 1.5em;
+  font-weight: 500;
+}
+
+.cctv-video-overlay-body.is-error .cctv-video-error-icon {
+  display: block;
+}
+.cctv-video-overlay-body.is-error .cctv-video-error-message {
+  color: var(--cctv-error-text-color);
   font-weight: 600;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -67,13 +67,13 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.20"
+    "dayjs": "^1.11.21"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.100.11",
+    "@tanstack/react-query": "^5.101.0",
     "@types/node": "^24.12.3",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
     "@uniai-fe/eslint-config": "workspace:*",
     "@uniai-fe/next-devkit": "workspace:*",
@@ -90,8 +90,8 @@
     "jotai": "^2.20.0",
     "next": "^15.5.18",
     "prettier": "^3.8.3",
-    "react-hook-form": "^7.76.0",
-    "sass": "^1.99.0",
+    "react-hook-form": "^7.77.0",
+    "sass": "^1.100.0",
     "typescript": "5.9.3"
   }
 }

package/src/cctv/styles/variables.scss

@@ -22,6 +22,7 @@
   --cctv-live-state-text-off: var(--color-label-disabled);
 
   /* Error */
+  --cctv-status-text-color: var(--color-common-99);
   --cctv-error-text-color: var(--color-label-disabled);
   --cctv-error-icon-color: var(--color-label-disabled);
 

package/src/cctv/styles/video.scss

@@ -139,14 +139,26 @@
   justify-content: center;
 }
 .cctv-video-error-icon {
+  display: none;
   margin-bottom: 2px;
   fill: var(--cctv-error-icon-color);
 }
 .cctv-video-error-message {
   font-size: 13px;
-  color: var(--cctv-error-text-color);
+  color: var(--cctv-status-text-color);
   line-height: 1.5em;
-  font-weight: 600;
+  font-weight: 500;
+}
+
+.cctv-video-overlay-body.is-error {
+  .cctv-video-error-icon {
+    display: block;
+  }
+
+  .cctv-video-error-message {
+    color: var(--cctv-error-text-color);
+    font-weight: 600;
+  }
 }
 
 .cctv-video-status-text {

package/src/cctv/types/api.ts

@@ -168,6 +168,7 @@ export interface API_Res_CctvCompanyCameraList extends API_Res_CctvCameraData {
  * @property {string} cam_id 카메라 id코드
  * @property {string} stream_path 카메라 스트림 path
  * @property {boolean} is_public 카메라 외부공유 여부
+ * @property {boolean} [farm_cctv_is_public] farm 단위 CCTV 공개 동의 여부
  * @property {boolean} is_watching 외부시청 중 여부
  * @property {number} viewer_count 현재 외부시청 세션 수
  */
@@ -185,6 +186,10 @@ export interface API_Res_CctvViewerStatusData
    * 스트림 path
    */
   stream_path: string;
+  /**
+   * farm 단위 CCTV 공개 동의 여부
+   */
+  farm_cctv_is_public?: boolean;
   /**
    * 외부시청 중 여부
    */
@@ -195,12 +200,23 @@ export interface API_Res_CctvViewerStatusData
   viewer_count: number;
 }
 
+/**
+ * CCTV; 카메라 외부시청 상태 목록 응답 데이터
+ * @property {API_Res_CctvViewerStatusData[]} items 카메라 외부시청 상태 목록
+ */
+export interface API_Res_CctvViewerStatusBodyData {
+  /**
+   * 카메라 외부시청 상태 목록
+   */
+  items: API_Res_CctvViewerStatusData[];
+}
+
 /**
  * CCTV; 카메라 외부시청 상태 응답
- * @typedef {API_Res_Base<API_Res_CctvViewerStatusData>} API_Res_CctvViewerStatus
+ * @typedef {API_Res_Base<API_Res_CctvViewerStatusBodyData>} API_Res_CctvViewerStatus
  */
 export type API_Res_CctvViewerStatus =
-  API_Res_Base<API_Res_CctvViewerStatusData>;
+  API_Res_Base<API_Res_CctvViewerStatusBodyData>;
 
 /**
  * CCTV; 각 분야그룹의 업체목록

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

@@ -7,7 +7,7 @@ import type {
 export const CCTV_MESSAGE = {
   selectCam: "카메라를 선택하세요.",
   fetching: "CCTV 데이터를 불러오는 중입니다.",
-  preparing: "스트림을 준비하고 있습니다.",
+  preparing: "CCTV 영상을 연결하고 있습니다.",
   sessionEnded:
     "장시간 미사용으로 연결이 종료되었습니다. 계속 확인하시려면 다시 연결해 주세요.",
   tokenError: "토큰을 발급하지 못했습니다.",
@@ -21,6 +21,10 @@ const RTC_PREPARING_STATES = new Set<RTCPeerConnectionState>([
   "closed",
 ]);
 
+const RTC_SESSION_ENDED_RECONNECT_STATES = new Set<RTCPeerConnectionState>([
+  "closed",
+]);
+
 /**
  * CCTV; 스트리밍 상태에 따른 메시지 추출
  * @param {CctvVideoOverlayMessageParams} params 상태 파라미터
@@ -51,12 +55,14 @@ export function getOverlayMessage({
   }
 
   if (!cam.cam_online) return CCTV_MESSAGE.offline;
-  if (canReconnect) return CCTV_MESSAGE.sessionEnded;
   // 에러 상태가 준비 상태와 겹칠 때는 에러 문구가 최종 표시 계약을 우선한다.
   if (isTokenError) return CCTV_MESSAGE.tokenError;
   if (streamError) return streamError;
-  if (isTokenLoading || isStreaming) return CCTV_MESSAGE.preparing;
   if (connectionState === "failed") return CCTV_MESSAGE.offline;
+  if (canReconnect && RTC_SESSION_ENDED_RECONNECT_STATES.has(connectionState)) {
+    return CCTV_MESSAGE.sessionEnded;
+  }
+  if (isTokenLoading || isStreaming) return CCTV_MESSAGE.preparing;
   if (RTC_PREPARING_STATES.has(connectionState)) return CCTV_MESSAGE.preparing;
   return null;
 }