@uniai-fe/uds-templates 0.3.9 → 0.3.11

package/dist/styles.css

@@ -57,6 +57,7 @@
   --modal-dialog-title-weight: var(--font-heading-small-weight);
   --modal-dialog-body-color: var(--color-label-standard);
   --modal-dialog-body-font-size: var(--font-body-medium-size);
+  --modal-dialog-body-padding: var(--spacing-padding-7) var(--spacing-padding-8);
   --auth-container-max-width: 335px;
   --auth-container-gap: var(--spacing-padding-7, 28px);
   --auth-container-padding-inline: var(--spacing-padding-6, 24px);
@@ -517,6 +518,10 @@
   margin: 0;
 }
 
+.uds-modal-header-close-button {
+  font-size: 0;
+}
+
 .uds-modal-footer {
   padding: 0;
   border-top: none;
@@ -526,17 +531,17 @@
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  padding: var(--spacing-padding-6, 16px);
-  gap: var(--spacing-gap-4, 16px);
+  padding: 0 var(--spacing-padding-8) var(--spacing-padding-7);
+  gap: var(--spacing-gap-4);
   align-items: stretch;
-  row-gap: var(--spacing-gap-4, 16px);
+  row-gap: var(--spacing-gap-4);
 }
 
 .uds-modal-footer-group {
   display: flex;
   flex: 1 1 0;
   flex-wrap: nowrap;
-  gap: var(--spacing-gap-4, 16px);
+  gap: var(--spacing-gap-4);
   align-items: stretch;
 }
 .uds-modal-footer-group[data-position=left] {
@@ -626,18 +631,18 @@
 }
 
 .uds-modal-dialog-header-content {
-  padding: var(--spacing-padding-9) var(--spacing-padding-6) 0;
+  padding: var(--spacing-padding-9) var(--spacing-padding-8) 0;
   text-align: center;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
 }
 
 .uds-modal-dialog-header-row {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-gap-3, 12px);
+  gap: var(--spacing-gap-3);
 }
 
 .uds-modal-dialog-header-row-split {
@@ -647,14 +652,14 @@
 .uds-modal-dialog-header-leading {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
   justify-content: center;
 }
 
 .uds-modal-dialog-header-leading-content {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-1, 4px);
+  gap: var(--spacing-gap-1);
 }
 .uds-modal-dialog-header-leading-content > :where(p, span, strong, em):not([class]) {
   color: var(--modal-dialog-title-color);
@@ -679,7 +684,7 @@
 .uds-modal-dialog-header-trailing {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
 }
 
 .uds-modal-dialog-header-description {
@@ -691,7 +696,7 @@
   color: var(--modal-dialog-body-color);
   font-size: var(--modal-dialog-body-font-size);
   line-height: 1.5em;
-  font-weight: var(--font-body-small-weight, 400);
+  font-weight: var(--font-body-small-weight);
 }
 
 .uds-modal-dialog-header[data-layout=split] .uds-modal-dialog-header-content,
@@ -705,7 +710,7 @@
 }
 
 .uds-modal-dialog-body-content {
-  padding: var(--modal-dialog-body-padding, var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px));
+  padding: var(--modal-dialog-body-padding, );
   text-align: center;
   word-break: keep-all;
   color: var(--modal-dialog-body-color);
@@ -714,11 +719,11 @@
   margin: 0;
   font-size: var(--modal-dialog-body-font-size);
   line-height: 1.5em;
-  font-weight: var(--font-body-small-weight, 400);
+  font-weight: var(--font-body-small-weight);
   word-break: inherit;
 }
 .uds-modal-dialog-body-content > * + * {
-  margin-top: var(--spacing-gap-2, 8px);
+  margin-top: var(--spacing-gap-2);
 }
 
 .uds-modal-surface {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/modal/components/core/header/CloseButton.tsx

@@ -3,6 +3,7 @@
 import clsx from "clsx";
 
 import type { ModalHeaderCloseButtonProps } from "../../../types";
+import CloseIcon from "../../../img/close.svg";
 
 /**
  * Modal Header CloseButton; 모달 헤더 닫기 버튼
@@ -26,7 +27,13 @@ export function ModalHeaderCloseButton({
       aria-label={ariaLabel}
       onClick={onClick}
     >
-      X
+      <CloseIcon
+        width={20}
+        height={20}
+        alt={ariaLabel}
+        viewBox="0 0 20 20"
+        preserveAspectRatio="xMidYMid meet"
+      />
     </button>
   );
 }

package/src/modal/hooks/useModal.ts

@@ -1,11 +1,10 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
 
 import { useAtom } from "jotai";
 
 import type {
-  CloseFlagState,
   ModalCloseRequest,
   ModalProps,
   ModalState,
@@ -29,7 +28,6 @@ const ensureDelay = (value?: number): number =>
  */
 export function useModal(): UseModalReturn {
   const [modalStacks, updateModalStack] = useAtom(modalStackAtom);
-  const [closeFlag, setCloseFlag] = useState<CloseFlagState | null>(null);
 
   const newModal = useCallback(
     <FormContext extends FieldValues>(newStack: ModalState<FormContext>) => {
@@ -89,16 +87,25 @@ export function useModal(): UseModalReturn {
 
   const closeModal = useCallback(
     ({ stackKey, callback }: ModalCloseRequest) => {
-      let resolvedDelay = DEFAULT_CLOSE_DELAY;
-      let hasTarget = false;
+      const targetStack = modalStacks.find(
+        stack => stack.stackKey === stackKey,
+      );
+
+      if (!targetStack) {
+        console.warn(
+          `[useModal] stack "${stackKey}" not found; close skipped.`,
+        );
+        return;
+      }
+
+      const resolvedDelay = ensureDelay(targetStack.modalProps.showDelay);
 
+      // 변경 설명: updater 내부 side-effect 의존을 제거하고, 현재 스택 스냅샷 기준으로 close 타이머를 확정한다.
       updateModalStack((stacks: ModalState[]) =>
         stacks.map(stack => {
           if (stack.stackKey !== stackKey) {
             return stack;
           }
-          hasTarget = true;
-          resolvedDelay = ensureDelay(stack.modalProps.showDelay);
           return {
             ...stack,
             modalProps: { ...stack.modalProps, show: false },
@@ -106,33 +113,16 @@ export function useModal(): UseModalReturn {
         }),
       );
 
-      if (!hasTarget) {
-        console.warn(
-          `[useModal] stack "${stackKey}" not found; close skipped.`,
+      // 변경 설명: close 예약 상태를 훅 local state로 두지 않고 즉시 타이머를 등록해 호출 경로별 제거 동작을 동일화한다.
+      setTimeout(() => {
+        updateModalStack((stacks: ModalState[]) =>
+          stacks.filter(stack => stack.stackKey !== stackKey),
         );
-        return;
-      }
-
-      setCloseFlag({ stackKey, showDelay: resolvedDelay, callback });
+        callback?.();
+      }, resolvedDelay);
     },
-    [updateModalStack],
+    [modalStacks, updateModalStack],
   );
 
-  useEffect(() => {
-    if (!closeFlag) {
-      return;
-    }
-
-    const timer = setTimeout(() => {
-      updateModalStack((stacks: ModalState[]) =>
-        stacks.filter(stack => stack.stackKey !== closeFlag.stackKey),
-      );
-      closeFlag.callback?.();
-      setCloseFlag(null);
-    }, closeFlag.showDelay);
-
-    return () => clearTimeout(timer);
-  }, [closeFlag, updateModalStack]);
-
   return { modalStacks, newModal, updateModal, closeModal };
 }

package/src/modal/img/close.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1264 3.37588C15.5169 2.9854 16.1503 2.98537 16.5408 3.37588C16.9312 3.7664 16.9312 4.39976 16.5408 4.79027L11.3723 9.95791L16.5408 15.1264C16.931 15.5169 16.9304 16.1495 16.54 16.5399C16.1495 16.9304 15.5169 16.931 15.1264 16.5408L9.95793 11.3723L4.79029 16.5408C4.39974 16.931 3.76634 16.9304 3.3759 16.5399C2.9858 16.1495 2.98574 15.5168 3.3759 15.1264L8.54354 9.95791L3.3759 4.79027C2.98538 4.39974 2.98538 3.7664 3.3759 3.37588C3.76643 2.9854 4.39978 2.98537 4.79029 3.37588L9.95793 8.54352L15.1264 3.37588Z" fill="#94989E"/>
+</svg>

package/src/modal/styles/base.scss

@@ -21,6 +21,7 @@
   --modal-dialog-title-weight: var(--font-heading-small-weight);
   --modal-dialog-body-color: var(--color-label-standard);
   --modal-dialog-body-font-size: var(--font-body-medium-size);
+  --modal-dialog-body-padding: var(--spacing-padding-7) var(--spacing-padding-8);
 }
 
 .uds-modal-root {

package/src/modal/styles/container.scss

@@ -9,6 +9,9 @@
   padding: 0;
   margin: 0;
 }
+.uds-modal-header-close-button {
+  font-size: 0;
+}
 
 .uds-modal-footer {
   padding: 0;
@@ -19,17 +22,17 @@
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  padding: var(--spacing-padding-6, 16px);
-  gap: var(--spacing-gap-4, 16px);
+  padding: 0 var(--spacing-padding-8) var(--spacing-padding-7);
+  gap: var(--spacing-gap-4);
   align-items: stretch;
-  row-gap: var(--spacing-gap-4, 16px);
+  row-gap: var(--spacing-gap-4);
 }
 
 .uds-modal-footer-group {
   display: flex;
   flex: 1 1 0;
   flex-wrap: nowrap;
-  gap: var(--spacing-gap-4, 16px);
+  gap: var(--spacing-gap-4);
   align-items: stretch;
 
   &[data-position="left"] {
@@ -138,18 +141,18 @@
 }
 
 .uds-modal-dialog-header-content {
-  padding: var(--spacing-padding-9) var(--spacing-padding-6) 0;
+  padding: var(--spacing-padding-9) var(--spacing-padding-8) 0;
   text-align: center;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
 }
 
 .uds-modal-dialog-header-row {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-gap-3, 12px);
+  gap: var(--spacing-gap-3);
 }
 
 .uds-modal-dialog-header-row-split {
@@ -159,14 +162,14 @@
 .uds-modal-dialog-header-leading {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
   justify-content: center;
 }
 
 .uds-modal-dialog-header-leading-content {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-1, 4px);
+  gap: var(--spacing-gap-1);
 
   // 변경: header leading slot은 class 없는 직계 텍스트만 기본 타이포를 적용한다.
   > :where(p, span, strong, em):not([class]) {
@@ -195,7 +198,7 @@
 .uds-modal-dialog-header-trailing {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
 }
 
 .uds-modal-dialog-header-description {
@@ -208,7 +211,7 @@
     color: var(--modal-dialog-body-color);
     font-size: var(--modal-dialog-body-font-size);
     line-height: 1.5em;
-    font-weight: var(--font-body-small-weight, 400);
+    font-weight: var(--font-body-small-weight);
   }
 }
 
@@ -225,10 +228,7 @@
 }
 
 .uds-modal-dialog-body-content {
-  padding: var(
-    --modal-dialog-body-padding,
-    var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px)
-  );
+  padding: var(--modal-dialog-body-padding,);
   text-align: center;
   word-break: keep-all;
   color: var(--modal-dialog-body-color);
@@ -239,11 +239,11 @@
     margin: 0;
     font-size: var(--modal-dialog-body-font-size);
     line-height: 1.5em;
-    font-weight: var(--font-body-small-weight, 400);
+    font-weight: var(--font-body-small-weight);
     word-break: inherit;
   }
 
   > * + * {
-    margin-top: var(--spacing-gap-2, 8px);
+    margin-top: var(--spacing-gap-2);
   }
 }

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

@@ -25,12 +25,11 @@ import { PAGE_FRAME_DESKTOP_SETTING_ITEMS } from "../../../../data/setting";
  * @property {string} [props.className] 사용자 정의 className
  * @property {PageFrameDesktopSettingItem[]} [props.items] dropdown 항목 배열
  * @description
- * - 테마 설정
- * - 날씨 알림 설정
- * - 시세 알림 설정
- * - 이상감지 알림 설정
- * - SNS 메시지 알림 설정
- * - 비밀번호 재설정
+ * - 내 정보 관리
+ * - 내 농장 관리
+ *   - 기본 정보
+ *   - 인증 정보
+ *   - 시설 정보
  */
 export default function PageHeaderSettingButton({
   className,
@@ -46,17 +45,43 @@ export default function PageHeaderSettingButton({
     () => getClosestRoute(menuItems, resolvedPath),
     [menuItems, resolvedPath],
   );
+  const commonRoute = useMemo(() => {
+    const routes = menuItems.map(({ path }) => path.split("/").filter(Boolean));
+
+    // route 각 index 아이템이 가장 많이 겹치는 route 추출
+    const maxLength = Math.max(...routes.map(route => route.length));
+    const res = Array(maxLength)
+      .fill("")
+      .map((_, index) => {
+        const current = routes[0][index] ?? "";
+        if (routes.every(route => route[index] === current)) {
+          return current;
+        }
+        return "";
+      })
+      .filter(Boolean);
+    return `/${res.join("/")}`;
+  }, [menuItems]);
+
+  const isMatchRouteGroup = useMemo(
+    () => pathname.startsWith(commonRoute),
+    [pathname, commonRoute],
+  );
 
   const dropdownItems: DropdownTemplateItem[] = useMemo(
     () =>
       menuItems.map(item => ({
         id: item.routeKey,
+        // 변경: Dropdown.Template value-first 계약에 맞춰 routeKey를 value로도 전달한다.
+        value: item.routeKey,
         label: item.name,
         left: item.icon,
         // 변경: Dropdown.Template 선택 계약은 items[].selected를 source로 사용한다.
-        selected: String(closestRoute?.routeKey) === String(item.routeKey),
+        selected:
+          isMatchRouteGroup &&
+          String(closestRoute?.routeKey) === String(item.routeKey),
       })),
-    [closestRoute?.routeKey, menuItems],
+    [menuItems, isMatchRouteGroup, closestRoute?.routeKey],
   );
 
   /**
@@ -65,9 +90,8 @@ export default function PageHeaderSettingButton({
    */
   const handleSelect = useCallback(
     (payload: DropdownTemplateChangePayload) => {
-      const target = menuItems.find(
-        item => item.routeKey === payload.currentItem.id,
-      );
+      const currentRouteKey = String(payload.currentValue);
+      const target = menuItems.find(item => item.routeKey === currentRouteKey);
       target?.onSelect?.();
     },
     [menuItems],