@uniai-fe/uds-templates 0.12.7 → 0.12.9

package/dist/styles.css

@@ -245,7 +245,8 @@
 .page-header-logout-button {
   font-size: 0;
 }
-.page-header-logout-button figure {
+.page-header-logout-button svg {
+  display: block;
   width: 2.4rem;
   height: 2.4rem;
 }
@@ -2288,10 +2289,6 @@
   height: 24px;
   flex: 0 0 24px;
 }
-.cctv-fullscreen-button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 4px;
-}
 
 .service-inquiry-form {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.12.7",
+  "version": "0.12.9",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -62,22 +62,22 @@
     "@types/react-dom": "^19.2.5",
     "eslint": "^9.39.5",
     "jotai": "^2.20.3",
-    "next": "16.3.5",
-    "prettier": "^3.9.6",
+    "next": "16.4.2",
+    "prettier": "^3.9.10",
     "react-hook-form": "^7.86.0",
     "sass": "^1.102.0",
     "typescript": "6.0.3",
     "@uniai-fe/next-devkit": "0.4.1",
-    "@uniai-fe/react-hooks": "0.3.0",
-    "@uniai-fe/uds-foundation": "0.6.0",
-    "@uniai-fe/eslint-config": "0.4.4",
-    "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/util-jotai": "0.3.0",
+    "@uniai-fe/util-api": "0.2.1",
     "@uniai-fe/util-functions": "0.4.3",
+    "@uniai-fe/uds-foundation": "0.6.0",
+    "@uniai-fe/uds-primitives": "0.13.2",
     "@uniai-fe/util-next": "0.5.0",
+    "@uniai-fe/util-jotai": "0.3.0",
     "@uniai-fe/util-rtc": "0.2.1",
-    "@uniai-fe/util-api": "0.2.1",
-    "@uniai-fe/uds-primitives": "0.13.0"
+    "@uniai-fe/eslint-config": "0.4.5",
+    "@uniai-fe/tsconfig": "0.2.0",
+    "@uniai-fe/react-hooks": "0.3.0"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

package/src/cctv/styles/viewer.scss

@@ -128,9 +128,4 @@
     height: 24px;
     flex: 0 0 24px;
   }
-
-  &:focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 4px;
-  }
 }

package/src/page-frame/desktop/components/header/util/Logout.tsx

@@ -1,17 +1,29 @@
 "use client";
 
-import Image from "next/image";
 import Link, { type LinkProps } from "next/link";
-import assetsUrl from "../../../../../asset-url";
+import LogoutIcon from "../../../img/logout-v2.svg";
 import PageHeaderUtilityItem from "./Item";
 import PageHeaderUtilityButton from "./Button";
 import clsx from "clsx";
 
+/**
+ * Page Header; 로그아웃 링크 버튼
+ * @component
+ * @property {string} [className] 최상위 유틸리티 항목의 추가 클래스
+ * @property {string} [path="/logout"] 로그아웃 이동 경로
+ * @desc 로그아웃 경로의 prefetch를 막고 rem 크기의 SVG 아이콘을 표시한다
+ */
 export default function PageHeaderLogoutButton({
   className,
   path = "/logout",
 }: {
+  /**
+   * 최상위 유틸리티 항목의 추가 클래스
+   */
   className?: string;
+  /**
+   * 로그아웃 이동 경로. 기본값은 `/logout`이다.
+   */
   path?: string;
 }) {
   return (
@@ -23,14 +35,15 @@ export default function PageHeaderLogoutButton({
         as={Link}
         className="page-header-logout-button"
         prefetch={false}
+        aria-label="로그아웃"
       >
         <figure>
-          <Image
-            src={`${assetsUrl}/img/page-header/logout-v2.svg`}
-            alt="로그아웃"
-            // width={24}
-            // height={24}
-            fill
+          <LogoutIcon
+            width={24}
+            height={24}
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+            focusable="false"
           />
         </figure>
       </PageHeaderUtilityButton>

package/src/page-frame/desktop/styles/page/header.scss

@@ -54,7 +54,8 @@
 
 .page-header-logout-button {
   font-size: 0;
-  figure {
+  svg {
+    display: block;
     width: 2.4rem;
     height: 2.4rem;
   }