@uniai-fe/uds-templates 0.1.20 → 0.1.22

package/src/cctv/components/pagination/list/Container.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+import CCTVPaginationListItem from "./Item";
+import type { CctvCompanyCameraList } from "../../../types";
+import CCTVPaginationListCarousel from "./Carousel";
+import { useCctvContext } from "../../../hooks";
+import { useMemo } from "react";
+
+export default function CCTVPaginationListContainer({
+  list,
+}: {
+  list?: CctvCompanyCameraList[];
+}) {
+  const { cams } = useCctvContext();
+
+  const camList = useMemo(() => list ?? cams, [list, cams]);
+
+  return (
+    <div className={clsx("cctv-pagination-list-container")}>
+      {camList.length === 0 ? (
+        <div>데이터 없음</div>
+      ) : (
+        <CCTVPaginationListCarousel>
+          {camList.map(({ renderKey, ...d }, i) => (
+            <CCTVPaginationListItem key={`${renderKey}/${i}`} {...d} />
+          ))}
+        </CCTVPaginationListCarousel>
+      )}
+    </div>
+  );
+}

package/src/cctv/components/pagination/list/Item.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import clsx from "clsx";
+import CCTVVideoContainer from "../../video/Container";
+import CCTVVideoContents from "../../video/Video";
+import CCTVVideoOverlayContainer from "../../video/overlay/Container";
+import CCTVVideoOverlayFooter from "../../video/overlay/footer/Container";
+import CCTVVideoOverlayBody from "../../video/overlay/body/Container";
+import CCTVVideoError from "../../video/overlay/body/Error";
+import type { CctvCompanyCameraList } from "../../../types";
+import { useCallback, useMemo } from "react";
+import { useCctvRtcStream } from "../../../hooks";
+import CCTVVideoOverlayHeader from "../../video/overlay/header/Container";
+
+export default function CCTVPaginationListItem({
+  className,
+  ...cam
+}: {
+  className?: string;
+} & Omit<CctvCompanyCameraList, "renderKey">) {
+  const { videoRef, isTokenLoading, isTokenError, isStreaming, streamError } =
+    useCctvRtcStream({
+      cam,
+      companyId: cam.company_id,
+    });
+
+  const overlayMessage = (() => {
+    if (!cam.cam_online) return "CCTV 연결 오류";
+    if (isTokenLoading || isStreaming) return "스트림을 준비하고 있습니다.";
+    if (isTokenError) return "토큰을 발급하지 못했습니다.";
+    if (streamError) return streamError;
+    return null;
+  })();
+
+  const isError = useMemo(
+    () => !cam.cam_online || isTokenError || streamError,
+    [cam.cam_online, isTokenError, streamError],
+  );
+
+  const disabledLiveState = useMemo(() => {
+    if (isTokenLoading || isTokenError) return true;
+    if (streamError) return true;
+    return false;
+  }, [isTokenLoading, isTokenError, streamError]);
+
+  const handleSelect = useCallback(() => {
+    if (typeof cam.onSelect === "function") cam.onSelect();
+  }, [cam]);
+
+  return (
+    <li
+      className={clsx(
+        "cctv-pagination-list-item",
+        className,
+        cam.selected && "is-selected",
+        isError && "is-error",
+      )}
+    >
+      <button
+        type="button"
+        className="cctv-pagination-list-thumbnail"
+        onClick={handleSelect}
+        aria-pressed={cam.selected}
+        aria-label={`${cam.cam_name} 선택`}
+      >
+        <CCTVVideoContainer>
+          <CCTVVideoContents ref={videoRef} muted />
+          <CCTVVideoOverlayContainer>
+            <CCTVVideoOverlayHeader />
+            <CCTVVideoOverlayBody className={isError ? "is-error" : undefined}>
+              {disabledLiveState ? (
+                <CCTVVideoError>{overlayMessage}</CCTVVideoError>
+              ) : null}
+            </CCTVVideoOverlayBody>
+            <CCTVVideoOverlayFooter cam={cam} />
+          </CCTVVideoOverlayContainer>
+        </CCTVVideoContainer>
+      </button>
+    </li>
+  );
+}

package/src/cctv/components/video/Container.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+
+export default function CCTVVideoContainer({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={clsx("cctv-video-container", className)}>{children}</div>
+  );
+}

package/src/cctv/components/video/Video.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { forwardRef } from "react";
+import clsx from "clsx";
+
+type CCTVVideoContentsProps = {
+  className?: string;
+  muted?: boolean;
+  autoPlay?: boolean;
+  controls?: boolean;
+  poster?: string;
+};
+
+const CCTVVideoContents = forwardRef<HTMLVideoElement, CCTVVideoContentsProps>(
+  (
+    { className, muted = true, autoPlay = true, controls = false, poster },
+    ref,
+  ) => (
+    <figure className={clsx("cctv-video-box", className)}>
+      <video
+        ref={ref}
+        muted={muted}
+        autoPlay={autoPlay}
+        playsInline
+        controls={controls}
+        poster={poster}
+      />
+    </figure>
+  ),
+);
+
+CCTVVideoContents.displayName = "CCTVVideoContents";
+
+export default CCTVVideoContents;

package/src/cctv/components/video/index.tsx

@@ -0,0 +1,9 @@
+import CCTVVideoContainer from "./Container";
+import { CCTVVideoOverlay } from "./overlay";
+import CCTVVideoContents from "./Video";
+
+export const CCTVVideo = {
+  Container: CCTVVideoContainer,
+  Contents: CCTVVideoContents,
+  Overlay: CCTVVideoOverlay,
+};

package/src/cctv/components/video/overlay/Container.tsx

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+
+export default function CCTVVideoOverlayContainer({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={clsx("cctv-video-overlay-container", className)}>
+      {children}
+    </div>
+  );
+}

package/src/cctv/components/video/overlay/Title.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import clsx from "clsx";
+import { useMemo } from "react";
+import { useCctvContext } from "../../../hooks";
+
+export default function CCTVVideoOverlayTitle({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: React.ReactNode;
+}) {
+  const { selectedCam } = useCctvContext();
+
+  // props의 cam이 들어오면 우선 적용
+  // cam이 부여되어있으면 selectedCam 무시
+  // cam이 없다면 selectedCam 적용
+  const camTitle = useMemo(
+    () => (title ?? selectedCam?.cam_name) || "-",
+    [title, selectedCam],
+  );
+  return (
+    <h4 className={clsx("cctv-video-overlay-title", className)}>
+      <span>{camTitle}</span>
+    </h4>
+  );
+}

package/src/cctv/components/video/overlay/body/Container.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+
+export default function CCTVVideoOverlayBody({
+  className,
+  children,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className={clsx("cctv-video-overlay-body", className)}>{children}</div>
+  );
+}

package/src/cctv/components/video/overlay/body/Error.tsx

@@ -0,0 +1,16 @@
+import CCTVErrorIcon from "../../../../img/error.svg";
+
+export default function CCTVVideoError({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className="cctv-video-error">
+      <figure className="cctv-video-error-icon">
+        <CCTVErrorIcon width={24} height={24} alt="CCTV 연결 오류" />
+      </figure>
+      <p className="cctv-video-error-message">{children ?? "CCTV 연결 오류"}</p>
+    </div>
+  );
+}

package/src/cctv/components/video/overlay/footer/Container.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+import CCTVVideoOpenButton from "./OpenButton";
+import CCTVVideoOverlayTitle from "../Title";
+import type { CctvCompanyCameraList } from "../../../../types";
+
+export default function CCTVVideoOverlayFooter({
+  className,
+  activeTitle = true,
+  activeOpenButton,
+  cam,
+}: {
+  className?: string;
+  activeTitle?: boolean;
+  activeOpenButton?: boolean;
+  cam?: Omit<CctvCompanyCameraList, "renderKey">;
+}) {
+  // console.log(cam);
+  return (
+    <footer className={clsx("cctv-video-overlay-footer", className)}>
+      {activeTitle && (
+        <CCTVVideoOverlayTitle
+          className={clsx("cctv-video-footer-title", className)}
+          // Carousel/Card 등 외부에서 전달한 타이틀을 그대로 노출한다.
+          title={cam?.cam_name ?? "-"}
+        />
+      )}
+      {activeOpenButton && cam && <CCTVVideoOpenButton {...cam} />}
+    </footer>
+  );
+}

package/src/cctv/components/video/overlay/footer/OpenButton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useCallback } from "react";
+import ViewerOpenIcon from "../../../../img/viewer-open.svg";
+import type { CctvCompanyCameraList } from "../../../../types";
+
+export default function CCTVVideoOpenButton({
+  ...cam
+}: Omit<CctvCompanyCameraList, "renderKey">) {
+  const onOpen = useCallback(() => {
+    if (typeof cam.onSelect === "function") cam.onSelect();
+  }, [cam]);
+
+  return (
+    <button type="button" className="cctv-video-open-button" onClick={onOpen}>
+      <ViewerOpenIcon width={24} height={24} alt="크게 보기" />
+    </button>
+  );
+}

package/src/cctv/components/video/overlay/header/CloseButton.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useCallback } from "react";
+import ViewerCloseIcon from "../../../../img/viewer-close.svg";
+
+export default function CCTVVideoCloseButton() {
+  const onClose = useCallback(() => {}, []);
+
+  return (
+    <button type="button" className="cctv-video-close-button" onClick={onClose}>
+      <ViewerCloseIcon width={36} height={36} alt="닫기" />
+    </button>
+  );
+}

package/src/cctv/components/video/overlay/header/Container.tsx

@@ -0,0 +1,50 @@
+import clsx from "clsx";
+import CCTVVideoLiveState from "./LiveState";
+import CCTVVideoCloseButton from "./CloseButton";
+import CCTVVideoOverlayTitle from "../Title";
+
+export default function CCTVVideoOverlayHeader({
+  className,
+  activeLiveState,
+  activeCloseButton,
+  activeTitle,
+  title,
+  activeTime,
+  liveStateDisabled,
+}: {
+  className?: string;
+  activeLiveState?: boolean;
+  activeCloseButton?: boolean;
+  activeTitle?: boolean;
+  title?: React.ReactNode;
+  activeTime?: boolean;
+  liveStateDisabled?: boolean;
+}) {
+  const showUpper = activeLiveState || activeCloseButton;
+  const showLower = activeTitle || activeTime;
+
+  if (!showUpper && !showLower) return null;
+
+  return (
+    <header className={clsx("cctv-video-overlay-header", className)}>
+      {showUpper && (
+        <div className="cctv-video-overlay-header-upper">
+          {activeLiveState && (
+            <CCTVVideoLiveState disabled={liveStateDisabled} />
+          )}
+          {activeCloseButton && <CCTVVideoCloseButton />}
+        </div>
+      )}
+      {showLower && (
+        <div className="cctv-video-overlay-header-lower">
+          {activeTitle && (
+            <CCTVVideoOverlayTitle
+              className={clsx("cctv-video-header-title", className)}
+              title={title}
+            />
+          )}
+        </div>
+      )}
+    </header>
+  );
+}

package/src/cctv/components/video/overlay/header/LiveState.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import clsx from "clsx";
+import { Badge } from "@uniai-fe/uds-primitives";
+
+export default function CCTVVideoLiveState({
+  disabled = false,
+}: {
+  disabled?: boolean;
+}) {
+  return (
+    <Badge
+      size="xsmall"
+      intent="tertiary"
+      className={clsx("cctv-video-live-state", { disabled })}
+    >
+      <figure className="cctv-video-live-state-dot"></figure>
+      <span>Live</span>
+    </Badge>
+  );
+}

package/src/cctv/components/video/overlay/index.tsx

@@ -0,0 +1,24 @@
+import CCTVVideoOverlayBody from "./body/Container";
+import CCTVVideoError from "./body/Error";
+import CCTVVideoOverlayContainer from "./Container";
+import CCTVVideoOverlayFooter from "./footer/Container";
+import CCTVVideoOpenButton from "./footer/OpenButton";
+import CCTVVideoCloseButton from "./header/CloseButton";
+import CCTVVideoOverlayHeader from "./header/Container";
+import CCTVVideoLiveState from "./header/LiveState";
+import CCTVVideoOverlayTitle from "./Title";
+
+export const CCTVVideoOverlay = {
+  Container: CCTVVideoOverlayContainer,
+  Title: CCTVVideoOverlayTitle,
+  Header: {
+    Container: CCTVVideoOverlayHeader,
+    LiveState: CCTVVideoLiveState,
+    CloseButton: CCTVVideoCloseButton,
+  },
+  Body: { Container: CCTVVideoOverlayBody, Error: CCTVVideoError },
+  Footer: {
+    Container: CCTVVideoOverlayFooter,
+    OpenButton: CCTVVideoOpenButton,
+  },
+};

package/src/cctv/components/viewer/Container.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+
+export default function CCTVViewerContainer({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={clsx("cctv-viewer-container", className)}>{children}</div>
+  );
+}

package/src/cctv/components/viewer/desktop/Container.tsx

@@ -0,0 +1,38 @@
+import clsx from "clsx";
+import CCTVViewerContainer from "../Container";
+import CCTVViewerDesktopPagination from "./Pagination";
+import CCTVViewerDesktopVideo from "./Video";
+import type { CctvCompanyCameraList } from "../../../types";
+
+export default function CCTVViewerDesktopContainer({
+  className,
+  children,
+  selectedCam,
+  camList,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  selectedCam?: Omit<CctvCompanyCameraList, "renderKey">;
+  camList?: CctvCompanyCameraList[];
+}) {
+  return (
+    <CCTVViewerContainer
+      className={clsx("cctv-viewer-desktop-container", className)}
+    >
+      {typeof children !== "undefined" ? (
+        children
+      ) : (
+        <>
+          <CCTVViewerDesktopVideo
+            {...(typeof selectedCam !== "undefined"
+              ? { cam: selectedCam }
+              : {})}
+          />
+          <CCTVViewerDesktopPagination
+            {...(typeof camList !== "undefined" ? { list: camList } : {})}
+          />
+        </>
+      )}
+    </CCTVViewerContainer>
+  );
+}

package/src/cctv/components/viewer/desktop/Pagination.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useCctvContext } from "../../../hooks";
+import type { CctvCompanyCameraList } from "../../../types";
+import CCTVPaginationContainer from "../../pagination/Container";
+import CCTVPaginationListContainer from "../../pagination/list/Container";
+
+export default function CCTVViewerDesktopPagination({
+  list,
+}: {
+  list?: CctvCompanyCameraList[];
+}) {
+  const { cams } = useCctvContext();
+
+  return (
+    <CCTVPaginationContainer className="cctv-viewer-desktop-pagination-container">
+      <CCTVPaginationListContainer list={list ?? cams} />
+    </CCTVPaginationContainer>
+  );
+}

package/src/cctv/components/viewer/desktop/Placeholder.tsx

@@ -0,0 +1,18 @@
+import clsx from "clsx";
+
+/**
+ * Viewer Placeholder
+ * @desc
+ * - 데이터가 없거나 로딩 중일 때 사용자에게 상황을 전달한다.
+ */
+export default function CCTVViewerDesktopPlaceholder({
+  className,
+  message,
+}: {
+  className?: string;
+  message: string;
+}) {
+  return (
+    <div className={clsx("cctv-viewer-placeholder", className)}>{message}</div>
+  );
+}

package/src/cctv/components/viewer/desktop/Video.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useMemo } from "react";
+
+import { useCctvContext, useCctvRtcStream } from "../../../hooks";
+import CCTVVideoContainer from "../../video/Container";
+import CCTVVideoOverlayBody from "../../video/overlay/body/Container";
+import CCTVVideoError from "../../video/overlay/body/Error";
+import CCTVVideoOverlayContainer from "../../video/overlay/Container";
+import CCTVVideoOverlayFooter from "../../video/overlay/footer/Container";
+import CCTVVideoOverlayHeader from "../../video/overlay/header/Container";
+import CCTVVideoContents from "../../video/Video";
+import CCTVViewerDesktopPlaceholder from "./Placeholder";
+import type { CctvCompanyCameraList } from "../../../types";
+
+export default function CCTVViewerDesktopVideo({
+  cam,
+}: {
+  cam?: Omit<CctvCompanyCameraList, "renderKey">;
+}) {
+  const { selectedCam, selectedCompany, selectedCompanyId, isFetching } =
+    useCctvContext();
+
+  // props의 cam이 들어오면 우선 적용
+  // cam이 부여되어있으면 selectedCam 무시
+  // cam이 없다면 selectedCam 적용
+  const camData = useMemo(() => cam ?? selectedCam, [cam, selectedCam]);
+  // console.log("CCTVViewerDesktopVideo camData:", camData);
+
+  const isCamOffline = useMemo(() => !camData?.cam_online, [camData]);
+
+  const activeCompanyId =
+    camData?.company_id ?? selectedCompany?.company_id ?? selectedCompanyId;
+
+  const { videoRef, isTokenLoading, isTokenError, isStreaming, streamError } =
+    useCctvRtcStream({
+      cam: camData,
+      companyId: activeCompanyId,
+    });
+
+  const overlayMessage = useMemo(() => {
+    if (!camData) return null;
+    if (!camData.cam_online) return "CCTV 연결 오류";
+    if (isTokenLoading || isStreaming) return "스트림을 준비하고 있습니다.";
+    if (isTokenError) return "토큰을 발급하지 못했습니다.";
+    if (streamError) return streamError;
+    return null;
+  }, [camData, isTokenError, isTokenLoading, isStreaming, streamError]);
+
+  if (!cam && isFetching && !camData) {
+    return (
+      <CCTVViewerDesktopPlaceholder message="CCTV 데이터를 불러오는 중입니다." />
+    );
+  }
+
+  if (!camData && !cam) {
+    return (
+      <CCTVViewerDesktopPlaceholder message="좌측 목록에서 카메라를 선택하세요." />
+    );
+  }
+
+  return (
+    <CCTVVideoContainer className="cctv-viewer-desktop-video-container">
+      <CCTVVideoContents ref={videoRef} />
+      <CCTVVideoOverlayContainer>
+        <CCTVVideoOverlayHeader
+          activeLiveState
+          activeTitle
+          activeCloseButton
+          liveStateDisabled={isCamOffline}
+        />
+        {overlayMessage ? (
+          <CCTVVideoOverlayBody
+            className={isCamOffline ? "is-error" : undefined}
+          >
+            {isCamOffline ? <CCTVVideoError /> : overlayMessage}
+          </CCTVVideoOverlayBody>
+        ) : null}
+        <CCTVVideoOverlayFooter activeTitle={false} />
+      </CCTVVideoOverlayContainer>
+    </CCTVVideoContainer>
+  );
+}

package/src/cctv/components/viewer/index.tsx

@@ -0,0 +1,12 @@
+import CCTVViewerDesktopContainer from "./desktop/Container";
+import CCTVViewerDesktopPagination from "./desktop/Pagination";
+import CCTVViewerDesktopVideo from "./desktop/Video";
+
+export const CCTVViewer = {
+  Desktop: {
+    Container: CCTVViewerDesktopContainer,
+    Video: CCTVViewerDesktopVideo,
+    Pagination: CCTVViewerDesktopPagination,
+  },
+  Mobile: {},
+};

package/src/cctv/components/viewer/mobile/Container.tsx

@@ -0,0 +1,13 @@
+import CCTVViewerContainer from "../Container";
+
+export default function CCTVViewerMobileContainer({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <CCTVViewerContainer className="cctv-mobile-viewer-container">
+      {children}
+    </CCTVViewerContainer>
+  );
+}

package/src/cctv/data/context.ts

@@ -0,0 +1,22 @@
+import type { CctvContext } from "../types/context";
+
+/**
+ * CCTV; CCTV 컨텍스트 기본값
+ * - company_id: 선택된 업체 id코드
+ * - cam_id: 선택된 카메라 id코드
+ * - search: 검색 키워드 (입력값)
+ * - filter: 검색 키워드 (필터값)
+ * - rawData: 원본 데이터 배열
+ * - isFetching: 데이터 로딩 상태
+ * - isError: 데이터 에러 상태
+ */
+export const CCTV_CONTEXT_DEFAULT_VALUES: CctvContext = {
+  username: "",
+  company_id: "",
+  cam_id: "",
+  search: "",
+  filter: "",
+  rawData: [],
+  isFetching: false,
+  isError: false,
+};

package/src/cctv/data/index.ts

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

package/src/cctv/hooks/index.tsx

@@ -0,0 +1,5 @@
+import useCctvCompanyData from "./useCompanyData";
+import useCctvContext from "./useContext";
+import { useCctvRtcStream } from "./useRtcStream";
+
+export { useCctvContext, useCctvCompanyData, useCctvRtcStream };