@uniai-fe/uds-templates 0.3.8 → 0.3.10

package/dist/styles.css

@@ -103,20 +103,21 @@
 .page-frame-container {
   width: 100%;
   min-height: 100vh;
+  height: 100%;
   background-color: var(--uds-page-frame-background);
 }
 
 .page-frame-service-frame {
   width: 100%;
   min-height: 100vh;
+  height: 100%;
   display: flex;
 }
 
 .page-frame-service-main {
   width: calc(100% - var(--uds-page-nav-width));
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+  height: 100%;
 }
 
 .page-frame-service-main-wrapper {
@@ -124,6 +125,7 @@
   height: calc(100% - var(--uds-page-header-height));
   padding: var(--uds-page-body-padding-vertical) var(--uds-page-body-padding-horizontal);
   background-color: var(--uds-page-body-background);
+  overflow-y: auto;
   position: relative;
   z-index: 0;
 }

package/package.json

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

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],

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

@@ -2,6 +2,7 @@
 .page-frame-container {
   width: 100%;
   min-height: 100vh;
+  height: 100%;
   background-color: var(--uds-page-frame-background);
 }
 
@@ -9,6 +10,7 @@
 .page-frame-service-frame {
   width: 100%;
   min-height: 100vh;
+  height: 100%;
   display: flex;
 }
 
@@ -16,8 +18,9 @@
 .page-frame-service-main {
   width: calc(100% - var(--uds-page-nav-width));
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+  height: 100%;
+  // display: flex;
+  // flex-direction: column;
 }
 
 // 본문 스크롤 영역: 헤더 높이를 제외하고 padding을 CSS 변수로 제어한다.
@@ -27,7 +30,7 @@
   padding: var(--uds-page-body-padding-vertical)
     var(--uds-page-body-padding-horizontal);
   background-color: var(--uds-page-body-background);
-  // overflow-y: auto;
+  overflow-y: auto;
 
   position: relative;
   z-index: 0;