@uniai-fe/uds-templates 0.1.20 → 0.1.22

package/src/cctv/hooks/useCompanyData.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+import { useFormContext } from "react-hook-form";
+import { useQueryCctvCompanyList } from "../apis";
+import { useCctvEndpoints } from "../components/Provider";
+import type { CctvContext } from "../types";
+
+export default function useCctvCompanyData({
+  username,
+  url,
+}: {
+  username: string;
+  url?: string;
+}) {
+  const { listUrl } = useCctvEndpoints();
+  const resolvedUrl = useMemo(() => url ?? listUrl, [url, listUrl]);
+  const { setValue } = useFormContext<CctvContext>();
+  const { data, isFetching, isError, ...rest } = useQueryCctvCompanyList({
+    username,
+    url: resolvedUrl,
+  });
+
+  useEffect(() => {
+    if (data?.data) {
+      setValue("rawData", data.data);
+    }
+  }, [data, setValue]);
+
+  useEffect(() => {
+    setValue("isFetching", Boolean(isFetching));
+  }, [isFetching, setValue]);
+
+  useEffect(() => {
+    setValue("isError", Boolean(isError));
+  }, [isError, setValue]);
+
+  return { data, isFetching, isError, ...rest };
+}

package/src/cctv/hooks/useContext.ts

@@ -0,0 +1,150 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import { useSetAtom } from "jotai";
+import { useFormContext, useWatch } from "react-hook-form";
+
+import { cctvSelectedContext } from "../jotai/context";
+import type {
+  CctvCompanyCameraList,
+  CctvCompanyGroup,
+  CctvCompanyGroupItems,
+  CctvContext,
+} from "../types";
+import { initCompanyList } from "../utils/data";
+import { getCam, getCamList, getCompany } from "../utils/select";
+
+export default function useCctvContext(params?: { pageCode?: string }) {
+  const { pageCode } = params ?? {};
+
+  // const username = useCctvUsername();
+  const setCtx = useSetAtom(cctvSelectedContext);
+  const { control, setValue, ...context } = useFormContext<CctvContext>();
+
+  const rawData = useWatch({ control, name: "rawData" });
+  // console.log("useCctvContext rawData:", rawData);
+  const isFetching = useWatch({ control, name: "isFetching" });
+  const isError = useWatch({ control, name: "isError" });
+
+  const companyList = useMemo(
+    () => initCompanyList({ data: rawData, pageCode }),
+    [rawData, pageCode],
+  );
+
+  // console.log("useCctvContext companyList:", companyList);
+
+  const searchedKeyword = useWatch({ control, name: "filter" });
+  const selectedCompanyId = useWatch({ control, name: "company_id" });
+  const selectedCamId = useWatch({ control, name: "cam_id" });
+
+  const onSelectCompany = useCallback(
+    (company_id: string) => {
+      if (selectedCompanyId === company_id) return;
+
+      setValue("company_id", company_id);
+      setValue("cam_id", "");
+
+      setCtx({ company_id, cam_id: "" });
+    },
+    [selectedCompanyId, setValue, setCtx],
+  );
+
+  const onToggleCamera = useCallback(
+    (cam_id: string) => {
+      setValue("cam_id", selectedCamId === cam_id ? "" : cam_id);
+      setCtx(prev => ({
+        ...prev,
+        cam_id: selectedCamId === cam_id ? "" : cam_id,
+      }));
+    },
+    [selectedCamId, setValue, setCtx],
+  );
+
+  const onOpenCamera = useCallback(
+    (cam_id: string) => {
+      if (selectedCamId === cam_id) return;
+      setValue("cam_id", cam_id);
+      setCtx(prev => ({ ...prev, cam_id: cam_id }));
+    },
+    [selectedCamId, setValue, setCtx],
+  );
+  const onCloseCamera = useCallback(
+    (cam_id: string) => {
+      if (selectedCamId !== cam_id) return;
+      setValue("cam_id", "");
+      setCtx(prev => ({ ...prev, cam_id: "" }));
+    },
+    [selectedCamId, setValue, setCtx],
+  );
+
+  const groups = useMemo(
+    (): CctvCompanyGroup[] =>
+      companyList.map(group => ({
+        ...group,
+        list: group.list.map((d: CctvCompanyGroupItems) => ({
+          ...d,
+          selected: d.company_id === selectedCompanyId,
+          onSelect: () => onSelectCompany(d.company_id),
+          cam_list: d.cam_list.map((cam: CctvCompanyCameraList) => ({
+            ...cam,
+            selected: cam.cam_id === selectedCamId,
+            onSelect: () => onOpenCamera(cam.cam_id),
+          })),
+        })),
+      })),
+    [
+      companyList,
+      onSelectCompany,
+      onOpenCamera,
+      selectedCamId,
+      selectedCompanyId,
+    ],
+  );
+
+  const selectedCompany = useMemo(
+    (): CctvCompanyGroupItems | undefined =>
+      getCompany(groups, selectedCompanyId),
+    [selectedCompanyId, groups],
+  );
+
+  const cams = useMemo(
+    (): CctvCompanyCameraList[] => getCamList(groups, selectedCompanyId),
+    [selectedCompanyId, groups],
+  );
+
+  const selectedCam = useMemo(
+    (): Omit<CctvCompanyCameraList, "renderKey"> | undefined =>
+      getCam(groups, selectedCompanyId, selectedCamId),
+    [selectedCamId, selectedCompanyId, groups],
+  );
+
+  const companyValidList = useMemo(
+    () =>
+      groups
+        .flatMap(({ list }) => list)
+        .filter(
+          ({ cam_list }) => !cam_list.every(({ cam_online }) => !cam_online),
+        )
+        .map(({ company_id }) => company_id),
+    [groups],
+  );
+
+  return {
+    isFetching,
+    isError,
+    searchedKeyword,
+    selectedCompanyId,
+    selectedCamId,
+    selectedCompany,
+    selectedCam,
+    groups,
+    companyValidList,
+    cams,
+    control,
+    setValue,
+    ...context,
+    onToggleCamera,
+    onOpenCamera,
+    onCloseCamera,
+  };
+}

package/src/cctv/hooks/useRtcStream.ts

@@ -0,0 +1,94 @@
+"use client";
+
+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 type { CctvCompanyCameraList } from "../types";
+import { useFormContext, useWatch } from "react-hook-form";
+
+interface UseCctvRtcStreamParams {
+  cam?: Omit<CctvCompanyCameraList, "renderKey">;
+  companyId?: string;
+  tokenUrl?: string;
+}
+
+export function useCctvRtcStream({
+  cam,
+  companyId,
+  tokenUrl,
+}: UseCctvRtcStreamParams) {
+  const { tokenUrl: contextTokenUrl } = useCctvEndpoints();
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [connectionState, setConnectionState] =
+    useState<RTCPeerConnectionState>("new");
+  const [streamError, setStreamError] = useState<string | null>(null);
+  const [isStreaming, setStreaming] = useState(false);
+
+  const { control } = useFormContext();
+  const username = useWatch({ control, name: "username" });
+
+  const tokenQuery = useQueryCctvRtcToken({
+    company_id: companyId ?? "",
+    cam_id: cam?.cam_id ?? "",
+    username,
+    url: tokenUrl ?? contextTokenUrl,
+  });
+
+  const endpoint = useMemo(() => {
+    if (!cam?.cam_rtc) return undefined;
+    const query = username ? `?username=${encodeURIComponent(username)}` : "";
+    return `${cam.cam_rtc.replace(/\/$/, "")}/whep${query}`;
+  }, [cam?.cam_rtc, username]);
+
+  useEffect(() => {
+    const currentVideo = videoRef.current;
+    // 현재 렌더에서 할당된 video 요소를 캡처해 cleanup 시 안전하게 참조한다.
+    if (!tokenQuery.data?.token || !endpoint || !currentVideo) return;
+
+    let handle: WhepStreamHandle | null = null;
+    const controller = new AbortController();
+    setStreamError(null);
+    setStreaming(true);
+    setConnectionState("connecting");
+
+    startWhepStream({
+      endpoint,
+      token: tokenQuery.data.token,
+      video: currentVideo,
+      signal: controller.signal,
+      onConnectionStateChange: state => setConnectionState(state),
+    })
+      .then(streamHandle => {
+        handle = streamHandle;
+      })
+      .catch(error => {
+        setStreamError(
+          error instanceof Error
+            ? error.message
+            : "스트림 연결에 실패했습니다.",
+        );
+      })
+      .finally(() => {
+        setStreaming(false);
+      });
+
+    return () => {
+      controller.abort();
+      handle?.close();
+      handle = null;
+      currentVideo.srcObject = null;
+    };
+  }, [endpoint, tokenQuery.data?.token, cam?.cam_id]);
+
+  return {
+    videoRef,
+    connectionState,
+    streamError,
+    isStreaming,
+    isTokenLoading: tokenQuery.isFetching,
+    isTokenError: tokenQuery.isError,
+    refetchToken: tokenQuery.refetch,
+  };
+}

package/src/cctv/img/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 4L7 12L15 20" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/cctv/img/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 4L17 12L9 20" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/cctv/img/error.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.43463 4.43463C1.74705 4.12221 2.25307 4.12221 2.56549 4.43463L16.5655 18.4346C16.8779 18.7471 16.8779 19.2531 16.5655 19.5655C16.2531 19.8779 15.7471 19.8778 15.4346 19.5655L14.6016 18.7325C14.4079 18.7757 14.2069 18.7999 14.0001 18.7999H5.00006C3.45368 18.7999 2.20029 17.5464 2.20026 16.0001V8.00006C2.20026 7.51792 2.32348 7.06501 2.53815 6.66901L1.43463 5.56549C1.12221 5.25307 1.12221 4.74705 1.43463 4.43463Z" fill="#CACBCE"/>
+<path d="M14.0001 5.20026C15.5464 5.20029 16.7999 6.45368 16.7999 8.00006V8.81744L19.3311 7.80573C20.5133 7.33288 21.7995 8.20346 21.7999 9.47662V14.5235C21.7995 15.7966 20.5133 16.6672 19.3311 16.1944L16.7999 15.1817V16.0001C16.7999 16.4067 16.7106 16.792 16.5547 17.1407L4.63971 5.22565C4.75777 5.21047 4.87787 5.20026 5.00006 5.20026H14.0001Z" fill="#CACBCE"/>
+</svg>

package/src/cctv/img/viewer-close.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.5009 9.65186C24.9695 9.18323 25.7285 9.18323 26.1972 9.65186C26.6658 10.1205 26.6658 10.8795 26.1972 11.3481L19.62 17.9238L26.1972 24.501C26.6658 24.9696 26.6658 25.7286 26.1972 26.1973C25.7285 26.6659 24.9695 26.6659 24.5009 26.1973L17.9237 19.6201L11.3481 26.1973C10.8794 26.6659 10.1204 26.6659 9.65176 26.1973C9.18314 25.7286 9.18314 24.9696 9.65176 24.501L16.2274 17.9238L9.65176 11.3481C9.18314 10.8795 9.18314 10.1205 9.65176 9.65186C10.1204 9.18323 10.8794 9.18323 11.3481 9.65186L17.9237 16.2275L24.5009 9.65186Z" fill="white"/>
+</svg>

package/src/cctv/img/viewer-open.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 9.5V6.5C4 5.39543 4.89543 4.5 6 4.5H9" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 4.5L18 4.5C19.1046 4.5 20 5.39543 20 6.5L20 9.5" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 19.5L6 19.5C4.89543 19.5 4 18.6046 4 17.5L4 14.5" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 14.5L20 17.5C20 18.6046 19.1046 19.5 18 19.5L15 19.5" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/cctv/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/cctv/index.tsx

@@ -0,0 +1,9 @@
+import "./index.scss";
+
+export * from "./apis";
+export * from "./data";
+export * from "./components";
+export * from "./hooks";
+export * from "./jotai";
+
+export type * from "./types";

package/src/cctv/jotai/context.ts

@@ -0,0 +1,9 @@
+"use client";
+
+import { atom } from "jotai";
+import type { CctvSelectedContext } from "../types";
+
+export const cctvSelectedContext = atom<CctvSelectedContext>({
+  company_id: "",
+  cam_id: "",
+});

package/src/cctv/jotai/index.ts

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

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

@@ -0,0 +1,32 @@
+.cctv-cam-list-container {
+  width: 100%;
+  height: 100%;
+
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  scroll-snap-type: y proximity;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.cctv-cam-list-track {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--cctv-list-gap);
+  padding: 0;
+  margin: 0;
+  scroll-behavior: smooth;
+  & > * {
+    scroll-snap-align: start;
+  }
+}
+
+.cctv-cam-list-item .cctv-video-container {
+  max-height: 240px;
+}

package/src/cctv/styles/index.scss

@@ -0,0 +1,5 @@
+@use "./variables.scss";
+@use "./video.scss";
+@use "./cam-list.scss";
+@use "./pagination.scss";
+@use "./viewer.scss";

package/src/cctv/styles/pagination.scss

@@ -0,0 +1,77 @@
+.cctv-pagination-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--cctv-carousel-gap);
+}
+
+.cctv-pagination-list-container {
+  width: calc(
+    100% - (var(--cctv-pagination-move-button-size) * 2) -
+      (var(--cctv-carousel-gap) * 2)
+  );
+}
+
+.cctv-pagination-viewport {
+  overflow-x: auto;
+  overflow-y: hidden;
+  width: 100%;
+  scroll-snap-type: x proximity;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.cctv-pagination-track {
+  // Carousel 트랙은 flex로 구성하고 gap으로 간격을 맞춘다.
+  display: flex;
+  gap: var(--cctv-carousel-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  scroll-behavior: smooth;
+  & > * {
+    scroll-snap-align: start;
+  }
+}
+
+.cctv-pagination-track > li {
+  // panel 너비를 고정해 viewport 이동 시 균등하게 보이도록 한다.
+  flex: 0 0 minmax(150px, 1fr);
+}
+
+.cctv-pagination-list-item {
+  cursor: pointer;
+}
+
+.cctv-pagination-list-item .cctv-video-container {
+  max-height: 152px;
+}
+
+.cctv-pagination-list-thumbnail {
+  width: 100%;
+  height: 100%;
+}
+
+.cctv-pagination-move-button {
+  width: var(--cctv-pagination-move-button-size);
+  height: var(--cctv-pagination-move-button-size);
+  border-radius: var(--cctv-pagination-move-button-size);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+
+  background: var(--cctv-pagination-move-button-active);
+  &.disabled {
+    background: var(--cctv-pagination-move-button-disabled);
+  }
+  &:disabled {
+    background: var(--cctv-pagination-move-button-disabled);
+  }
+}

package/src/cctv/styles/variables.scss

@@ -0,0 +1,38 @@
+:root {
+  /* Card layout */
+  --cctv-video-radius: 12px;
+  --cctv-list-gap: var(--spacing-gap-5);
+
+  --cctv-overlay-padding-x: var(--spacing-padding-8);
+  --cctv-overlay-padding-y: var(--spacing-padding-6);
+
+  --cctv-video-bg: #5f5f5f;
+  --cctv-overlay-bg: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.2) 100%
+  );
+
+  /* Live State */
+  --cctv-live-state-bg-active: var(--color-cool-gray-10);
+  --cctv-live-state-dot-active: var(--color-feedback-new);
+  --cctv-live-state-text-active: var(--color-common-99);
+  --cctv-live-state-bg-disabled: var(--color-cool-gray-55);
+  --cctv-live-state-dot-disabled: var(--color-border-strong);
+  --cctv-live-state-text-disabled: var(--color-label-disabled);
+
+  /* Error */
+  --cctv-error-text-color: var(--color-label-disabled);
+  --cctv-error-icon-color: var(--color-label-disabled);
+
+  /* Pagination */
+  --cctv-carousel-gap: var(--spacing-gap-5);
+  --cctv-pagination-move-button-size: 48px;
+  --cctv-pagination-move-button-active: var(--color-cool-gray-20);
+  --cctv-pagination-move-button-disabled: var(--color-cool-gray-85);
+
+  /* Controls */
+  --cctv-open-button-bg: rgba(0, 0, 0, 0.55);
+  --cctv-open-button-color: #ffffff;
+  --cctv-close-button-bg: rgba(0, 0, 0, 0.45);
+}

package/src/cctv/styles/video.scss

@@ -0,0 +1,142 @@
+.cctv-video-container {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  min-height: 240px;
+  border-radius: var(--cctv-video-radius);
+
+  background: var(--cctv-video-bg);
+  // overflow: hidden;
+}
+
+.cctv-video-box {
+  width: 100%;
+  height: 100%;
+}
+
+.cctv-video-box video {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  display: block;
+  object-fit: contain;
+}
+
+.cctv-video-overlay-container {
+  padding: var(--cctv-overlay-padding-y) var(--cctv-overlay-padding-x);
+
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+
+  display: flex;
+  flex-direction: column;
+
+  background: var(--cctv-overlay-bg);
+}
+.cctv-video-overlay-header {
+  width: 100%;
+  height: fit-content;
+}
+
+.cctv-video-overlay-header-upper,
+.cctv-video-overlay-header-lower {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cctv-video-live-state {
+  --theme-badge-font-weight: 400;
+
+  margin-right: 4px;
+}
+.cctv-video-live-state-dot {
+  width: 4px;
+  height: 4px;
+  margin-right: 4px;
+  border-radius: 4px;
+  background: var(--cctv-live-state-dot-active);
+}
+
+.cctv-video-live-state:where(.disabled) {
+  --badge-fill-bg-color: var(--cctv-live-state-bg-disabled);
+  --badge-fill-label-color: var(--cctv-live-state-text-disabled);
+  .cctv-video-live-state-dot {
+    background: var(--cctv-live-state-dot-disabled);
+  }
+}
+
+.cctv-video-close-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  font-size: 0;
+  border: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.cctv-video-overlay-title {
+  font-weight: 600;
+  color: var(--color-common-99);
+  line-height: 1.5em;
+}
+.cctv-video-header-title {
+  font-size: var(--font-heading-large-size);
+}
+.cctv-video-footer-title {
+  font-size: var(--font-heading-xsmall-size);
+}
+
+.cctv-video-overlay-body {
+  width: 100%;
+  flex: 1;
+
+  // pointer-events: none;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.cctv-video-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.cctv-video-error-icon {
+  margin-bottom: 2px;
+  fill: var(--cctv-error-icon-color);
+}
+.cctv-video-error-message {
+  font-size: 13px;
+  color: var(--cctv-error-text-color);
+  line-height: 1.5em;
+  font-weight: 600;
+}
+
+.cctv-video-status-text {
+  font-size: 12px;
+  color: var(--cctv-text-muted);
+}
+
+.cctv-video-overlay-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: auto;
+}
+
+.cctv-video-open-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}

package/src/cctv/styles/viewer.scss

@@ -0,0 +1,7 @@
+.cctv-viewer-desktop-video-container {
+  max-height: 500px;
+}
+
+.cctv-viewer-desktop-pagination-container {
+  margin-top: var(--spacing-gap-8);
+}