배경
제품 화면은 Toolbar / Listbox / Grid만 있고, 바인딩이 OrderEditor / SheetEditor에 묶여 있어 다른 데모가 그대로 쓰지 못한다. Hands 일곱 중 Document, Object(Canvas), Tree, Kanban이 위젯이 없다. Database는 Grid와 같은 격자 어포던스다. 위젯이 좋은지는 모든 데모가 그 바인딩을 고치지 않고 쓰는지로 판정한다.
Goal Anchor
- Outcome: 빠진 네 장르가 제품 화면에 정해진 위젯으로 있고, 그 바인딩을 모든 데모가 수정 없이 쓴다.
- Done: 카탈로그에 Document / Canvas / Tree / Board가 있다. Toolbar / Listbox / Grid는 유지한다. Database 위젯 페이지는 없다.
useEditing이 붙은 데모가 해당 위젯 바인딩을 위젯 코드 변경 없이 사용한다. 위젯은 편집 값만 읽고 그린다.
- Don't: Database를 Grid와 따로 만들지 않는다. Button/Card를 위젯으로 두지 않는다. 위젯을 완성 편집기로 키우지 않는다. Hands를 대체하지 않는다. 데모별로 위젯을 포크하지 않는다. 새 위젯 역할을 발명하지 않는다.
Success Evidence
/widgets에 Document, Canvas, Tree, Board가 있고 Database 경로가 없다.- Order·Document가 같은 Listbox 바인딩을, Sheet·Database가 같은 Grid 바인딩을, 해당 데모가 Tree·Canvas·Board 바인딩을 위젯 소스 수정 없이 사용한다.
- 위젯 바인딩에
OrderEditor / SheetEditor 같은 장르 타입 분기나 데모 전용 분기가 없다.
- Hands 데모는 클립보드·삽입·열 이동을 그대로 가진다.
Canonical Mapping
- Toolbar =
canUndo / canRedo
- Listbox = selected keys / focus
- Grid = topology / selected cells (Sheet와 Database)
- Document = 블록 줄 + text offset
- Canvas = 평면 위 객체 선택
- Tree = 보이는 계층 topology
- Board = 열 × 카드
- Database Hand = Grid (페이지 추가 없음)
Target Structure
제품 화면
|-- Toolbar
|-- Listbox
|-- Grid
|-- Document
|-- Canvas
|-- Tree
`-- Board
Guardrails
- 재사용 단위는 바인딩(props)이다. Hands가 카탈로그 샘플 컴포넌트를 그대로 마운트해야 하는 것은 아니다.
useOrderWidget(OrderEditor) 형태는 검증 실패의 냄새다.- 위젯이 데모 하나를 위해 바뀌면 위젯이 잘못된 것이다. 데모가 바인딩을 호출하도록 바뀌는 것은 개밥먹기다.
배경
제품 화면은 Toolbar / Listbox / Grid만 있고, 바인딩이
OrderEditor/SheetEditor에 묶여 있어 다른 데모가 그대로 쓰지 못한다. Hands 일곱 중 Document, Object(Canvas), Tree, Kanban이 위젯이 없다. Database는 Grid와 같은 격자 어포던스다. 위젯이 좋은지는 모든 데모가 그 바인딩을 고치지 않고 쓰는지로 판정한다.Goal Anchor
useEditing이 붙은 데모가 해당 위젯 바인딩을 위젯 코드 변경 없이 사용한다. 위젯은 편집 값만 읽고 그린다.Success Evidence
/widgets에 Document, Canvas, Tree, Board가 있고 Database 경로가 없다.OrderEditor/SheetEditor같은 장르 타입 분기나 데모 전용 분기가 없다.Canonical Mapping
canUndo/canRedoTarget Structure
Guardrails
useOrderWidget(OrderEditor)형태는 검증 실패의 냄새다.