@uniai-fe/uds-templates 0.6.2 → 0.6.4

package/package.json

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

package/src/cctv/apis/server.ts

@@ -224,16 +224,6 @@ export async function getServerCctvToken({
     token: "",
   };
 
-  const BODY_PRESET: API_Req_CctvRtcTokenOrigin = {
-    site: "company_id",
-    username: "harim",
-    password: "harim",
-    action: "read",
-    path: "cam_id",
-    ttl_seconds: 3600,
-    kid: "streaming-auth-1",
-  };
-
   if (!reqBody || !reqBody.username || !reqBody.company_id || !reqBody.cam_id) {
     nextAPILog("POST", routeUrl, query_url, { reqBody });
     return {
@@ -257,11 +247,13 @@ export async function getServerCctvToken({
 
   // 토큰 요청 payload 구성
   const bodyData: API_Req_CctvRtcTokenOrigin = {
-    ...BODY_PRESET,
     site,
     username,
     password,
+    action: "read",
     path,
+    ttl_seconds: 3600,
+    kid: "streaming-auth-1",
   };
 
   nextAPILog("POST", routeUrl, query_url, { bodyData });

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/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 기본값
        */