@hjmds/design-contracts 1.43.0 → 1.44.0

package/docs/usage/components/chat-room-details.md

@@ -3,7 +3,7 @@
 - 단계: 컴포넌트
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 1.43.0
+- 적용: 1.44.0
 - 검토일: 2026-10-23
 - 근거: 양 renderer `src/communication.tsx`와 [채팅방 비교·구성 지침](../compositions/chat-room.md)
 - 스토리북: `배포/구성/입력과 작성/채팅방 관리`
@@ -53,6 +53,6 @@ Native는 동일 prop 계약으로 `@hjmds/react-native/communication`에서 가
 
 ## 꼭 지킬 것
 
-profile·photoLabel·memberCountLabel·members·errorLabel이 필수다. edit·tools·actions는 권한과 제품 경로가 있는 경우 전달한다.
+profile·photoLabel·memberCountLabel·members·errorLabel이 필수다. edit·tools·actions는 권한과 제품 경로가 있는 경우 전달한다. 초대는 도구 타일이 아니라 `members.invite` 행으로 참여자 목록 위에 둔다. 나가기·삭제 묶음은 행 높이만큼만 위아래 여백을 둔다.
 
 데이터·문구·권한은 제품이 소유한다. 저장·개설·초대·삭제는 실제 성공 뒤 Promise를 resolve하고 실패는 reject한다. 입력과 선택은 실패 시 유지한다. Storybook의 메모리 예제를 운영 저장으로 사용하지 않는다. 방 전환 시 `key={roomId}`로 작업 수명을 구분한다.

package/docs/usage/components/chat-room-invite.md

@@ -3,7 +3,7 @@
 - 단계: 컴포넌트
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 1.43.0
+- 적용: 1.44.0
 - 검토일: 2026-10-23
 - 근거: 양 renderer `src/communication.tsx`와 [채팅방 비교·구성 지침](../compositions/chat-room.md)
 - 스토리북: `배포/구성/입력과 작성/채팅방 관리`
@@ -53,6 +53,6 @@ Native는 동일 prop 계약으로 `@hjmds/react-native/communication`에서 가
 
 ## 꼭 지킬 것
 
-members·title·emptyLabel·onSelectionChange·onInvite·confirmLabel·errorLabel이 필수다. disabled 멤버는 요청에서 제외한다.
+members·title·membersLabel·emptyLabel·onSelectionChange·onInvite·search·selection·confirmLabel·errorLabel이 필수다. 확인은 상단 오른쪽에 있다(카카오톡·Telegram). 검색창 아래에 선택한 사람이 가로 줄로 모이고, 누르면 선택이 해제된다. `search.onQueryChange`를 주면 제품이 서버 검색과 결과 목록을 소유하고 `searching`으로 진행 중을 표시한다. 주지 않으면 이름으로 목록을 거른다. disabled 멤버(이미 참여한 사람)는 요청에서 제외한다.
 
 데이터·문구·권한은 제품이 소유한다. 저장·개설·초대·삭제는 실제 성공 뒤 Promise를 resolve하고 실패는 reject한다. 입력과 선택은 실패 시 유지한다. Storybook의 메모리 예제를 운영 저장으로 사용하지 않는다. 방 전환 시 `key={roomId}`로 작업 수명을 구분한다.

package/docs/usage/components/chat-room-members.md

@@ -3,7 +3,7 @@
 - 단계: 컴포넌트
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 1.43.0
+- 적용: 1.44.0
 - 검토일: 2026-10-23
 - 근거: 양 renderer `src/communication.tsx`와 [채팅방 비교·구성 지침](../compositions/chat-room.md)
 - 스토리북: `배포/구성/입력과 작성/채팅방 관리`
@@ -53,6 +53,6 @@ Native는 동일 prop 계약으로 `@hjmds/react-native/communication`에서 가
 
 ## 꼭 지킬 것
 
-members·title·emptyLabel이 필수다. onSelectionChange가 있으면 선택 목록이다. actions에는 허용된 행동만 전달한다.
+members·title·emptyLabel이 필수다. onSelectionChange가 있으면 선택 목록이다. `memberActions`는 멤버별 메뉴 이름(`label(member)`)·닫기 문구·허용된 행동만 전달하며, 메뉴는 가로 점 세 개 아이콘 버튼으로 열린다. `invite`를 주면 목록 위에 브랜드 색 "초대" 행이 생긴다(Telegram "구성원 추가"). 역할은 `member.role`로 이름 오른쪽에 브랜드 색 caption으로 표시하고, `detail`은 둘째 줄(접속·소개)에 둔다.
 
 데이터·문구·권한은 제품이 소유한다. 저장·개설·초대·삭제는 실제 성공 뒤 Promise를 resolve하고 실패는 reject한다. 입력과 선택은 실패 시 유지한다. Storybook의 메모리 예제를 운영 저장으로 사용하지 않는다. 방 전환 시 `key={roomId}`로 작업 수명을 구분한다.

package/docs/usage/components/chat-room-profile.md

@@ -3,7 +3,7 @@
 - 단계: 컴포넌트
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 1.43.0
+- 적용: 1.44.0
 - 검토일: 2026-10-23
 - 근거: 양 renderer `src/communication.tsx`와 [채팅방 비교·구성 지침](../compositions/chat-room.md)
 - 스토리북: `배포/구성/입력과 작성/채팅방 관리`
@@ -53,6 +53,6 @@ Native는 동일 prop 계약으로 `@hjmds/react-native/communication`에서 가
 
 ## 꼭 지킬 것
 
-value·onValueChange·onSave·labels가 필수다. onPickPhoto는 업로드한 URL을 반환하며 null은 취소다.
+value·onValueChange·onSave·labels가 필수다. onPickPhoto는 업로드한 URL을 반환하며 null은 취소다. 사진에는 편집 표시가 모서리에 붙는다(카카오톡 카메라 표시). 사진 실패는 `labels.photoError`, 저장 실패는 `labels.error`로 따로 안내한다. 이름 제한은 `nameCharacterCount`(TextField characterCount)로 0/30처럼 보여 주며, 한도는 제품 서버가 받는 값이다.
 
 데이터·문구·권한은 제품이 소유한다. 저장·개설·초대·삭제는 실제 성공 뒤 Promise를 resolve하고 실패는 reject한다. 입력과 선택은 실패 시 유지한다. Storybook의 메모리 예제를 운영 저장으로 사용하지 않는다. 방 전환 시 `key={roomId}`로 작업 수명을 구분한다.

package/docs/usage/compositions/chat-room.md

@@ -3,7 +3,7 @@
 - 단계: 구성
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 1.43.0
+- 적용: 1.44.0
 - 검토일: 2026-10-23
 - 근거: Telegram·Signal 실제 화면 비교와 채팅방 관리 공통화 요청
 - 스토리북: `배포/구성/입력과 작성/채팅방 관리`
@@ -35,19 +35,36 @@
 | --- | --- | --- | --- |
 | 바깥 틀 | Stack | 부모 화면 본문 | gap xl |
 | 방 정보 | Avatar·Text | 상단 중앙 | Avatar xlarge 64, gap sm |
+| 선택한 사람 | Avatar large 48 + 이름 | 검색창 아래 가로 스크롤 | 항목 폭 64, gap sm, 해제 표시 20 |
 | 참여자 | Avatar·Checkbox·Menu | 본문 | gap md |
 | 나가기·삭제 | ListRow·AlertDialog | 최하단 | 기존 row recipe |
 
 ```text
-             [방 사진 xlarge: 64]
-               방 이름 · 인원
+방 정보 (ChatRoomDetails)
         [뒤로]                     [정보 편집]
-                   소개
-       [검색] [사진·파일] [알림] [초대]
-  참여자
-  [사진] 이름 · 역할                     [메뉴]
-  채팅방 나가기
-  내 대화 기록 삭제
+             [방 사진 xlarge: 64]
+                  방 이름
+                 3명 참여 중
+       [검색]   [사진·파일]   [알림]          동폭 타일
+  ┌ 소개 ───────────────────────────┐
+  ┌ 참여자 3 ───────────────────────┐
+  │ (+) 대화상대 초대                │   brand 행, members.invite
+  │ [사진] 나                   관리자 │   role = brand caption
+  │ [사진] 서연 · 오늘 접속        (•••) │   memberActions 메뉴
+  ┌ 내 대화 기록 삭제 / 채팅방 나가기 ─┐   danger 행
+
+참여자 선택 (ChatRoomCreate 1단계 · ChatRoomInvite)
+  [닫기]        새 채팅방          [다음]
+  [ 이름 검색                        ]
+  (서연 ×) (민수 ×)                       선택한 사람 가로 줄, 누르면 해제
+  친구 2
+  [✓] [사진] 서연 · 산책 친구
+
+방 설정 (ChatRoomCreate 2단계)
+  [뒤로]        새 채팅방          [개설]
+  [사진 ✎]  [ 채팅방 이름     0/30 ]
+  [ 소개 ]
+  친구 2 · 선택한 참여자 목록
 ```
 
 Stack gap은 그룹 `xl`, 입력/목록 `md`, 내부 `sm`이다. Avatar·Button·ListRow·Menu·AlertDialog의 기존 recipe를 재사용한다.
@@ -93,6 +110,18 @@ Native 예제: `showcase/native/src/ChatRoom.preview.tsx`.
 
 2026-10-23 사용자 요청에 따라 [Signal 그룹 관리](https://support.signal.org/hc/en-us/articles/360050427692-Manage-a-group)의 사진·이름·소개·관리자 권한과 [Telegram 공유 미디어](https://telegram.org/blog/shared-media-scrolling-calendar-join-requests-and-more)의 방별 미디어 진입을 참고했다. 색·간격·버튼·모달은 HJM과 제품 테마가 소유한다. [Signal 기록 삭제](https://support.signal.org/hc/en-us/articles/360007320491-Delete-messages-alerts-or-chats)를 참고해 기록 삭제와 나가기를 분리했다.
 
+## UI/UX 개편 — 2026-10-23 오후
+
+사용자 요청("다른 앱·웹 모티브를 최대한")으로 아래 실제 화면을 브라우저에서 열어 비교했다. 기능·배치만 가져오고 색은 HJM 토큰을 유지한다.
+
+| 비교 화면 | 흡수한 내용 |
+| --- | --- |
+| [카카오톡 팀채팅 만들기·멤버 초대·채팅방 설정](https://funissu.com/kakaotalk-team-chat-room-create/) | 상단 오른쪽 다음/확인, 이름 검색창, 사진 모서리 편집 표시, 이름 글자 수(0/20), 설정 묶음과 하단 파괴 행동 |
+| [Telegram 방 정보·Add Members·New Group(Android)](https://www.guidingtech.com/how-to-add-someone-to-telegram-group/) | 참여자 위 "Add Members" 브랜드 행, 역할(Owner/Admin) 오른쪽 표기, 선택한 사람을 검색창에 칩으로 모음, 선택 인원 표시, 사진 옆 이름 입력 |
+| WhatsApp 새 그룹(참여자 선택) | 선택한 사람의 가로 아바타 줄과 × 해제 |
+
+반영: `chatRoomRecipe`(screen-patterns), ListRow `tone="brand"`, `ChatRoomMemberActions`·`ChatRoomMemberSearch`·`ChatRoomSelectionLabels` 계약, 사진 실패와 저장 실패 안내 분리, 멤버 메뉴 이름·아이콘 버튼, 서버 검색 연결(`search.onQueryChange`·`searching`). 1.43.0의 `actions`·`searchLabel` 계열 prop은 소비 앱이 없어 이번 minor에서 바로 교체했다.
+
 ## 실제 화면 비교와 반영 — 2026-10-23
 
 문서의 기능 목록만 읽고 첫 시안을 만든 접근을 사용자가 지적했다. 아래 원본 이미지를 브라우저에서 실제로 열어 HJM 웹 390px·기존 iPhone 17 Pro 화면과 비교하고 구성을 다시 만들었다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/design-contracts",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "description": "Renderer-neutral design contracts, tokens, recipes, and behaviors shared by HJM products.",
   "license": "MIT",
   "repository": {