@uniai-fe/uds-templates 0.1.20 → 0.1.22

package/src/cctv/components/__viewer.tsx

@@ -0,0 +1,99 @@
+// "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>;
+// }

package/src/cctv/components/cam-list/Container.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import clsx from "clsx";
+import CCTVCamListItem from "./Item";
+import type { CctvCompanyCameraList } from "../../types";
+import { useCctvContext } from "../../hooks";
+import { useMemo } from "react";
+
+export default function CCTVCamListContainer({
+  className,
+  list,
+}: {
+  className?: string;
+  list?: CctvCompanyCameraList[];
+}) {
+  const { cams } = useCctvContext();
+  const camList = useMemo(() => list ?? cams, [list, cams]);
+  // console.log("CCTVCamListContainer camList:", { list, camList });
+
+  if (camList.length === 0)
+    return (
+      <div className={clsx("cctv-cam-list-container", className)}>
+        <div className="cctv-cam-list-empty">데이터 없음</div>
+      </div>
+    );
+
+  return (
+    <div className={clsx("cctv-cam-list-container", className)}>
+      <ul className="cctv-cam-list-track">
+        {camList.map(({ renderKey, ...cam }) => (
+          <CCTVCamListItem key={renderKey} {...cam} />
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/cctv/components/cam-list/Item.tsx

@@ -0,0 +1,71 @@
+import clsx from "clsx";
+import type { CctvCompanyCameraList } from "../../types";
+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 { useCctvRtcStream } from "../../hooks";
+import { useMemo } from "react";
+
+export default function CCTVCamListItem({
+  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 (!cam.cam_online) return true;
+    if (isTokenLoading || isTokenError) return true;
+    if (streamError) return true;
+    return false;
+  }, [cam.cam_online, isTokenLoading, isTokenError, streamError]);
+
+  return (
+    <li
+      className={clsx(
+        "cctv-cam-list-item",
+        className,
+        cam.selected && "is-selected",
+        isError && "is-error",
+      )}
+    >
+      <CCTVVideoContainer>
+        <CCTVVideoContents ref={videoRef} muted />
+        <CCTVVideoOverlayContainer>
+          <CCTVVideoOverlayHeader
+            activeLiveState
+            activeTitle={false}
+            liveStateDisabled={disabledLiveState}
+            title={cam.cam_name}
+          />
+          <CCTVVideoOverlayBody className={isError ? "is-error" : undefined}>
+            {disabledLiveState ? (
+              <CCTVVideoError>{overlayMessage}</CCTVVideoError>
+            ) : null}
+          </CCTVVideoOverlayBody>
+          <CCTVVideoOverlayFooter activeTitle activeOpenButton cam={cam} />
+        </CCTVVideoOverlayContainer>
+      </CCTVVideoContainer>
+    </li>
+  );
+}

package/src/cctv/components/cam-list/index.tsx

@@ -0,0 +1,7 @@
+import CCTVCamListContainer from "./Container";
+import CCTVCamListItem from "./Item";
+
+export const CCTVCamList = {
+  Container: CCTVCamListContainer,
+  Item: CCTVCamListItem,
+};

package/src/cctv/components/index.tsx

@@ -0,0 +1,13 @@
+import { CCTVCamList } from "./cam-list";
+import { CCTVPagination } from "./pagination";
+import CCTVProvider from "./Provider";
+import { CCTVVideo } from "./video";
+import { CCTVViewer } from "./viewer";
+
+export const CCTV = {
+  Provider: CCTVProvider,
+  Video: CCTVVideo,
+  Viewer: CCTVViewer,
+  CamList: CCTVCamList,
+  Pagination: CCTVPagination,
+};

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

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import { CctvPaginationCarouselProvider } from "./Provider";
+import CCTVPaginationControl from "./Control";
+
+export default function CCTVPaginationContainer({
+  className,
+  children,
+  activeButton = true,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  activeButton?: boolean;
+}) {
+  // Carousel Provider로 감싸 버튼/리스트가 동일한 스크롤 상태를 공유하게 한다.
+  return (
+    <CctvPaginationCarouselProvider>
+      <div className={clsx("cctv-pagination-container", className)}>
+        {activeButton ? (
+          <CCTVPaginationControl>{children}</CCTVPaginationControl>
+        ) : (
+          children
+        )}
+      </div>
+    </CctvPaginationCarouselProvider>
+  );
+}

package/src/cctv/components/pagination/Control.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import CCTVPaginationPrevButton from "./buttons/Prev";
+import CCTVPaginationNextButton from "./buttons/Next";
+import { useCctvPaginationCarousel } from "./Provider";
+
+export default function CCTVPaginationControl({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const carousel = useCctvPaginationCarousel();
+
+  if (!carousel) return children;
+
+  return (
+    <>
+      <CCTVPaginationPrevButton
+        onPrev={carousel.onPrev}
+        disabled={carousel?.isReachStart}
+      />
+      {children}
+      <CCTVPaginationNextButton
+        onNext={carousel.onNext}
+        disabled={carousel?.isReachEnd}
+      />
+    </>
+  );
+}

package/src/cctv/components/pagination/Provider.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type { PropsWithChildren } from "react";
+import type {
+  CctvPaginationCarouselContextValue,
+  CctvPaginationCarouselProviderProps,
+} from "../../types";
+
+const CctvPaginationCarouselContext =
+  createContext<CctvPaginationCarouselContextValue | null>(null);
+
+const DEFAULT_VISIBLE_COUNT = 1;
+const SCROLL_SETTLE_MS = 240;
+
+export function CctvPaginationCarouselProvider({
+  children,
+}: PropsWithChildren<CctvPaginationCarouselProviderProps>) {
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const trackRef = useRef<HTMLUListElement | null>(null);
+  const scrollSettleTimer = useRef<number | null>(null);
+  const isProgrammaticScroll = useRef(false);
+  const scrollFrame = useRef<number | null>(null);
+  const [itemCount, setItemCount] = useState(0);
+  const [visibleCount, setVisibleCount] = useState(DEFAULT_VISIBLE_COUNT);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const maxIndex = useMemo(
+    () => Math.max(itemCount - visibleCount, 0),
+    [itemCount, visibleCount],
+  );
+
+  const registerItemCount = useCallback((count: number) => {
+    setItemCount(count);
+    setCurrentIndex(prev => Math.min(prev, Math.max(count - 1, 0)));
+  }, []);
+
+  const updateVisibleCount = useCallback(() => {
+    if (!viewportRef.current || !trackRef.current?.children.length) {
+      setVisibleCount(DEFAULT_VISIBLE_COUNT);
+      return;
+    }
+    const first = trackRef.current.children[0] as HTMLElement;
+    const second = trackRef.current.children[1] as HTMLElement | undefined;
+    const viewportWidth = viewportRef.current.clientWidth;
+    const panelWidth = second
+      ? second.offsetLeft - first.offsetLeft
+      : first.getBoundingClientRect().width;
+    if (panelWidth <= 0) {
+      setVisibleCount(DEFAULT_VISIBLE_COUNT);
+      return;
+    }
+    const slots = Math.max(Math.floor(viewportWidth / panelWidth), 1);
+    setVisibleCount(slots);
+    setCurrentIndex(prev => Math.min(prev, Math.max(itemCount - slots, 0)));
+  }, [itemCount]);
+
+  useEffect(() => {
+    updateVisibleCount();
+  }, [updateVisibleCount, itemCount]);
+
+  useEffect(() => {
+    if (!viewportRef.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      updateVisibleCount();
+    });
+    observer.observe(viewportRef.current);
+    return () => observer.disconnect();
+  }, [updateVisibleCount]);
+
+  const clampIndex = useCallback(
+    (index: number) => Math.max(0, Math.min(index, maxIndex)),
+    [maxIndex],
+  );
+
+  const scrollToIndex = useCallback((index: number) => {
+    if (!viewportRef.current || !trackRef.current) return;
+    const panel = trackRef.current.children[index] as HTMLElement | undefined;
+    if (!panel) return;
+    const targetLeft = panel.offsetLeft;
+    const currentLeft = viewportRef.current.scrollLeft;
+    if (Math.abs(currentLeft - targetLeft) < 1) {
+      setCurrentIndex(index);
+      return;
+    }
+
+    // 버튼 이동 시 부드러운 native scroll을 유지하되, 완료 시점까지 상태를 잠시 고정한다.
+    isProgrammaticScroll.current = true;
+    viewportRef.current.scrollTo({
+      left: targetLeft,
+      behavior: "smooth",
+    });
+    setCurrentIndex(index);
+    if (scrollSettleTimer.current) {
+      window.clearTimeout(scrollSettleTimer.current);
+    }
+    scrollSettleTimer.current = window.setTimeout(() => {
+      isProgrammaticScroll.current = false;
+    }, SCROLL_SETTLE_MS);
+  }, []);
+
+  const moveTo = useCallback(
+    (index: number) => {
+      const nextIndex = clampIndex(index);
+      if (nextIndex === currentIndex) return;
+      scrollToIndex(nextIndex);
+    },
+    [clampIndex, currentIndex, scrollToIndex],
+  );
+
+  const onPrev = useCallback(() => {
+    moveTo(currentIndex - 1);
+  }, [currentIndex, moveTo]);
+
+  const onNext = useCallback(() => {
+    moveTo(currentIndex + 1);
+  }, [currentIndex, moveTo]);
+
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const handleScroll = () => {
+      if (isProgrammaticScroll.current || !trackRef.current) return;
+      if (scrollFrame.current) {
+        cancelAnimationFrame(scrollFrame.current);
+      }
+      scrollFrame.current = requestAnimationFrame(() => {
+        const { scrollLeft } = viewport;
+        const panels = trackRef.current?.children ?? [];
+        if (!panels.length) return;
+        let closestIndex = 0;
+        let smallestDistance = Number.POSITIVE_INFINITY;
+        for (let i = 0; i < panels.length; i += 1) {
+          const panel = panels[i] as HTMLElement;
+          const distance = Math.abs(panel.offsetLeft - scrollLeft);
+          if (distance < smallestDistance) {
+            smallestDistance = distance;
+            closestIndex = i;
+          }
+        }
+        const resolvedIndex = Math.min(closestIndex, maxIndex);
+        setCurrentIndex(prev =>
+          prev === resolvedIndex ? prev : resolvedIndex,
+        );
+      });
+    };
+    viewport.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      viewport.removeEventListener("scroll", handleScroll);
+      if (scrollFrame.current) {
+        cancelAnimationFrame(scrollFrame.current);
+        scrollFrame.current = null;
+      }
+    };
+  }, [maxIndex]);
+
+  useEffect(() => {
+    return () => {
+      if (scrollSettleTimer.current) {
+        window.clearTimeout(scrollSettleTimer.current);
+      }
+    };
+  }, []);
+
+  const value = useMemo<CctvPaginationCarouselContextValue>(
+    () => ({
+      viewportRef,
+      trackRef,
+      onPrev,
+      onNext,
+      moveTo,
+      registerItemCount,
+      currentIndex,
+      maxIndex,
+      isReachStart: currentIndex <= 0,
+      isReachEnd: currentIndex >= maxIndex,
+    }),
+    [currentIndex, maxIndex, moveTo, onNext, onPrev, registerItemCount],
+  );
+
+  return (
+    <CctvPaginationCarouselContext.Provider value={value}>
+      {children}
+    </CctvPaginationCarouselContext.Provider>
+  );
+}
+
+export function useCctvPaginationCarousel(options?: {
+  optional?: boolean;
+}): CctvPaginationCarouselContextValue | null {
+  const context = useContext(CctvPaginationCarouselContext);
+  if (!context && !options?.optional) {
+    throw new Error("CctvPaginationCarouselProvider is required.");
+  }
+  return context;
+}

package/src/cctv/components/pagination/buttons/Base.tsx

@@ -0,0 +1,56 @@
+import clsx from "clsx";
+import LeftIcon from "../../../img/chevron-left.svg";
+import RightIcon from "../../../img/chevron-right.svg";
+
+function IconFigure({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <figure className={clsx("cctv-pagination-move-button-icon", className)}>
+      {children}
+    </figure>
+  );
+}
+
+export default function CCTVPaginationBaseButton({
+  className,
+  direction,
+  children,
+  onMove,
+  disabled,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  direction: "prev" | "next";
+  onMove: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      className={clsx(
+        "cctv-pagination-move-button",
+        `cctv-${direction}-button`,
+        className,
+      )}
+      disabled={disabled}
+      onClick={onMove}
+    >
+      {direction === "prev" && (
+        <IconFigure className="cctv-prev-icon">
+          <LeftIcon width={24} height={24} alt="Previous CCTV" />
+        </IconFigure>
+      )}
+      {children}
+      {direction === "next" && (
+        <IconFigure className="cctv-next-icon">
+          <RightIcon width={24} height={24} alt="Next CCTV" />
+        </IconFigure>
+      )}
+    </button>
+  );
+}

package/src/cctv/components/pagination/buttons/Next.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useMemo } from "react";
+import CCTVPaginationBaseButton from "./Base";
+import { useCctvPaginationCarousel } from "../Provider";
+
+export default function CCTVPaginationNextButton({
+  children,
+  onNext,
+  disabled,
+}: {
+  children?: React.ReactNode;
+  onNext?: () => void;
+  disabled?: boolean;
+}) {
+  const carousel = useCctvPaginationCarousel({ optional: true });
+  const handleMove = useMemo(
+    () => onNext ?? carousel?.onNext ?? (() => undefined),
+    [carousel?.onNext, onNext],
+  );
+  const isDisabled =
+    typeof disabled === "boolean" ? disabled : Boolean(carousel?.isReachEnd);
+
+  // Carousel Provider 존재 시 컨텍스트 제어를 사용하고, 없으면 props로 받은 핸들러를 사용한다.
+  return (
+    <CCTVPaginationBaseButton
+      direction="next"
+      onMove={handleMove}
+      disabled={isDisabled}
+    >
+      {children}
+    </CCTVPaginationBaseButton>
+  );
+}

package/src/cctv/components/pagination/buttons/Prev.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useMemo } from "react";
+import CCTVPaginationBaseButton from "./Base";
+import { useCctvPaginationCarousel } from "../Provider";
+
+export default function CCTVPaginationPrevButton({
+  children,
+  onPrev,
+  disabled,
+}: {
+  children?: React.ReactNode;
+  onPrev?: () => void;
+  disabled?: boolean;
+}) {
+  const carousel = useCctvPaginationCarousel({ optional: true });
+  const handleMove = useMemo(
+    () => onPrev ?? carousel?.onPrev ?? (() => undefined),
+    [carousel?.onPrev, onPrev],
+  );
+  const isDisabled =
+    typeof disabled === "boolean" ? disabled : Boolean(carousel?.isReachStart);
+
+  // Carousel Provider 존재 시 컨텍스트 제어를 사용하고, 없으면 props로 받은 핸들러를 사용한다.
+  return (
+    <CCTVPaginationBaseButton
+      direction="prev"
+      onMove={handleMove}
+      disabled={isDisabled}
+    >
+      {children}
+    </CCTVPaginationBaseButton>
+  );
+}

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

@@ -0,0 +1,25 @@
+import CCTVPaginationBaseButton from "./buttons/Base";
+import CCTVPaginationNextButton from "./buttons/Next";
+import CCTVPaginationPrevButton from "./buttons/Prev";
+import CCTVPaginationContainer from "./Container";
+import CCTVPaginationControl from "./Control";
+import CCTVPaginationListCarousel from "./list/Carousel";
+import CCTVPaginationListContainer from "./list/Container";
+import CCTVPaginationListItem from "./list/Item";
+import { CctvPaginationCarouselProvider } from "./Provider";
+
+export const CCTVPagination = {
+  Container: CCTVPaginationContainer,
+  Control: CCTVPaginationControl,
+  List: {
+    Provider: CctvPaginationCarouselProvider,
+    Container: CCTVPaginationListContainer,
+    Carousel: CCTVPaginationListCarousel,
+    Item: CCTVPaginationListItem,
+  },
+  Button: {
+    Base: CCTVPaginationBaseButton,
+    Prev: CCTVPaginationPrevButton,
+    Next: CCTVPaginationNextButton,
+  },
+};

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { Children, useEffect } from "react";
+import { useCctvPaginationCarousel } from "../Provider";
+
+export default function CCTVPaginationListCarousel({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const carousel = useCctvPaginationCarousel();
+  const childArray = Children.toArray(children);
+  const itemCount = childArray.length;
+
+  useEffect(() => {
+    carousel?.registerItemCount(itemCount);
+  }, [carousel, itemCount]);
+
+  return (
+    <div className="cctv-pagination-viewport" ref={carousel?.viewportRef}>
+      <ul className="cctv-pagination-track" ref={carousel?.trackRef}>
+        {childArray}
+      </ul>
+    </div>
+  );
+}