@hjmds/design-contracts 1.21.0 → 1.23.0
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.
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/docs/authoring-tools.md +1 -1
- package/docs/collection-editing.md +3 -3
- package/docs/communication.md +1 -1
- package/docs/data-workflows.md +2 -2
- package/docs/generated/component-maturity.md +1 -1
- package/docs/generated/renderer-evidence.json +3 -3
- package/docs/generated/renderer-evidence.md +1 -1
- package/docs/generated/showcase-manifest.json +1 -1
- package/docs/media-transport.md +1 -1
- package/docs/screen-patterns.md +11 -4
- package/docs/social-compositions.md +1 -1
- package/docs/streaming-answer.md +1 -1
- package/docs/task-controls.md +1 -1
- package/docs/toggle-feedback.md +1 -1
- package/docs/transfer-task.md +1 -1
- package/docs/usage/README.md +13 -12
- package/docs/usage/SELECTION.md +36 -23
- package/docs/usage/STANDARD.md +5 -0
- package/docs/usage/components/button.md +1 -1
- package/docs/usage/components/chart.md +1 -1
- package/docs/usage/components/comment-thread-screen.md +4 -1
- package/docs/usage/components/composition-layout.md +92 -0
- package/docs/usage/components/data-table.md +4 -0
- package/docs/usage/components/screen-layout.md +1 -0
- package/docs/usage/components/search-screen.md +1 -0
- package/docs/usage/components/tabs.md +1 -1
- package/docs/usage/compositions/action-feedback.md +5 -3
- package/docs/usage/compositions/action-recovery-optimistic.md +4 -2
- package/docs/usage/compositions/action-recovery-save.md +4 -2
- package/docs/usage/compositions/action-recovery-undo.md +4 -2
- package/docs/usage/compositions/activity-status.md +3 -1
- package/docs/usage/compositions/adaptive-content.md +4 -2
- package/docs/usage/compositions/authoring-tools.md +3 -1
- package/docs/usage/compositions/collection-detail.md +3 -1
- package/docs/usage/compositions/collection-editing.md +4 -2
- package/docs/usage/compositions/command-records.md +3 -1
- package/docs/usage/compositions/common-message.md +3 -1
- package/docs/usage/compositions/common-notification.md +3 -1
- package/docs/usage/compositions/communication.md +3 -1
- package/docs/usage/compositions/compound-controls.md +4 -2
- package/docs/usage/compositions/content-transition-comparison.md +3 -1
- package/docs/usage/compositions/context-toolbar.md +4 -2
- package/docs/usage/compositions/data-layouts.md +4 -2
- package/docs/usage/compositions/data-workflows.md +4 -2
- package/docs/usage/compositions/date-entry.md +3 -1
- package/docs/usage/compositions/date-time-selection.md +3 -1
- package/docs/usage/compositions/design-profile-comparison.md +3 -1
- package/docs/usage/compositions/disclosure.md +6 -4
- package/docs/usage/compositions/document-resource.md +3 -1
- package/docs/usage/compositions/environment-matrix.md +3 -1
- package/docs/usage/compositions/expo-interactions.md +4 -2
- package/docs/usage/compositions/family-drawer.md +4 -2
- package/docs/usage/compositions/field-group.md +3 -1
- package/docs/usage/compositions/floating-action-button.md +3 -1
- package/docs/usage/compositions/illustrated-outcome.md +3 -1
- package/docs/usage/compositions/input-sheet.md +3 -1
- package/docs/usage/compositions/interaction-adapters.md +3 -1
- package/docs/usage/compositions/interaction-flow-apply.md +3 -1
- package/docs/usage/compositions/interaction-flow-draft.md +3 -1
- package/docs/usage/compositions/interaction-flow-search.md +3 -1
- package/docs/usage/compositions/live-list.md +3 -1
- package/docs/usage/compositions/media-transport.md +4 -2
- package/docs/usage/compositions/native-renderers.md +3 -1
- package/docs/usage/compositions/navigation-bar-collection.md +3 -1
- package/docs/usage/compositions/optional-adapters.md +3 -1
- package/docs/usage/compositions/optional-motion.md +3 -1
- package/docs/usage/compositions/origin-dialog.md +3 -1
- package/docs/usage/compositions/paper-surface.md +3 -1
- package/docs/usage/compositions/photo-source.md +3 -1
- package/docs/usage/compositions/purpose-input-comment.md +8 -2
- package/docs/usage/compositions/purpose-input-message.md +4 -2
- package/docs/usage/compositions/reference-first.md +3 -1
- package/docs/usage/compositions/reference-review.md +3 -1
- package/docs/usage/compositions/reference-settings.md +3 -1
- package/docs/usage/compositions/selection-motion.md +4 -2
- package/docs/usage/compositions/selection-scope.md +3 -1
- package/docs/usage/compositions/social-compositions.md +3 -1
- package/docs/usage/compositions/stea-event-ticket.md +3 -1
- package/docs/usage/compositions/stea-flip-card.md +4 -2
- package/docs/usage/compositions/stea-order-progress.md +5 -3
- package/docs/usage/compositions/stea-otp-verify.md +5 -3
- package/docs/usage/compositions/stea-pixel-empty.md +5 -3
- package/docs/usage/compositions/stea-schedule-card.md +5 -3
- package/docs/usage/compositions/stea-stat-summary.md +4 -2
- package/docs/usage/compositions/streaming-answer.md +3 -1
- package/docs/usage/compositions/task-controls.md +4 -2
- package/docs/usage/compositions/texture-comparison.md +3 -1
- package/docs/usage/compositions/time-selection.md +5 -3
- package/docs/usage/compositions/toast-layout.md +3 -1
- package/docs/usage/compositions/toggle-feedback.md +3 -1
- package/docs/usage/compositions/transfer-task.md +4 -2
- package/docs/usage/compositions/upload-recovery.md +4 -2
- package/docs/usage/compositions/video-dialog.md +3 -1
- package/docs/usage/compositions/visual-foundations.md +5 -3
- package/docs/usage/compositions/web-additions.md +6 -4
- package/docs/usage/compositions/web-navigation.md +4 -2
- package/docs/usage/screens/common-chat.md +3 -1
- package/docs/usage/screens/common-comments.md +6 -4
- package/docs/usage/screens/common-inbox.md +3 -1
- package/docs/usage/screens/common-login.md +3 -1
- package/docs/usage/screens/common-profile.md +3 -1
- package/docs/usage/screens/common-saved.md +3 -1
- package/docs/usage/screens/common-search.md +3 -1
- package/docs/usage/screens/common-settings.md +3 -1
- package/docs/usage/screens/common-shell.md +3 -1
- package/docs/usage/screens/dashboard.md +3 -1
- package/docs/usage/screens/discovery-gallery.md +3 -1
- package/docs/usage/screens/flow-collection.md +3 -1
- package/docs/usage/screens/flow-editor.md +3 -1
- package/docs/usage/screens/flow-media.md +3 -1
- package/docs/usage/screens/flow-moderation.md +3 -1
- package/docs/usage/screens/flow-onboarding.md +3 -1
- package/docs/usage/screens/flow-permission.md +3 -1
- package/docs/usage/screens/landing.md +4 -2
- package/docs/usage/screens/mockup-studio.md +3 -1
- package/docs/usage/screens/notification-settings.md +32 -138
- package/docs/usage/screens/product-bento.md +3 -1
- package/docs/usage/screens/reference-comparison.md +3 -1
- package/package.json +1 -1
|
@@ -142,7 +142,7 @@ import { Tabs } from "@hjmds/react-native/navigation";
|
|
|
142
142
|
- 외부 `TabPanel`을 쓸 때 Tabs에 `id`를 주지 않으면 Web은 생성 id를 써서 `tabsId`를 맞출 수 없다.
|
|
143
143
|
`id`를 명시하고 같은 값을 `TabPanel tabsId`에 넘긴다.
|
|
144
144
|
|
|
145
|
-
## 가로 페이저와 연속 밑줄 연결 (
|
|
145
|
+
## 가로 페이저와 연속 밑줄 연결 (npm 1.21.0)
|
|
146
146
|
|
|
147
147
|
실제 페이저의 소수 index를 `swipePosition`에 발행한다. 별도 state 갱신 없이 기존
|
|
148
148
|
측정된 탭 밑줄만 따라간다. 첫 항목은 0, 두 번째로 절반 이동하면 0.5다. 패널 선택은
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.14.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: 공개 API를 사용하는 `showcase/*/reference-adoption-previews.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/피드백과 복구/버튼 완료 피드백`
|
|
10
10
|
|
|
11
11
|
승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
|
|
12
12
|
|
|
13
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
14
|
+
|
|
13
15
|
## 언제 쓰나
|
|
14
16
|
|
|
15
17
|
입력을 유지하며 저장의 진행·성공·재시도 가능 실패를 보여 줄 때 쓴다. 화면 wrapper 없이 아래 공개 컴포넌트와 `resolveSaveFeedback`을 조합한다.
|
|
@@ -113,7 +115,7 @@ Button의 실행 콜백은 Web `onClick`, Native `onPress`로 연결한다. 위
|
|
|
113
115
|
| 좁은 폭 | 줄바꿈·단일 내용 | 같은 순서, OS 화면 검증은 별도 |
|
|
114
116
|
|
|
115
117
|
|
|
116
|
-
## 확정 라벨의 크기 예약 (
|
|
118
|
+
## 확정 라벨의 크기 예약 (npm 1.21.0 · 2026-10-15)
|
|
117
119
|
|
|
118
120
|
Lucian 001의 저장→진행→완료 프레임 유지를 기존 Button의 `completion` 옵션으로 보완한다.
|
|
119
121
|
기본 행동 문자열은 항상 같은 children으로 두고, 완료 문자열은 `completion.label`로 처음부터
|
|
@@ -123,7 +125,7 @@ Lucian 001의 저장→진행→완료 프레임 유지를 기존 Button의 `com
|
|
|
123
125
|
서버가 확정하기 전에는 완료를 표시하지 않으며 자동 성공 타이머·중복 mutation 엔진을 넣지 않는다.
|
|
124
126
|
|
|
125
127
|
Web은 두 라벨을 겹쳐 측정하고 Native는 두 라벨의 고유 폭과 최대 높이를 미리 예약한다.
|
|
126
|
-
자세한 초기 Native 행 예약과 문자열 제한은 [Button](../components/button.md
|
|
128
|
+
자세한 초기 Native 행 예약과 문자열 제한은 [Button](../components/button.md#저장-확정-라벨과-프레임-예약-npm-1210--2026-10-15)을 따른다.
|
|
127
129
|
기존 결과 영역이 live region을 소유한다. Button이 별도 자동 알림을 만들지 않아 저장 중·완료
|
|
128
130
|
안내가 중복 발표되지 않는다. Showcase는 같은 공개 Button API를 사용하며, 예제 요청임을
|
|
129
131
|
계속 밝힌다. 실제 제품은 자신의 네트워크 요청·정규화된 확정 응답을 기존 session에 전달한다.
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.12.1
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [공통 실행과 실패 복구](../../action-session.md), `src/action-session.ts`, `showcase/web/src/patterns/action-recovery-previews.tsx`, `showcase/native/src/action-recovery-previews.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/공통 동작/즉시 반영과 복구`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
|
|
9
9
|
- 스토리북: `배포/구성/피드백과 복구/즉시 반영과 복구`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
북마크·좋아요·알림 켜기처럼 되돌려도 피해가 없는 저위험 토글을 누르는 즉시 화면에 반영하고, 서버가 실패하면 직전 확인 값으로 되돌릴 때 쓴다.
|
|
@@ -28,7 +30,7 @@
|
|
|
28
30
|
| `Button` 다시 반영 | error일 때만 나타나는 보조 행동, `tone="secondary"` | [Button](../components/button.md) |
|
|
29
31
|
| `Text` | 상태 문구. Web `role="status"`, Native 접근성 알림 | [Text](../components/text.md) |
|
|
30
32
|
| `Stack` | 세로 쌓기 `gap="md"` | [Stack](../components/stack.md) |
|
|
31
|
-
| `Container` · `ScrollView` | 바깥 틀.
|
|
33
|
+
| `Container` · `ScrollView` | 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
|
|
32
34
|
|
|
33
35
|
스토리의 `tone="ghost"` "서버에서 새 상태 불러오기"는 `reset`이 지난 응답을 버리는 것을 보여 주는 데모 버튼이다.
|
|
34
36
|
제품에서는 이 동작을 버튼이 아니라 재조회·계정 변경 시점에 연결한다. "다음 요청 실패시키기"와 350ms 지연도 데모 전용이다.
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.12.1
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [공통 실행과 실패 복구](../../action-session.md), `src/action-session.ts`, `showcase/web/src/patterns/action-recovery-previews.tsx`, `showcase/native/src/action-recovery-previews.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/공통 동작/저장과 재시도`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
|
|
9
9
|
- 스토리북: `배포/구성/피드백과 복구/저장과 재시도`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
입력한 내용을 서버에 저장하는 폼 한 덩어리에서 저장 중 중복 실행을 막고, 실패하면 입력을 지우지 않은 채 제출했던 값 그대로 다시 보낼 때 쓴다.
|
|
@@ -30,7 +32,7 @@
|
|
|
30
32
|
| `Button` 다시 저장 | error일 때만 나타나는 보조 행동, `tone="secondary"` | [Button](../components/button.md) |
|
|
31
33
|
| `Text` | 상태 문구(진행·성공·실패). Web `role="status"`, Native 접근성 알림. 확정 값 줄(선택) | [Text](../components/text.md) |
|
|
32
34
|
| `Stack` | 세로 쌓기 `gap="md"` | [Stack](../components/stack.md) |
|
|
33
|
-
| `Container` · `ScrollView` | 바깥 틀.
|
|
35
|
+
| `Container` · `ScrollView` | 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
|
|
34
36
|
|
|
35
37
|
스토리의 "다음 요청 실패시키기"(secondary 토글)와 350ms 지연은 데모 전용이다. 제품에 넣지 않는다.
|
|
36
38
|
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.12.1
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [공통 실행과 실패 복구 · 초안과 실행 취소](../../action-session.md#초안과-실행-취소), `src/action-session.ts`, `showcase/web/src/patterns/action-recovery-previews.tsx`, `showcase/native/src/action-recovery-previews.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/공통 동작/보관과 실행 취소`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
|
|
9
9
|
- 스토리북: `배포/구성/피드백과 복구/보관과 실행 취소`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
보관·숨기기·목록에서 빼기처럼 제품이 역연산을 제공하는 작업 뒤에, 같은 자리에서 실행 취소를 주고 그 복구 요청이 성공해야 화면을 되돌릴 때 쓴다.
|
|
@@ -29,7 +31,7 @@
|
|
|
29
31
|
| `Text` | 상태 문구. Web `role="status"`, Native 접근성 알림 | [Text](../components/text.md) |
|
|
30
32
|
| `Stack` | 세로 쌓기 `gap="md"` | [Stack](../components/stack.md) |
|
|
31
33
|
| `Toast` `action`(선택) | 행이 사라지는 목록에서 실행 취소 진입점 | [Toast](../components/toast.md) |
|
|
32
|
-
| `Container` · `ScrollView` | 바깥 틀.
|
|
34
|
+
| `Container` · `ScrollView` | 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
|
|
33
35
|
|
|
34
36
|
Toast의 `action`을 진입점으로 쓰면 토스트는 진입점만, 세션은 진행·실패 상태만 소유한다. Toast 지침대로 그 알림에서만 할 수 있는
|
|
35
37
|
행동은 두지 않으므로 보관함 화면 등 다른 곳에도 복구 경로를 둔다. 스토리의 "다음 요청 실패시키기"·350ms 지연은 데모 전용이고,
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 미게시(1.17.2 이후)
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [ActivityChip 계약](../../activity-chip.md), [Toast 패널](../../toast.md#패널-toast--미게시1172-이후), 양 Showcase `activity-status-preview.tsx`, `showcase/shared/activity-status.ts`
|
|
9
9
|
- 스토리북: `배포/구성/피드백과 복구/백그라운드 작업 상태`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
사용자가 다른 화면을 보는 동안 계속되는 작업 하나(검수·생성·업로드)의 진행을 헤더의 작은 칩으로 알리고, 칩을 누르면
|
|
@@ -4,15 +4,17 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.14.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: 공개 API를 사용하는 `showcase/*/reference-adoption-previews.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/직접 조작과 모션/높이가 이어지는 패널`
|
|
10
10
|
|
|
11
11
|
승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
|
|
12
12
|
|
|
13
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
14
|
+
|
|
13
15
|
## 언제 쓰나
|
|
14
16
|
|
|
15
|
-
패널의 길이가 달라질 때 아래 행동이 새 높이로 이동해야 하는 작은 내용 영역에 쓴다.
|
|
17
|
+
패널의 길이가 달라질 때 아래 행동이 새 높이로 이동해야 하는 작은 내용 영역에 쓴다. 기본 외곽 배치는 CompositionLayout이 제공하고 아래 공개 API가 해당 상호작용을 담당한다.
|
|
16
18
|
|
|
17
19
|
## 구성 요소
|
|
18
20
|
|
|
@@ -3,13 +3,15 @@
|
|
|
3
3
|
- 단계: 구성
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
|
-
- 적용:
|
|
6
|
+
- 적용: 1.21.0
|
|
7
7
|
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [편집 도구 계약](../../authoring-tools.md), `src/authoring-tools.ts`, 양 renderer `src/authoring-tools.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/직접 조작과 모션/베지어 이징 편집`, Web `배포/구성/직접 조작과 모션/단축키 조합 기록`
|
|
10
10
|
|
|
11
11
|
ShortcutRecorder는 Web 전용이다. Native는 BezierEditor만 지원한다.
|
|
12
12
|
|
|
13
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
14
|
+
|
|
13
15
|
## 언제 쓰나
|
|
14
16
|
|
|
15
17
|
제품 안의 모션 편집기에서 두 제어점의 곡선을 조정하거나 웹 앱의 사용자 단축키를 실제로 등록할 때 쓴다. 단순 조합 표시는 기존 TextFormat을 사용한다. 제품 토큰 저장·전역 키 등록 서비스는 소비 제품이 소유한다.
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.16.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [원제품과 기존 API 대조](../../../../../docs/plans/aceternity-interaction-adoption-2026-10-07.md), 양 Showcase `collection-detail-preview.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/직접 조작과 모션/카드 상세 연결`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
유한 카드 여러 장의 독립 입력을 보존하면서 탐색하고 별도 상세 모달을 열 때 쓴다. 후기/상품/자료는
|
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
- 단계: 구성
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
|
-
- 적용:
|
|
6
|
+
- 적용: 1.21.0
|
|
7
7
|
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [목록 편집과 복구 계약](../../collection-editing.md), `src/collection-editing.ts`, 양 renderer의 `src/collection-editing.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/입력과 작성/제목 바로 편집`, `배포/구성/입력과 작성/반복 입력`, `배포/구성/선택과 필터/선택 항목 묶음 작업`, `배포/구성/피드백과 복구/검색 필터 완화`, `배포/구성/선택과 필터/표 열 설정`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
목록의 제목을 바로 고치거나, 입력 행을 늘리거나, 여러 항목에 같은 행동을 하거나, 빈 검색에서 조건을 풀거나, 표의 열을 설정할 때 쓴다.
|
|
@@ -107,4 +109,4 @@ import { InlineEdit } from "@hjmds/react-native/collection-editing";
|
|
|
107
109
|
- 원본 데모의 고정 성공·전체 복구를 복사하지 않는다. 실패를 callback에서 삼키면 HJM은 성공으로 해석한다.
|
|
108
110
|
- `onAdd`가 반환한 ID와 새 field ID가 같아야 한다. 입력 값을 배열 index에 저장하지 않는다.
|
|
109
111
|
- 표 원본 descriptor의 pinned·width·sort를 보존한다. 설정 화면의 잠금은 서버 권한 검증을 대체하지 않는다.
|
|
110
|
-
-
|
|
112
|
+
- npm 1.21.0 API다. 소비 제품의 실제 설치 버전을 확인한다.
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.16.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [후보 조사](../../../../../docs/qa/2026-10-07-reference-parallel-b.md), 양 Showcase `command-records-preview.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/정보 표시/명령 기록 표시`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
명령 원문과 출력 기록을 선택·읽기·복사할 때 쓴다. [Magic Terminal](https://magicui.design/docs/components/terminal)의
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 구성 API 지침 참조
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [ChatMessage](../components/chat-message.md), [공통 실행과 실패 복구](../../action-session.md), `showcase/web/src/patterns/conversation-previews.tsx`, `showcase/native/src/conversation-previews.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/공통 화면/대화 메시지`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
|
|
9
9
|
- 스토리북: `배포/구성/정보 표시/대화 메시지`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
말풍선 하나하나에 반응·답장·원문 이동·전송 실패 후 다시 보내기를 붙일 때 쓴다. ChatMessage의 슬롯과 콜백을 제품 로직에 연결하며 새 데이터 엔진을 만들지 않는다.
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 구성 API 지침 참조
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [NotificationItem](../components/notification-item.md), [공통 실행과 실패 복구](../../action-session.md), `showcase/web/src/patterns/conversation-previews.tsx`, `showcase/native/src/conversation-previews.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/공통 화면/알림 항목`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
|
|
9
9
|
- 스토리북: `배포/구성/정보 표시/알림 항목`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
알림 한 행을 누르면 바로 읽음으로 바꾸고, 서버가 실패하면 읽지 않음으로 되돌릴 때 쓴다. NotificationItem과 낙관 반영 세션을 연결하며 새 데이터 엔진을 만들지 않는다.
|
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
- 단계: 구성
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
|
-
- 적용:
|
|
6
|
+
- 적용: 1.21.0
|
|
7
7
|
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [연결 계약](../../communication.md), `src/communication.ts`, 양 renderer `src/communication.tsx`, `src/screens.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/선택과 필터/펼치는 상단 검색`, `배포/구성/입력과 작성/메시지 답장 연결`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
상단 검색 버튼에서 검색 영역을 펼치거나 채팅의 실제 메시지를 선택해 답장을 전송할 때 쓴다. 이미 전체 화면으로 제공하는 검색에는 SearchScreen을 바로 쓴다. 입력 자동 높이·채팅 swipe 엔진·최근 검색 저장을 새로 만들지 않는다.
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.12.1
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [복합 입력 계약](../../compound-controls.md), `showcase/shared/compound-controls.ts`, `showcase/{web/src/patterns,native/src}/compound-previews.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/비교와 검증/복합 입력 모음`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
기존 컨트롤을 묶은 네 가지 복합 입력(소요 시간, 버튼 자리 확인, 이모지 반응, 알림 종)을 화면 안 한 블록으로 둘 때 쓴다.
|
|
@@ -24,7 +26,7 @@
|
|
|
24
26
|
| ReactionPicker (`/reaction-picker`) | 반응 하나를 고르거나 해제(`ghost` `pill` 토글 버튼 묶음) | [Button](../components/button.md) |
|
|
25
27
|
| NotificationBell (`/notification-bell`) | 읽지 않은 수가 있는 종 아이콘 버튼 | [IconButton](../components/icon-button.md) |
|
|
26
28
|
| `Stack` | 블록 안 세로 쌓기 `gap="xl"` | [Stack](../components/stack.md) |
|
|
27
|
-
| `Container` · `ScrollView` | 바깥 틀.
|
|
29
|
+
| `Container` · `ScrollView` | 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
|
|
28
30
|
| Switch, Button `ghost`·`primary` | 스토리의 실패 응답 토글·다시 시작·알림 추가(데모 전용, 제품에는 넣지 않는다) | [Switch](../components/switch.md), [Button](../components/button.md) |
|
|
29
31
|
|
|
30
32
|
## 배치
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.16.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [Motion 검토](../../../../../docs/qa/2026-10-07-motion-reference-page-review.md), 양 Showcase `content-transition-comparison-preview.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/비교와 검증/내용 전환 비교`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
동일 내용의 전환 표현을 테마와 비교하거나 단계별 입력·완료·복구를 검토할 때 쓴다.
|
|
@@ -4,15 +4,17 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.14.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: 공개 API를 사용하는 `showcase/*/reference-adoption-previews.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/입력과 작성/입력을 유지하는 도구`
|
|
10
10
|
|
|
11
11
|
승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
|
|
12
12
|
|
|
13
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
14
|
+
|
|
13
15
|
## 언제 쓰나
|
|
14
16
|
|
|
15
|
-
작성 중인 입력을 보존한 채 선택적 도구를 펼쳐야 할 때 쓴다.
|
|
17
|
+
작성 중인 입력을 보존한 채 선택적 도구를 펼쳐야 할 때 쓴다. 기본 외곽 배치는 CompositionLayout이 제공하고 아래 공개 API가 해당 상호작용을 담당한다.
|
|
16
18
|
|
|
17
19
|
## 구성 요소
|
|
18
20
|
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.12.1
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [Masonry](../../masonry.md), [VirtualList](../../virtual-list.md), [QRCode](../../qr-code.md), `src/masonry.ts`, `src/qr-code-recipe.ts`, `src/foundations.ts`(`layout`), `showcase/web/src/patterns/DataLayouts.stories.tsx`, `showcase/native/src/data-layout-preview.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/정보 표시/카드 묶음과 긴 목록`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
많은 항목을 화면에 늘어놓을 방식을 고를 때 쓴다. 높이가 다른 카드는 Masonry, 수백 개 이상의 같은 높이 행은
|
|
@@ -51,7 +53,7 @@ VirtualList, 다른 기기로 넘길 링크는 QRCode다. 세 스토리(카드
|
|
|
51
53
|
|
|
52
54
|
| 영역 | 컴포넌트 | 위치 | 크기·간격 |
|
|
53
55
|
| --- | --- | --- | --- |
|
|
54
|
-
| 바깥 틀 | 카드 묶음: Web 문서 스크롤 > `Container`, Native `ScrollView` > `Container`. 가상 목록: `Container`만(바깥 세로 스크롤 없음). QR: 카드·시트 본문 |
|
|
56
|
+
| 바깥 틀 | 카드 묶음: Web 문서 스크롤 > `Container`, Native `ScrollView` > `Container`. 가상 목록: `Container`만(바깥 세로 스크롤 없음). QR: 카드·시트 본문 | HJM 화면 골격이 소유. 상단 안전 영역은 내비게이션 헤더가 맡는다 | 좌우 `Container gutter`: 폭 600 미만 `compact` 16, 이상 `regular` 20([화면 여백](../tokens/layout.md)). Native ScrollView 위아래 `paddingVertical: spacing.lg` 20 |
|
|
55
57
|
| 카드 묶음 | Masonry | 본문 흐름 안, 페이지와 함께 스크롤 | `columns` 기본 2(600 이상에서 늘린다), `gap`은 숫자(기본 12 = `spacing.sm`), `width`는 Container 안쪽에 놓인 실제 호스트의 측정 폭 |
|
|
56
58
|
| 카드 | 제품 `renderItem` | 가장 짧은 열 아래 | 높이는 `getItemHeight`가 확정, 안쪽 여백 `spacing.sm` 12 |
|
|
57
59
|
| 다음 페이지 | [LoadMore](../components/load-more.md) | Masonry 다음 형제, 같은 스크롤 | LoadMore 기본 |
|
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
- 단계: 구성
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
|
-
- 적용:
|
|
6
|
+
- 적용: 1.21.0
|
|
7
7
|
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [데이터 구성 계약](../../data-workflows.md), `src/data-workflows.ts`, 양 renderer의 `src/data-workflows.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/입력과 작성/가져오기 열 연결`, `배포/구성/정보 표시/전환 퍼널`, `배포/구성/정보 표시/코호트 잔존율`, `배포/구성/정보 표시/상관 행렬`, `배포/구성/정보 표시/목표 달성 요약`, `배포/구성/정보 표시/분포 구간 탐색`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
CSV 열 연결, 순차 퍼널, 가입 시점별 잔존율, 지표 상관, 목표, 분포 구간 탐색에 쓴다.
|
|
@@ -88,4 +90,4 @@ Native 차트는 기존 react-native-svg optional peer를 사용한다. 새 제
|
|
|
88
90
|
- 순차가 아닌 지표를 퍼널에 넣지 않는다. 실제 원인 데이터 없이 이탈 사유를 생성하지 않는다.
|
|
89
91
|
- 히스토그램 전체 선택에서 같은 domain을 유지한다. 누락값·범위 밖 count를 제품 summaryLabel에 표현한다.
|
|
90
92
|
- mapping 변경만으로 저장을 실행하지 않는다. 서버 확정·권한·멱등성은 실제 importer 책임이다.
|
|
91
|
-
-
|
|
93
|
+
- npm 1.21.0에서 제공하며 소비 앱의 실제 설치 버전을 확인한다.
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.14.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [날짜 입력 조사](../../../../../docs/qa/2026-10-07-date-entry-reference.md), `src/date-entry.ts`
|
|
9
9
|
- 스토리북: `배포/구성/입력과 작성/날짜 직접 입력`
|
|
10
10
|
|
|
11
11
|
승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
|
|
12
12
|
|
|
13
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
14
|
+
|
|
13
15
|
## 언제 쓰나
|
|
14
16
|
|
|
15
17
|
사용자가 알고 있는 날짜를 직접 입력할 때 쓴다. DatePicker는 달력에서 날짜를 선택하는 API이므로
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.16.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [Magic 조사](../../../../../docs/qa/2026-10-07-reference-parallel-b.md), 양 Showcase `date-time-selection-preview.tsx`, shared `date-time-selection.ts`
|
|
9
9
|
- 스토리북: `배포/구성/선택과 필터/날짜와 시각 선택`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
기록·알림의 날짜 하나와 하루 안의 시각을 함께 고를 때 쓴다. [기존 시간 선택](time-selection.md)에
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.16.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [프로필 계약](../../design-profile.md), [조사와 QA](../../../../../docs/qa/2026-10-07-design-profile-research.md), 두 Showcase `design-profile-preview.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/비교와 검증/테마 조합`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
같은 기능에 10가지 표현을 적용하고, 앱 소유 테마 설정을 넣었을 때 네 단계의 전파와 상태 유지를 검토할 때 쓴다.
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web
|
|
6
6
|
- 적용: 1.12.1
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [Collapsible](../../collapsible.md), [ContextMenu](../../context-menu.md), [Menubar](../../menubar.md), `showcase/web/src/patterns/Disclosure.stories.tsx`, `src/collapsible.ts`, `src/menubar.ts`, `packages/react/src/styles.css`(`.hjm-collapsible`, `.hjm-context-menu`, `.hjm-menubar`)
|
|
9
9
|
- 스토리북: `배포/구성/탐색과 이동/펼침과 메뉴`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
Web에서 내용을 숨겼다 펼치거나(Collapsible), 대상에 붙은 작업 메뉴를 우클릭·키보드로 열거나(ContextMenu),
|
|
@@ -33,7 +35,7 @@ ContextMenu로만 닿는 작업을 두지 않는다. 같은 작업을 보이는
|
|
|
33
35
|
| `Notice` · `Toast` | 작업 결과·실패 알림(스토리의 Notice는 데모) | [Notice](../components/notice.md), [Toast](../components/toast.md) |
|
|
34
36
|
| `Text` | 키보드 사용 안내 | [Text](../components/text.md) |
|
|
35
37
|
| `Stack gap="md"` | 세로 흐름 | [Stack](../components/stack.md) |
|
|
36
|
-
| `Container` | 바깥 틀.
|
|
38
|
+
| `Container` | 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md) |
|
|
37
39
|
|
|
38
40
|
## 배치
|
|
39
41
|
|
|
@@ -59,10 +61,10 @@ ContextMenu로만 닿는 작업을 두지 않는다. 같은 작업을 보이는
|
|
|
59
61
|
|
|
60
62
|
| 영역 | 컴포넌트 | 위치 | 크기·간격 |
|
|
61
63
|
| --- | --- | --- | --- |
|
|
62
|
-
| 바깥 틀 | 문서 스크롤 > `Container` |
|
|
64
|
+
| 바깥 틀 | 문서 스크롤 > `Container` | HJM 화면 골격이 소유. 메뉴 표면은 `position: fixed`라 스크롤 컨테이너에 잘리지 않는다 | 좌우 `Container gutter`: 폭 600 미만 `compact` 16, 이상 `regular` 20([화면 여백](../tokens/layout.md)). Menubar는 편집 영역 맨 위 |
|
|
63
65
|
| 펼침 트리거 | `Collapsible` trigger | 펼침 내용 위, 꽉 찬 폭, 표시(▸/▾)는 끝 | 최소 높이 `control.minTouchTarget` 44, 위아래 `spacing.xs` 8, 글자–표시 `spacing.sm` 12 |
|
|
64
66
|
| 펼침 내용 | `Collapsible` content | 트리거 바로 아래 | 트리거와 `collapsibleRecipe.gap` `spacing.xs` 8 |
|
|
65
|
-
| 메뉴 대상 | `ContextMenu` 자식 |
|
|
67
|
+
| 메뉴 대상 | `ContextMenu` 자식 | HJM 구성 레이아웃 소유(스토리의 대상 상자는 showcase CSS) | 포커스 링 2px |
|
|
66
68
|
| 메뉴 표면 | ContextMenu 메뉴 | 포인터 위치에 `position: fixed`, 뷰포트 안 | 최대 폭 `min(24rem, 90vw)`, 최대 높이 뷰포트 − 2×`spacing.md`, padding `spacing.xxs` 4, radius `md` 12. 항목 높이 44, padding `spacing.xs` 8 · `spacing.sm` 12 |
|
|
67
69
|
| 메뉴 막대 | `Menubar` | 화면·편집 영역 상단, 가로, 좁으면 줄바꿈 | 최소 높이 `menubarRecipe.minHeight` 44, 라벨 사이 `spacing.xxs` 4, 좌우 `spacing.xs` 8, 라벨 좌우 `spacing.sm` 12 |
|
|
68
70
|
| 메뉴 패널 | Menubar 패널 | 라벨 바로 아래(`top: 100%`), 시작 정렬 | 최소 폭 13.75rem, 최대 `min(24rem, 90vw)`, 항목 높이 44 |
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.14.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [파일 원본 대조](../../../../../docs/qa/2026-10-07-file-reference.md), `src/document-resource.ts`
|
|
9
9
|
- 스토리북: `배포/구성/정보 표시/문서와 파일`
|
|
10
10
|
|
|
11
11
|
승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
|
|
12
12
|
|
|
13
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
14
|
+
|
|
13
15
|
## 언제 쓰나
|
|
14
16
|
|
|
15
17
|
이름·형식·크기와 미리보기·내보내기·별도 메뉴를 함께 제공하는 문서에 쓴다.
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web
|
|
6
6
|
- 적용: 1.12.1
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [HJM Showcase · 환경 도구](../../showcase.md#환경-도구), [DesignSystemProvider](../../design-system-provider.md), `src/showcase.ts`(`showcaseEnvironmentMatrix`, `showcaseScenarios`, `getShowcaseEnvironmentInput`), `showcase/web/src/patterns/EnvironmentMatrix.stories.tsx`, `showcase/web/.storybook/preview.tsx`, `showcase/native/.rnstorybook/preview.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/비교와 검증/환경 조합 검증`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
제품 화면이 테마·쓰기 방향·글자 크기·모션 설정이 달라져도 같은 의미를 유지하는지 확인할 때, 어떤 환경 조합과 검증 항목을 골라 볼지 정하는 기준표로 쓴다.
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Native
|
|
6
6
|
- 적용: 1.12.1
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: `showcase/native/src/ExpoInteractions.stories.tsx`, `src/content-transition.ts`, `src/foundations.ts`(`spacing`, `layout`), `packages/react-native/src/content-transition.tsx`, `packages/react-native/src/internal/recipe-button.tsx`(`selected`)
|
|
9
9
|
- 스토리북: `배포/구성/피드백과 복구/중단해도 남는 현재 상태`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
버튼으로 상태를 빠르게 바꾸거나 전환 도중 내용을 닫아도 현재 상태가 바로 보이고 남아야 하는 영역에 쓴다.
|
|
@@ -18,7 +20,7 @@
|
|
|
18
20
|
|
|
19
21
|
| 컴포넌트 | 역할 | 지침 |
|
|
20
22
|
| --- | --- | --- |
|
|
21
|
-
| `ScrollView` · `Container` | 바깥 틀.
|
|
23
|
+
| `ScrollView` · `Container` | 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
|
|
22
24
|
| `Heading level="level5"`, `Text` | 영역 제목(18)과 설명 | [Heading](../components/heading.md), [Text](../components/text.md) |
|
|
23
25
|
| `Button tone="secondary" selected` | 동작 줄이기 같은 켜고 끄는 설정(토글 버튼) | [Button](../components/button.md) |
|
|
24
26
|
| `Button` `primary`·`secondary`·`ghost` | 다음 상태 · 처음으로 · 내용 닫기/열기 | [Button](../components/button.md) |
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.12.1
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [Sheet](../../sheet.md), [Steps](../../steps.md), `src/component-recipes.ts` `sheetRecipe`, `src/steps.ts`(`currentStepStatus`), `packages/react-native/src/overlays.tsx`(footer), `showcase/shared/family-drawer.ts`
|
|
9
9
|
- 스토리북: `배포/구성/입력과 작성/단계별 드로어`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
초대 → 설정 → 확인처럼 짧은 단계 2~5개를 현재 화면을 떠나지 않고 하단 시트 안에서 차례로 진행할 때 쓴다.
|
|
@@ -17,7 +19,7 @@
|
|
|
17
19
|
|
|
18
20
|
| 컴포넌트 | 역할 | 지침 |
|
|
19
21
|
| --- | --- | --- |
|
|
20
|
-
| `Container` · `ScrollView` | 시작 화면의 바깥 틀.
|
|
22
|
+
| `Container` · `ScrollView` | 시작 화면의 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
|
|
21
23
|
| `Heading level="level2"`, `Text` | 시작 화면의 제목·설명 | [Heading](../components/heading.md), [Text](../components/text.md) |
|
|
22
24
|
| `Button` primary | 시트를 여는 트리거(시작 화면의 주 행동) | [Button](../components/button.md) |
|
|
23
25
|
| `Sheet` | 하단 시트. 제목·닫기·`footer`, 안전 영역·스크롤·`busy` | [Sheet](../components/sheet.md) |
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.14.0
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [입력 그룹 조사](../../../../../docs/plans/field-group-experiment.md), `src/field-group.ts`
|
|
9
9
|
- 스토리북: `배포/구성/입력과 작성/관련 입력 묶음`
|
|
10
10
|
|
|
11
11
|
승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
|
|
12
12
|
|
|
13
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
14
|
+
|
|
13
15
|
## 언제 쓰나
|
|
14
16
|
|
|
15
17
|
주소·연락처처럼 여러 입력이 하나의 질문에 답할 때 쓴다. FieldGroup은 관련성·도움말·오류·잠금을
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
- 상태: 배포
|
|
5
5
|
- 지원: Web · Native
|
|
6
6
|
- 적용: 1.12.1
|
|
7
|
-
- 검토일: 2026-10-
|
|
7
|
+
- 검토일: 2026-10-15
|
|
8
8
|
- 근거: [FloatingActionButton](../../floating-action-button.md), `src/floating-action-button.ts`, `packages/react/src/styles.css` `.hjm-fab`, `showcase/{web/src/patterns,native/src}/FloatingActionButton.stories.tsx`
|
|
9
9
|
- 스토리북: `배포/구성/입력과 작성/빠른 메모 작성`
|
|
10
10
|
|
|
11
|
+
공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
|
|
12
|
+
|
|
11
13
|
## 언제 쓰나
|
|
12
14
|
|
|
13
15
|
스크롤되는 기록 목록 위에 떠 있는 생성 버튼으로 짧은 입력 대화상자를 열고, 저장하면 새 항목을 목록 맨 위에 넣을 때 쓴다.
|