Lyotic · 컴포넌트
업무 대상 셸
동일한 Case와 Work Object를 여러 표현에서도 알아볼 수 있게 하는 기준점입니다. 근거와 판단이 필요할 때 확장되고 검증된 범위를 남기며 다시 간결해집니다.
개요
동일한 Case와 Work Object를 여러 표현에서도 알아볼 수 있게 하는 기준점입니다. 근거와 판단이 필요할 때 확장되고 검증된 범위를 남기며 다시 간결해집니다.
| 표현할 수 있는 것 | 표현해서는 안 되는 것 |
|---|---|
| 대상의 정체성, 현재 표현, 남은 의무 | 하위 구성요소가 지지하지 않는 사실·권한·완료 |
구성
- 업무의 대상과 정체성
- 현재 상태와 그 이유
- 판단에 필요한 근거·영향·권한
- 실행 결과와 검증 범위
상태
아래는 공용 상태와 전이 픽스처를 사용한 라이브 예제입니다. 동일한 입력과 plan에서 다른 언어가 권한이나 검증의 뜻을 바꿔서는 안 됩니다.
사용과 회피
같은 업무가 비교, 선택, 승인, 실행, 복구, 검증을 거칠 때 사용합니다.
카드를 교체하며 대상이나 승인 버전을 잃지 않습니다. 접는다고 미확정 결과가 사라지지는 않습니다.
사용할 때
같은 업무가 비교, 선택, 승인, 실행, 복구, 검증을 거칠 때 사용합니다.
사용하지 않을 때
업무 상태와 plan 없이 모핑 효과만 만들기 위해 사용하지 않습니다.
미확정 결과를 남깁니다
카드를 교체하며 대상이나 승인 버전을 잃지 않습니다. 접는다고 미확정 결과가 사라지지는 않습니다. checked, preserved, unobservable 범위를 가진 Verification에서 허용한 요약
근거의 한계
예제는 고정된 픽스처와 현재 공용 컴포넌트의 동작을 보여줍니다. 외부 서비스 연결, 모든 부수 효과 또는 사람의 이해 개선까지 입증하지 않습니다.
계약
열세 가지 항목은 구현의 책임입니다. 이 표의 존재 자체가 모든 테스트의 통과를 의미하지는 않습니다.
| 항목 | 계약 |
|---|---|
| 의미 입력 | 권위가 확립된 Case 입력과 그 입력에서 만든 plan |
| 허용 상태 | plan의 mode와 attention, 계약 안에서 사람이 요청한 탐색·접기 |
| 금지 상태 | 근거보다 강한 주장, 더 넓은 행동 집합, 해당 범위 검증 없는 해결 요약 |
| 근거 요건 | 하위 요소가 필요한 근거를 공개합니다. 접었다고 빠진 근거가 지지로 바뀌지 않습니다. |
| 행동 범위 | plan의 제어와 허용된 탐색, 실행 시 행동·boundVersion 재검증 |
| 권한의 의미 | 렌더링으로 권한을 주지 않습니다. 다섯 권한 층을 구분합니다. |
| 외부 효과 | 렌더링에는 외부 효과가 없고 애플리케이션 실행기가 쓰기와 결과를 소유합니다. |
| 검증 조건 | checked, preserved, unobservable 범위를 가진 Verification에서 허용한 요약 |
| 실패와 복구 | 대상별 결과와 복구 경로를 보여주며 재조정·재시도·보상을 구분합니다. |
| 전환 | 하나의 anchored surface, 입력·행동 의미 보존, 떠나는 표현의 즉시 inert 처리 |
| 접근성 | 이름 있는 region과 상태 글자, polite 알림. 시스템 변경은 포커스를 유지합니다. |
| 관찰 가능한 이벤트 | ly-action, ly-explore, ly-mode는 의도·표현 이벤트이며 외부 효과의 증거가 아닙니다. |
| 테스트 조건 | 단계별 checkDom, 포커스·입력·오래된 승인·작은 화면·reduced-motion 검사 |
접근성
이름 있는 region과 상태 글자, polite 알림. 시스템 변경은 포커스를 유지합니다.
키보드·포인터·스크린 리더·확대·reduced-motion 조건을 실제 전환 경로에서 확인합니다. 자동 DOM 검사만으로 접근성을 전부 검증했다고 주장하지 않습니다.
코드
아래는 현재 영문 페이지와 같은 API 예제입니다. 함수·속성·상태 식별자는 번역하지 않습니다. 애플리케이션이 권위 있는 입력과 실행 경계를 제공해야 합니다.
import { resolve, checkDom } from '../../packages/core/src/index.js';
import { buildSteps } from '../../packages/core/fixtures/mapping-case.js';
import { WorkObjectShell } from '../../packages/components/src/index.js';
const host = document.createElement('div');
document.body.append(host);
const shell = new WorkObjectShell(host);
const state = buildSteps().find(step => step.id === 'recover').state;
const plan = resolve(state);
shell.render(state, plan, { initiator: 'system', instant: true });
console.log(checkDom(host, plan));
// Fixture only. A production ly-action handler must revalidate at execution.