@uniai-fe/uds-templates 0.6.27 → 0.6.28

package/dist/styles.css

@@ -94,6 +94,7 @@
   /* Card layout */
   --cctv-video-radius: 12px;
   --cctv-list-gap: var(--spacing-gap-5);
+  --cctv-list-item-min-width: 320px;
   --cctv-overlay-padding-x: var(--spacing-padding-8);
   --cctv-overlay-padding-y: var(--spacing-padding-6);
   --cctv-video-bg: var(--color-surface-heavy);
@@ -1873,6 +1874,7 @@
 }
 
 .cctv-cam-list-container {
+  container: cctv-cam-list/inline-size;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
@@ -1888,7 +1890,7 @@
 .cctv-cam-list-track {
   display: grid;
   width: 100%;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cctv-list-item-min-width)), 1fr));
   gap: var(--cctv-list-gap);
   padding: 0;
   margin: 0;
@@ -1902,6 +1904,26 @@
   max-height: 240px;
 }
 
+@container cctv-cam-list (min-width: 652px) {
+  .cctv-cam-list-track {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@container cctv-cam-list (min-width: 984px) {
+  .cctv-cam-list-track {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@container cctv-cam-list (min-width: 1316px) {
+  .cctv-cam-list-track {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+@container cctv-cam-list (min-width: 1648px) {
+  .cctv-cam-list-track {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
 .cctv-pagination-container {
   width: 100%;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.6.27",
+  "version": "0.6.28",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -72,9 +72,9 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-query": "^5.101.1",
     "@types/node": "^24.12.3",
-    "@types/react": "^19.2.16",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@uniai-fe/eslint-config": "workspace:*",
     "@uniai-fe/next-devkit": "workspace:*",
@@ -88,11 +88,11 @@
     "@uniai-fe/util-next": "workspace:*",
     "@uniai-fe/util-rtc": "workspace:*",
     "eslint": "^9.39.2",
-    "jotai": "^2.20.0",
+    "jotai": "^2.20.1",
     "next": "^15.5.18",
-    "prettier": "^3.8.3",
-    "react-hook-form": "^7.77.0",
-    "sass": "^1.100.0",
+    "prettier": "^3.8.4",
+    "react-hook-form": "^7.80.0",
+    "sass": "^1.101.0",
     "typescript": "5.9.3"
   }
 }

package/src/cctv/apis/client.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { getApiError } from "@uniai-fe/util-api";
 import type {
   API_Req_CctvRtcToken,
   API_Res_CctvCompany,
@@ -21,6 +22,86 @@ export const CCTV_RTC_TOKEN_FALLBACK_MAX_AGE_MS = 5 * 60 * 1000;
  */
 export const CCTV_RTC_TOKEN_GC_TIME_MS = CCTV_RTC_TOKEN_FALLBACK_MAX_AGE_MS;
 
+/**
+ * CCTV; RTC token request error
+ * @property {number} [statusCode] service token route HTTP status
+ * @desc
+ * fetch 성공 여부와 API payload 실패 여부를 React Query error 상태로 통일하기 위한 내부 error다.
+ */
+class CctvRtcTokenRequestError extends Error {
+  readonly statusCode?: number;
+
+  constructor(message: string, statusCode?: number) {
+    super(message);
+    this.name = "CctvRtcTokenRequestError";
+    this.statusCode = statusCode;
+  }
+}
+
+/**
+ * CCTV; RTC token direct response guard
+ * @param {unknown} payload 검사할 token response payload
+ * @returns {payload is API_Res_CctvRtcToken} direct `{ token }` 응답 여부
+ */
+const isCctvRtcTokenResponse = (
+  payload: unknown,
+): payload is API_Res_CctvRtcToken => {
+  if (!payload || typeof payload !== "object") {
+    return false;
+  }
+
+  const nextPayload = payload as Partial<API_Res_CctvRtcToken>;
+
+  return (
+    typeof nextPayload.token === "string" && nextPayload.token.trim() !== ""
+  );
+};
+
+/**
+ * CCTV; RTC token payload normalizer
+ * @param {unknown} payload service token route 응답 payload
+ * @returns {API_Res_CctvRtcToken | null} 사용 가능한 token 응답
+ * @desc
+ * service route가 direct `{ token }` 또는 API base `{ data: { token } }`를 반환하는 경우를 모두 소비한다.
+ */
+const getCctvRtcTokenResponse = (
+  payload: unknown,
+): API_Res_CctvRtcToken | null => {
+  if (isCctvRtcTokenResponse(payload)) {
+    return payload;
+  }
+
+  if (!payload || typeof payload !== "object") {
+    return null;
+  }
+
+  const nextPayload = payload as { data?: unknown };
+
+  return isCctvRtcTokenResponse(nextPayload.data) ? nextPayload.data : null;
+};
+
+/**
+ * CCTV; RTC token query retry policy
+ * @param {number} failureCount 현재 실패 횟수
+ * @param {Error} error queryFn에서 throw된 error
+ * @returns {boolean} 재시도 여부
+ * @desc
+ * 인증/권한/config/응답 계약 오류는 재시도하지 않고, 5xx 또는 network error만 1회 재시도한다.
+ */
+const shouldRetryCctvRtcTokenQuery = (
+  failureCount: number,
+  error: Error,
+): boolean => {
+  if (
+    error instanceof CctvRtcTokenRequestError &&
+    (error.statusCode === undefined || error.statusCode < 500)
+  ) {
+    return false;
+  }
+
+  return failureCount < 1;
+};
+
 /**
  * CCTV; client company-list fetcher
  * @param {object} params 요청 파라미터
@@ -64,23 +145,49 @@ export const useQueryCctvCompanyList = ({
  * @param {string} params.username CCTV token 권한 확인용 계정명
  * @param {string} [params.url] service에서 주입한 token API 경로
  * @returns {Promise<API_Res_CctvRtcToken>} RTC token 응답
+ * @desc
+ * - UDS는 기본 token route로 fallback하지 않고 service가 주입한 `url`만 호출한다.
+ * - body의 `company_id`, `cam_id`, `username`은 token route가 권한 검증에 사용할 client-visible 식별자다.
+ * - service route는 이 값을 신뢰하지 말고 authenticated session 기준으로 접근 권한을 재검증해야 한다.
  */
 export const postCctvRtcToken = async ({
   company_id,
   cam_id,
   username,
   url,
-}: API_Req_CctvRtcToken & { url?: string }): Promise<API_Res_CctvRtcToken> =>
-  await // token route는 service-local proxy가 있으면 그 경로를 우선 사용한다.
-  (
-    await fetch(url ?? "/api/cctv/token", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ company_id, cam_id, username }),
-    })
-  ).json();
+}: API_Req_CctvRtcToken & { url?: string }): Promise<API_Res_CctvRtcToken> => {
+  if (!url) {
+    throw new CctvRtcTokenRequestError("CCTV token URL is required.");
+  }
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ company_id, cam_id, username }),
+  });
+  const payload: unknown = await response.json().catch(() => undefined);
+  const apiError = getApiError(response, payload);
+
+  if (apiError) {
+    throw new CctvRtcTokenRequestError(
+      apiError.message ?? "CCTV token request failed.",
+      apiError.code,
+    );
+  }
+
+  const tokenResponse = getCctvRtcTokenResponse(payload);
+
+  if (!tokenResponse) {
+    throw new CctvRtcTokenRequestError(
+      "CCTV token response is missing token.",
+      response.status,
+    );
+  }
+
+  return tokenResponse;
+};
 
 /**
  * CCTV; RTC token query hook
@@ -112,6 +219,7 @@ export const useQueryCctvRtcToken = ({
     // exp decode가 불가한 token은 fallback age를 넘기면 신규 WHEP 연결에 쓰지 않는다.
     staleTime: CCTV_RTC_TOKEN_FALLBACK_MAX_AGE_MS,
     gcTime: CCTV_RTC_TOKEN_GC_TIME_MS,
+    retry: shouldRetryCctvRtcTokenQuery,
     // focus/reconnect/mount가 곧바로 다수 WHEP 재협상으로 이어지지 않도록 자동 refetch를 막는다.
     refetchOnMount: false,
     refetchOnReconnect: false,

package/src/cctv/hooks/useRtcStream.ts

@@ -182,6 +182,7 @@ export function useCctvRtcStream({
 }: UseCctvRtcStreamParams): UseCctvRtcStreamReturn {
   // Provider를 통해 주입된 기본 토큰 발급 URL을 확보한다.
   const { tokenUrl: contextTokenUrl } = useCctvApiUrl();
+  const tokenEndpointUrl = tokenUrl ?? contextTokenUrl;
 
   // registry는 WHEP connection/MediaStream을 Provider scope에서 유지한다.
   const streamRegistry = useCctvRtcStreamRegistry();
@@ -270,12 +271,13 @@ export function useCctvRtcStream({
     cam_id: cam?.cam_id ?? "",
     enabled: isStreamStartGranted,
     username: tokenUsername,
-    url: tokenUrl ?? contextTokenUrl,
+    url: tokenEndpointUrl,
   });
 
   const { refetch: refetchRtcToken } = tokenQuery;
   const isTokenLoading = tokenQuery.isFetching;
-  const isTokenError = tokenQuery.isError;
+  const isTokenEndpointMissing = isStreamStartGranted && !tokenEndpointUrl;
+  const isTokenError = tokenQuery.isError || isTokenEndpointMissing;
 
   const streamKeyCandidate = useMemo(() => {
     // streamKey는 online 카메라와 endpoint/token이 모두 준비된 뒤에만 만들 수 있다.

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

@@ -1,4 +1,5 @@
 .cctv-cam-list-container {
+  container: cctv-cam-list / inline-size;
   width: 100%;
   height: 100%;
 
@@ -19,8 +20,8 @@
   width: 100%;
   grid-template-columns: repeat(
     auto-fit,
-    minmax(320px, 1fr)
-  ); // 최소 너비 비율을 4:3으로 맞춤
+    minmax(min(100%, var(--cctv-list-item-min-width)), 1fr)
+  );
   gap: var(--cctv-list-gap);
   padding: 0;
   margin: 0;
@@ -33,3 +34,28 @@
 .cctv-cam-list-item .cctv-video-container {
   max-height: 240px;
 }
+
+// 4:3 card ratio는 video container가 책임지고, list는 320px card + 12px gap 기준으로 열 수만 조정한다.
+@container cctv-cam-list (min-width: 652px) {
+  .cctv-cam-list-track {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container cctv-cam-list (min-width: 984px) {
+  .cctv-cam-list-track {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@container cctv-cam-list (min-width: 1316px) {
+  .cctv-cam-list-track {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@container cctv-cam-list (min-width: 1648px) {
+  .cctv-cam-list-track {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}

package/src/cctv/styles/variables.scss

@@ -2,6 +2,7 @@
   /* Card layout */
   --cctv-video-radius: 12px;
   --cctv-list-gap: var(--spacing-gap-5);
+  --cctv-list-item-min-width: 320px;
 
   --cctv-overlay-padding-x: var(--spacing-padding-8);
   --cctv-overlay-padding-y: var(--spacing-padding-6);