@uniai-fe/uds-templates 0.4.21 → 0.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.4.21",
+  "version": "0.4.22",
   "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.95.2",
+    "@tanstack/react-query": "^5.96.0",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

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

@@ -11,6 +11,7 @@ export default function CCTVVideoOverlayHeader({
   activeTitle,
   title,
   isLive,
+  isShared,
 }: CctvVideoOverlayHeaderProps) {
   const showUpper = activeLiveState || activeCloseButton;
   const showLower = activeTitle;
@@ -23,7 +24,15 @@ export default function CCTVVideoOverlayHeader({
     >
       {showUpper && (
         <div className="cctv-video-overlay-header-upper">
-          {activeLiveState && <CCTVVideoLiveState isLive={isLive} />}
+          {activeLiveState && (
+            <CCTVVideoLiveState
+              isLive={isLive}
+              isShared={isShared}
+              {...(activeCloseButton
+                ? { badgeOptions: { size: "medium" } }
+                : {})}
+            />
+          )}
           {activeCloseButton && <CCTVVideoCloseButton />}
         </div>
       )}

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

@@ -1,21 +1,27 @@
 "use client";
 
 import clsx from "clsx";
-import { Badge } from "@uniai-fe/uds-primitives";
+import { Badge, type BadgeProps } from "@uniai-fe/uds-primitives";
 
 export default function CCTVVideoLiveState({
   isLive = false,
+  isShared = false,
+  badgeOptions,
 }: {
   isLive?: boolean;
+  isShared?: boolean;
+  badgeOptions?: Partial<Omit<BadgeProps, "className" | "children">>;
 }) {
+  const { size, intent, ...options } = badgeOptions ?? {};
   return (
     <Badge
-      size="xsmall"
-      intent="tertiary"
+      size={size ?? "xsmall"}
+      intent={intent ?? "tertiary"}
       className={clsx("cctv-video-live-state", { on: isLive == true })}
+      {...options}
     >
       <figure className="cctv-video-live-state-dot"></figure>
-      <span>Live</span>
+      <span>{isShared ? "외부공유중" : "Live"}</span>
     </Badge>
   );
 }

package/src/cctv/types/api.ts

@@ -29,6 +29,7 @@ export interface API_Req_GetCompanyListParams extends Omit<
  * @property {boolean} cam_online 카메라 설치상태
  * @property {string} [cam_rtc] 카메라 스트리밍 WebRTC 경로
  * @property {string} [cam_rtcp] 카메라 RTCP 경로
+ * @property {boolean} [cam_shared] 카메라 외부공유 여부
  */
 export interface API_Res_CctvCompanyCameraList {
   // API 응답은 데이터-only 구조이므로 UI 전용 콜백은 포함하지 않는다.
@@ -54,6 +55,10 @@ export interface API_Res_CctvCompanyCameraList {
    * RTCP 경로
    */
   cam_rtcp?: string;
+  /**
+   * 외부공유 상태
+   */
+  cam_shared?: boolean;
 }
 
 /**

package/src/cctv/types/props.ts

@@ -9,6 +9,7 @@ import type { CctvCompanyCameraData } from "./list";
  * @property {React.ReactNode} [title] 제목 콘텐츠
  * @property {boolean} [activeTime] 시간 표시 영역 활성화 여부
  * @property {boolean} [isLive] Live 뱃지를 on/off 상태로 표시할지 여부
+ * @property {boolean} [isShared] 외부공유 여부
  */
 export interface CctvVideoOverlayHeaderProps {
   className?: string;
@@ -32,6 +33,10 @@ export interface CctvVideoOverlayHeaderProps {
    * 시간 표시 영역 활성화 여부
    */
   isLive?: boolean;
+  /**
+   * 해당 카메라의 외부공유 여부 상태
+   */
+  isShared?: boolean;
 }
 
 /**