ReplayTransport

Shell

세션 리플레이 재생 컨트롤. 재생/일시정지, 앞뒤 점프, 배속 메뉴, 비활성 건너뛰기 토글, 전체화면, 경과/시계 타임코드 전환을 제공하며 재생 상태는 호스트가 소유한다.

Related docs

npx @reopt-ai/opt-cli surface add replay-transport

100%

재생 상태를 호스트가 소유하는 트랜스포트

정지 · 1× · 대기 건너뛰기 켜짐 · 전체화면 아님

ReplayTransport

Prop	Type	Default	Description
playing*	boolean	—	재생 중 여부
ended	boolean	false	끝에 도달. 재생 버튼이 다시 시작을 제안
position*	number	—	절대 플레이헤드 시각
start*	number	—	녹화 시작 시각(절대값)
end*	number	—	녹화 종료 시각(절대값)
onTogglePlay*	() => void	—	재생/일시정지 토글. ended면 처음부터 다시 시작
onSkip*	(deltaMs: number) => void	—	부호 있는 시간만큼 이동
onSkipToStart	() => void	—	처음으로. 생략하면 버튼 숨김
jumpMs	number	10000	앞뒤 점프 버튼 이동량(ms)
speed*	number	—	현재 배속
speeds	readonly number[]	[0.5, 1, 1.5, 2, 3, 4, 8, 16]	선택 가능한 배속 목록
onSpeedChange*	(speed: number) => void	—	배속 변경 콜백
skipInactive*	boolean	—	비활성 구간 건너뛰기 여부
onSkipInactiveChange*	(skip: boolean) => void	—	건너뛰기 토글 콜백
fullscreen	boolean	—	전체화면 상태(호스트 소유)
onFullscreenChange	(fullscreen: boolean) => void	—	있으면 전체화면 버튼 표시
timecode	"elapsed" \| "clock"	"elapsed"	경과 시간 또는 실제 시각 표시 모드
onTimecodeChange	(mode: "elapsed" \| "clock") => void	—	있으면 타임코드를 클릭해 전환
formatClock	(time: number) => string	—	clock 모드 포맷
disabled	boolean	false	모든 조작을 비활성화
children	ReactNode	—	오른쪽에 추가 컨트롤
labels	ReplayTransportLabels	—	문구 오버라이드
shortcuts	ReplayTransportShortcuts	—	툴팁에 표시할 단축키
className	string	—	추가 클래스

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

ReplayTransport 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

FaqAccordion

Display

PageAside

EnvPanel

Display

BranchSelect

Display

DesignGuidePanel

Display

QuickActions

Display

ReplayTransport

Shell

Related docs

npx @reopt-ai/opt-cli surface add replay-transport

100%

재생 상태를 호스트가 소유하는 트랜스포트

정지 · 1× · 대기 건너뛰기 켜짐 · 전체화면 아님

ReplayTransport

Prop	Type	Default	Description
playing*	boolean	—	재생 중 여부
ended	boolean	false	끝에 도달. 재생 버튼이 다시 시작을 제안
position*	number	—	절대 플레이헤드 시각
start*	number	—	녹화 시작 시각(절대값)
end*	number	—	녹화 종료 시각(절대값)
onTogglePlay*	() => void	—	재생/일시정지 토글. ended면 처음부터 다시 시작
onSkip*	(deltaMs: number) => void	—	부호 있는 시간만큼 이동
onSkipToStart	() => void	—	처음으로. 생략하면 버튼 숨김
jumpMs	number	10000	앞뒤 점프 버튼 이동량(ms)
speed*	number	—	현재 배속
speeds	readonly number[]	[0.5, 1, 1.5, 2, 3, 4, 8, 16]	선택 가능한 배속 목록
onSpeedChange*	(speed: number) => void	—	배속 변경 콜백
skipInactive*	boolean	—	비활성 구간 건너뛰기 여부
onSkipInactiveChange*	(skip: boolean) => void	—	건너뛰기 토글 콜백
fullscreen	boolean	—	전체화면 상태(호스트 소유)
onFullscreenChange	(fullscreen: boolean) => void	—	있으면 전체화면 버튼 표시
timecode	"elapsed" \| "clock"	"elapsed"	경과 시간 또는 실제 시각 표시 모드
onTimecodeChange	(mode: "elapsed" \| "clock") => void	—	있으면 타임코드를 클릭해 전환
formatClock	(time: number) => string	—	clock 모드 포맷
disabled	boolean	false	모든 조작을 비활성화
children	ReactNode	—	오른쪽에 추가 컨트롤
labels	ReplayTransportLabels	—	문구 오버라이드
shortcuts	ReplayTransportShortcuts	—	툴팁에 표시할 단축키
className	string	—	추가 클래스

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

ReplayTransport 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

FaqAccordion

Display

PageAside

EnvPanel

Display

BranchSelect

Display

Usage

디자인 시스템의 아키텍처를 한눈에 정리한 참조 패널입니다. UI 디버거와 별도로 @reopt-ai/opt-ui에서 export되며, 필요한 페이지에 직접 렌더링하여 사용합니다.

import { DesignGuidePanel } from "@reopt-ai/opt-ui";

// 아무 페이지에서 렌더링
<DesignGuidePanel />

패널 섹션

패널에 포함된 6개 섹션:

1. Primitive 컴포넌트 맵

예제별 사용 primitive와 WAI-ARIA 역할 표

2. 키보드 네비게이션 패턴

글로벌 단축키, Composite/Roving Tabindex, 예제별 키보드 조작

3. Tailwind data-attribute 셀렉터

data-[active-item], data-[focus-visible], data-[enter]/[leave], data-[open] 등 사용법

4. 접근성 속성

WAI-ARIA 역할, aria-label, aria-invalid, aria-expanded, aria-live

5. 포커스 관리 전략

RouteFocusManager, Sidebar activeId 동기화, focusLoop/focusWrap, Dialog 포커스 트랩

6. 프로젝트 구조

폴더 트리, 핵심 의존성 목록

활용 예시

DesignGuidePanel은 다음과 같은 상황에서 유용합니다:

온보딩 페이지 — 새 팀원이 디자인 시스템을 빠르게 파악할 수 있도록 배치
스타일가이드 — 문서 페이지에 참조용으로 포함
개발 대시보드 — 컴포넌트 개발 시 빠른 참조용

ReplayTransport

재생 상태를 호스트가 소유하는 트랜스포트

ReplayTransport

테스트 커버리지

Related components

FaqAccordion

PageAside

EnvPanel

BranchSelect

DesignGuidePanel

QuickActions

ReplayTransport

재생 상태를 호스트가 소유하는 트랜스포트

ReplayTransport

테스트 커버리지

Related components

FaqAccordion

PageAside

EnvPanel

BranchSelect

DesignGuidePanel

QuickActions

기본 사용

Header + Nav + Footer 3-slot

Header / Footer 없이 Nav만

Slot padding override — headerClassName / bodyClassName

기본 사용

기본 사용

Usage

패널 섹션

1. Primitive 컴포넌트 맵

2. 키보드 네비게이션 패턴

3. Tailwind data-attribute 셀렉터

4. 접근성 속성

5. 포커스 관리 전략

6. 프로젝트 구조

활용 예시

그리드 레이아웃 (기본)

빠른 작업

리스트 레이아웃

빠른 작업

3컬럼 그리드

빠른 작업