@uniai-fe/uds-templates 0.1.20 → 0.1.21

package/src/cctv/types/api.ts

@@ -0,0 +1,166 @@
+import type { UtilQueryBaseParams } from "@uniai-fe/util-functions";
+
+/**
+ * CCTV; api getCompanyList params
+ * @property {string} domain API 요청 도메인(서버)
+ * @property {string} routeUrl Next.js app/api 이하 경로 url
+ * @property {string} [queryUrl] 백엔드 요청 url
+ * @property {URLSearchParams} searchParams api 요청 search params
+ */
+export interface API_Req_GetCompanyListParams extends Omit<
+  UtilQueryBaseParams,
+  "queryUrl"
+> {
+  /**
+   * 백엔드 요청 url
+   */
+  queryUrl?: string;
+  /**
+   * api 요청 search params
+   */
+  searchParams: URLSearchParams;
+}
+
+/**
+ * CCTV: 업체에 설치된 카메라 목록
+ * @property {string} cam_id 카메라 id코드
+ * @property {string} cam_name 카메라 별칭
+ * @property {boolean} cam_online 카메라 설치상태
+ * @property {string} [cam_rtc] 카메라 스트리밍 WebRTC 경로
+ * @property {string} [cam_rtcp] 카메라 RTCP 경로
+ */
+export interface API_Res_CctvCompanyCameraList {
+  // API 응답은 데이터-only 구조이므로 UI 전용 콜백은 포함하지 않는다.
+  /**
+   * 카메라 ID (번호)
+   */
+  cam_id: string;
+  /**
+   * 카메라 이름
+   * ex) 1동, 2동, ..., 외부1, 외부2, ...
+   */
+  cam_name: string;
+  /**
+   * 카메라 설치 상태
+   */
+  cam_online: boolean;
+  /**
+   * RTC 경로
+   * https://{company_id}.rtc.uniai.com/cam{cam_id}
+   */
+  cam_rtc?: string;
+  /**
+   * RTCP 경로
+   */
+  cam_rtcp?: string;
+}
+
+/**
+ * CCTV; 각 분야그룹의 업체목록
+ * @property {string} company_id 업체 id코드 (a.k.a site)
+ * @property {string} company_name 업체명
+ * @property {API_Res_CctvCompanyCameraList[]} cam_list 설치된 카메라 목록
+ */
+export interface API_Res_CctvCompanyList {
+  /**
+   * 업체 ID
+   */
+  company_id: string;
+  /**
+   * 업체명
+   * - 농장, 부화장, 사료공장 등의 업체명
+   */
+  company_name: string;
+  /**
+   * 업체 내에 설치된 카메라 목록
+   */
+  cam_list: API_Res_CctvCompanyCameraList[];
+}
+
+/**
+ * CCTV; 각 분야의 그룹 목록
+ * @property {string} group_code 사육그룹 코드 (C, PS-Growing, PS-Laying, PS-Hatching, FeedFactory)
+ * @property {string} group_name 사육그룹 이름 (사육, 종계(육성), 종계(산란), 부화, 사료공장)
+ * @property {API_Res_CctvCompanyList[]} 그룹 하위 업체목록
+ */
+export interface API_Res_CctvCompanyGroup {
+  /**
+   * 그룹 코드
+   * - C: 사육농장
+   * - PS-Growing: 종계(육성)농장
+   * - PS-Laying: 종계(산란)농장
+   * - PS-Hatching: 부화장
+   * - FeedFactory: 사료공장
+   */
+  group_code: string;
+  /**
+   * 그룹명
+   * - 사육
+   * - 종계(육성)
+   * - 종계(산란)
+   * - 부화
+   * - 사료공장
+   */
+  group_name: string;
+  /**
+   * 그룹에 속한 업체 목록
+   */
+  list: API_Res_CctvCompanyList[];
+}
+
+/**
+ * CCTV; 실시간 스트리밍 토큰 요청
+ * @property {string} company_id 업체 id코드
+ * @property {string} cam_id 카메라 id코드
+ * @property {string} username 사용자명
+ */
+export interface API_Req_CctvRtcToken {
+  company_id: string;
+  cam_id: string;
+  username: string;
+}
+
+/**
+ * CCTV; 실시간 스트리밍 토큰 응답
+ * @property {string} token 인증 토큰
+ */
+export interface API_Res_CctvRtcToken {
+  token: string;
+}
+
+/**
+ * CCTV; 스트리밍 토큰 응답
+ * @property {string} token JWT Bearer 토큰
+ * @property {string} [endpoint] 스트림 WHEP 엔드포인트 (없으면 cam_rtc 사용)
+ */
+export interface API_Res_CctvStreamToken {
+  /**
+   * JWT Bearer 토큰
+   */
+  token: string;
+  /**
+   * 스트림 엔드포인트 주소 (선택)
+   */
+  endpoint?: string;
+}
+
+/**
+ * CCTV; 스트리밍 토큰 요청 파라미터
+ * @property {string} username 사용자 아이디
+ * @property {string} company_id 업체 id코드(site)
+ * @property {string} cam_id 카메라 id코드
+ */
+export interface API_Req_CctvStreamToken {
+  /**
+   * 사용자 아이디
+   */
+  username: string;
+  /**
+   * 업체 ID (site)
+   */
+  company_id?: string;
+  /**
+   * 카메라 ID
+   */
+  cam_id: string;
+}

package/src/cctv/types/carousel.ts

@@ -0,0 +1,24 @@
+import type { MutableRefObject, ReactNode } from "react";
+
+/**
+ * CCTV Pagination Carousel Context 값 모양.
+ */
+export interface CctvPaginationCarouselContextValue {
+  viewportRef: MutableRefObject<HTMLDivElement | null>;
+  trackRef: MutableRefObject<HTMLUListElement | null>;
+  onPrev: () => void;
+  onNext: () => void;
+  moveTo: (index: number) => void;
+  registerItemCount: (count: number) => void;
+  currentIndex: number;
+  maxIndex: number;
+  isReachStart: boolean;
+  isReachEnd: boolean;
+}
+
+/**
+ * CCTV Pagination Carousel Provider props.
+ */
+export interface CctvPaginationCarouselProviderProps {
+  children: ReactNode;
+}

package/src/cctv/types/context.ts

@@ -0,0 +1,68 @@
+import type { API_Res_CctvCompanyGroup } from "./api";
+
+/**
+ * CCTV; 컨텍스트 제공자 Props
+ * @property {string} [company_id] 업체 id코드 (default: undefined)
+ * @property {boolean} [isActiveFinder] 탐색기 활성화 여부 (default: true)
+ * @property {boolean} [isPopup] 팝업 모드 여부 (default: undefined | false)
+ */
+export interface CctvContainerProps {
+  /**
+   * 업체 id코드
+   */
+  company_id?: string;
+  /**
+   * 탐색기 활성화 여부
+   */
+  isActiveFinder?: boolean;
+  /**
+   * 팝업 모드 여부
+   */
+  isPopup?: boolean;
+}
+
+/**
+ * CCTV; 선택된 컨텍스트
+ * @property {string} [company_id] 선택된 업체 id코드
+ * @property {string} [cam_id] 선택된 카메라 id코드
+ */
+export interface CctvSelectedContext {
+  /**
+   * 선택된 업체 ID
+   * - index 또는 string
+   */
+  company_id?: string;
+  /**
+   * 선택된 카메라 ID
+   * - index 또는 string
+   */
+  cam_id?: string;
+}
+
+/**
+ * CCTV; 실시간 영상보기 컨텍스트
+ * @property {string} [company_id] 선택된 업체 id코드
+ * @property {string} [cam_id] 선택된 카메라 id코드
+ * @property {string} [search] 검색 키워드 (입력값)
+ * @property {string} [filter] 검색 키워드 (필터값)
+ * @property {API_Res_CctvCompanyGroup[]} rawData 원본 데이터 배열
+ * @property {boolean} isFetching 데이터 로딩 상태
+ * @property {boolean} isError 데이터 에러 상태
+ */
+export interface CctvContext extends CctvSelectedContext {
+  username: string;
+  /**
+   * 검색 키워드 (입력값)
+   */
+  search: string;
+  /**
+   * 검색 키워드 (필터값)
+   */
+  filter: string;
+  /**
+   * 원본 데이터 배열
+   */
+  rawData: API_Res_CctvCompanyGroup[];
+  isFetching: boolean;
+  isError: boolean;
+}

package/src/cctv/types/index.ts

@@ -0,0 +1,4 @@
+export type * from "./api";
+export type * from "./list";
+export type * from "./context";
+export type * from "./carousel";

package/src/cctv/types/list.ts

@@ -0,0 +1,94 @@
+import type {
+  API_Res_CctvCompanyCameraList,
+  API_Res_CctvCompanyGroup,
+  API_Res_CctvCompanyList,
+} from "./api";
+
+/**
+ * CCTV; 업체 선택 - 카메라 정보
+ * @property {string} renderKey 렌더링 unique key
+ * @property {boolean} selected 카메라 선택 현황
+ * @property {Function} [onSelect] 카메라 선택 콜백 이벤트
+ * @property {string} cam_id 카메라 id코드
+ * @property {string} cam_name 카메라 별칭
+ * @property {boolean} cam_online 카메라 설치상태
+ * @property {string} [cam_rtc] 카메라 스트리밍 WebRTC 경로
+ * @property {string} [cam_rtcp] 카메라 RTCP 경로
+ */
+export interface CctvCompanyCameraList extends API_Res_CctvCompanyCameraList {
+  /**
+   * 카메라가 속한 업체 ID
+   */
+  company_id?: string;
+  /**
+   * 카메라가 속한 업체명
+   */
+  company_name?: string;
+  /**
+   * 렌더링 unique key
+   */
+  renderKey: string;
+  /**
+   * 카메라 선택 현황
+   */
+  selected: boolean;
+  /**
+   * 카메라 선택 콜백 이벤트
+   * @optional
+   */
+  onSelect?: () => void;
+}
+
+/**
+ * CCTV; 업체 선택 - 그룹 내 업체 UI props
+ * @property {string} renderKey 렌더링 unique key
+ * @property {boolean} selected 업체 선택 현황
+ * @property {Function} [onSelect] 업체 선택 콜백 이벤트
+ * @property {string} company_id 업체 id코드 (a.k.a site)
+ * @property {string} company_name 업체명
+ * @property {API_Res_CctvCompanyCameraList[]} cam_list 설치된 카메라 목록
+ * @property {boolean} [disabled] 업체 비활성화
+ */
+export interface CctvCompanyGroupItems extends API_Res_CctvCompanyList {
+  /**
+   * 렌더링 unique key
+   */
+  renderKey: string;
+  /**
+   * 설치된 카메라 목록
+   */
+  cam_list: CctvCompanyCameraList[];
+  /**
+   * 업체 선택 현황
+   */
+  selected: boolean;
+  /**
+   * 업체 비활성화
+   * @optional
+   */
+  disabled?: boolean;
+  /**
+   * 업체 선택 콜백 이벤트
+   * @optional
+   */
+  onSelect?: () => void;
+}
+
+/**
+ * CCTV; 업체 선택 - 그룹 UI props
+ * @property {string} renderKey 렌더링 unique key
+ * @property {CctvCompanyGroupItems[]} list 사육그룹 하위업체 목록
+ * @property {string} group_code 사육그룹 코드 (C, PS-Growing, PS-Laying, PS-Hatching, FeedFactory)
+ * @property {string} group_name 사육그룹 이름 (사육, 종계(육성), 종계(산란), 부화, 사료공장)
+ * @property {API_Res_CctvCompanyList[]} 그룹 하위 업체목록
+ */
+export interface CctvCompanyGroup extends API_Res_CctvCompanyGroup {
+  /**
+   * 렌더링 unique key
+   */
+  renderKey: string;
+  /**
+   * 그룹 하위 업체의 UI props
+   */
+  list: CctvCompanyGroupItems[];
+}

package/src/cctv/utils/data.ts

@@ -0,0 +1,40 @@
+import type {
+  API_Res_CctvCompanyGroup,
+  CctvCompanyCameraList,
+  CctvCompanyGroup,
+  CctvCompanyGroupItems,
+} from "../types";
+
+export function initCompanyList({
+  data,
+  pageCode,
+}: {
+  data: API_Res_CctvCompanyGroup[];
+  pageCode?: string;
+}) {
+  if (typeof data === "undefined" || !Array.isArray(data)) return [];
+  return data.map((group, group_index): CctvCompanyGroup => {
+    const RENDER_KEY_PREFIX = `page-${pageCode}/cctv/company-list/group_${group.group_code}`;
+    return {
+      renderKey: RENDER_KEY_PREFIX,
+      ...group,
+      list: group.list.map((d): CctvCompanyGroupItems => {
+        const companyRenderKey = `${RENDER_KEY_PREFIX}/company_${d.company_id}`;
+        return {
+          ...d,
+          renderKey: companyRenderKey,
+          selected: group_index === 0,
+          cam_list: d.cam_list.map(
+            (cam): CctvCompanyCameraList => ({
+              renderKey: `${companyRenderKey}/camera_${cam.cam_id}`,
+              ...cam,
+              company_id: d.company_id,
+              company_name: d.company_name,
+              selected: false,
+            }),
+          ),
+        };
+      }),
+    };
+  });
+}

package/src/cctv/utils/select.ts

@@ -0,0 +1,62 @@
+import type {
+  CctvCompanyCameraList,
+  CctvCompanyGroup,
+  CctvCompanyGroupItems,
+} from "../types";
+
+/**
+ * CCTV; 그룹 데이터 추출
+ * @util
+ * @property {CctvCompanyGroup[]} list CCTV 회사 그룹 리스트
+ * @property {string} groupCode 그룹 코드
+ * @returns {CctvCompanyGroup | undefined} 그룹 정보 객체 반환
+ */
+export const getGroup = (
+  list: CctvCompanyGroup[],
+  groupCode: string,
+): CctvCompanyGroup | undefined =>
+  list.find(({ group_code }) => group_code === groupCode);
+
+/**
+ * CCTV; 업체 데이터 추출
+ * @util
+ * @property {CctvCompanyGroup[]} list CCTV 회사 그룹 리스트
+ * @property {string} [companyId] 업체 ID
+ * @returns {CctvCompanyGroupItems | undefined} 업체 정보 객체 반환
+ */
+export const getCompany = (
+  list: CctvCompanyGroup[],
+  companyId?: string,
+): CctvCompanyGroupItems | undefined =>
+  typeof companyId === "undefined" || !companyId
+    ? undefined
+    : list
+        .flatMap(({ list }) => list)
+        .find(({ company_id }) => company_id === companyId);
+
+/**
+ * CCTV; 카메라 목록 데이터 추출
+ * @util
+ * @property {CctvCompanyGroup[]} list CCTV 회사 그룹 리스트
+ * @property {string} [companyId] 업체 ID
+ * @returns {CctvCompanyCameraList[]} 카메라 목록 배열 반환
+ */
+export const getCamList = (
+  list: CctvCompanyGroup[],
+  companyId?: string,
+): CctvCompanyCameraList[] => getCompany(list, companyId)?.cam_list || [];
+
+/**
+ * CCTV; 카메라 데이터 추출
+ * @util
+ * @property {CctvCompanyGroup[]} list CCTV 회사 그룹 리스트
+ * @property {string} [companyId] 업체 ID
+ * @property {string} [camId] 카메라 ID
+ * @returns {CctvCompanyCameraList | undefined} 카메라 정보 객체 반환
+ */
+export const getCam = (
+  list: CctvCompanyGroup[],
+  companyId?: string,
+  camId?: string,
+): CctvCompanyCameraList | undefined =>
+  getCamList(list, companyId).find(({ cam_id }) => cam_id === camId);

package/src/index.tsx

@@ -2,3 +2,6 @@ export * from "./page-frame";
 export * from "./auth";
 export * from "./modal";
 export * from "./weather";
+export * from "./cctv";
+
+export type * from "./types";

package/src/modal/styles/base.scss

@@ -4,7 +4,7 @@
   --modal-panel-width: 360px;
   --modal-panel-max-width: calc(100vw - var(--spacing-padding-10, 32px) * 2);
   --modal-panel-max-height: calc(100vh - var(--spacing-padding-10, 32px) * 2);
-  --modal-panel-bg: var(--color-bg-surface-static-white);
+  --modal-panel-bg: var(--color-surface-static-white);
   --modal-panel-radius: var(--theme-radius-large-1);
   --modal-panel-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
   --modal-border-color: var(--color-border-standard-cool-gray, #e4e5e7);
@@ -48,7 +48,7 @@
     --modal-panel-max-height,
     calc(100vh - var(--spacing-padding-10, 32px) * 2)
   );
-  background-color: var(--modal-panel-bg, var(--color-bg-surface-static-white));
+  background-color: var(--modal-panel-bg, var(--color-surface-static-white));
   border-radius: var(--modal-panel-radius, var(--theme-radius-large-1));
   box-shadow: var(--modal-panel-shadow, 0px 18px 40px rgba(8, 11, 30, 0.18));
   pointer-events: auto;

package/src/types/api.ts

@@ -0,0 +1,43 @@
+/**
+ * API 응답; 에러 정보
+ * @property {string} field_name - 에러 필드 이름
+ * @property {string} message - 에러 메세지
+ */
+export interface API_Res_Error {
+  /**
+   * 에러 필드 이름
+   */
+  field_name: string;
+  /**
+   * 에러 메세지
+   */
+  message: string;
+}
+
+/**
+ * API 응답; 기본 구조
+ * - GET, POST, PUT, DELETE 등 모든 API 응답에 공통적으로 사용
+ * @property {string} status - 통신 상태
+ * - "success": 정상 응답
+ * - "fail": 비정상 응답
+ * - "timeout": 타임아웃 응답
+ * @property {ResultDataType} data - 요청 응답 데이터
+ * @property {API_Res_Error[]} errors - 에러 정보
+ */
+export interface API_Res_Base<ResultDataType> {
+  /**
+   * 통신 상태
+   * - "success": 정상 응답
+   * - "fail": 비정상 응답
+   * - "timeout": 타임아웃 응답
+   */
+  status: string;
+  /**
+   * 요청 응답 데이터
+   */
+  data: ResultDataType;
+  /**
+   * 에러 정보
+   */
+  errors: API_Res_Error[];
+}

package/src/types/index.ts

@@ -0,0 +1 @@
+export type * from "./api";

package/src/auth/login/types.ts

@@ -1,2 +0,0 @@
-export type * from "./types/props";
-export type * from "./types/hooks";