@uniai-fe/uds-templates 0.10.3 → 0.11.0

package/dist/styles.css

@@ -93,9 +93,16 @@
   /* Card layout */
   --cctv-video-radius: 12px;
   --cctv-list-gap: var(--spacing-gap-5);
-  --cctv-list-item-min-width: 320px;
+  --cctv-list-item-min-width: 300px;
   --cctv-overlay-padding-x: var(--spacing-padding-8);
   --cctv-overlay-padding-y: var(--spacing-padding-6);
+  --cctv-viewer-video-radius: 16px;
+  --cctv-viewer-video-max-height: 618px;
+  --cctv-viewer-overlay-padding-x: var(--spacing-padding-11);
+  --cctv-viewer-overlay-padding-y: var(--spacing-padding-9);
+  --cctv-card-settings-bg: var(--color-common-99);
+  --cctv-card-settings-border: var(--color-border-assistive);
+  --cctv-card-height: 240px;
   --cctv-video-bg: var(--color-surface-heavy);
   --cctv-overlay-bg: linear-gradient(
     180deg,
@@ -109,12 +116,20 @@
   --cctv-live-state-bg-off: var(--color-cool-gray-55);
   --cctv-live-state-dot-off: var(--color-border-strong);
   --cctv-live-state-text-off: var(--color-label-disabled);
+  --cctv-state-dot-size: var(--spacing-gap-3);
+  /* Sensor metric */
+  --cctv-metric-bg: rgba(0, 0, 0, 0.55);
+  --cctv-metric-text: var(--color-common-99);
+  --cctv-metric-dot-normal: var(--color-feedback-success);
+  --cctv-metric-dot-attention: var(--color-feedback-new);
+  --cctv-metric-dot-unavailable: var(--color-border-strong);
   /* Error */
   --cctv-status-text-color: var(--color-common-99);
   --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-item-width: 170px;
   --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);
@@ -1743,6 +1758,59 @@
   visibility: hidden;
 }
 
+.cctv-video-container[data-layout="card"] {
+  min-height: 0;
+  max-height: 240px;
+  aspect-ratio: 16/9;
+}
+
+.cctv-video-container[data-layout="carousel"] {
+  min-height: 0;
+  aspect-ratio: 16/9;
+}
+
+.cctv-video-card {
+  overflow: hidden;
+  border-radius: var(--cctv-video-radius);
+}
+
+.cctv-video-card[data-has-settings="true"] {
+  height: var(--cctv-card-height);
+  display: flex;
+  flex-direction: column;
+}
+.cctv-video-card[data-has-settings="true"] .cctv-video-card-media {
+  min-height: 0;
+  flex: 1;
+}
+.cctv-video-card[data-has-settings="true"]
+  .cctv-video-card-media
+  .cctv-video-container {
+  height: 100%;
+  min-height: 0;
+  aspect-ratio: auto;
+}
+.cctv-video-card[data-has-settings="true"]
+  .cctv-video-card-media
+  .cctv-video-container,
+.cctv-video-card[data-has-settings="true"]
+  .cctv-video-card-media
+  .cctv-video-box
+  video,
+.cctv-video-card[data-has-settings="true"]
+  .cctv-video-card-media
+  .cctv-video-overlay-container {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.cctv-video-card-settings {
+  flex: 0 0 auto;
+  padding: var(--spacing-padding-6) var(--spacing-padding-8);
+  background: var(--cctv-card-settings-bg);
+  box-shadow: inset 0 0 0 1px var(--cctv-card-settings-border);
+}
+
 .cctv-video-box {
   width: 100%;
   height: 100%;
@@ -1771,6 +1839,9 @@
 .cctv-video-overlay-header {
   width: 100%;
   height: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-5);
 }
 .cctv-video-overlay-header.empty {
   height: calc(var(--font-heading-xsmall-size) * 1.5);
@@ -1799,10 +1870,10 @@
 }
 
 .cctv-video-live-state-dot {
-  width: 4px;
-  height: 4px;
-  margin-right: 4px;
-  border-radius: 4px;
+  width: var(--cctv-state-dot-size);
+  height: var(--cctv-state-dot-size);
+  margin-right: var(--spacing-gap-3);
+  border-radius: var(--cctv-state-dot-size);
   background: var(--cctv-live-state-dot-off);
 }
 
@@ -1836,7 +1907,7 @@
 }
 
 .cctv-video-header-title {
-  font-size: var(--font-heading-large-size);
+  font-size: var(--font-heading-medium-size);
 }
 
 .cctv-video-footer-title {
@@ -1917,12 +1988,52 @@
   margin-top: auto;
 }
 
+.cctv-video-metrics {
+  display: flex;
+  gap: var(--spacing-gap-4);
+  margin-left: auto;
+}
+
+.cctv-video-metric {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-3);
+  padding: var(--spacing-padding-2) var(--spacing-padding-5);
+  border-radius: 999px;
+  color: var(--cctv-metric-text);
+  background: var(--cctv-metric-bg);
+  font-size: var(--font-label-small-size);
+  line-height: var(--font-label-small-line-height);
+  font-weight: var(--font-label-small-weight);
+  white-space: nowrap;
+}
+
+.cctv-video-metric-dot {
+  width: var(--cctv-state-dot-size);
+  height: var(--cctv-state-dot-size);
+  flex: 0 0 var(--cctv-state-dot-size);
+  border-radius: var(--cctv-state-dot-size);
+  background: var(--cctv-metric-dot-normal);
+}
+
+.cctv-video-metric[data-state="attention"] .cctv-video-metric-dot {
+  background: var(--cctv-metric-dot-attention);
+}
+
+.cctv-video-metric[data-state="unavailable"] .cctv-video-metric-dot {
+  background: var(--cctv-metric-dot-unavailable);
+}
+
 .cctv-video-open-button {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: auto;
+  position: absolute;
+  top: var(--cctv-overlay-padding-y);
+  right: var(--cctv-overlay-padding-x);
+  z-index: 2;
 }
 .cctv-video-open-button svg path {
   stroke: var(--cctv-open-button-color-off);
@@ -1965,29 +2076,21 @@
 }
 
 .cctv-cam-list-item .cctv-video-container {
+  min-height: 0;
   max-height: 240px;
+  aspect-ratio: 16/9;
 }
 
-@container cctv-cam-list (min-width: 652px) {
+@container cctv-cam-list (min-width: 612px) {
   .cctv-cam-list-track {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
-@container cctv-cam-list (min-width: 984px) {
+@container cctv-cam-list (min-width: 924px) {
   .cctv-cam-list-track {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
-@container cctv-cam-list (min-width: 1316px) {
-  .cctv-cam-list-track {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-@container cctv-cam-list (min-width: 1648px) {
-  .cctv-cam-list-track {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-}
 .cctv-pagination-container {
   width: 100%;
   display: flex;
@@ -2027,7 +2130,7 @@
 }
 
 .cctv-pagination-track > li {
-  flex: 0 0 minmax(150px, 1fr);
+  flex: 0 0 var(--cctv-pagination-item-width);
 }
 
 .cctv-pagination-list-item {
@@ -2035,6 +2138,7 @@
 }
 
 .cctv-pagination-list-item .cctv-video-container {
+  min-height: 0;
   max-height: 152px;
 }
 
@@ -2060,12 +2164,81 @@
   background: var(--cctv-pagination-move-button-disabled);
 }
 
+.cctv-viewer-desktop-container {
+  display: grid;
+  gap: var(--spacing-gap-6);
+  width: min(100%, 1216px);
+  margin: 0 auto;
+}
+
+.cctv-viewer-desktop-headline {
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-6);
+}
+.cctv-viewer-desktop-headline h3 {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-label-strong);
+  font-size: var(--font-heading-medium-size);
+  line-height: 1.4;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cctv-viewer-desktop-time {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-3);
+  color: var(--color-label-neutral);
+  font-size: var(--font-label-small-size);
+  line-height: var(--font-label-small-line-height);
+  font-weight: var(--font-label-small-weight);
+  white-space: nowrap;
+}
+
 .cctv-viewer-desktop-video-container {
-  max-height: 500px;
+  --cctv-video-radius: var(--cctv-viewer-video-radius);
+  --cctv-overlay-padding-x: var(--cctv-viewer-overlay-padding-x);
+  --cctv-overlay-padding-y: var(--cctv-viewer-overlay-padding-y);
+  max-height: var(--cctv-viewer-video-max-height);
+  min-height: 0;
+  aspect-ratio: 608/309;
+}
+
+.cctv-viewer-desktop-overlay-body {
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.cctv-viewer-desktop-move-button.cctv-pagination-move-button {
+  width: 42px;
+  height: 42px;
+  background: var(--cctv-pagination-move-button-active);
+}
+
+.cctv-viewer-desktop-video-container .cctv-video-overlay-footer {
+  justify-content: flex-end;
+}
+
+.cctv-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .cctv-viewer-desktop-pagination-container {
-  margin-top: var(--spacing-gap-8);
+  margin-top: var(--spacing-gap-2);
 }
 
 .service-inquiry-form {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -56,28 +56,28 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.101.2",
-    "@types/node": "^24.13.2",
+    "@tanstack/react-query": "^5.101.4",
+    "@types/node": "^24.13.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^9.39.4",
+    "eslint": "^9.39.5",
     "jotai": "^2.20.2",
     "next": "16.2.10",
-    "prettier": "^3.8.5",
-    "react-hook-form": "^7.81.0",
-    "sass": "^1.101.0",
+    "prettier": "^3.9.6",
+    "react-hook-form": "^7.82.0",
+    "sass": "^1.101.3",
     "typescript": "6.0.3",
-    "@uniai-fe/eslint-config": "0.4.1",
     "@uniai-fe/next-devkit": "0.4.0",
-    "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/react-hooks": "0.3.0",
+    "@uniai-fe/uds-primitives": "0.10.2",
     "@uniai-fe/uds-foundation": "0.5.0",
-    "@uniai-fe/uds-primitives": "0.10.0",
-    "@uniai-fe/util-functions": "0.4.3",
+    "@uniai-fe/eslint-config": "0.4.2",
+    "@uniai-fe/react-hooks": "0.3.0",
+    "@uniai-fe/tsconfig": "0.2.0",
     "@uniai-fe/util-api": "0.2.1",
-    "@uniai-fe/util-next": "0.5.0",
-    "@uniai-fe/util-rtc": "0.2.0",
-    "@uniai-fe/util-jotai": "0.3.0"
+    "@uniai-fe/util-functions": "0.4.3",
+    "@uniai-fe/util-jotai": "0.3.0",
+    "@uniai-fe/util-rtc": "0.2.1",
+    "@uniai-fe/util-next": "0.5.0"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

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

@@ -50,15 +50,16 @@ export default function CCTVCamListItem({
         ref={videoRef}
         cam={cam}
         className="cctv-cam-list-video-container"
-        // list card에서는 live/share 상태를 header에 노출하고 제목은 footer로 내려 보낸다.
+        layout="card"
+        // list card에서는 live/share 상태와 제목을 header에 함께 노출한다.
         headerOptions={{
           activeLiveState: true,
-          activeTitle: false,
+          activeTitle: true,
           isLive,
           isShared: cam.is_public === true,
           title: cam.cam_name,
         }}
-        footerOptions={{ activeTitle: true, activeOpenButton: true, cam }}
+        footerOptions={{ activeTitle: false, activeOpenButton: true, cam }}
         // 변경 설명: list item custom overlay는 template seam 하나만 따라간다.
         renderOverlay={renderOverlay}
         {...{

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

@@ -84,8 +84,9 @@ export function CctvPaginationCarouselProvider({
   const scrollToIndex = useCallback((index: number) => {
     if (!viewportRef.current || !trackRef.current) return;
     const panel = trackRef.current.children[index] as HTMLElement | undefined;
+    const firstPanel = trackRef.current.children[0] as HTMLElement | undefined;
     if (!panel) return;
-    const targetLeft = panel.offsetLeft;
+    const targetLeft = panel.offsetLeft - (firstPanel?.offsetLeft ?? 0);
     const currentLeft = viewportRef.current.scrollLeft;
     if (Math.abs(currentLeft - targetLeft) < 1) {
       setCurrentIndex(index);
@@ -136,11 +137,14 @@ export function CctvPaginationCarouselProvider({
         const { scrollLeft } = viewport;
         const panels = trackRef.current?.children ?? [];
         if (!panels.length) return;
+        const firstOffset = (panels[0] as HTMLElement).offsetLeft;
         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);
+          const distance = Math.abs(
+            panel.offsetLeft - firstOffset - scrollLeft,
+          );
           if (distance < smallestDistance) {
             smallestDistance = distance;
             closestIndex = i;

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

@@ -67,6 +67,7 @@ export default function CCTVPaginationListItem({
           ref={videoRef}
           cam={cam}
           className="cctv-pagination-list-video-container"
+          layout="carousel"
           // thumbnail에서는 header live/share 상태만 보이고 footer action은 최소화한다.
           headerOptions={{
             activeLiveState: true,

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

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+import type { CctvVideoCardProps } from "../../types";
+
+/**
+ * CCTV; service settings를 결합하는 video card
+ * @component
+ * @param {CctvVideoCardProps} props
+ * @param {React.ReactNode} props.children video/media 영역
+ * @param {React.ReactNode} [props.settings] media 하단 서비스 설정 영역
+ * @param {string} [props.className] 카드 루트 클래스
+ * @example
+ * <CCTV.Video.Card settings={<Controls />}><CCTV.Video.Template /></CCTV.Video.Card>
+ */
+export default function CCTVVideoCard({
+  children,
+  className,
+  settings,
+}: CctvVideoCardProps) {
+  return (
+    <section
+      className={clsx("cctv-video-card", className)}
+      data-has-settings={typeof settings !== "undefined" ? "true" : undefined}
+    >
+      <div className="cctv-video-card-media">{children}</div>
+      {typeof settings !== "undefined" ? (
+        <div className="cctv-video-card-settings">{settings}</div>
+      ) : null}
+    </section>
+  );
+}

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

@@ -4,15 +4,18 @@ export default function CCTVVideoContainer({
   className,
   children,
   isError,
+  layout,
 }: {
   className?: string;
   children: React.ReactNode;
   isError?: boolean;
+  layout?: "card" | "carousel" | "viewer";
 }) {
   return (
     <div
       className={clsx("cctv-video-container", className)}
       data-error={isError ? "true" : undefined}
+      data-layout={layout}
     >
       {children}
     </div>

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

@@ -33,6 +33,7 @@ const CCTVVideoTemplate = forwardRef<HTMLVideoElement, CctvVideoTemplateProps>(
       footerOptions,
       isError,
       isLive,
+      layout,
       overlayMessage,
       streamStage,
       canReconnect,
@@ -69,7 +70,11 @@ const CCTVVideoTemplate = forwardRef<HTMLVideoElement, CctvVideoTemplateProps>(
         : defaultOverlay;
 
     return (
-      <CCTVVideoContainer className={className} isError={isError}>
+      <CCTVVideoContainer
+        className={className}
+        isError={isError}
+        layout={layout}
+      >
         <CCTVVideoContents ref={ref} muted />
         {overlayNode}
       </CCTVVideoContainer>

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

@@ -2,10 +2,12 @@ import CCTVVideoContainer from "./Container";
 import { CCTVVideoOverlay } from "./overlay";
 import CCTVVideoTemplate from "./Template";
 import CCTVVideoContents from "./Video";
+import CCTVVideoCard from "./Card";
 
 export const CCTVVideo = {
   Container: CCTVVideoContainer,
   Contents: CCTVVideoContents,
+  Card: CCTVVideoCard,
   Template: CCTVVideoTemplate,
   Overlay: CCTVVideoOverlay,
 };

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

@@ -5,6 +5,7 @@ import type { CctvVideoOverlayFooterProps } from "../../../../types";
 
 export default function CCTVVideoOverlayFooter({
   className,
+  children,
   activeTitle = true,
   activeOpenButton,
   cam,
@@ -23,6 +24,7 @@ export default function CCTVVideoOverlayFooter({
       {activeOpenButton && cam && (
         <CCTVVideoOpenButton {...cam} isLive={isLive} />
       )}
+      {children}
     </footer>
   );
 }

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

@@ -0,0 +1,22 @@
+import type { CctvVideoMetricProps } from "../../../../types";
+
+/**
+ * CCTV; state dot을 포함한 sensor metric
+ * @component
+ * @param {CctvVideoMetricProps} props
+ * @param {React.ReactNode} props.children 표시할 센서 값
+ * @param {"normal" | "attention" | "unavailable"} [props.state="normal"] state dot 표시 상태
+ * @example
+ * <CCTV.Video.Overlay.Footer.Metric state="attention">온도 38℃</CCTV.Video.Overlay.Footer.Metric>
+ */
+export default function CCTVVideoMetric({
+  children,
+  state = "normal",
+}: CctvVideoMetricProps) {
+  return (
+    <span className="cctv-video-metric" data-state={state}>
+      <span className="cctv-video-metric-dot" aria-hidden="true" />
+      <span>{children}</span>
+    </span>
+  );
+}

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

@@ -0,0 +1,13 @@
+/**
+ * CCTV; sensor metric group
+ * @component
+ * @param {object} props
+ * @param {React.ReactNode} props.children sensor metric 목록
+ */
+export default function CCTVVideoMetrics({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="cctv-video-metrics">{children}</div>;
+}

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

@@ -21,7 +21,7 @@ export default function CCTVVideoLiveState({
       {...options}
     >
       <figure className="cctv-video-live-state-dot"></figure>
-      <span>{isShared ? "외부공유중" : "Live"}</span>
+      <span>{isShared ? "외부 공유" : "Live"}</span>
     </Badge>
   );
 }

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

@@ -3,6 +3,8 @@ import CCTVVideoError from "./body/Error";
 import CCTVVideoOverlayContainer from "./Container";
 import CCTVVideoOverlayFooter from "./footer/Container";
 import CCTVVideoOpenButton from "./footer/OpenButton";
+import CCTVVideoMetric from "./footer/Metric";
+import CCTVVideoMetrics from "./footer/Metrics";
 import CCTVVideoCloseButton from "./header/CloseButton";
 import CCTVVideoOverlayHeader from "./header/Container";
 import CCTVVideoLiveState from "./header/LiveState";
@@ -20,5 +22,7 @@ export const CCTVVideoOverlay = {
   Footer: {
     Container: CCTVVideoOverlayFooter,
     OpenButton: CCTVVideoOpenButton,
+    Metric: CCTVVideoMetric,
+    Metrics: CCTVVideoMetrics,
   },
 };

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

@@ -1,8 +1,12 @@
+"use client";
+
 import clsx from "clsx";
 import CCTVViewerContainer from "../Container";
 import CCTVViewerDesktopPagination from "./Pagination";
 import CCTVViewerDesktopVideo from "./Video";
+import CCTVViewerDesktopHeadline from "./Headline";
 import type { CctvViewerDesktopContainerProps } from "../../../types";
+import { useCctvContext } from "../../../hooks";
 
 /**
  * CCTV; viewer desktop container
@@ -21,8 +25,27 @@ export default function CCTVViewerDesktopContainer({
   children,
   selectedCam,
   camList,
+  metrics,
+  onNext,
+  onPrev,
   renderOverlay,
+  time,
 }: CctvViewerDesktopContainerProps) {
+  const context = useCctvContext();
+  const resolvedCam = selectedCam ?? context.selectedCam;
+  const resolvedList = camList ?? context.cams;
+  const currentIndex = resolvedList.findIndex(
+    cam => cam.cam_id === resolvedCam?.cam_id,
+  );
+  const resolvedPrev =
+    onPrev ??
+    (currentIndex > 0 ? resolvedList[currentIndex - 1]?.onSelect : undefined);
+  const resolvedNext =
+    onNext ??
+    (currentIndex >= 0 && currentIndex < resolvedList.length - 1
+      ? resolvedList[currentIndex + 1]?.onSelect
+      : undefined);
+
   return (
     <CCTVViewerContainer
       className={clsx("cctv-viewer-desktop-container", className)}
@@ -31,15 +54,23 @@ export default function CCTVViewerDesktopContainer({
         children
       ) : (
         <>
+          <CCTVViewerDesktopHeadline
+            title={resolvedCam?.cam_name ?? "-"}
+            time={time}
+          />
           <CCTVViewerDesktopVideo
-            {...(typeof selectedCam !== "undefined"
-              ? { cam: selectedCam }
+            {...(typeof resolvedCam !== "undefined"
+              ? { cam: resolvedCam }
               : {})}
-            // 변경 설명: container에서 받은 seam을 main viewer video로 전달한다.
+            metrics={metrics}
+            onNext={resolvedNext}
+            onPrev={resolvedPrev}
             renderOverlay={renderOverlay}
           />
           <CCTVViewerDesktopPagination
-            {...(typeof camList !== "undefined" ? { list: camList } : {})}
+            {...(typeof resolvedList !== "undefined"
+              ? { list: resolvedList }
+              : {})}
           />
         </>
       )}