@uniai-fe/uds-templates 0.4.20 → 0.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.4.20",
+  "version": "0.4.22",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.95.2",
+    "@tanstack/react-query": "^5.96.0",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

package/src/auth/login/markup/Container.tsx

@@ -24,22 +24,17 @@ export default function AuthLoginContainer({
   onFindPasswordLinkClick,
 }: AuthLoginProps) {
   return (
-    <>
-      <AuthContainer
-        className={clsx("auth-login-container", className)}
-        header={header}
-        footer={footer}
-      >
-        <AuthLoginFormField {...fieldOptions} />
-        {linkOptions && (
-          <AuthLoginLinkButtons
-            hrefFindId={linkOptions.find.id}
-            hrefFindPassword={linkOptions.find.password}
-            hrefSignup={linkOptions.signup}
-            onFindPasswordClick={onFindPasswordLinkClick}
-          />
-        )}
-      </AuthContainer>
-    </>
+    <AuthContainer
+      className={clsx("auth-login-container", className)}
+      header={header}
+      footer={footer}
+    >
+      <AuthLoginFormField {...fieldOptions} />
+      {/* 링크 옵션이 부분적으로만 넘어와도 내부에서 존재하는 항목만 렌더링한다. */}
+      <AuthLoginLinkButtons
+        linkOptions={linkOptions}
+        onFindPasswordClick={onFindPasswordLinkClick}
+      />
+    </AuthContainer>
   );
 }

package/src/auth/login/markup/LinkButtons.tsx

@@ -1,55 +1,76 @@
 import Link from "next/link";
 import { Button, Divider } from "@uniai-fe/uds-primitives";
+import type { AuthLoginLinkOptions } from "../types";
 
+/**
+ * 로그인 링크 버튼 묶음; 전달된 링크만 선택적으로 렌더링한다.
+ * @component
+ * @param {{ linkOptions?: AuthLoginLinkOptions; onFindPasswordClick?: () => void; }} props
+ * @param {AuthLoginLinkOptions} [props.linkOptions] 로그인 링크 옵션
+ * @param {() => void} [props.onFindPasswordClick] 비밀번호 찾기 커스텀 클릭 핸들러
+ */
 export default function AuthLoginLinkButtons({
-  hrefFindId,
-  hrefFindPassword,
-  hrefSignup,
+  linkOptions,
   onFindPasswordClick,
 }: {
-  hrefFindId: string;
-  hrefFindPassword: string;
-  hrefSignup: string;
+  linkOptions?: AuthLoginLinkOptions;
   onFindPasswordClick?: () => void;
 }) {
+  const hrefFindId = linkOptions?.find?.id;
+  const hrefFindPassword = linkOptions?.find?.password;
+  const hrefSignup = linkOptions?.signup;
+
+  if (!hrefFindId && !hrefFindPassword && !hrefSignup) {
+    return null;
+  }
+
   return (
     <div className="auth-login-util-container">
-      <div className="auth-login-find-account">
-        <Link
-          href={hrefFindId}
-          className="auth-login-find-account-button auth-find-id-button"
-        >
-          <span>아이디 찾기</span>
-        </Link>
-        <Divider />
-        {onFindPasswordClick ? (
-          <button
-            type="button"
-            className="auth-login-find-account-button auth-find-password-button"
-            onClick={onFindPasswordClick}
-          >
-            <span>비밀번호 찾기</span>
-          </button>
-        ) : (
-          <Link
-            href={hrefFindPassword}
-            className="auth-login-find-account-button  auth-find-password-button"
+      {(hrefFindId || hrefFindPassword) && (
+        <div className="auth-login-find-account">
+          {hrefFindId && (
+            <Link
+              href={hrefFindId}
+              className="auth-login-find-account-button auth-find-id-button"
+            >
+              <span>아이디 찾기</span>
+            </Link>
+          )}
+          {hrefFindId && hrefFindPassword && <Divider />}
+          {/* 비밀번호 찾기 링크가 있을 때만 버튼/링크를 선택적으로 노출한다. */}
+          {hrefFindPassword &&
+            (onFindPasswordClick ? (
+              <button
+                type="button"
+                className="auth-login-find-account-button auth-find-password-button"
+                onClick={onFindPasswordClick}
+              >
+                <span>비밀번호 찾기</span>
+              </button>
+            ) : (
+              <Link
+                href={hrefFindPassword}
+                className="auth-login-find-account-button auth-find-password-button"
+              >
+                <span>비밀번호 찾기</span>
+              </Link>
+            ))}
+        </div>
+      )}
+      {hrefSignup && (
+        <div className="auth-login-signup">
+          {/* 회원가입 링크가 있을 때만 signup CTA를 유지한다. */}
+          <Button.Rounded
+            as={Link}
+            href={hrefSignup}
+            className="auth-login-signup-button"
+            priority="tertiary"
+            size="small"
           >
-            <span>비밀번호 찾기</span>
-          </Link>
-        )}
-      </div>
-      <div className="auth-login-signup">
-        <Button.Rounded
-          as={Link}
-          href={hrefSignup}
-          className="auth-login-signup-button"
-          priority="tertiary"
-          size="small"
-        >
-          회원가입
-        </Button.Rounded>
-      </div>
+            회원가입
+          </Button.Rounded>
+        </div>
+      )}
     </div>
   );
 }

package/src/auth/login/types/props.ts

@@ -244,31 +244,31 @@ export interface AuthLoginFieldOptions {
 
 /**
  * 로그인 화면 링크 옵션; 찾기/회원가입 링크를 묶는다.
- * @property {{ id: string; password: string }} find 계정찾기 링크
- * @property {string} find.id 아이디 찾기 링크
- * @property {string} find.password 비밀번호 찾기 링크
- * @property {string} signup 회원가입 링크
+ * @property {{ id?: string; password?: string }} [find] 계정찾기 링크
+ * @property {string} [find.id] 아이디 찾기 링크
+ * @property {string} [find.password] 비밀번호 찾기 링크
+ * @property {string} [signup] 회원가입 링크
  */
 export interface AuthLoginLinkOptions {
   /**
    * 아이디/비밀번호 찾기 링크
-   * @property {string} id 아이디 찾기 링크
-   * @property {string} password 비밀번호 찾기 링크
+   * @property {string} [id] 아이디 찾기 링크
+   * @property {string} [password] 비밀번호 찾기 링크
    */
-  find: {
+  find?: {
     /**
      * 아이디 찾기 링크
      */
-    id: string;
+    id?: string;
     /**
      * 비밀번호 찾기 링크
      */
-    password: string;
+    password?: string;
   };
   /**
    * 회원가입 링크
    */
-  signup: string;
+  signup?: string;
 }
 
 /**
@@ -279,7 +279,7 @@ export interface AuthLoginLinkOptions {
  * @property {ReactNode} [footer] 하단 콘텐츠
  * @property {AuthLoginFieldOptions} [fieldOptions] 입력 필드 옵션
  * @property {AuthLoginLinkOptions} [linkOptions] 계정관련 링크 옵션
- * @property {() => void} onFindPasswordLinkClick 비밀번호 찾기 링크버튼 클릭 콜백 이벤트
+ * @property {() => void} [onFindPasswordLinkClick] 비밀번호 찾기 링크버튼 클릭 콜백 이벤트
  */
 export interface AuthLoginProps extends Omit<AuthContainerProps, "children"> {
   /**

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

@@ -11,6 +11,7 @@ export default function CCTVVideoOverlayHeader({
   activeTitle,
   title,
   isLive,
+  isShared,
 }: CctvVideoOverlayHeaderProps) {
   const showUpper = activeLiveState || activeCloseButton;
   const showLower = activeTitle;
@@ -23,7 +24,15 @@ export default function CCTVVideoOverlayHeader({
     >
       {showUpper && (
         <div className="cctv-video-overlay-header-upper">
-          {activeLiveState && <CCTVVideoLiveState isLive={isLive} />}
+          {activeLiveState && (
+            <CCTVVideoLiveState
+              isLive={isLive}
+              isShared={isShared}
+              {...(activeCloseButton
+                ? { badgeOptions: { size: "medium" } }
+                : {})}
+            />
+          )}
           {activeCloseButton && <CCTVVideoCloseButton />}
         </div>
       )}

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

@@ -1,21 +1,27 @@
 "use client";
 
 import clsx from "clsx";
-import { Badge } from "@uniai-fe/uds-primitives";
+import { Badge, type BadgeProps } from "@uniai-fe/uds-primitives";
 
 export default function CCTVVideoLiveState({
   isLive = false,
+  isShared = false,
+  badgeOptions,
 }: {
   isLive?: boolean;
+  isShared?: boolean;
+  badgeOptions?: Partial<Omit<BadgeProps, "className" | "children">>;
 }) {
+  const { size, intent, ...options } = badgeOptions ?? {};
   return (
     <Badge
-      size="xsmall"
-      intent="tertiary"
+      size={size ?? "xsmall"}
+      intent={intent ?? "tertiary"}
       className={clsx("cctv-video-live-state", { on: isLive == true })}
+      {...options}
     >
       <figure className="cctv-video-live-state-dot"></figure>
-      <span>Live</span>
+      <span>{isShared ? "외부공유중" : "Live"}</span>
     </Badge>
   );
 }

package/src/cctv/types/api.ts

@@ -29,6 +29,7 @@ export interface API_Req_GetCompanyListParams extends Omit<
  * @property {boolean} cam_online 카메라 설치상태
  * @property {string} [cam_rtc] 카메라 스트리밍 WebRTC 경로
  * @property {string} [cam_rtcp] 카메라 RTCP 경로
+ * @property {boolean} [cam_shared] 카메라 외부공유 여부
  */
 export interface API_Res_CctvCompanyCameraList {
   // API 응답은 데이터-only 구조이므로 UI 전용 콜백은 포함하지 않는다.
@@ -54,6 +55,10 @@ export interface API_Res_CctvCompanyCameraList {
    * RTCP 경로
    */
   cam_rtcp?: string;
+  /**
+   * 외부공유 상태
+   */
+  cam_shared?: boolean;
 }
 
 /**

package/src/cctv/types/props.ts

@@ -9,6 +9,7 @@ import type { CctvCompanyCameraData } from "./list";
  * @property {React.ReactNode} [title] 제목 콘텐츠
  * @property {boolean} [activeTime] 시간 표시 영역 활성화 여부
  * @property {boolean} [isLive] Live 뱃지를 on/off 상태로 표시할지 여부
+ * @property {boolean} [isShared] 외부공유 여부
  */
 export interface CctvVideoOverlayHeaderProps {
   className?: string;
@@ -32,6 +33,10 @@ export interface CctvVideoOverlayHeaderProps {
    * 시간 표시 영역 활성화 여부
    */
   isLive?: boolean;
+  /**
+   * 해당 카메라의 외부공유 여부 상태
+   */
+  isShared?: boolean;
 }
 
 /**