@hjmds/design-contracts 1.22.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.
Files changed (107) hide show
  1. package/dist/version.d.ts +1 -1
  2. package/dist/version.js +1 -1
  3. package/dist/version.js.map +1 -1
  4. package/docs/generated/component-maturity.md +1 -1
  5. package/docs/generated/renderer-evidence.json +3 -3
  6. package/docs/generated/renderer-evidence.md +1 -1
  7. package/docs/generated/showcase-manifest.json +1 -1
  8. package/docs/screen-patterns.md +11 -4
  9. package/docs/usage/README.md +2 -1
  10. package/docs/usage/SELECTION.md +36 -23
  11. package/docs/usage/STANDARD.md +5 -0
  12. package/docs/usage/components/comment-thread-screen.md +4 -1
  13. package/docs/usage/components/composition-layout.md +92 -0
  14. package/docs/usage/components/screen-layout.md +1 -0
  15. package/docs/usage/compositions/action-feedback.md +3 -1
  16. package/docs/usage/compositions/action-recovery-optimistic.md +4 -2
  17. package/docs/usage/compositions/action-recovery-save.md +4 -2
  18. package/docs/usage/compositions/action-recovery-undo.md +4 -2
  19. package/docs/usage/compositions/activity-status.md +3 -1
  20. package/docs/usage/compositions/adaptive-content.md +4 -2
  21. package/docs/usage/compositions/authoring-tools.md +2 -0
  22. package/docs/usage/compositions/collection-detail.md +3 -1
  23. package/docs/usage/compositions/collection-editing.md +2 -0
  24. package/docs/usage/compositions/command-records.md +3 -1
  25. package/docs/usage/compositions/common-message.md +3 -1
  26. package/docs/usage/compositions/common-notification.md +3 -1
  27. package/docs/usage/compositions/communication.md +2 -0
  28. package/docs/usage/compositions/compound-controls.md +4 -2
  29. package/docs/usage/compositions/content-transition-comparison.md +3 -1
  30. package/docs/usage/compositions/context-toolbar.md +4 -2
  31. package/docs/usage/compositions/data-layouts.md +4 -2
  32. package/docs/usage/compositions/data-workflows.md +2 -0
  33. package/docs/usage/compositions/date-entry.md +3 -1
  34. package/docs/usage/compositions/date-time-selection.md +3 -1
  35. package/docs/usage/compositions/design-profile-comparison.md +3 -1
  36. package/docs/usage/compositions/disclosure.md +6 -4
  37. package/docs/usage/compositions/document-resource.md +3 -1
  38. package/docs/usage/compositions/environment-matrix.md +3 -1
  39. package/docs/usage/compositions/expo-interactions.md +4 -2
  40. package/docs/usage/compositions/family-drawer.md +4 -2
  41. package/docs/usage/compositions/field-group.md +3 -1
  42. package/docs/usage/compositions/floating-action-button.md +3 -1
  43. package/docs/usage/compositions/illustrated-outcome.md +3 -1
  44. package/docs/usage/compositions/input-sheet.md +3 -1
  45. package/docs/usage/compositions/interaction-adapters.md +3 -1
  46. package/docs/usage/compositions/interaction-flow-apply.md +3 -1
  47. package/docs/usage/compositions/interaction-flow-draft.md +3 -1
  48. package/docs/usage/compositions/interaction-flow-search.md +3 -1
  49. package/docs/usage/compositions/live-list.md +3 -1
  50. package/docs/usage/compositions/media-transport.md +2 -0
  51. package/docs/usage/compositions/native-renderers.md +3 -1
  52. package/docs/usage/compositions/navigation-bar-collection.md +3 -1
  53. package/docs/usage/compositions/optional-adapters.md +3 -1
  54. package/docs/usage/compositions/optional-motion.md +3 -1
  55. package/docs/usage/compositions/origin-dialog.md +3 -1
  56. package/docs/usage/compositions/paper-surface.md +3 -1
  57. package/docs/usage/compositions/photo-source.md +3 -1
  58. package/docs/usage/compositions/purpose-input-comment.md +8 -2
  59. package/docs/usage/compositions/purpose-input-message.md +4 -2
  60. package/docs/usage/compositions/reference-first.md +3 -1
  61. package/docs/usage/compositions/reference-review.md +3 -1
  62. package/docs/usage/compositions/reference-settings.md +3 -1
  63. package/docs/usage/compositions/selection-motion.md +4 -2
  64. package/docs/usage/compositions/selection-scope.md +3 -1
  65. package/docs/usage/compositions/social-compositions.md +2 -0
  66. package/docs/usage/compositions/stea-event-ticket.md +3 -1
  67. package/docs/usage/compositions/stea-flip-card.md +4 -2
  68. package/docs/usage/compositions/stea-order-progress.md +5 -3
  69. package/docs/usage/compositions/stea-otp-verify.md +5 -3
  70. package/docs/usage/compositions/stea-pixel-empty.md +5 -3
  71. package/docs/usage/compositions/stea-schedule-card.md +5 -3
  72. package/docs/usage/compositions/stea-stat-summary.md +4 -2
  73. package/docs/usage/compositions/streaming-answer.md +2 -0
  74. package/docs/usage/compositions/task-controls.md +2 -0
  75. package/docs/usage/compositions/texture-comparison.md +3 -1
  76. package/docs/usage/compositions/time-selection.md +5 -3
  77. package/docs/usage/compositions/toast-layout.md +3 -1
  78. package/docs/usage/compositions/toggle-feedback.md +2 -0
  79. package/docs/usage/compositions/transfer-task.md +2 -0
  80. package/docs/usage/compositions/upload-recovery.md +4 -2
  81. package/docs/usage/compositions/video-dialog.md +3 -1
  82. package/docs/usage/compositions/visual-foundations.md +5 -3
  83. package/docs/usage/compositions/web-additions.md +6 -4
  84. package/docs/usage/compositions/web-navigation.md +4 -2
  85. package/docs/usage/screens/common-chat.md +3 -1
  86. package/docs/usage/screens/common-comments.md +6 -4
  87. package/docs/usage/screens/common-inbox.md +3 -1
  88. package/docs/usage/screens/common-login.md +3 -1
  89. package/docs/usage/screens/common-profile.md +3 -1
  90. package/docs/usage/screens/common-saved.md +3 -1
  91. package/docs/usage/screens/common-search.md +3 -1
  92. package/docs/usage/screens/common-settings.md +3 -1
  93. package/docs/usage/screens/common-shell.md +3 -1
  94. package/docs/usage/screens/dashboard.md +3 -1
  95. package/docs/usage/screens/discovery-gallery.md +3 -1
  96. package/docs/usage/screens/flow-collection.md +3 -1
  97. package/docs/usage/screens/flow-editor.md +3 -1
  98. package/docs/usage/screens/flow-media.md +3 -1
  99. package/docs/usage/screens/flow-moderation.md +3 -1
  100. package/docs/usage/screens/flow-onboarding.md +3 -1
  101. package/docs/usage/screens/flow-permission.md +3 -1
  102. package/docs/usage/screens/landing.md +4 -2
  103. package/docs/usage/screens/mockup-studio.md +3 -1
  104. package/docs/usage/screens/notification-settings.md +32 -138
  105. package/docs/usage/screens/product-bento.md +3 -1
  106. package/docs/usage/screens/reference-comparison.md +3 -1
  107. package/package.json +1 -1
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.16.0
7
- - 검토일: 2026-10-08
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-07
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
- 작성 중인 입력을 보존한 채 선택적 도구를 펼쳐야 할 때 쓴다. 별도 신규 wrapper API가 아니라 아래 공개 컴포넌트의 조합 규격이다.
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-06
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: 카드·시트 본문 | 제품 화면이 소유. 상단 안전 영역은 내비게이션 헤더가 맡는다 | 좌우 `Container gutter`: 폭 600 미만 `compact` 16, 이상 `regular` 20([화면 여백](../tokens/layout.md)). Native ScrollView 위아래 `paddingVertical: spacing.lg` 20 |
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 기본 |
@@ -8,6 +8,8 @@
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 열 연결, 순차 퍼널, 가입 시점별 잔존율, 지표 상관, 목표, 분포 구간 탐색에 쓴다.
@@ -4,12 +4,14 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.14.0
7
- - 검토일: 2026-10-13
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-08
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-13
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-06
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` | 바깥 틀. 제품 화면이 소유한다 | [Container](../components/container.md) |
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` | 제품 화면이 소유. 메뉴 표면은 `position: fixed`라 스크롤 컨테이너에 잘리지 않는다 | 좌우 `Container gutter`: 폭 600 미만 `compact` 16, 이상 `regular` 20([화면 여백](../tokens/layout.md)). Menubar는 편집 영역 맨 위 |
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` 자식 | 제품 레이아웃 소유(스토리의 대상 상자는 showcase CSS) | 포커스 링 2px |
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-13
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-06
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-06
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` | 바깥 틀. 제품 화면이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
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-06
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` | 시작 화면의 바깥 틀. 제품 화면이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
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-07
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-06
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
  스크롤되는 기록 목록 위에 떠 있는 생성 버튼으로 짧은 입력 대화상자를 열고, 저장하면 새 항목을 목록 맨 위에 넣을 때 쓴다.
@@ -4,12 +4,14 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.14.0
7
- - 검토일: 2026-10-07
7
+ - 검토일: 2026-10-15
8
8
  - 근거: `showcase/web/src/patterns/illustrated-outcome-preview.tsx`, `showcase/native/src/illustrated-outcome-preview.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
  빈 목록에서 시작을 안내하고 짧은 온보딩을 거쳐 결과를 보여 줄 때 쓴다. 3D 그림은 제품 자산이며
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.12.1
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [Sheet 입력 화면과 가용 영역](../../sheet.md), `showcase/web/src/patterns/InputSheet.stories.tsx`, `showcase/native/src/InputSheet.stories.tsx`, `src/component-recipes.ts`(`sheetRecipe`), `packages/react/src/styles.css`(`.hjm-sheet`), `packages/react-native/src/overlays.tsx`(`Sheet`)
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
  - 지원: Web · Native
6
6
  - 적용: 1.12.1
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [Optional interaction adapters](../../../../../docs/interaction-adapters.md), `src/interaction-adapters.ts`, `showcase/web/src/patterns/InteractionAdapters.stories.tsx`, `showcase/native/src/InteractionAdapters.stories.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
  순서 바꾸기·행 작업·내용 전환·카드 넘기기·달성 축하·카드 확대 화면 전환 같은 선택형 상호작용 어댑터를 한 화면에서 함께 쓸 때, 각 어댑터를 어디에 놓고 무엇으로 감싸야 하는지 확인하는 구성이다.
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.12.1
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [제품 상호작용 품질](../../../../../docs/INTERACTION_QUALITY.md), [Sheet 계약](../../sheet.md), `src/component-recipes.ts`(`sheetRecipe`), `showcase/web/src/patterns/interaction-flow-previews.tsx`, `showcase/native/src/interaction-flow-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
  표시 방식·정렬·필터처럼 시트에서 여러 번 바꿔 본 뒤 적용을 눌러야 화면에 반영되고, 취소하거나 닫으면 기존 선택을 유지해야 할 때 쓴다.
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.12.1
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [제품 상호작용 품질](../../../../../docs/INTERACTION_QUALITY.md), [공통 실행과 실패 복구 · 초안과 실행 취소](../../action-session.md#초안과-실행-취소), [Sheet 계약](../../sheet.md), `showcase/web/src/patterns/interaction-flow-previews.tsx`, `showcase/native/src/interaction-flow-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
  메모·댓글처럼 시트에서 쓰던 글을 저장하지 않고 닫았다가 다시 열었을 때, 쓰던 초안을 그대로 이어 쓰게 할 때 쓴다.
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.12.1
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [공통 실행과 실패 복구](../../action-session.md), [제품 상호작용 품질](../../../../../docs/INTERACTION_QUALITY.md), `src/action-session.ts`, `showcase/web/src/patterns/interaction-flow-previews.tsx`, `showcase/native/src/interaction-flow-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
  검색어를 바꿔 다시 검색했을 때 먼저 보낸 요청이 늦게 도착해도 최신 검색 결과를 덮어쓰지 않게 할 때 쓴다.
@@ -4,12 +4,14 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.14.0
7
- - 검토일: 2026-10-07
7
+ - 검토일: 2026-10-15
8
8
  - 근거: `showcase/web/src/patterns/live-list-preview.tsx`, `showcase/native/src/live-list-preview.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
  입력 중인 목록에 새 데이터가 추가되거나 순서가 바뀌어도 기존 초안과 항목의 정체성을 유지할 때 쓴다.
@@ -8,6 +8,8 @@
8
8
  - 근거: [미디어 제어 계약](../../media-transport.md), `src/media-transport.ts`, 양 renderer `src/media-transport.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-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: `showcase/native/src/NativeRenderers.stories.tsx`, `showcase/native/src/story-registry.ts` `nativeRendererStoryGroups`
9
9
  - 스토리북: `배포/구성/비교와 검증/네이티브 컴포넌트 기기 확인`
10
10
 
11
+ 공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
12
+
11
13
  ## 언제 쓰나
12
14
 
13
15
  Native 공개 컴포넌트가 실제 기기·시뮬레이터에서 그려지고 눌리는지 범주별로 한 화면에서 확인할 때 쓴다. 화면 설계의 본보기가 아니라
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.12.1
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [BottomNavigation](../../bottom-navigation.md), `src/component-recipes.ts` `bottomNavigationRecipe`, `packages/react/src/styles.css` `.hjm-bottom-navigation`, `showcase/shared/navigation-bar-references.ts`
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-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [Optional presentation adapters](../../optional-adapters.md#behavior-boundaries), `packages/react-native/src/keyboard-controller.tsx`, `packages/react-native/src/sheet-gesture.tsx`, `showcase/native/src/OptionalAdapters.stories.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
  Native 앱 한 화면에서 이미지 확대 보기, 끌어서 높이를 바꾸는 시트, OS 길게 누르기 메뉴, 키보드를 따라 올라가는 하단 행동을 함께 쓸 때 provider 중첩 순서와 각 요소의 자리를 확인하는 구성이다.
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web
6
6
  - 적용: 1.12.1
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [Statistic](../../statistic.md), [선택 어댑터](../../optional-adapters.md), `showcase/web/src/components/OptionalMotion.stories.tsx`
9
9
  - 스토리북: `배포/구성/직접 조작과 모션/숫자 변화와 메뉴 변형`
10
10
 
11
+ 공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
12
+
11
13
  ## 언제 쓰나
12
14
 
13
15
  선택 설치 모션(숫자 자리 단위 변화, 메뉴 형태 변환)을 기존 컴포넌트 자리에 끼워 넣을 때 쓴다. 숫자 지표가 사용자 행동으로
@@ -4,12 +4,14 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.14.0
7
- - 검토일: 2026-10-07
7
+ - 검토일: 2026-10-15
8
8
  - 근거: `showcase/web/src/patterns/origin-dialog-preview.tsx`, `showcase/native/src/origin-dialog-preview.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
  현재 화면의 항목을 짧게 편집하고 돌아올 때 출발 위치를 시각적으로 연결한다. 별도 상태
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 1.16.0
7
- - 검토일: 2026-10-08
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [EffectSurface 계약](../../effect-surface.md), A-02 종이 표현 후보의 줄무늬 보완
9
9
  - 스토리북: `배포/구성/비교와 검증/종이 줄무늬 비교`
10
10
 
11
+ 공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
12
+
11
13
  ## 언제 쓰나
12
14
 
13
15
  같은 입력·기록에서 종이 preset의 grain+ruled 상속과 앱이 지정한 평면/줄무늬 표현을 비교한다.
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 구성 API 지침 참조
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 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
  명시적으로 선택 후 플랫폼 picker 실행 흐름이 필요할 때 쓴다. PhotoSourceSheet의 상태·콜백을 제품 로직에 연결하며 새 데이터 엔진을 만들지 않는다.
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 구성 API 지침 참조
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [MessageComposer](../components/message-composer.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
  게시물·기록 아래에서 댓글이나 특정 댓글에 대한 답글을 남기고, 실패하면 글과 답글 대상을 그대로 남겨 다시 등록하게 할 때 쓴다. 새 입력 엔진을 만들지 않고 MessageComposer를 쓴다.
@@ -75,6 +77,8 @@ import { Text } from "@hjmds/react/layout";
75
77
  <MessageComposer
76
78
  label={t("comments.input")}
77
79
  sendLabel={t("comments.send")}
80
+ sendIcon={<ArrowUpIcon />}
81
+ sendPresentation="circle"
78
82
  value={draft}
79
83
  onValueChange={setDraft}
80
84
  pending={sending}
@@ -92,6 +96,8 @@ import { Text } from "@hjmds/react-native/primitives";
92
96
  <MessageComposer
93
97
  label={t("comments.input")}
94
98
  sendLabel={t("comments.send")}
99
+ sendIcon={<ArrowUpIcon />}
100
+ sendPresentation="circle"
95
101
  value={draft}
96
102
  onValueChange={setDraft}
97
103
  pending={sending}
@@ -106,7 +112,7 @@ import { Text } from "@hjmds/react-native/primitives";
106
112
  ## 함정
107
113
 
108
114
  - 실패 시 글·답글 대상을 지우지 않는다. 성공을 먼저 표시하고 지우면 재전송할 내용이 사라진다.
109
- - Enter 전송을 덧붙이지 않는다. IME 조합 중 Enter를 전송으로 가로채면 한글 마지막 글자가 빠진다.
115
+ - 기본 Enter는 줄바꿈이다. 제품 키 핸들러로 전송을 덧붙이지 않는다. 명시적인 Enter 전송은 MessageComposer의 공개 `submitMode`를 사용해 Web의 Shift+Enter·IME 조합 보호를 유지한다.
110
116
  - 스토리의 "다음 전송 실패시키기"·350ms 지연·예제 사진은 로컬 시연이다. 업로드·서버 저장·권한은 제품이 연결한다.
111
117
 
112
118
  2026-10-13 예제 검수: Web의 원형 전송 버튼이 잠기거나 없어질 때 초점이 body로 빠져나가던 경로를 `inputRef`로 보완했다. 전송 시작 때만 입력에 초점을 두므로 대기 중 사용자가 다른 곳으로 옮긴 초점을 완료 시 다시 가져오지 않는다. 실패 후 수정한 초안으로 재시도하며, 사진·답장 대상은 성공을 확인한 뒤에만 정리한다.
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 구성 API 지침 참조
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [MessageComposer](../components/message-composer.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
  대화 화면 하단에서 글과 사진 여러 장을 함께 보내고, 실패하면 글·사진·답장 대상을 그대로 남겨 다시 보내게 할 때 쓴다. 새 입력 엔진을 만들지 않고 MessageComposer를 쓴다.
@@ -115,7 +117,7 @@ import { Text } from "@hjmds/react-native/primitives";
115
117
  ## 함정
116
118
 
117
119
  - 실패 시 글·사진·답장 대상을 지우지 않는다. 성공을 먼저 표시하고 지우면 재전송할 내용이 사라진다.
118
- - Enter 전송을 덧붙이지 않는다. IME 조합 중 Enter를 전송으로 가로채면 한글 마지막 글자가 빠진다.
120
+ - Enter는 기본 줄바꿈이다. 데스크톱 채팅에서 Enter 전송이 필요하면 [MessageComposer](../components/message-composer.md)의 `submitMode="send"`를 사용한다. Web은 Shift+Enter·IME 조합 중 Enter를 전송하지 않는다. 제품에서 별도 키 핸들러로 전송을 덧붙이면 이 보호를 우회해 한글 마지막 글자가 빠질 수 있다. Native는 별도로 선택하지 않으면 줄바꿈을 유지한다.
119
121
  - 스토리의 "다음 전송 실패시키기"·350ms 지연·예제 사진은 로컬 시연이다. 업로드·서버 저장·권한은 제품이 연결한다.
120
122
 
121
123
  2026-10-13 예제 검수: Web의 원형 전송 버튼이 잠기거나 없어질 때 초점이 body로 빠져나가던 경로를 `inputRef`로 보완했다. 전송 시작 때만 입력에 초점을 두므로 대기 중 사용자가 다른 곳으로 옮긴 초점을 완료 시 다시 가져오지 않는다. 실패 후 수정한 초안으로 재시도하며, 사진·답장 대상은 성공을 확인한 뒤에만 정리한다.
@@ -4,10 +4,12 @@
4
4
  - 상태: 배포
5
5
  - 지원: Web · Native
6
6
  - 적용: 구성 API 지침 참조
7
- - 검토일: 2026-10-06
7
+ - 검토일: 2026-10-15
8
8
  - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 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
  첫 기록을 단계별 작성하고 중단한 초안 이어가기 흐름이 필요할 때 쓴다. Steps의 상태·콜백을 제품 로직에 연결하며 새 데이터 엔진을 만들지 않는다.