@uniai-fe/uds-templates 0.6.3 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "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/components/Provider.tsx

@@ -58,11 +58,13 @@ export function useCctvRtcStreamRegistry(): CctvRtcStreamRegistry {
  * @property {string} [listUrl] company-list API 요청 경로
  * @property {string} [tokenUrl] token API 요청 경로
  * @property {string} [username] CCTV 조회시 권한 확인을 위한 계정명
+ * @property {string} [whepUsername] WHEP endpoint username 덮어쓰기 값
  * @property {ContextExtension} [defaultValues] 서비스 확장 context 기본값
  * @property {React.ReactNode} children
  */
 export default function CCTVProvider<ContextExtension extends object = object>({
   username,
+  whepUsername,
   company_id,
   cam_id,
   listUrl,
@@ -83,6 +85,7 @@ export default function CCTVProvider<ContextExtension extends object = object>({
     ...defaultValues,
     ...CCTV_CONTEXT_DEFAULT_VALUES,
     username,
+    whepUsername,
     company_id,
     cam_id,
   } as DefaultValues<CctvContext<ContextExtension>>;

package/src/cctv/hooks/useRtcStream.ts

@@ -122,15 +122,18 @@ export function useCctvRtcStream({
   const [isStreaming, setStreaming] = useState(false);
   const [hasConnected, setHasConnected] = useState(false);
 
-  // react-hook-form 컨텍스트에서 username을 추적한다.
+  // react-hook-form 컨텍스트에서 token username과 WHEP username override를 추적한다.
   const { control } = useFormContext();
-  const username = useWatch({ control, name: "username" });
+  const tokenUsername = useWatch({ control, name: "username" });
+  const whepUsername = useWatch({ control, name: "whepUsername" });
+  const endpointUsername =
+    whepUsername === undefined ? tokenUsername : whepUsername;
 
   // 카메라/회사/사용자 정보를 토대로 WHEP 토큰을 발급받는다.
   const tokenQuery = useQueryCctvRtcToken({
     company_id: cam?.company_id ?? "",
     cam_id: cam?.cam_id ?? "",
-    username,
+    username: tokenUsername,
     url: tokenUrl ?? contextTokenUrl,
   });
 
@@ -141,16 +144,18 @@ export function useCctvRtcStream({
   // 카메라의 RTC 엔드포인트와 사용자명을 조합해 실제 WHEP endpoint를 계산한다.
   const endpoint = useMemo(() => {
     if (!cam?.cam_rtc) return undefined;
-    const query = username ? `?username=${encodeURIComponent(username)}` : "";
+    const query = endpointUsername
+      ? `?username=${encodeURIComponent(endpointUsername)}`
+      : "";
     return `${cam.cam_rtc.replace(/\/$/, "")}/whep${query}`;
-  }, [cam?.cam_rtc, username]);
+  }, [cam?.cam_rtc, endpointUsername]);
 
   const streamKeyCandidate = useMemo(() => {
     if (!cam?.cam_id || !cam.cam_online || !endpoint || !tokenQuery.data?.token)
       return "";
 
     return [
-      username,
+      tokenUsername,
       cam.company_id,
       cam.cam_id,
       endpoint,
@@ -163,14 +168,14 @@ export function useCctvRtcStream({
     endpoint,
     tokenQuery.data?.token,
     tokenQuery.dataUpdatedAt,
-    username,
+    tokenUsername,
   ]);
 
   const streamIdentityKey = useMemo(() => {
     if (!cam?.cam_id || !endpoint) return "";
 
-    return [username, cam.company_id, cam.cam_id, endpoint].join("|");
-  }, [cam?.cam_id, cam?.company_id, endpoint, username]);
+    return [tokenUsername, cam.company_id, cam.cam_id, endpoint].join("|");
+  }, [cam?.cam_id, cam?.company_id, endpoint, tokenUsername]);
 
   useEffect(() => {
     setHasConnected(false);

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/types/context.ts

@@ -60,6 +60,7 @@ export interface CctvApiUrlContext {
  * @property {string} [company_id] 선택된 업체 id코드
  * @property {string} [cam_id] 선택된 카메라 id코드
  * @property {string} username CCTV 조회시 권한 확인을 위한 계정명
+ * @property {string} [whepUsername] WHEP endpoint username 덮어쓰기 값
  * @property {string} [search] 검색 키워드 (입력값)
  * @property {string} [filter] 검색 키워드 (필터값)
  * @property {API_Res_CctvCompanyGroup[]} rawData 원본 데이터 배열
@@ -71,6 +72,10 @@ export interface CctvBaseContext extends CctvSelectedContext {
    * CCTV 조회시 권한 확인을 위한 계정명
    */
   username: string;
+  /**
+   * WHEP endpoint username 덮어쓰기 값
+   */
+  whepUsername?: string;
   /**
    * 검색 키워드 (입력값)
    */
@@ -100,6 +105,7 @@ export interface CctvBaseContext extends CctvSelectedContext {
  * @property {string} [company_id] 선택된 업체 id코드
  * @property {string} [cam_id] 선택된 카메라 id코드
  * @property {string} username CCTV 조회시 권한 확인을 위한 계정명
+ * @property {string} [whepUsername] WHEP endpoint username 덮어쓰기 값
  * @property {string} search 검색 키워드 입력값
  * @property {string} filter 검색 키워드 필터값
  * @property {API_Res_CctvCompanyGroup[]} rawData 원본 데이터 배열
@@ -117,6 +123,7 @@ export type CctvContext<ContextExtension extends object = object> =
  * @property {string} [listUrl] company-list API 요청 경로
  * @property {string} [tokenUrl] token API 요청 경로
  * @property {string} [username] CCTV 조회시 권한 확인을 위한 계정명
+ * @property {string} [whepUsername] WHEP endpoint username 덮어쓰기 값
  * @property {ContextExtension} [defaultValues] 서비스 확장 context 기본값
  * @property {React.ReactNode} children
  */
@@ -127,6 +134,10 @@ export type CctvProviderProps<ContextExtension extends object = object> =
        * CCTV 조회시 권한 확인을 위한 계정명
        */
       username?: string;
+      /**
+       * WHEP endpoint username 덮어쓰기 값
+       */
+      whepUsername?: string;
       /**
        * 서비스 확장 context 기본값
        */