@nurihaus/web-design-system 3.1.1 → 3.2.0

package/dist/ai/components.md

@@ -62,6 +62,10 @@ import '@nurihaus/web-design-system/components.css';
 - [Spinner](#spinner)
 - [InlineLoading](#inlineloading)
 - [OverlayLoading](#overlayloading)
+- [Icon](#icon)
+- [BottomNav](#bottomnav)
+- [StepProgress](#stepprogress)
+- [ChipGroup](#chipgroup)
 
 ## Avatar
 
@@ -706,7 +710,7 @@ import { DropDown } from '@nurihaus/web-design-system';             // 루트.
 | `rightIcon` | `ReactNode` |  |  |
 | `width` | `string \| number` |  | `'fit-content'` |
 | `side` | `'bottom' \| 'left' \| 'right' \| 'top'` |  |  |
-| `align` | `'center' \| 'start' \| 'end'` |  |  |
+| `align` | `'center' \| 'end' \| 'start'` |  |  |
 | `position` | `'popper' \| 'item-aligned'` |  |  |
 | `className` | `string` |  |  |
 | `style` | `CSSProperties` |  |  |
@@ -1024,6 +1028,167 @@ import { OverlayLoading } from '@nurihaus/web-design-system';             // 루
 
 이 밖에 React·HTML 기본 속성 2개를 받는다.
 
+## Icon
+
+```ts
+import { Icon } from '@nurihaus/web-design-system/icon';   // 이 컴포넌트만 싣는다 (권장)
+import { Icon } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 화면에 아이콘을 그릴 때 쓴다. 모양은 Phosphor(MIT) 에서 고른 것만 있고, `name` 으로 고른다. 색은 글자색(`currentColor`)을 따르므로 감싼 요소의 `color` 로 바꾼다. 꺼진 상태는 선(`weight="regular"`, 기본), 켜진 상태나 강조는 채움(`weight="fill"`)을 쓴다. 크기는 `s`(18) · `m`(20) · `l`(24, 기본). `className`·`style` 은 `<svg>` 에 붙는다.
+
+글자 없이 아이콘만으로 뜻을 전하면(닫기 버튼 등) `label` 을 준다. 없으면 화면 낭독기가 건너뛴다.
+
+**쓰지 않는다.** 없는 모양을 다른 라이브러리나 손으로 그린 SVG 로 채우지 않는다. 이 저장소의 `scripts/build-icons.mjs` 에 이름을 더하고 `yarn icons` 를 돌린다. 브랜드 로고(SNS 제외)·일러스트는 아이콘이 아니다.
+
+```tsx
+<button type="button" aria-label="알림">
+  <Icon name="bell" />
+</button>
+```
+
+```tsx
+<Icon name="house" weight="fill" size="l" />
+```
+
+```tsx
+<Icon name="x" size="m" label="닫기" />
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `size` | `'s' \| 'm' \| 'l'` |  | `'l'` |
+| `label` | `string` |  |  |
+| `name` | `'link' \| 'image' \| 'x' \| 'warning' \| 'house' \| 'megaphone-simple' \| 'chats-circle' \| 'user-circle' \| 'bell' \| 'caret-left' \| 'magnifying-glass' \| 'dots-three' \| 'gear-six' \| 'chat-circle' \| 'paper-plane-tilt' \| 'plus' \| 'camera' \| 'video-camera' \| 'upload-simple' \| 'calendar-blank' \| 'clock' \| 'map-pin' \| 'truck' \| 'ticket' \| 'qr-code' \| 'sparkle' \| 'gift' \| 'wallet' \| 'bank' \| 'credit-card' \| 'check-circle' \| 'check' \| 'info' \| 'question' \| 'lock' \| 'pencil-simple' \| 'trash' \| 'copy' \| 'share-network' \| 'eye' \| 'sliders-horizontal' \| 'heart' \| 'star' \| 'globe' \| 'sign-out' \| 'caret-right' \| 'arrow-right' \| 'instagram-logo' \| 'tiktok-logo' \| 'youtube-logo'` | 예 |  |
+| `weight` | `'fill' \| 'regular'` |  |  |
+
+이 밖에 React·HTML 기본 속성 474개를 받는다.
+
+## BottomNav
+
+```ts
+import { BottomNav } from '@nurihaus/web-design-system/bottom-nav';   // 이 컴포넌트만 싣는다 (권장)
+import { BottomNav } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 휴대폰 화면 아래에 떠 있는 주 메뉴(탭 바)다. 탭은 3~5개, 탭마다 `href` 로 화면을 바꾼다. 지금 화면의 탭 id 를 `value` 로 넘기면 그 탭에 캡슐이 깔리고 아이콘이 채움으로 바뀐다(`aria-current="page"`). 탭 바가 스스로 `value` 를 바꾸지 않는다 — 주소가 바뀌면 쓰는 쪽이 새 `value` 를 넘긴다. `label` 은 `<nav>` 의 이름이다.
+
+화면 아래에 고정(`position: fixed`)되고 내용 위에 떠 있다. 화면 본문은 아래를 `calc(var(--bottom-nav-space) + env(safe-area-inset-bottom))` 만큼 비워 마지막 내용이 가려지지 않게 한다. `className`·`style` 은 `<nav>` 에 붙는다.
+
+링크는 기본으로 `<a>` 다. 라우터의 링크로 바꾸려면 `linkComponent` 에 넘긴다. 받는 props 는 `href`·`className`·`children`·`aria-current` 이고, 그대로 링크에 전달하면 된다.
+
+배지는 `badge` 로 단다. `count` 가 없으면 점, 있으면 숫자(99 넘으면 99+)다. `label` 은 화면 낭독기가 읽는 말이다.
+
+**쓰지 않는다.** 같은 화면 안에서 패널을 바꾸는 것은 Tabs, 목록을 거르는 것은 ChipGroup 을 쓴다. 앱 웹뷰처럼 앱이 탭 바를 직접 그리는 곳에서는 그리지 않는다. 데스크톱 사이드바는 CollapsibleMenu 를 쓴다.
+
+Next.js 에서는 `next/link` 의 `Link` 를 그대로 넘긴다.
+
+```ts
+import Link from 'next/link';
+
+// <BottomNav linkComponent={Link} … />
+```
+
+```tsx
+<BottomNav
+  label="주 메뉴"
+  value="home"
+  items={[
+    { id: 'home', label: '홈', icon: 'house', href: '/', badge: { label: '새 소식' } },
+    { id: 'campaigns', label: '캠페인', icon: 'megaphone-simple', href: '/campaigns' },
+    { id: 'community', label: '커뮤니티', icon: 'chats-circle', href: '/community' },
+    { id: 'me', label: '내 정보', icon: 'user-circle', href: '/me', badge: { count: 3, label: '알림 3개' } },
+  ]}
+/>
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `items` | `BottomNavItem[]` | 예 |  |
+| `value` | `string` |  |  |
+| `label` | `string` | 예 |  |
+| `linkComponent` | `ComponentType<BottomNavLinkProps>` |  |  |
+| `className` | `string` |  |  |
+| `style` | `CSSProperties` |  |  |
+
+이 밖에 React·HTML 기본 속성 2개를 받는다.
+
+## StepProgress
+
+```ts
+import { StepProgress } from '@nurihaus/web-design-system/step-progress';   // 이 컴포넌트만 싣는다 (권장)
+import { StepProgress } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 정해진 단계를 차례로 밟는 일에서 "지금 어디까지 왔나"를 막대로 보여 준다(캠페인 진행: 가이드 → 제품 → 결과 제출 → 승인 → 보상). 단계마다 막대 하나가 끝남·지금·남음으로 칠해진다. `current` 는 지금 단계 순번(0부터)이고, `steps.length` 를 넘기면 모두 끝난 것이다. `labelVisibility="current"` 면 지금 단계 이름만 보인다(카드 안처럼 좁을 때). 다른 이름은 화면 낭독기가 읽는다. `label` 은 목록의 이름이다. `className`·`style` 은 `<ol>` 에 붙는다.
+
+**쓰지 않는다.** 단계를 눌러 이동하지 않는다(버튼이 없다). 다음 행동 버튼은 이 컴포넌트 밖, 카드에 둔다. 로딩 진행률(%)에는 쓰지 않는다.
+
+```tsx
+<StepProgress
+  label="진행 단계"
+  steps={['가이드', '제품', '결과 제출', '승인', '보상']}
+  current={2}
+  labelVisibility="current"
+/>
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `steps` | `ReactNode[]` | 예 |  |
+| `current` | `number` | 예 |  |
+| `labelVisibility` | `'all' \| 'current'` |  | `'all'` |
+| `label` | `string` | 예 |  |
+| `className` | `string` |  |  |
+| `style` | `CSSProperties` |  |  |
+
+이 밖에 React·HTML 기본 속성 2개를 받는다.
+
+## ChipGroup
+
+```ts
+import { ChipGroup } from '@nurihaus/web-design-system/chip-group';   // 이 컴포넌트만 싣는다 (권장)
+import { ChipGroup } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 목록 위에서 하나를 골라 목록을 거르는 필터다. 고르면 바로 `onValueChange` 가 불리고 적용 버튼은 없다. 늘 하나가 골라져 있고 고른 칩을 다시 눌러도 풀리지 않는다. `value`·`defaultValue` 가 없으면 첫 칩을 고른다. 넘치면 가로로 밀어서 본다. `count` 를 주면 라벨 옆에 개수가 붙는다. 0 인 칩은 `disabled` 로 막을 수 있다. 좌우 화살표 키로 칩 사이를 옮긴다. `label` 은 그룹의 이름이다. `className`·`style` 은 그룹(`role="group"`)에 붙는다.
+
+**쓰지 않는다.** 같은 화면 안에서 패널 내용을 바꾸는 것은 Tabs, 폼에서 값 하나를 고르는 입력은 Radio, 화면을 옮기는 메뉴는 BottomNav 를 쓴다. 여러 개를 함께 고르는 필터는 아직 없다.
+
+```tsx
+<ChipGroup
+  label="캠페인 종류"
+  defaultValue="all"
+  onValueChange={(id) => console.log(id)}
+  items={[
+    { id: 'all', label: '전체' },
+    { id: 'product', label: '제품 리뷰', count: 12 },
+    { id: 'visit', label: '방문', count: 3 },
+    { id: 'event', label: '이벤트', count: 0, disabled: true },
+  ]}
+/>
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `items` | `ChipGroupItem[]` | 예 |  |
+| `value` | `string` |  |  |
+| `defaultValue` | `string` |  |  |
+| `onValueChange` | `((id: string) => void)` |  |  |
+| `label` | `string` | 예 |  |
+| `className` | `string` |  |  |
+| `style` | `CSSProperties` |  |  |
+
+이 밖에 React·HTML 기본 속성 2개를 받는다.
+
 ## 아직 없는 것
 
 아래는 디자인 시스템에 없다. 비슷한 이름의 컴포넌트를 지어내 import 하지 않는다.
@@ -1031,6 +1196,5 @@ import { OverlayLoading } from '@nurihaus/web-design-system';             // 루
 | 필요한 것 | 지금 있는 것 |
 | --- | --- |
 | 날짜 선택 | 없음 |
-| 아이콘 세트 | 없음. 패키지 안 아이콘은 컴포넌트 내부용이라 내보내지 않는다 |
 
 없는 것이 필요하면 쓰는 쪽 저장소에서 `tokens.md` 의 변수로 만든다. 그리고 디자인 시스템에 추가할 후보라고 알린다.

package/dist/ai/tokens.md

@@ -40,12 +40,30 @@
 | `--button-variant-outlined-background` | `var(--color-white)` | `var(--color-white)` |
 | `--button-variant-outlined-border` | `var(--color-accent-red-700)` | `var(--color-accent-red-700)` |
 | `--button-variant-outlined-text` | `var(--color-accent-red-700)` | `var(--color-accent-red-700)` |
-| `--button-size-xl` | `[object Object]` | `60` |
-| `--button-size-lg` | `[object Object]` | — |
-| `--button-size-md` | `[object Object]` | — |
-| `--button-size-rg` | `[object Object]` | — |
-| `--button-size-sm` | `[object Object]` | — |
-| `--button-size-xs` | `[object Object]` | `30` |
+| `--button-size-xl-font-family` | `var(--font-family-primary)` | — |
+| `--button-size-xl-font-weight` | `var(--font-weight-bold)` | — |
+| `--button-size-xl-font-size` | `var(--font-size-lg)` | — |
+| `--button-size-xl-line-height` | `var(--line-height-lg)` | — |
+| `--button-size-lg-font-family` | `var(--font-family-primary)` | — |
+| `--button-size-lg-font-weight` | `var(--font-weight-bold)` | — |
+| `--button-size-lg-font-size` | `var(--font-size-base)` | — |
+| `--button-size-lg-line-height` | `var(--line-height-base)` | — |
+| `--button-size-md-font-family` | `var(--font-family-primary)` | — |
+| `--button-size-md-font-weight` | `var(--font-weight-semibold)` | — |
+| `--button-size-md-font-size` | `var(--font-size-sm)` | — |
+| `--button-size-md-line-height` | `var(--line-height-sm)` | — |
+| `--button-size-rg-font-family` | `var(--font-family-primary)` | — |
+| `--button-size-rg-font-weight` | `var(--font-weight-semibold)` | — |
+| `--button-size-rg-font-size` | `var(--font-size-sm)` | — |
+| `--button-size-rg-line-height` | `var(--line-height-sm)` | — |
+| `--button-size-sm-font-family` | `var(--font-family-primary)` | — |
+| `--button-size-sm-font-weight` | `var(--font-weight-semibold)` | — |
+| `--button-size-sm-font-size` | `var(--font-size-xsm)` | — |
+| `--button-size-sm-line-height` | `var(--line-height-sm)` | — |
+| `--button-size-xs-font-family` | `var(--font-family-primary)` | — |
+| `--button-size-xs-font-weight` | `var(--font-weight-semibold)` | — |
+| `--button-size-xs-font-size` | `var(--font-size-xsm)` | — |
+| `--button-size-xs-line-height` | `var(--line-height-sm)` | — |
 | `--button-variant-primary-hover-background` | — | `var(--color-purple-900)` |
 | `--button-variant-primary-hover-border` | — | `var(--color-purple-900)` |
 | `--button-variant-primary-hover-text` | — | `var(--color-white)` |
@@ -64,16 +82,36 @@
 | `--button-variant-confirm-hover-background` | — | `var(--color-accent-red-700)` |
 | `--button-variant-confirm-hover-border` | — | `var(--color-accent-red-700)` |
 | `--button-variant-confirm-hover-text` | — | `var(--color-white)` |
-| `--button-xl` | — | `[object Object]` |
-| `--button-l` | — | `[object Object]` |
-| `--button-sb` | — | `[object Object]` |
-| `--button-r` | — | `[object Object]` |
-| `--button-s` | — | `[object Object]` |
-| `--button-xs` | — | `[object Object]` |
+| `--button-xl-font-family` | — | `var(--font-family-primary)` |
+| `--button-xl-font-weight` | — | `var(--font-weight-bold)` |
+| `--button-xl-font-size` | — | `var(--font-size-lg)` |
+| `--button-xl-line-height` | — | `var(--line-height-lg)` |
+| `--button-l-font-family` | — | `var(--font-family-primary)` |
+| `--button-l-font-weight` | — | `var(--font-weight-bold)` |
+| `--button-l-font-size` | — | `var(--font-size-base)` |
+| `--button-l-line-height` | — | `var(--line-height-base)` |
+| `--button-sb-font-family` | — | `var(--font-family-primary)` |
+| `--button-sb-font-weight` | — | `var(--font-weight-semibold)` |
+| `--button-sb-font-size` | — | `var(--font-size-sm)` |
+| `--button-sb-line-height` | — | `var(--line-height-sm)` |
+| `--button-r-font-family` | — | `var(--font-family-primary)` |
+| `--button-r-font-weight` | — | `var(--font-weight-semibold)` |
+| `--button-r-font-size` | — | `var(--font-size-sm)` |
+| `--button-r-line-height` | — | `var(--line-height-sm)` |
+| `--button-s-font-family` | — | `var(--font-family-primary)` |
+| `--button-s-font-weight` | — | `var(--font-weight-semibold)` |
+| `--button-s-font-size` | — | `var(--font-size-xsm)` |
+| `--button-s-line-height` | — | `var(--line-height-sm)` |
+| `--button-xs-font-family` | — | `var(--font-family-primary)` |
+| `--button-xs-font-weight` | — | `var(--font-weight-semibold)` |
+| `--button-xs-font-size` | — | `var(--font-size-xsm)` |
+| `--button-xs-line-height` | — | `var(--line-height-sm)` |
+| `--button-size-xs` | — | `30` |
 | `--button-size-s` | — | `40` |
 | `--button-size-r` | — | `48` |
 | `--button-size-m` | — | `50` |
 | `--button-size-l` | — | `54` |
+| `--button-size-xl` | — | `60` |
 
 `—` 는 그 테마에 값이 없다는 뜻이다. 그 테마에서는 `app` 값이 쓰인다.
 
@@ -309,6 +347,14 @@
 | `--modal-width-s` | `400px` | 폭 |
 | `--modal-width-m` | `450px` | 폭 |
 | `--modal-width-l` | `500px` | 폭 |
+| `--bottom-nav-height` | `62px` | 폭 |
+| `--bottom-nav-padding` | `5px` | 폭 |
+| `--bottom-nav-offset` | `14px` | 폭 |
+| `--bottom-nav-space` | `calc(var(--bottom-nav-height) + var(--bottom-nav-offset) + 16px)` | 폭 |
+| `--bottom-nav-badge-dot` | `8px` | 폭 |
+| `--bottom-nav-badge-count` | `18px` | 폭 |
+| `--glass-blur` | `18px` | 폭 |
+| `--step-bar-height` | `4px` | 진행 단계 바 |
 | `--icon-size-s` | `18px` | 그 밖의 치수 |
 | `--icon-size-m` | `20px` | 그 밖의 치수 |
 | `--icon-size-l` | `24px` | 그 밖의 치수 |
@@ -327,6 +373,7 @@
 | `--skeleton-last-line-width` | `60%` | 그 밖의 치수 |
 | `--hairline` | `1px` | 그 밖의 치수 |
 | `--shadow-popover` | `0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)` | 그림자 |
+| `--shadow-floating` | `0px 10px 30px rgba(24, 24, 27, 0.14), 0px 1px 3px rgba(24, 24, 27, 0.08)` | 그림자 |
 | `--z-base` | `0` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
 | `--z-raised` | `1` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
 | `--z-sticky` | `2` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
@@ -339,6 +386,8 @@
 | `--motion-fast` | `160ms` | 모션 |
 | `--motion-base` | `300ms` | 모션 |
 | `--motion-ease` | `ease` | 모션 |
-| `--spinner-duration` | `1.2s` | 모션 |
-| `--skeleton-duration` | `1.5s` | 모션 |
-| `--spinner-ease` | `cubic-bezier(0.5, 0, 0.5, 1)` | 모션 |
+| `--motion-slow` | `420ms` | 모션 |
+| `--motion-spring` | `cubic-bezier(0.34, 1.45, 0.5, 1)` | 끝에서 살짝 넘쳤다 돌아온다. 탭 바 선택 캡슐 |
+| `--spinner-duration` | `1.2s` | 끝에서 살짝 넘쳤다 돌아온다. 탭 바 선택 캡슐 |
+| `--skeleton-duration` | `1.5s` | 끝에서 살짝 넘쳤다 돌아온다. 탭 바 선택 캡슐 |
+| `--spinner-ease` | `cubic-bezier(0.5, 0, 0.5, 1)` | 끝에서 살짝 넘쳤다 돌아온다. 탭 바 선택 캡슐 |