@uniai-fe/uds-templates 0.4.12 → 0.4.14

package/dist/styles.css

@@ -3,24 +3,26 @@
   --uds-page-frame-background: var(--color-common-100);
   --uds-page-header-height: 7.2rem;
   --uds-page-header-border: var(--color-border-standard-cool-gray);
-  --uds-page-header-padding-horizontal: var(--spacing-padding-9, 2.8rem);
-  --uds-page-header-padding-vertical: var(--spacing-padding-5, 1.2rem);
+  --uds-page-header-padding-horizontal: var(--spacing-padding-9);
+  --uds-page-header-padding-vertical: var(--spacing-padding-5);
   --uds-page-header-background: var(--uds-page-frame-background);
-  --uds-page-header-item-gap: var(--spacing-padding-5, 1.2rem);
+  --uds-page-header-item-gap: var(--spacing-padding-5);
   --uds-page-nav-width: 7.2rem;
+  --uds-page-nav-body-padding-vertical: var(--spacing-padding-9);
+  --uds-page-nav-body-padding-vertical: 0px;
   --uds-page-nav-border: var(--color-border-standard-cool-gray);
   --uds-page-nav-background: var(--uds-page-frame-background);
-  --uds-page-nav-logo-height: var(--uds-page-header-height, 7.2rem);
+  --uds-page-nav-logo-height: var(--uds-page-header-height);
   --uds-page-nav-list-padding-horizontal: 0rem;
-  --uds-page-nav-list-padding-vertical: var(--spacing-padding-9, 2.4rem);
-  --uds-page-nav-item-height: var(--theme-size-medium-2, 4.8rem);
-  --uds-page-nav-item-gap: var(--spacing-gap-6, 1.6rem);
+  --uds-page-nav-list-padding-vertical: 0rem;
+  --uds-page-nav-item-height: var(--theme-size-medium-2);
+  --uds-page-nav-item-gap: var(--spacing-gap-6);
   --uds-page-nav-item-color-default: var(--color-label-standard);
   --uds-page-nav-item-color-active: var(--color-primary-default);
-  --uds-page-nav-icon-size: var(--theme-size-small-2, 2.4rem);
+  --uds-page-nav-icon-size: var(--theme-size-small-2);
   --uds-page-body-background: var(--uds-page-frame-background);
-  --uds-page-body-padding-horizontal: var(--spacing-padding-9, 2.8rem);
-  --uds-page-body-padding-vertical: var(--spacing-padding-9, 2.8rem);
+  --uds-page-body-padding-horizontal: var(--spacing-padding-9);
+  --uds-page-body-padding-vertical: var(--spacing-padding-9);
   --frame-device-height: 812px;
   --frame-device-width: 480px;
   --frame-safe-area-top: env(safe-area-inset-top, 0px);
@@ -209,6 +211,7 @@
 
 .page-frame-nav {
   width: var(--uds-page-nav-width);
+  height: 100%;
   border-right: 1px solid var(--uds-page-nav-border);
   background-color: var(--uds-page-nav-background);
   position: relative;
@@ -229,6 +232,15 @@
   font-size: 0;
 }
 
+.page-frame-nav-body {
+  width: 100%;
+  height: calc(100% - var(--uds-page-nav-logo-height));
+  padding: var(--uds-page-nav-body-padding-vertical) var(--uds-page-nav-body-padding-horizontal);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
 .page-frame-nav-list {
   width: 100%;
   padding: var(--uds-page-nav-list-padding-vertical) var(--uds-page-nav-list-padding-horizontal);
@@ -1806,3 +1818,7 @@
   bottom: var(--service-inquiry-button-pos-bottom);
   z-index: 700;
 }
+
+.page-frame-inquiry-button {
+  margin-top: auto;
+}

package/package.json

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

package/src/page-frame/desktop/components/nav/Container.tsx

@@ -39,34 +39,36 @@ export default function PageNavContainer({
   return (
     <nav className="page-frame-nav">
       {logo && <PageNavLogo {...logo} />}
-      <ul className="page-frame-nav-list">
-        {formatRoutes(sitemap).map(
-          ({ routeKey, icon, name, path, depth, navDepthDisabled }) => (
-            <li
-              key={routeKey}
-              className={clsx("page-frame-nav-item", {
-                "is-selected": isSelected(path),
-              })}
-            >
-              <PageNavButton icon={icon} menuName={name} path={path} />
-              {!navDepthDisabled && depth.length > 0 && (
-                <div className="page-frame-nav-depth">
-                  {formatRoutes(depth).map(({ routeKey, path, name }) => (
-                    <Link
-                      key={routeKey}
-                      href={path}
-                      className="page-frame-nav-depth-item"
-                    >
-                      <span>{name}</span>
-                    </Link>
-                  ))}
-                </div>
-              )}
-            </li>
-          ),
-        )}
-      </ul>
-      {children}
+      <div className="page-frame-nav-body">
+        <ul className="page-frame-nav-list">
+          {formatRoutes(sitemap).map(
+            ({ routeKey, icon, name, path, depth, navDepthDisabled }) => (
+              <li
+                key={routeKey}
+                className={clsx("page-frame-nav-item", {
+                  "is-selected": isSelected(path),
+                })}
+              >
+                <PageNavButton icon={icon} menuName={name} path={path} />
+                {!navDepthDisabled && depth.length > 0 && (
+                  <div className="page-frame-nav-depth">
+                    {formatRoutes(depth).map(({ routeKey, path, name }) => (
+                      <Link
+                        key={routeKey}
+                        href={path}
+                        className="page-frame-nav-depth-item"
+                      >
+                        <span>{name}</span>
+                      </Link>
+                    ))}
+                  </div>
+                )}
+              </li>
+            ),
+          )}
+        </ul>
+        {children}
+      </div>
     </nav>
   );
 }

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

@@ -1,5 +1,6 @@
 .page-frame-nav {
   width: var(--uds-page-nav-width);
+  height: 100%;
   border-right: 1px solid var(--uds-page-nav-border);
   background-color: var(--uds-page-nav-background);
 
@@ -22,6 +23,17 @@
   }
 }
 
+.page-frame-nav-body {
+  width: 100%;
+  height: calc(100% - var(--uds-page-nav-logo-height));
+  padding: var(--uds-page-nav-body-padding-vertical)
+    var(--uds-page-nav-body-padding-horizontal);
+
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
 .page-frame-nav-list {
   width: 100%;
   padding: var(--uds-page-nav-list-padding-vertical)

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

@@ -3,26 +3,28 @@
 
   --uds-page-header-height: 7.2rem;
   --uds-page-header-border: var(--color-border-standard-cool-gray);
-  --uds-page-header-padding-horizontal: var(--spacing-padding-9, 2.8rem);
-  --uds-page-header-padding-vertical: var(--spacing-padding-5, 1.2rem);
+  --uds-page-header-padding-horizontal: var(--spacing-padding-9);
+  --uds-page-header-padding-vertical: var(--spacing-padding-5);
   --uds-page-header-background: var(--uds-page-frame-background);
-  --uds-page-header-item-gap: var(--spacing-padding-5, 1.2rem);
+  --uds-page-header-item-gap: var(--spacing-padding-5);
 
   --uds-page-nav-width: 7.2rem;
+  --uds-page-nav-body-padding-vertical: var(--spacing-padding-9);
+  --uds-page-nav-body-padding-vertical: 0px;
   --uds-page-nav-border: var(--color-border-standard-cool-gray);
   --uds-page-nav-background: var(--uds-page-frame-background);
 
-  --uds-page-nav-logo-height: var(--uds-page-header-height, 7.2rem);
+  --uds-page-nav-logo-height: var(--uds-page-header-height);
 
   --uds-page-nav-list-padding-horizontal: 0rem;
-  --uds-page-nav-list-padding-vertical: var(--spacing-padding-9, 2.4rem);
-  --uds-page-nav-item-height: var(--theme-size-medium-2, 4.8rem);
-  --uds-page-nav-item-gap: var(--spacing-gap-6, 1.6rem);
+  --uds-page-nav-list-padding-vertical: 0rem;
+  --uds-page-nav-item-height: var(--theme-size-medium-2);
+  --uds-page-nav-item-gap: var(--spacing-gap-6);
   --uds-page-nav-item-color-default: var(--color-label-standard);
   --uds-page-nav-item-color-active: var(--color-primary-default);
-  --uds-page-nav-icon-size: var(--theme-size-small-2, 2.4rem);
+  --uds-page-nav-icon-size: var(--theme-size-small-2);
 
   --uds-page-body-background: var(--uds-page-frame-background);
-  --uds-page-body-padding-horizontal: var(--spacing-padding-9, 2.8rem);
-  --uds-page-body-padding-vertical: var(--spacing-padding-9, 2.8rem);
+  --uds-page-body-padding-horizontal: var(--spacing-padding-9);
+  --uds-page-body-padding-vertical: var(--spacing-padding-9);
 }

package/src/service-inquiry/components/NavButton.tsx

@@ -34,22 +34,20 @@ export default function ServiceInquiryNavButton({
   });
 
   return (
-    <div className="page-frame-nav-item">
-      <button
-        type="button"
-        className={clsx(
-          "page-frame-nav-category",
-          "page-frame-inquiry-button",
-          className,
-        )}
-        // 변경 설명: page-frame children에 바로 주입해도 nav hover/spacing 규칙을 유지하도록 기존 nav class를 그대로 재사용한다.
-        onClick={openServiceInquiry}
-      >
-        <span className="page-frame-nav-category-icon">
-          <Icon width={24} height={24} viewBox="0 0 24 24" />
-        </span>
-        <span className="page-frame-nav-category-label">{label}</span>
-      </button>
-    </div>
+    <button
+      type="button"
+      className={clsx(
+        "page-frame-nav-category",
+        "page-frame-inquiry-button",
+        className,
+      )}
+      // 변경 설명: page-frame children에 바로 주입해도 nav hover/spacing 규칙을 유지하도록 기존 nav class를 그대로 재사용한다.
+      onClick={openServiceInquiry}
+    >
+      <span className="page-frame-nav-category-icon">
+        <Icon width={24} height={24} viewBox="0 0 24 24" />
+      </span>
+      <span className="page-frame-nav-category-label">{label}</span>
+    </button>
   );
 }

package/src/service-inquiry/styles/open-button.scss

@@ -9,3 +9,7 @@
   bottom: var(--service-inquiry-button-pos-bottom);
   z-index: 700;
 }
+
+.page-frame-inquiry-button {
+  margin-top: auto;
+}