@hjmds/design-contracts 1.17.2 → 1.19.0

package/docs/usage/compositions/stea-order-progress.md

@@ -84,6 +84,7 @@ Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter 16(폭 < 6
 | 완료 | 모든 단계 complete, 진행 문구 "모든 단계가 확정됐어요.", secondary 버튼 | 진행 문구가 읽힌다 |
 
 - 요청 중 중복 요청은 상태 로직에서 무시한다. 버튼 `loading`만으로는 키보드 반복 입력을 막지 못한다.
+- 예제 실패 스위치도 요청 중에는 잠그고 늦은 toggle callback을 reducer에서 무시한다. 응답을 기다리는 동안 스위치가 진행 중 요청의 결과를 뒤집던 실제 예제 검수에 따른 보완이다.
 - 문구 키는 상태별 상수로 둔다. 상태 이름으로 키를 조립하지 않는다.
 
 | 상태 | 진행 문구 키 | Notice 키 | 버튼 키 |

package/docs/usage/compositions/stea-otp-verify.md

@@ -21,7 +21,7 @@
 | `Card` | 제목("인증번호 확인")·설명을 가진 틀 | [Card](../components/card.md) |
 | `ContentTransition` | 입력 폼 ↔ 성공 결과 전환(기본 `fade`). 입력 중엔 같은 subtree를 유지 | [ContentTransition](../components/content-transition.md) |
 | `OtpField` | `length` 6 숫자 칸. 확인 중 `busy`, 잠김 `disabled`, 틀림·요청 실패 `error` | [OtpField](../components/otp-field.md) |
-| 재전송 안내 문구 | 다시 받은 뒤 "새 인증번호를 보냈어요…", 재전송 실패 문구(muted, live) | [Text](../components/text.md) |
+| 재전송 안내 문구 | 예제는 "예제 인증번호를 다시 받았어요. 246810을 입력해 주세요.", 제품은 실제 재전송 완료·실패 문구(muted, live) | [Text](../components/text.md) |
 | `Button` primary | 확인. 확인 중 `loading` | [Button](../components/button.md) |
 | `Button` ghost | 인증번호 다시 받기. 대기 시간 동안 `disabled`, 라벨이 남은 초를 보여 줌. 재전송 요청 중 `loading` | [Button](../components/button.md) |
 | `Result` `status="success"` | 성공 결과 + 행동 하나. Web은 `icon`을 비우면 CSS가 ✓를 그린다. Native는 기본 glyph가 없으니 `renderIcon`으로 제품 glyph를 넘긴다(비우면 빈 원) | [Result](../components/result.md) |
@@ -93,6 +93,7 @@ Native 화면(ScrollView keyboardShouldPersistTaps="handled", 위아래 spacing.
 | 성공 | `Result` success, 행동 하나(제품의 다음 단계, 예 `otp.continue`). 스토리의 "다른 번호로 다시 해 보기"는 데모 초기화용 | Web: Result(`tabIndex={-1}`)로 포커스 이동 |
 
 - 스토리의 정답 `246810`, 대기 10초(실서비스는 보통 30~60초), 지연 900ms는 데모 값이다. 시도 횟수·대기 시간·검증은 서버와 제품 소유다.
+- 예제는 실제 문자를 보내거나 이전 번호를 폐기하지 않는다. 같은 데모 번호를 사용하는 구현에 맞춰 안내하고, 서버의 재전송 성공으로 표현하지 않는다.
 - 문구 키는 상태별 상수로 둔다(아래 `otpErrorKey`). 상태 이름으로 키를 조립하면 상태 표와 키가 어긋난다.
 
 | 상태 | 문구 키 | 변수 |
@@ -199,8 +200,9 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 | --- | --- | --- |
 | 제출 | `<form onSubmit>` + `type="submit"` 버튼(Enter 제출) | `onComplete`로 6자리 도달 시 자동 제출 + 확인 버튼 |
 | 바깥 틀 | 제품 화면 레이아웃(문서 스크롤) | `ScrollView keyboardShouldPersistTaps="handled"` > `Container` |
-| 재전송 후 포커스 | 입력으로 `focus()` | 이동하지 않음(스토리) |
-| 성공 후 포커스 | `Result`(`tabIndex={-1}`)로 이동 | 이동하지 않음(스토리) |
+| 재전송 후 포커스 | 첫 번째·반복 재전송 모두 입력으로 `focus()` | 입력 ref의 `focus()` 호출 |
+| 성공 후 포커스 | 사라지는 폼에 초점이 있었으면 `Result`(`tabIndex={-1}`)로 이동. 사용자가 옮긴 외부 초점은 유지 | 결과 행동을 각각 탐색할 수 있게 유지하며 iOS 성공 안내·Android polite live region 연결 |
+| 성공 뒤 데모 초기화 | 새 입력으로 복귀 | 새 입력 ref의 `focus()` 호출 |
 | 성공 아이콘 | `icon`을 비우면 CSS가 ✓ | `renderIcon`으로 제품 glyph(비우면 빈 원) |
 | 상태 문구 | `role="status"` | `accessibilityLiveRegion="polite"` |
 | busy 표현 | read-only + `aria-busy` | `editable={false}` + `accessibilityState.busy` |

package/docs/usage/compositions/stea-pixel-empty.md

@@ -47,7 +47,7 @@ Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter 16(폭 < 6
 | --- | --- | --- | --- |
 | 바깥 틀 | Web: 제품 화면 레이아웃(문서 스크롤). Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다(Web 스토리는 Stack만 그린다). Native는 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
 | 빈 상태 | EmptyState `density="regular"` | 본문 가운데 | 위아래 Web `spacing.xxl` 32 / Native `spacing.xxxl` 40, 좌우 `spacing.xl` 24, 슬롯 사이 `spacing.xs` 8 |
-| 캐릭터 | Web `icon` / Native `illustration` | EmptyState 맨 위 | 96×96(12칸 × `spacing.xs` 8). Native는 `illustrationStyle`로 칸을 96에 맞춘다 |
+| 캐릭터 | Web `icon` / Native `illustration` | EmptyState 맨 위 | 96×96(12칸 × `spacing.xs` 8). Native도 그림 노드 자체의 96×96 크기를 사용한다 |
 | 시작 행동 | Button `primary` | EmptyState `action` | 높이 44, 하나만 |
 | 멈춤 제어 | Button `ghost` | EmptyState 아래, 꽉 찬 폭(`Stack` 기본 `align="stretch"`) | 묶음 사이 `spacing.md` 16 |
 | 상태 문구 | Text muted | 맨 아래. Web은 빈 `role="status"`를 늘 마운트, Native는 문구가 있을 때만 | `spacing.md` 16 |
@@ -109,7 +109,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 <ScrollView contentContainerStyle={{ paddingVertical: spacing.lg }}>
   <Container gutter={gutter}>
     <Stack gap="md">
-      <EmptyState illustration={<ProductMascot paused={paused} />} illustrationStyle={{ width: 96, height: 96 }}
+      <EmptyState illustration={<ProductMascot paused={paused} />}
         title={t("records.empty.title")} description={t("records.empty.description")}
         action={<Button loading={starting} onPress={startRecord}>{t("records.empty.start")}</Button>} />
       <Button tone="ghost" onPress={() => setPaused((v) => !v)}>
@@ -127,7 +127,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 
 | 항목 | Web | Native |
 | --- | --- | --- |
-| 그림 슬롯 | `icon` | `illustration` + `illustrationStyle`(기본 칸이 아이콘 크기 `glyph.lg`라 캐릭터가 넘친다) |
+| 그림 슬롯 | `icon` | `illustration`(최소 `glyph.lg` 크기만 보장하고 캐릭터 자체 크기를 존중한다) |
 | 세로 여백 | `.hjm-empty-state` `spacing.xxl` 32 | recipe `spacing.xxxl` 40 |
 | 일시정지 감지 | `document.hidden` | `AppState` |
 | 상태 문구 자리 | 빈 `role="status"`를 늘 마운트 | 문구가 있을 때만 마운트 |

package/docs/usage/compositions/time-selection.md

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-13
 - 근거: `showcase/web/src/patterns/TimeSelection.stories.tsx`, `showcase/native/src/TimeSelection.stories.tsx`, `showcase/native/src/pattern-status.tsx`, `showcase/shared/time-example.ts`, `src/foundations.ts`(`control`, `spacing`), `src/component-recipes.ts`(`stackRecipe`, `sectionRecipe`), `src/container.ts`
 - 스토리북: `배포/구성/선택과 필터/시간 선택`
 
@@ -30,7 +30,7 @@
 ## 배치
 
 ```text
-Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter 16(폭 < 600) · 20(폭 ≥ 600)
+Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter compact 16
 ┌ Section(스크롤과 함께 흐름) ───────────┐
 │ 제목 (Section title)                   │
 │ 설명 (muted)                           │  제목–설명 spacing.xxs 4
@@ -55,7 +55,7 @@ Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter 16(폭 < 6
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
-| 바깥 틀 | Web: 제품 화면 레이아웃(문서 스크롤). Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다(Web 스토리는 Section만 그린다). Native는 `ScrollView` 안 [Container](../components/container.md)에 둔다. Select는 키보드 대신 목록 표면(Web popover, Native modal sheet)을 열어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
+| 바깥 틀 | Web: 제품 화면 레이아웃(문서 스크롤). Native: `ScrollView` > `Container` | Web 스토리도 Container gutter="compact" 안에 Section을 둔다. Native는 `ScrollView` 안 [Container](../components/container.md)에 둔다. Select는 키보드 대신 목록 표면(Web popover, Native modal sheet)을 열어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, 양 Story의 Container gutter는 `compact` 16이며 폭에 따라 자동 변경되지 않음 |
 | 머리 | Section 제목·설명 | 흐름 맨 위, 스크롤과 함께 | 제목–설명 `spacing.xxs` 4, 머리–내용 `spacing.xs` 8 |
 | 입력 | Select 시 → 분 | 머리 아래, 시가 먼저 | 필드 `control.fieldHeight` 44, 사이 `spacing.md` 16 |
 | 상태 | 상태 문구 | 입력 바로 아래 | 위 `spacing.md` 16 |
@@ -162,8 +162,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 | --- | --- | --- |
 | 목록 표면 | 트리거에 붙은 listbox popover | modal sheet |
 | 필수 문구 | `emptySelectionLabel`(선택 해제 항목) | `dismissLabel`(시트 닫기) |
-| 상태 문구 낭독 | `role="status"` | `accessibilityLiveRegion`(Android), iOS는 `announceForAccessibility`로 보완(스토리 `PatternStatus`) |
-| 테마·글자 스토리 | 기본·어두운 테마·큰 글자(textScale 2) | 기본·어두운 테마·큰 글자(textScale 2) |
+| 상태 문구 낭독 | `role="status"` | 공개 StatusText(Android live region + iOS 변경 알림) |
 | 확정 Notice 발표 | 늘 live region | `announcement`를 지정해야 발표(기본 `none`) |
 | 바깥 틀 | 제품 화면 레이아웃(문서 스크롤) | `ScrollView` > `Container` |
 
@@ -172,3 +171,5 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 - 값을 바꾸면 이전 확정 결과(`result`)를 지운다. 남겨 두면 새로 고른 시각과 다른 확정 Notice가 보인다.
 - 스토리의 확정은 로컬 상태만 바꾼다. 서버 저장의 진행·실패·재시도 검증을 대신하지 않는다.
 - 2026-10-06 검수에서 예제도 Container·Section·Text와 Native 확정 Notice의 `announcement="polite"`를 사용하도록 맞췄다. 제목 의미와 iOS 알림을 개별 View/Text 스타일로 다시 만들지 않는다.
+
+2026-10-13 실제 독립 Story 검수: 한쪽 값만 선택한 상태는 확정하지 못하고, 자정 00:00도 유효하다. 선택 해제/변경은 이전 확인 결과를 지우며 다시 고르기는 두 값과 결과를 함께 비운다. 기존 지침의 반응형 gutter 설명은 실제 양 Story의 고정 compact 값과 달라 바로잡았다. 위 코드 골격의 반응형 gutter는 제품이 선택하는 별도 예시다.

package/docs/usage/compositions/upload-recovery.md

@@ -65,7 +65,7 @@ Button의 실행 콜백은 Web `onClick`, Native `onPress`로 연결한다. 위
 | 항목 | Web | Native |
 | --- | --- | --- |
 | 배치/테마 | Stack과 HjmProvider | Stack과 HjmNativeProvider |
-| 큰 글자·좁은 폭 | 줄바꿈·단일 내용 | 같은 순서, OS 화면 검증은 별도 |
+| 좁은 폭 | 줄바꿈·단일 내용 | 같은 순서, OS 화면 검증은 별도 |
 
 ### 예제의 제한과 초점 복구
 
@@ -78,3 +78,12 @@ Button의 실행 콜백은 Web `onClick`, Native `onPress`로 연결한다. 위
 Native onPick은 예제 후보를 반환하는 fixture다. Native 시스템 사진 선택기 검증으로 세지 않는다.
 서버 비전송 안내는 성공·거부 상태와 별도로 항상 표시한다. 실제 제품은 서버 확정·취소 시
 늦게 도착하는 응답·전송 ticket의 소유권을 제품 업로드 계층에 연결해야 한다.
+
+2026-10-13 실제 예제에서 중복 후보가 남은 슬롯을 차지하는 선택과 같은 렌더의 연속 드롭·선택이
+3개 제한을 넘는 경로를 재현했다. 양쪽 예제는 `showcase/shared/reference-adoption.ts`의
+`mergeUploadSelection`으로 현재 목록과 중복을 먼저 확인한 뒤 남은 개수를 판정한다. 개수 초과 후보만
+다시 판정하며 파일 형식·크기 거부는 유지한다. 예제 사진 추가도 같은 제한을 따른다.
+
+수동 응답 예제의 콜백은 해당 파일의 현재 상태 객체에 연결한다. 취소·재시도·제거 후 다시 선택하면
+이전 상태의 성공·실패 콜백을 무시한다. 다른 파일을 추가하는 동작은 진행 중 파일의 응답을 무효화하지 않는다.
+이는 예제 이벤트 수명 보호이며 실제 네트워크 요청 취소나 시스템 파일 선택기 검증을 뜻하지 않는다.

package/docs/usage/compositions/video-dialog.md

@@ -5,7 +5,7 @@
 - 지원: Web · Native
 - 적용: 1.14.0
 - 검토일: 2026-10-07
-- 근거: `showcase/web/src/patterns/video-dialog-preview.tsx`, `showcase/native/src/video-dialog-preview.tsx`
+- 근거: `showcase/web/src/patterns/video-dialog-preview.tsx`, `showcase/native/src/video-dialog-preview.tsx`·`video-dialog-host.ts`(Expo 로딩 경계)
 - 스토리북: `배포/구성/정보 표시/영상 미리보기`
 
 승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
@@ -49,17 +49,18 @@ Dialog: [제목                   닫기]
 1. 제품이 open과 입력 초안을 소유한다. 닫기 후 초안을 지우지 않는다.
 2. open일 때만 플레이어를 mount한다. 자동 재생하지 않고 사용자 행동으로 시작한다.
 3. 브라우저/Native 미디어 이벤트에서 재생·정지·실패를 읽는다. 요청 성공으로 재생을 추정하지 않는다.
-4. 실패 시 설명과 재시도를 유지한다. 재시도는 정상 source로 호스트를 새로 만들며 Web은 재생 버튼으로 초점을 옮긴다.
+4. 실패 시 설명과 재시도를 유지한다. Web에서 사라질 재생 컨트롤이 초점을 갖고 있으면 재시도로 옮기고, 닫기 버튼 등 다른 초점은 유지한다. 재시도는 정상 source로 호스트를 새로 만들며 Web은 새 재생 버튼으로 초점을 옮긴다.
 5. open=false 즉시 호스트를 unmount한다. 모달 퇴장 애니메이션이 끝날 때까지 기다리지 않는다.
 6. Web은 pause 후 src를 제거하고 load하여 자원을 해제한다. Native useVideoPlayer는 unmount 시 player를 release한다.
 7. 앱/문서가 비활성화되면 일시 정지한다. 복귀 시 자동 재생하지 않는다.
+8. Web `play()`가 준비 중이면 Button `loading`으로 같은 요청을 막으면서 키보드 초점을 유지한다. DOM `disabled`로 Enter 조작의 초점을 지우지 않는다. 재생 여부는 미디어 이벤트로 표시하고, 정지·오류·닫기 뒤 늦은 promise 결과는 반영하지 않는다.
 
 | 상태 | 모습 | 포커스·알림 |
 | --- | --- | --- |
 | 기본 | 열기 전 플레이어 없음, 메모 유지 | 열기 버튼 |
 | 진행 중 | 실제 이벤트에 따른 일시 정지와 상태 | 재생 상태 알림 |
 | 실패 | 설명·다시 시도, 원래 메모 유지 | 오류 알림, Web 재시도 후 재생 버튼 |
-| 호스트 없음 | Native 지원 모듈 누락 안내, 닫기 가능 | 제목과 안내 |
+| 호스트 없음 | Native 지원 모듈 누락 안내와 동등한 텍스트 설명, 닫기 가능 | 제목과 안내 |
 | 닫힘 | 영상 호스트 제거 | 열기 버튼으로 초점 복귀 |
 
 ## 코드 골격
@@ -98,3 +99,9 @@ Web은 HTML video controls와 playsInline을 사용한다. Native 예제는 Expo
 | 정리 | pause·src 제거·load | hook 소유 player 해제 |
 | 지원 누락 | 미디어 오류와 재시도 | 모듈 누락 안내 |
 | 설명 | 화면의 동등한 텍스트 | 화면의 동등한 텍스트 |
+
+2026-10-13 예제 검수에서 Web의 연속 재생 요청과 오류 시 초점 유실, Native 모듈 누락 시 텍스트 설명 누락을
+재현해 수정했다. Web은 Chromium·WebKit·Firefox에서 제어한 HTML 미디어 이벤트·promise·키보드 초점
+8개 행동과, 미디어 모형을 제거한 번들 MP4의 메타데이터·실제 재생 시간 증가·일시 정지·닫기 시 자원 해제를
+확인했다. Native 4개 행동은 Expo 호스트 모형의 이벤트·해제 연결을 확인한다. Native 기기의 코덱 재생,
+OS 미디어 동작, 네트워크 복구는 미실행이다.

package/docs/usage/compositions/web-additions.md

@@ -74,13 +74,13 @@ Native 화면에서 같은 일이 필요하면 이 구성을 옮기지 않는다
 2. HEX 입력은 Enter·blur에 확정되고 Escape는 마지막 `value`로 되돌린다.
 3. 문서 표시: 워터마크 위에서 본문을 선택하고 버튼을 누른다. 워터마크는 상태가 없다.
 4. 고정 실행 영역: 스크롤하면 Affix가 상단에 붙고 `onChange(true)`, 다시 올리면 `onChange(false)`가 온다.
-5. 저장: 버튼이 `loading`이 되고, 실패하면 Notice danger가 나오며 버튼을 다시 누를 수 있다. 성공하면 Notice를 내린다.
+5. 현재 예제의 저장은 동기 메모리 확정이다. 성공 뒤 같은 버튼을 다시 눌러 저장이 해제되지 않으며, 문서 표시·고정 실행 영역의 저장 상태는 독립적이다. 제품 비동기 저장에 연결할 때는 `loading`과 실패 Notice를 공급하고 성공하면 Notice를 내린다.
 
 | 상태 | 모습 | 포커스·알림 |
 | --- | --- | --- |
-| 기본 | ColorPicker는 `value` 색, 워터마크 타일, Affix는 일반 위치(`data-affixed` 없음) | — |
-| 진행 중 | 저장 버튼 `loading`(Watermark·Affix 안). ColorPicker는 요청이 없다 | 포커스는 버튼에 남는다 |
-| 실패 | 저장 실패 Notice danger, 버튼 다시 활성. Affix 고정 중이면 버튼은 그대로 위에 붙어 있다 | Notice `danger`는 `role="alert"` |
+| 기본 | ColorPicker는 `value` 색, 워터마크 타일, Affix는 일반 위치(`data-affixed="false"`) | — |
+| 진행 중(제품 연결) | 저장 버튼 `loading`(Watermark·Affix 안). ColorPicker는 요청이 없다 | 포커스는 버튼에 남는다 |
+| 실패(제품 연결) | 저장 실패 Notice danger, 버튼 다시 활성. Affix 고정 중이면 버튼은 그대로 위에 붙어 있다 | Notice `danger`는 `role="alert"` |
 | HEX 잘못 입력 | `labels.invalid` 문구가 오류로 보이고 외부 값은 그대로 | 오류 문구는 alert |
 | 프리셋 선택됨 | 선택한 견본 테두리가 primary 색, `aria-pressed="true"` | — |
 | `disabled` | fieldset 전체 흐림(opacity 0.5), 입력·프리셋 막힘 | 포커스 불가 |
@@ -143,4 +143,4 @@ import { Stack, Text } from "@hjmds/react/layout";
 - 세 컴포넌트 모두 root barrel에 없다. granular subpath(`@hjmds/react/color-picker` 등)로만 import한다.
 - Affix `offset`이 음수이거나 유한하지 않으면 `TypeError`를 던진다.
 - Watermark 범위(`tileWidth` ≥ 80, `tileHeight` ≥ 60, `rotate` -90~90, `opacity` 0~1, 줄 1~3개·각 120자 이하)를 벗어나면 `TypeError`다.
-- 현재 스토리의 저장은 라벨만 "저장됨"으로 바꾸는 토글이다. 진행 중·실패 경로가 없다.
+- 현재 스토리의 저장은 메모리 상태만 확정하며 실제 파일·서버 저장이나 진행 중·실패 경로는 없다. 성공 뒤 `aria-disabled`로 중복 실행을 막아 키보드 초점과 sticky 안의 버튼 노드를 유지한다. 제품의 저장·실패 경로는 위 코드 골격처럼 제품이 공급한다.

package/docs/usage/compositions/web-navigation.md

@@ -126,7 +126,7 @@ import { Section, Stack, Text } from "@hjmds/react/layout";
 // 없음. Breadcrumb·Pagination은 Web 전용이다.
 ```
 
-라우팅(스토리는 데모용 hash fragment), 레코드 125개, pageSize 5는 예시다. 경로·페이지 크기·URL 동기화는 제품 소유다.
+라우팅(스토리는 데모용 hash fragment), 레코드 125개, pageSize 5는 예시다. 데모는 처음에 모음 1페이지를 보여 주며, 상위 경로를 거친 뒤 브라우저 뒤로 가기로 최초 URL에 돌아와도 같은 초기 모음을 복구한다. 각 인스턴스의 fragment만 처리하므로 다른 미리보기의 이동은 현재 목록을 바꾸지 않는다. 페이지 번호는 메모리 상태이며 URL 이력에 추가하지 않는다. 경로·페이지 크기·URL 동기화는 제품 소유다.
 
 ## 플랫폼 차이
 

package/docs/usage/screens/common-chat.md

@@ -3,8 +3,8 @@
 - 단계: 화면
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 미게시(1.12.1 이후)
-- 검토일: 2026-10-06
+- 적용: 구성 API 지침 참조
+- 검토일: 2026-10-13
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/공통 화면/채팅`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/소통/채팅`
 
@@ -38,9 +38,21 @@ host: 남은 높이·safe area·키보드
 | --- | --- | --- |
 | 기본 | 헤더 → 메시지 타임라인 → 작성창 | 각 공개 콜백을 제품 상태에 연결 |
 | 로딩 | 최초 조회는 본문 상태, 저장은 해당 행동 pending | 중복 제출 차단; 성공을 먼저 표시하지 않음 |
-| 빈 | 실제 조회 0건 또는 아직 작성하지 않은 상태 안내 | 시작·조건 해제 등 맥락에 맞는 대안 |
+| 빈 | 타임라인 중앙에 첫 대화 안내, composer 유지 | 바로 첫 메시지 작성 |
 | 오류 | 전송 실패는 초안과 타임라인을 유지하고 notice로 안내 | 실패 원인과 재시도 경로 제공 |
 
+
+### 첫 메시지부터 실패 복구까지
+
+2026-10-13 전수 점검에서 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+
+| 상황 | 연결 | 유지·복구 |
+| --- | --- | --- |
+| 첫 메시지 | empty + composer | 미게시(1.18.0 이후): 첫 입력을 허용한다. 로딩·오류·권한 제한은 composer를 숨긴다 |
+| 전송 중 | ready 또는 empty 유지, composer.pending | 입력 snapshot과 요청 식별자를 제품이 보관한다 |
+| 전송 실패 | 같은 초안·첨부·답장 대상, notice | 동일 메시지 재시도와 새 메시지 전송을 구분한다 |
+| 전송 확정 | receipt의 메시지 id로 목록 반영 | 확정된 초안만 비우며 사용자가 그 뒤 쓴 내용은 지우지 않는다 |
+
 ## 사용하는 지침
 
 | 지침 | 쓰는 곳 |
@@ -58,7 +70,7 @@ import { ChatMessage, ChatScreen, MessageComposer } from "@hjmds/react/screens";
 <ChatScreen
   title={t("chat.title")}
   scroll="screen" // 짧은 기록. 긴 기록은 제품 가상 목록 + 기본 scroll="content"
-  state={isPending ? { kind: "loading", title: t("chat.loading") } : { kind: "ready" }}
+  state={isPending ? { kind: "loading", title: t("chat.loading") } : messages.length ? { kind: "ready" } : { kind: "empty", title: t("chat.empty") }}
   composer={<MessageComposer value={draft} label={t("chat.input")} sendLabel={t("chat.send")}
     pending={sending} onValueChange={setDraft} onSend={send} />}
 >
@@ -79,7 +91,7 @@ import { Text } from "@hjmds/react-native/primitives";
 
 <ChatScreen
   title={t("chat.title")}
-  state={isPending ? { kind: "loading", title: t("chat.loading") } : { kind: "ready" }}
+  state={isPending ? { kind: "loading", title: t("chat.loading") } : messages.length ? { kind: "ready" } : { kind: "empty", title: t("chat.empty") }}
   composer={<MessageComposer value={draft} label={t("chat.input")} sendLabel={t("chat.send")}
     pending={sending} onValueChange={setDraft} onSend={send} />}
 >
@@ -103,11 +115,10 @@ HJM `Timeline`(이벤트 연표)과 `VirtualList`(고정 `rowHeight`)는 높이
 `deliveryLabel`은 선택 prop이라 값이 없을 때 `undefined`를 넘기지 않고 조건부 spread로 뺀다(`exactOptionalPropertyTypes`).
 콜백·데이터·지역화 함수는 제품에서 공급한다.
 
-## 큰 글자·다크·좁은 폭
+## 다크·좁은 폭
 
 | 조건 | 바뀌는 것 |
 | --- | --- |
-| 큰 글자 | 2배 글자에서 제목·행은 내용 높이로 증가. footer·닫기·입력 필드가 겹치지 않는지 확인 |
 | 다크 | semantic 색으로 내용과 표면을 함께 전환; 예제 브랜드 색을 제품 기본값으로 복사하지 않음 |
 | 좁은 폭 | 320px부터 한 열로 읽기 순서 유지. 가상화 본문은 scroll=content, 중첩 스크롤 금지 |
 | 키보드 | Native host가 safe area와 키보드를 한 번 처리; Web은 포커스된 입력과 footer 가림 확인 |
@@ -121,7 +132,9 @@ HJM `Timeline`(이벤트 연표)과 `VirtualList`(고정 `rowHeight`)는 높이
 
 ## 함정
 
+- 대화 정보에 들어갔다 돌아와도 입력과 답장 대상을 유지한다. 원문 이동은 현재 메시지 목록에서 대상에 스크롤하고, Web은 원문 host로 초점도 옮긴다. 같은 원문을 다시 누르면 강조 시간을 다시 시작하며 언마운트 시 타이머를 정리한다.
+- 전송 실패 예약은 읽음 저장 실패 예약과 구분해 다른 화면의 행동을 실패시키지 않는다.
 - 전송 실패는 초안과 타임라인을 유지하고 notice로 안내.
-- Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크·큰 글자와 실패/복구를 각각 확인한다.
+- Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크와 실패/복구를 각각 확인한다.
 - 긴 대화를 `scroll="screen"` + map으로 그리지 않는다. Native는 `FlatList`(기본 `scroll="content"`, 답장 원문 이동은 `scrollToIndex`), Web은 가변 높이 가상 목록이다. Web 예제의 `scroll="screen"`은 짧은 고정 기록이라서다.
 - 실패 복구 스토리(`실패와 초안 복구`)는 다음 전송 실패를 예약하는 데모 도구로 연다.

package/docs/usage/screens/common-comments.md

@@ -3,7 +3,7 @@
 - 단계: 화면
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 미게시(1.12.1 이후)
+- 적용: 구성 API 지침 참조
 - 검토일: 2026-10-07
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/공통 화면/댓글`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/소통/댓글`
@@ -48,6 +48,18 @@ host: 남은 높이·safe area·키보드
 | 빈 | 실제 조회 0건 또는 아직 작성하지 않은 상태 안내 | 시작·조건 해제 등 맥락에 맞는 대안 |
 | 오류 | 빈 댓글에서도 작성창 유지; 실패한 전송은 초안 유지 | 실패 원인과 재시도 경로 제공 |
 
+
+### 댓글 목록과 입력의 독립 복구
+
+2026-10-13 전수 점검에서 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+
+| 상황 | 연결 | 유지·복구 |
+| --- | --- | --- |
+| 답글 접기·펼치기 | expandedIds와 원문 데이터 분리 | 서버 순서를 보존하고 접어도 답글 초안을 지우지 않는다 |
+| 목록 추가 조회 실패 | 기존 items + threadFooter 재시도 | 이미 읽던 댓글과 스크롤을 유지한다 |
+| 첫 댓글 | empty + composer | 최초 로딩 실패와 실제 0건을 구분한다 |
+| 전송 실패 | ready + notice | 초안·답글 대상을 유지한다. 항목별 좋아요 실패는 해당 항목만 복구한다 |
+
 ## 사용하는 지침
 
 | 지침 | 쓰는 곳 |

package/docs/usage/screens/common-inbox.md

@@ -3,8 +3,8 @@
 - 단계: 화면
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 미게시(1.12.1 이후)
-- 검토일: 2026-10-06
+- 적용: 구성 API 지침 참조
+- 검토일: 2026-10-13
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/공통 화면/알림함`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/소통/알림함`
 
@@ -41,6 +41,18 @@ host: 남은 높이·safe area·키보드
 | 빈 | 실제 조회 0건 또는 아직 작성하지 않은 상태 안내 | 시작·조건 해제 등 맥락에 맞는 대안 |
 | 오류 | 읽음 저장 실패와 초기 조회 실패를 분리 | 실패 원인과 재시도 경로 제공 |
 
+
+### 조회와 읽음 저장 분리
+
+2026-10-13 전수 점검에서 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+
+| 상황 | 연결 | 유지·복구 |
+| --- | --- | --- |
+| 전체 0건 | empty | 필터는 유지하고 불필요한 다시 시도 버튼을 만들지 않는다 |
+| 안 읽음 0건 | empty + 전체 보기 stateAction | 전체 알림 삭제나 데이터 없음으로 오인하지 않는다 |
+| 모두 읽음 진행 | actions의 버튼 pending | 확정 전 읽음 상태를 바꾸면 실패 시 요청에 포함된 항목만 되돌린다 |
+| 알림 이동 | 제품 라우터에서 목적지 확인 | 읽음 저장 실패는 notice로 알리고 행 이동의 실패와 분리한다 |
+
 ## 사용하는 지침
 
 | 지침 | 쓰는 곳 |
@@ -87,11 +99,10 @@ import { NotificationInboxScreen, NotificationItem } from "@hjmds/react-native/s
 
 콜백·데이터·지역화 함수는 제품에서 공급한다. 필수 props와 플랫폼별 차이는 위 API 지침에서 확인한다.
 
-## 큰 글자·다크·좁은 폭
+## 다크·좁은 폭
 
 | 조건 | 바뀌는 것 |
 | --- | --- |
-| 큰 글자 | 2배 글자에서 제목·행은 내용 높이로 증가. footer·닫기·입력 필드가 겹치지 않는지 확인 |
 | 다크 | semantic 색으로 내용과 표면을 함께 전환; 예제 브랜드 색을 제품 기본값으로 복사하지 않음 |
 | 좁은 폭 | 320px부터 한 열로 읽기 순서 유지. 가상화 본문은 scroll=content, 중첩 스크롤 금지 |
 | 키보드 | Native host가 safe area와 키보드를 한 번 처리; Web은 포커스된 입력과 footer 가림 확인 |
@@ -105,6 +116,8 @@ import { NotificationInboxScreen, NotificationItem } from "@hjmds/react-native/s
 
 ## 함정
 
-- 읽음 저장 실패와 초기 조회 실패를 분리.
+- 예제의 읽지 않음 필터가 0건이면 빈 상태를 표시하고 빈 날짜 그룹은 숨긴다. Web 상세 복귀는 남아 있는 원래 알림, 읽음 처리로 행이 사라졌으면 선택한 필터로 초점을 돌린다.
+- 예제에 제공된 대화는 서연 대화뿐이므로 서연 알림 상세에서만 대화 이어가기를 제공한다. 다른 사람·공지 상세를 같은 대화로 연결하지 않는다. 제품은 실제 알림의 대상 id로 라우팅한다.
+- 읽음 저장 실패와 초기 조회 실패를 분리한다. 읽음 오류와 실패 예약은 알림 행동에만 연결하고, 대화로 이동해도 메시지 전송 오류로 표시하지 않는다.
 - 읽음 저장 실패는 본문을 교체하지 않고 `notice`에 한 줄로 알리며 알림은 읽지 않음으로 남는다(스토리 `읽음 저장 실패와 복구`). 묶음 제목(오늘·이번 주)은 Heading `level5`다.
-- Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크·큰 글자와 실패/복구를 각각 확인한다.
+- Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크와 실패/복구를 각각 확인한다.

package/docs/usage/screens/common-login.md

@@ -3,8 +3,8 @@
 - 단계: 화면
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 미게시(1.12.1 이후)
-- 검토일: 2026-10-06
+- 적용: 구성 API 지침 참조
+- 검토일: 2026-10-13
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/공통 화면/로그인`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/계정/로그인`
 
@@ -23,7 +23,7 @@ host: 남은 높이·safe area·키보드
 | --- | --- | --- | --- |
 | 바깥 틀 | AuthScreenLayout | route 본문 | [API 배치 규칙](../components/auth-screen-layout.md#배치), host 남은 높이 |
 | 내용 | 공개 슬롯 | 히어로 → 제공자 카드 → 하단 동의 | 화면 recipe의 sectionGap·itemGap; 슬롯 안은 각 지침 토큰 |
-| 상태 | state 또는 해당 API 상태 | 본문 자리·비차단 notice | 입력 중 실패는 본문 높이와 초안을 유지 |
+| 상태 | pendingLabel 또는 main 안 Notice | 제공자 카드 내부 | 카드 크기를 유지하고 동의 고지를 남긴다 |
 
 ## 버튼과 행동 위치
 
@@ -41,6 +41,18 @@ host: 남은 높이·safe area·키보드
 | 빈 | — (로그인 화면에는 빈 상태가 없다) | — |
 | 오류 | `pendingLabel`을 지워 버튼을 복원하고 카드 안 버튼 위에 Notice `danger` 한 줄(기술 오류 원문 금지) | 같은 제공자 버튼으로 다시 시도 |
 
+
+### 제공자 목록과 로그인 요청 분리
+
+2026-10-13 전수 점검에서 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+
+| 상황 | 연결 | 유지·복구 |
+| --- | --- | --- |
+| 목록 조회 중 | 제품이 main 영역 상태 제공 | AuthScreenLayout에는 ScreenLayout.state prop이 없다 |
+| 사용자 취소 | pendingLabel 제거 | 실패로 알리지 않고 제공자 버튼을 복원한다 |
+| 제공자 실패 | main 안 Notice + 같은 버튼 | 기술 오류 원문 대신 지역화된 안내; 동의 링크 유지 |
+| 버튼 목록 변경 | 동일 mainCard 안에서 갱신 | 진행 중 버튼을 제거해 카드 높이를 줄이지 않는다 |
+
 ## 사용하는 지침
 
 | 지침 | 쓰는 곳 |
@@ -82,17 +94,17 @@ import { AuthScreenLayout } from "@hjmds/react-native/auth-screen";
 
 콜백·데이터·지역화 함수는 제품에서 공급한다. 필수 props와 플랫폼별 차이는 위 API 지침에서 확인한다.
 
-## 큰 글자·다크·좁은 폭
+## 다크·좁은 폭
 
 | 조건 | 바뀌는 것 |
 | --- | --- |
-| 큰 글자 | 2배 글자에서 제목·행은 내용 높이로 증가. footer·닫기·입력 필드가 겹치지 않는지 확인 |
 | 다크 | semantic 색으로 내용과 표면을 함께 전환; 예제 브랜드 색을 제품 기본값으로 복사하지 않음 |
 | 좁은 폭 | 320px부터 한 열로 읽기 순서 유지. 가상화 본문은 scroll=content, 중첩 스크롤 금지 |
 | 키보드 | Native host가 safe area와 키보드를 한 번 처리; Web은 포커스된 입력과 footer 가림 확인 |
 
 ## 함정
 
+- 예제는 로그인 시도마다 작업 식별자를 두고 제공자 중복 실행을 차단한다. 취소·언마운트 후 늦게 도착한 타이머는 홈이나 오류를 열지 않는다. 취소 뒤 새 시도는 별개의 작업이다. 성공 뒤 홈에서 대화·알림으로 이동할 때 로그인 예제의 초기 오류·진행 상태를 넘기지 않는다. 실제 OAuth 취소를 검증한 것은 아니다.
 - 실패하면 버튼을 복원; 카드 크기 유지와 중복 요청 차단.
-- 스토리는 기본·어두운 테마·큰 글자, `로그인 중`, `로그인 실패와 다시 시도`(첫 시도 실패 → 다시 누르면 성공)다. 빈 화면·로그인 필요 같은 본문 상태는 이 화면에 해당하지 않아 2026-10-06 스토리에서 뺐다.
-- Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크·큰 글자와 실패/복구를 각각 확인한다.
+- 스토리는 기본·어두운 테마, `로그인 중`, `로그인 실패와 다시 시도`(첫 시도 실패 → 다시 누르면 성공)다. 빈 화면·로그인 필요 같은 본문 상태는 이 화면에 해당하지 않아 2026-10-06 스토리에서 뺐다.
+- Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크와 실패/복구를 각각 확인한다.

package/docs/usage/screens/common-profile.md

@@ -3,8 +3,8 @@
 - 단계: 화면
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 미게시(1.12.1 이후)
-- 검토일: 2026-10-06
+- 적용: 구성 API 지침 참조
+- 검토일: 2026-10-13
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screen-flows.tsx`(`ProfileScreen`·`EditorScreen`), 예제 `showcase/*/screen-flow-previews.tsx`(`AccountFlowPreview`)·`saved-profile-previews.tsx`(`ProfileEditFields`), 기본 얼굴 `showcase/web/src/patterns/ProfileStudio.previews.tsx`·`showcase/native/src/profile-face-preview.tsx`·`showcase/shared/profile-studio.ts`. 2026-10-06 사용자 승인으로 실험 `공통 화면/프로필`을 배포하면서 같은 프로필 수정을 직접 조립으로 보이던 배포 `화면/프로필 편집`과 합쳤다(API 기반 우선, Web id `patterns-profile-studio` 보존, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/계정/프로필`
 
@@ -101,6 +101,18 @@
 | 실패와 복구 | `실패와 복구`: 다음 저장 실패를 예약한 뒤 저장 → 실패 문구, 초안 유지 → 다시 저장 | 같은 저장 행동 |
 | 로그아웃 확인 | AlertDialog: 제목·설명·[취소][로그아웃] | 확인 뒤 제품이 세션을 끝낸다 |
 
+
+### 프로필과 게시물 상태 분리
+
+2026-10-13 전수 점검에서 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+
+| 상황 | 연결 | 유지·복구 |
+| --- | --- | --- |
+| 프로필 조회 전 | 지역화된 기본 title + loading | user가 없을 때 handle·summary를 평가하지 않는다 |
+| 게시물 0개 | 프로필 ready + 게시물 영역만 empty | 프로필과 수정 행동은 계속 보인다 |
+| 프로필 저장 실패 | EditorScreen ready + notice | 보기용 원본과 편집용 초안을 모두 보존한다 |
+| 계정 변경·로그아웃 | 제품 세션과 데이터 초기화 | 이전 계정의 늦은 응답이나 draft를 다음 계정에 재사용하지 않는다 |
+
 ## 사용하는 지침
 
 | 지침 | 쓰는 곳 |
@@ -145,9 +157,9 @@ editing ? <EditorScreen title={t("profile.edit")} submitPlacement="footer" dirty
       {...(!draft.name.trim() ? { error: t("profile.nameRequired") } : {})} />
   </Stack>
 </EditorScreen> : <ProfileScreen
-  title={user.handle}
+  title={user?.handle ?? t("profile.title")}
   actions={<IconButton label={t("profile.accountMenu")} tone="ghost" onClick={openAccountMenu}>{menuIcon}</IconButton>}
-  summary={<ProfileSummary user={user} />}
+  summary={user ? <ProfileSummary user={user} /> : null}
   edit={{ label: t("profile.edit"), onAction: openEditor }}
   state={user ? { kind: "ready" } : { kind: "loading", title: t("profile.loading") }}
 >
@@ -181,9 +193,9 @@ editing ? <EditorScreen title={t("profile.edit")} submitPlacement="footer" dirty
       {...(!draft.name.trim() ? { error: t("profile.nameRequired") } : {})} />
   </Stack>
 </EditorScreen> : <ProfileScreen
-  title={user.handle}
+  title={user?.handle ?? t("profile.title")}
   actions={<IconButton label={t("profile.accountMenu")} tone="ghost" onPress={openAccountMenu}>{menuIcon}</IconButton>}
-  summary={<ProfileSummary user={user} />}
+  summary={user ? <ProfileSummary user={user} /> : null}
   edit={{ label: t("profile.edit"), onAction: openEditor }}
   state={user ? { kind: "ready" } : { kind: "loading", title: t("profile.loading") }}
 >
@@ -194,11 +206,10 @@ editing ? <EditorScreen title={t("profile.edit")} submitPlacement="footer" dirty
 `ProfileSummary`·`MyPostsSection`·`faces`·`openAccountMenu`(계정 Sheet와 로그아웃 AlertDialog)는 제품이 공급한다.
 `save`가 실패하면 `editing`을 유지하고 초안을 지우지 않는다.
 
-## 큰 글자·다크·좁은 폭
+## 다크·좁은 폭
 
 | 조건 | 바뀌는 것 |
 | --- | --- |
-| 큰 글자 | 요약의 수치 줄과 얼굴 줄이 감긴다. 수정 화면 footer는 고정이라 필드만 스크롤된다. 제목 열이 모자라면 계정 메뉴가 다음 줄로 내려간다 |
 | 다크 | semantic 색으로 내용과 표면을 함께 전환한다. Blobatar 얼굴은 seed가 정하고 테마와 무관하다 |
 | 좁은 폭 | 320부터 한 열, 게시물 격자는 3열 그대로 칸이 작아진다 |
 | 키보드 | 수정 화면에서 Native host가 safe area와 키보드를 한 번 처리한다. Web은 포커스된 필드가 footer에 가리지 않는지 확인 |
@@ -218,4 +229,6 @@ editing ? <EditorScreen title={t("profile.edit")} submitPlacement="footer" dirty
 - ProfileScreen에는 footer가 없다. 로그아웃·탈퇴를 footer에 두려 하지 말고 계정 메뉴(Sheet) 또는 본문 끝 `accountActions`에 둔다.
 - 현재 `기본 얼굴 고르기` 스토리는 ProfileScreen·EditorScreen이 아닌 옛 직접 조립 화면이다. `hjm-profile-studio*` 클래스는 공개 스타일이 아니므로 제품에서 가져다 쓰지 않는다. 제품은 위 코드처럼 수정 화면 안에 얼굴 줄을 둔다.
 - `createBlobatarFallback`은 seed가 바뀔 때만 다시 만들도록 `useMemo`로 묶는다.
-- Storybook은 실제 서버·세션·라우터 연동 증거가 아니다. 기본·어두운 테마·큰 글자와 실패와 복구를 각각 확인한다.
+- Storybook은 실제 서버·세션·라우터 연동 증거가 아니다. 기본·어두운 테마와 실패와 복구를 각각 확인한다.
+
+2026-10-13 실제 계정 예제 검수: 실패한 프로필 초안은 유지하고 성공 뒤에만 요약을 갱신한다. 계정 Sheet와 로그아웃 AlertDialog의 returnFocusRef는 계정 메뉴 행동을 가리킨다. 로그아웃을 확정하면 열림 상태도 함께 정리하므로 예제를 다시 열 때 확인창이 되살아나지 않는다. 이는 로컬 예제 상태이며 실제 세션 종료·Native OS 초점/발표 검증과 구분한다.

package/docs/usage/screens/common-saved.md

@@ -3,8 +3,8 @@
 - 단계: 화면
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 미게시(1.12.1 이후)
-- 검토일: 2026-10-06
+- 적용: 구성 API 지침 참조
+- 검토일: 2026-10-13
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/공통 화면/저장한 항목`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/콘텐츠/저장한 항목`
 
@@ -45,6 +45,18 @@ host: 남은 높이·safe area·키보드
 | 빈 | 실제 조회 0건 또는 아직 작성하지 않은 상태 안내 | 시작·조건 해제 등 맥락에 맞는 대안 |
 | 오류 | 목록 비어 있음과 조회 실패를 구분하고 재시도 제공 | 실패 원인과 재시도 경로 제공 |
 
+
+### 저장 해제와 목록 복귀
+
+2026-10-13 전수 점검에서 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+
+| 상황 | 연결 | 유지·복구 |
+| --- | --- | --- |
+| collectionId 없음 | 컬렉션 개요 | null의 전체 게시물 보기와 구분한다 |
+| 컬렉션 0개·필터 0건 | 원인별 empty | 컬렉션 만들기와 조건 해제를 다른 행동으로 연결한다 |
+| 상세 저장 해제 | 제품이 선택 id를 정리 | 상세를 닫고 같은 컬렉션·검색어로 복귀한다 |
+| 실행 취소 | 서버 복구 성공 후 항목 복원 | 실패하면 성공 문구를 내지 않고 같은 범위 재시도를 제공한다 |
+
 ## 사용하는 지침
 
 | 지침 | 쓰는 곳 |
@@ -125,3 +137,5 @@ import { SavedItemsScreen } from "@hjmds/react-native/saved-items";
 - Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크·큰 글자와 실패/복구를 각각 확인한다.
 
 - 새 컬렉션은 Sheet footer에 만들기 하나, 본문은 스크롤한다. Native는 `scrollable keyboardAvoidance`를 사용하고 사진 선택 Button은 `growWithContent`로 이미지 높이를 보존한다. 고정 44 높이에 사진을 넣으면 행이 겹친다(2026-10-06 시뮬레이터 재현).
+
+미게시(1.18.0 이후): 선택한 컬렉션 또는 전체 게시물이 0개면 SavedItemsScreen이 목록 pane의 empty 상태를 사용해 남은 본문 중앙에 안내한다. 제품의 loading/error/restricted 상태는 우선하며, 컬렉션 개요의 만들기 행동은 유지한다.

package/docs/usage/screens/common-search.md

@@ -3,8 +3,8 @@
 - 단계: 화면
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 미게시(1.12.1 이후)
-- 검토일: 2026-10-06
+- 적용: 구성 API 지침 참조
+- 검토일: 2026-10-13
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screen-flows.tsx`(`SearchScreen` 두 단계 검색 prop, 2026-10-06 사용자 위임 결정으로 미리보기 로직을 공개 API로 올림), 예제 `showcase/*/search-discovery-preview.tsx`·`showcase/shared/search-discovery.ts`. 2026-10-06 사용자 요청("실험에 있는 검색화면 UI도 개편해. 검색과 필터 있는 앱 서비스 따라해.")에 따라 Material 3 Search·Apple HIG search fields·Baymard·NN/g·eBay Playbook 필터 패턴과 국내 커머스·생활 서비스 모바일 웹의 **구조·상호작용만** 조사해 다시 설계했다(브랜드 색·로고·문구·자산은 가져오지 않았다). 2026-10-06 사용자 승인으로 실험 `공통 화면/검색`을 배포하면서 같은 일을 직접 조립하던 배포 `화면/검색`(내 기록 검색)을 대체했다(Web id `patterns-search` 보존, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/검색/검색 결과와 필터`
 
@@ -111,6 +111,18 @@ Native · Web < 960: 아래 시트(size large)        Web ≥ 960(expanded): 옆
 | 실패와 복구 | `실패와 복구` 스토리: 다음 검색 실패를 예약한 뒤 검색하면 오류 행이 되고 `다시 시도`로 같은 검색어·조건을 다시 조회 | 검색어·조건·정렬은 그대로 |
 | 로그인 필요 | `state={{ kind: "restricted" }}`로 본문 교체 | `stateAction` 로그인 |
 
+
+### 제안·확정 결과·필터 개수의 요청 경계
+
+2026-10-13 전수 점검에서 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+
+| 상황 | 연결 | 유지·복구 |
+| --- | --- | --- |
+| 제안 조회 | onSearch(value, signal) | 중단된 응답은 무시하고 최근 검색에는 쓰지 않는다 |
+| 검색 확정 | onSubmit + committedQuery | 검색어·필터·정렬을 요청 키로 묶고 최신 결과만 반영한다 |
+| 재조회 실패 | 기존 결과 + resultSummary.notice | count를 0으로 바꿔 실제 0건처럼 보이지 않게 한다 |
+| 필터 초안 개수 조회 | count(draft)=null | 아직 모르는 개수를 0으로 표시하지 않는다. 닫기는 적용값을 바꾸지 않는다 |
+
 ## 사용하는 지침
 
 | 지침 | 쓰는 곳 |
@@ -247,8 +259,8 @@ import { SearchScreen } from "@hjmds/react-native/screen-flows";
 | 다크 | semantic token만 쓰므로 따로 처리하지 않는다. 일치 강조는 색이 아니라 굵기라 다크·색각 차이에서도 남는다. 예제 색을 제품 기본값으로 복사하지 않는다 |
 | 좁은 폭 | 320에서 칩 줄은 화면 끝까지 스크롤, 적용 조건 칩은 줄바꿈, 시트는 아래 전폭 |
 | 넓은 폭(Web ≥ 960) | 한 열(최대 720) 유지, 필터 시트는 `placement="end"` 옆 시트로 결과를 가리지 않는다. 상시 왼쪽 필터 패널은 ScreenLayout 폭 계약 밖이라 두지 않는다 |
-| 키보드 | Native 본문 ScrollView가 `keyboardShouldPersistTaps="handled"`라 키보드가 떠 있어도 제안 행이 한 번에 눌린다. 검색 키뿐 아니라 제안·최근·추천을 골라 확정해도 키보드가 닫힌다(Native `Keyboard.dismiss()`, Web은 결과 영역으로 포커스, 미게시(1.13.1 이후)) |
-| 큰 글자 · 칩 줄 안 pills | 칩 줄에 SegmentedControl `presentation="pills"`를 넣어도 세로로 쌓이지 않고 한 줄 가로 스크롤로 남는다(미게시(1.13.1 이후). 1.13.0 이하는 약 440pt 기둥이 됐다). 칩 높이는 라벨에 맞춰 늘어난다(Native Chip `minHeight`) |
+| 키보드 | Native 본문 ScrollView가 `keyboardShouldPersistTaps="handled"`라 키보드가 떠 있어도 제안 행이 한 번에 눌린다. 검색 키뿐 아니라 제안·최근·추천을 골라 확정해도 키보드가 닫힌다(Native `Keyboard.dismiss()`, Web은 결과 영역으로 포커스, 1.13.1 반영) |
+| 큰 글자 · 칩 줄 안 pills | 칩 줄에 SegmentedControl `presentation="pills"`를 넣어도 세로로 쌓이지 않고 한 줄 가로 스크롤로 남는다(1.13.1 반영. 1.13.0 이하는 약 440pt 기둥이 됐다). 칩 높이는 라벨에 맞춰 늘어난다(Native Chip `minHeight`) |
 
 ## 플랫폼 차이
 
@@ -277,3 +289,11 @@ import { SearchScreen } from "@hjmds/react-native/screen-flows";
 - Storybook은 실제 검색 서버·라우터 연동 증거가 아니다. Native 화면은 2026-10-06 개편에서 시뮬레이터로 확인하지 않았다(구조는 렌더 테스트로만 확인).
 - 시트 안 검색(채팅 도구 고르기 등)은 Sheet `size`를 `medium`·`large`로 주고 `scrollable` 없이 SearchScreen을 넣는다. SearchScreen은 `contentInset="none"`·`hostGutter="regular"`.
   1.13.0 이하 Native는 이 조합에서 화면이 0pt가 되고 칩 줄이 시트 여백에서 잘렸다(2026-10-06 utilverse, [Sheet 함정](../components/sheet.md#함정)).
+
+
+### 하위 목록 로딩 계약
+
+결과 개수가 아직 없는 `resultSummary.count === null`은 양 renderer에서 `ListRow loading`을
+사용한다. 위쪽 개수 Skeleton과 실제 결과 행은 화면이 배치하지만, 행의 density·두 줄 높이·슬롯은
+ListRow가 소유한다. 상태 이름은 첫 로딩 행 한 곳에만 제공한다. 검색 화면 안에서 임의 폭/간격의
+Skeleton 두 개로 결과 행을 다시 만들지 않는다.