@uniai-fe/uds-templates 0.1.28 → 0.1.30

package/package.json

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

package/src/cctv/components/Provider.tsx

@@ -3,18 +3,44 @@
 import { createContext, useContext } from "react";
 import { Form } from "@uniai-fe/uds-primitives";
 
-import type { CctvContext, CctvSelectedContext } from "../types";
+import type {
+  CctvApiUrlContext,
+  CctvContext,
+  CctvProviderProps,
+} from "../types";
 import { CCTV_CONTEXT_DEFAULT_VALUES } from "../data";
 
-const EndpointContext = createContext<{ listUrl?: string; tokenUrl?: string }>({
+/**
+ * CCTV; API 경로 컨텍스트
+ * @property {string} [listUrl] company-list API 요청 경로
+ * @property {string} [tokenUrl] token API 요청 경로
+ */
+const ApiUrlContext = createContext<CctvApiUrlContext>({
   listUrl: undefined,
   tokenUrl: undefined,
 });
 
-export function useCctvEndpoints() {
-  return useContext(EndpointContext);
+/**
+ * CCTV; API 경로 컨텍스트
+ * @return {CctvApiUrlContext}
+ * @desc
+ * - listUrl: company-list API 요청 경로
+ * - tokenUrl: token API 요청 경로
+ */
+export function useCctvApiUrl(): CctvApiUrlContext {
+  return useContext(ApiUrlContext);
 }
 
+/**
+ * CCTV; Provider props
+ * @component
+ * @property {string} [company_id] 선택된 업체 id코드
+ * @property {string} [cam_id] 선택된 카메라 id코드
+ * @property {string} [listUrl] company-list API 요청 경로
+ * @property {string} [tokenUrl] token API 요청 경로
+ * @property {string} [username] CCTV 조회시 권한 확인을 위한 계정명
+ * @property {React.ReactNode} children
+ */
 export default function CCTVProvider({
   username,
   company_id,
@@ -22,14 +48,9 @@ export default function CCTVProvider({
   listUrl,
   tokenUrl,
   children,
-}: {
-  username: string;
-  children: React.ReactNode;
-  listUrl?: string;
-  tokenUrl?: string;
-} & CctvSelectedContext) {
+}: CctvProviderProps) {
   return (
-    <EndpointContext.Provider value={{ listUrl, tokenUrl }}>
+    <ApiUrlContext.Provider value={{ listUrl, tokenUrl }}>
       <Form.Provider<CctvContext>
         options={{
           defaultValues: {
@@ -42,6 +63,6 @@ export default function CCTVProvider({
       >
         {children}
       </Form.Provider>
-    </EndpointContext.Provider>
+    </ApiUrlContext.Provider>
   );
 }

package/src/cctv/hooks/useCompanyData.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo } from "react";
 import { useQueryCctvCompanyList } from "../apis";
-import { useCctvEndpoints } from "../components/Provider";
+import { useCctvApiUrl } from "../components/Provider";
 import useCctvContext from "./useContext";
 
 export default function useCctvCompanyData(params?: {
@@ -11,7 +11,7 @@ export default function useCctvCompanyData(params?: {
 }) {
   const { username, url } = params || {};
 
-  const { listUrl } = useCctvEndpoints();
+  const { listUrl } = useCctvApiUrl();
   const resolvedUrl = useMemo(() => url ?? listUrl, [url, listUrl]);
   const { username: contextUsername, setValue } = useCctvContext();
 

package/src/cctv/hooks/useContext.ts

@@ -13,9 +13,10 @@ import type {
 } from "../types";
 import { initCompanyList } from "../utils/data";
 import { getCam, getCamList, getCompany } from "../utils/select";
+import { getSafePathname } from "@uniai-fe/util-functions";
 
-export default function useCctvContext(params?: { pageCode?: string }) {
-  const { pageCode } = params ?? {};
+export default function useCctvContext() {
+  const pageCode = useMemo(() => getSafePathname("cctv"), []);
 
   const setCtx = useSetAtom(cctvSelectedContext);
   const { control, setValue, ...context } = useFormContext<CctvContext>();

package/src/cctv/hooks/useRtcStream.ts

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { startWhepStream, type WhepStreamHandle } from "@uniai-fe/util-rtc";
 
 import { useQueryCctvRtcToken } from "../apis/client";
-import { useCctvEndpoints } from "../components/Provider";
+import { useCctvApiUrl } from "../components/Provider";
 import type { CctvCompanyCameraList } from "../types";
 import { useFormContext, useWatch } from "react-hook-form";
 
@@ -19,7 +19,7 @@ export function useCctvRtcStream({
   companyId,
   tokenUrl,
 }: UseCctvRtcStreamParams) {
-  const { tokenUrl: contextTokenUrl } = useCctvEndpoints();
+  const { tokenUrl: contextTokenUrl } = useCctvApiUrl();
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const [connectionState, setConnectionState] =
     useState<RTCPeerConnectionState>("new");

package/src/cctv/types/context.ts

@@ -39,6 +39,22 @@ export interface CctvSelectedContext {
   cam_id?: string;
 }
 
+/**
+ * CCTV; API 경로 컨텍스트 (optional)
+ * @property {string} [listUrl] company-list API 요청 경로
+ * @property {string} [tokenUrl] token API 요청 경로
+ */
+export interface CctvApiUrlContext {
+  /**
+   * company-list API 요청 경로
+   */
+  listUrl?: string;
+  /**
+   * token API 요청 경로
+   */
+  tokenUrl?: string;
+}
+
 /**
  * CCTV; 실시간 영상보기 컨텍스트
  * @property {string} [company_id] 선택된 업체 id코드
@@ -66,3 +82,18 @@ export interface CctvContext extends CctvSelectedContext {
   isFetching: boolean;
   isError: boolean;
 }
+
+/**
+ * CCTV; Provider props
+ * @property {string} [company_id] 선택된 업체 id코드
+ * @property {string} [cam_id] 선택된 카메라 id코드
+ * @property {string} [listUrl] company-list API 요청 경로
+ * @property {string} [tokenUrl] token API 요청 경로
+ * @property {string} [username] CCTV 조회시 권한 확인을 위한 계정명
+ * @property {React.ReactNode} children
+ */
+export type CctvProviderProps = CctvSelectedContext &
+  CctvApiUrlContext & {
+    username?: string;
+    children: React.ReactNode;
+  };

package/src/cctv/components/__viewer.tsx

@@ -1,99 +0,0 @@
-// "use client";
-
-// import clsx from "clsx";
-
-// import CCTVVideoContainer from "./video/Container";
-// import CCTVVideoContents from "./video/Video";
-// import CCTVVideoOverlayContainer from "./video/overlay/Container";
-// import CCTVVideoOverlayHeader from "./video/overlay/header/Container";
-// import CCTVVideoOverlayBody from "./video/overlay/body/Container";
-// import CCTVVideoError from "./video/overlay/body/Error";
-// import CCTVVideoOverlayFooter from "./video/overlay/footer/Container";
-// import { CCTVPagination } from "./pagination";
-// import useCctvContext from "../hooks/useContext";
-
-// export default function CCTVViewer({ className }: { className?: string }) {
-//   const { selectedCompany, selectedCam, cams, companyValidList, isFetching } =
-//     useCctvContext();
-
-//   const totalCamCount = selectedCompany?.cam_list.length ?? 0;
-//   const onlineCamCount = selectedCompany
-//     ? selectedCompany.cam_list.filter(({ cam_online }) => cam_online).length
-//     : 0;
-
-//   const renderVideoSection = () => {
-//     if (isFetching && !selectedCam) {
-//       return <ViewerPlaceholder message="CCTV 데이터를 불러오는 중입니다." />;
-//     }
-
-//     if (!selectedCam) {
-//       return <ViewerPlaceholder message="좌측 목록에서 카메라를 선택하세요." />;
-//     }
-
-//     const isCamOffline = !selectedCam.cam_online;
-
-//     return (
-//       <CCTVVideoContainer>
-//         <CCTVVideoContents />
-//         <CCTVVideoOverlayContainer>
-//           <CCTVVideoOverlayHeader
-//             activeLiveState
-//             activeTitle
-//             activeTime
-//             activeCloseButton
-//             liveStateDisabled={isCamOffline}
-//           />
-//           {isCamOffline && (
-//             <CCTVVideoOverlayBody className="is-error">
-//               <CCTVVideoError />
-//             </CCTVVideoOverlayBody>
-//           )}
-//           <CCTVVideoOverlayFooter
-//             activeTitle
-//             activeOpenButton={false}
-//             title={selectedCam.cam_name}
-//           />
-//         </CCTVVideoOverlayContainer>
-//       </CCTVVideoContainer>
-//     );
-//   };
-
-//   return (
-//     <section className={clsx("cctv-viewer", className)}>
-//       <header className="cctv-viewer-header">
-//         <div className="cctv-viewer-header-title">
-//           <p className="cctv-viewer-company-name">
-//             {selectedCompany?.company_name ?? "CCTV Viewer"}
-//           </p>
-//           <p className="cctv-viewer-company-meta">
-//             {selectedCompany
-//               ? `총 ${totalCamCount}대 중 ${onlineCamCount}대 가동`
-//               : "카메라를 선택하면 상세 정보를 볼 수 있습니다."}
-//           </p>
-//         </div>
-//         <div className="cctv-viewer-company-summary">
-//           <span>
-//             연결된 업체 <strong>{companyValidList.length}</strong>
-//           </span>
-//         </div>
-//       </header>
-
-//       <div className="cctv-viewer-body">
-//         <div className="cctv-viewer-main">{renderVideoSection()}</div>
-//         <div className="cctv-viewer-carousel">
-//           <div className="cctv-viewer-carousel-header">
-//             <h4>카메라 목록</h4>
-//             <span>{cams.length}대</span>
-//           </div>
-//           <CCTVPagination.Container>
-//             <CCTVPagination.List.Container list={cams} />
-//           </CCTVPagination.Container>
-//         </div>
-//       </div>
-//     </section>
-//   );
-// }
-
-// function ViewerPlaceholder({ message }: { message: string }) {
-//   return <div className="cctv-viewer-placeholder">{message}</div>;
-// }