@uniai-fe/uds-templates 0.4.12 → 0.4.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/styles.css +16 -1
  2. package/package.json +1 -1
  3. package/src/page-frame/desktop/components/nav/Container.tsx +30 -28
  4. package/src/page-frame/desktop/styles/page/nav.scss +11 -0
  5. package/src/page-frame/desktop/styles/variables.scss +2 -1
  6. package/src/service-inquiry/components/NavButton.tsx +15 -17
  7. package/src/service-inquiry/styles/open-button.scss +4 -0
package/dist/styles.css CHANGED
@@ -8,11 +8,12 @@
8
8
  --uds-page-header-background: var(--uds-page-frame-background);
9
9
  --uds-page-header-item-gap: var(--spacing-padding-5, 1.2rem);
10
10
  --uds-page-nav-width: 7.2rem;
11
+ --uds-page-nav-body-padding-vertical: var(--spacing-padding-9);
11
12
  --uds-page-nav-border: var(--color-border-standard-cool-gray);
12
13
  --uds-page-nav-background: var(--uds-page-frame-background);
13
14
  --uds-page-nav-logo-height: var(--uds-page-header-height, 7.2rem);
14
15
  --uds-page-nav-list-padding-horizontal: 0rem;
15
- --uds-page-nav-list-padding-vertical: var(--spacing-padding-9, 2.4rem);
16
+ --uds-page-nav-list-padding-vertical: 0rem;
16
17
  --uds-page-nav-item-height: var(--theme-size-medium-2, 4.8rem);
17
18
  --uds-page-nav-item-gap: var(--spacing-gap-6, 1.6rem);
18
19
  --uds-page-nav-item-color-default: var(--color-label-standard);
@@ -209,6 +210,7 @@
209
210
 
210
211
  .page-frame-nav {
211
212
  width: var(--uds-page-nav-width);
213
+ height: 100%;
212
214
  border-right: 1px solid var(--uds-page-nav-border);
213
215
  background-color: var(--uds-page-nav-background);
214
216
  position: relative;
@@ -229,6 +231,15 @@
229
231
  font-size: 0;
230
232
  }
231
233
 
234
+ .page-frame-nav-body {
235
+ width: 100%;
236
+ height: calc(100% - var(--uds-page-nav-logo-height));
237
+ padding: var(--uds-page-nav-body-padding-vertical);
238
+ display: flex;
239
+ flex-direction: column;
240
+ overflow: auto;
241
+ }
242
+
232
243
  .page-frame-nav-list {
233
244
  width: 100%;
234
245
  padding: var(--uds-page-nav-list-padding-vertical) var(--uds-page-nav-list-padding-horizontal);
@@ -1806,3 +1817,7 @@
1806
1817
  bottom: var(--service-inquiry-button-pos-bottom);
1807
1818
  z-index: 700;
1808
1819
  }
1820
+
1821
+ .page-frame-inquiry-button {
1822
+ margin-top: auto;
1823
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/uds-templates",
3
- "version": "0.4.12",
3
+ "version": "0.4.13",
4
4
  "description": "UNIAI Design System; UI Templates Package",
5
5
  "type": "module",
6
6
  "private": false,
package/src/page-frame/desktop/components/nav/Container.tsx CHANGED
@@ -39,34 +39,36 @@ export default function PageNavContainer({
39
39
  return (
40
40
  <nav className="page-frame-nav">
41
41
  {logo && <PageNavLogo {...logo} />}
42
- <ul className="page-frame-nav-list">
43
- {formatRoutes(sitemap).map(
44
- ({ routeKey, icon, name, path, depth, navDepthDisabled }) => (
45
- <li
46
- key={routeKey}
47
- className={clsx("page-frame-nav-item", {
48
- "is-selected": isSelected(path),
49
- })}
50
- >
51
- <PageNavButton icon={icon} menuName={name} path={path} />
52
- {!navDepthDisabled && depth.length > 0 && (
53
- <div className="page-frame-nav-depth">
54
- {formatRoutes(depth).map(({ routeKey, path, name }) => (
55
- <Link
56
- key={routeKey}
57
- href={path}
58
- className="page-frame-nav-depth-item"
59
- >
60
- <span>{name}</span>
61
- </Link>
62
- ))}
63
- </div>
64
- )}
65
- </li>
66
- ),
67
- )}
68
- </ul>
69
- {children}
42
+ <div className="page-frame-nav-body">
43
+ <ul className="page-frame-nav-list">
44
+ {formatRoutes(sitemap).map(
45
+ ({ routeKey, icon, name, path, depth, navDepthDisabled }) => (
46
+ <li
47
+ key={routeKey}
48
+ className={clsx("page-frame-nav-item", {
49
+ "is-selected": isSelected(path),
50
+ })}
51
+ >
52
+ <PageNavButton icon={icon} menuName={name} path={path} />
53
+ {!navDepthDisabled && depth.length > 0 && (
54
+ <div className="page-frame-nav-depth">
55
+ {formatRoutes(depth).map(({ routeKey, path, name }) => (
56
+ <Link
57
+ key={routeKey}
58
+ href={path}
59
+ className="page-frame-nav-depth-item"
60
+ >
61
+ <span>{name}</span>
62
+ </Link>
63
+ ))}
64
+ </div>
65
+ )}
66
+ </li>
67
+ ),
68
+ )}
69
+ </ul>
70
+ {children}
71
+ </div>
70
72
  </nav>
71
73
  );
72
74
  }
package/src/page-frame/desktop/styles/page/nav.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  .page-frame-nav {
2
2
  width: var(--uds-page-nav-width);
3
+ height: 100%;
3
4
  border-right: 1px solid var(--uds-page-nav-border);
4
5
  background-color: var(--uds-page-nav-background);
5
6
 
@@ -22,6 +23,16 @@
22
23
  }
23
24
  }
24
25
 
26
+ .page-frame-nav-body {
27
+ width: 100%;
28
+ height: calc(100% - var(--uds-page-nav-logo-height));
29
+ padding: var(--uds-page-nav-body-padding-vertical);
30
+
31
+ display: flex;
32
+ flex-direction: column;
33
+ overflow: auto;
34
+ }
35
+
25
36
  .page-frame-nav-list {
26
37
  width: 100%;
27
38
  padding: var(--uds-page-nav-list-padding-vertical)
package/src/page-frame/desktop/styles/variables.scss CHANGED
@@ -9,13 +9,14 @@
9
9
  --uds-page-header-item-gap: var(--spacing-padding-5, 1.2rem);
10
10
 
11
11
  --uds-page-nav-width: 7.2rem;
12
+ --uds-page-nav-body-padding-vertical: var(--spacing-padding-9);
12
13
  --uds-page-nav-border: var(--color-border-standard-cool-gray);
13
14
  --uds-page-nav-background: var(--uds-page-frame-background);
14
15
 
15
16
  --uds-page-nav-logo-height: var(--uds-page-header-height, 7.2rem);
16
17
 
17
18
  --uds-page-nav-list-padding-horizontal: 0rem;
18
- --uds-page-nav-list-padding-vertical: var(--spacing-padding-9, 2.4rem);
19
+ --uds-page-nav-list-padding-vertical: 0rem;
19
20
  --uds-page-nav-item-height: var(--theme-size-medium-2, 4.8rem);
20
21
  --uds-page-nav-item-gap: var(--spacing-gap-6, 1.6rem);
21
22
  --uds-page-nav-item-color-default: var(--color-label-standard);
package/src/service-inquiry/components/NavButton.tsx CHANGED
@@ -34,22 +34,20 @@ export default function ServiceInquiryNavButton({
34
34
  });
35
35
 
36
36
  return (
37
- <div className="page-frame-nav-item">
38
- <button
39
- type="button"
40
- className={clsx(
41
- "page-frame-nav-category",
42
- "page-frame-inquiry-button",
43
- className,
44
- )}
45
- // 변경 설명: page-frame children에 바로 주입해도 nav hover/spacing 규칙을 유지하도록 기존 nav class를 그대로 재사용한다.
46
- onClick={openServiceInquiry}
47
- >
48
- <span className="page-frame-nav-category-icon">
49
- <Icon width={24} height={24} viewBox="0 0 24 24" />
50
- </span>
51
- <span className="page-frame-nav-category-label">{label}</span>
52
- </button>
53
- </div>
37
+ <button
38
+ type="button"
39
+ className={clsx(
40
+ "page-frame-nav-category",
41
+ "page-frame-inquiry-button",
42
+ className,
43
+ )}
44
+ // 변경 설명: page-frame children에 바로 주입해도 nav hover/spacing 규칙을 유지하도록 기존 nav class를 그대로 재사용한다.
45
+ onClick={openServiceInquiry}
46
+ >
47
+ <span className="page-frame-nav-category-icon">
48
+ <Icon width={24} height={24} viewBox="0 0 24 24" />
49
+ </span>
50
+ <span className="page-frame-nav-category-label">{label}</span>
51
+ </button>
54
52
  );
55
53
  }
package/src/service-inquiry/styles/open-button.scss CHANGED
@@ -9,3 +9,7 @@
9
9
  bottom: var(--service-inquiry-button-pos-bottom);
10
10
  z-index: 700;
11
11
  }
12
+
13
+ .page-frame-inquiry-button {
14
+ margin-top: auto;
15
+ }