Style Gallery 실행 예제

저장 스냅샷·중복 제출·나가기

Save ownership

상단의 재생 버튼으로 실습을 실행할 수 있습니다.

실습 화면에서 직접 조작해 보세요. 화면을 벗어나거나 재생을 멈추면 실습도 닫히며, 다시 실행하면 처음부터 시작합니다.

이 예제의 코드

실행 화면의 HTML 소스입니다. 연결된 스타일·스크립트·미디어 경로는 원래 실행 위치를 기준으로 합니다.

코드 영역을 열면 원본을 불러옵니다.

BEHIND THE EXAMPLE

이 장면을 만드는 원리

A 저장 중 B를 편집하고 A를 승인해도 B는 미저장 상태로 남습니다.

현재 초안과 저장된 기준값을 비교하고 실패 시 초안을 보존합니다.

두 제출 진입점에서 활성화해도 실행 횟수가 하나인지 확인합니다.

나가기 취소는 초안을 유지하고, 저장 후 나가기는 승인 후 dirty를 다시 확인합니다.

초안·기준값·요청 스냅샷·이동 결정을 함께 조작합니다. 원격 서버는 수동 응답으로 시뮬레이션합니다.

이름 편집 브리프의 소유자를 세 개의 출력 패널로 드러냅니다.

응답 시점을 직접 선택하고 표시값뿐 아니라 실행 횟수와 스냅샷도 관찰합니다.

중복 저장과 저장 중 편집이라는 두 실패를 하나의 작업에서 구분합니다.

저장 화면에서 독립적인 상태 소유권과 조합을 확인합니다.

Settings의 필수 패턴을 함께 실행하며 각 패턴의 역할을 구분합니다.

설정 저장이 반응한다는 요청을 실패·복구가 있는 작은 구현으로 확인합니다.

명시적 저장의 실패·재시도·저장 중 편집을 수동 응답으로 재현합니다.

상태 관리의 저장·내비게이션 원칙을 실행 화면으로 연결합니다.