ReplayPlayerLayout

셸

세션 리플레이 플레이어의 프레임. 스테이지·메타 바·컨트롤·리사이즈 가능한 인스펙터를 배치하고, 플레이어 전체의 전체화면과 입력 필드를 피하는 키보드 단축키 범위를 소유한다.

스테이지·컨트롤·인스펙터를 하나의 키보드 범위로

https://shop.example/checkout · 1280×720 · Chrome · macOS

Recording stage (click here, then press Space)

Events

오전 10:05
/
+2 minutes
오전 10:06

Last shortcut: none

ReplayPlayerLayout

Prop	타입	기본값	설명
stage*	ReactNode	—	녹화가 렌더되는 영역(iframe 호스트)
meta	ReactNode	—	스테이지 위 얇은 바: URL, 창, 기기
controls	ReactNode	—	스테이지 아래 트랜스포트와 스크러버
inspector	ReactNode	—	측면 패널. 생략하면 패널 없음
inspectorOpen	boolean	true	인스펙터 표시 여부(제어됨)
onInspectorOpenChange	(open: boolean) => void	—	있으면 토글 버튼 표시
inspectorSize	number	34	인스펙터 초기 폭(%)
layoutId	string	—	리사이즈 레이아웃 영속 id
fullscreen	boolean	false	전체화면 상태(호스트 소유)
onFullscreenChange	(fullscreen: boolean) => void	—	전체화면 변경 콜백. 브라우저가 스스로 나가도 호출된다
shortcuts	ReplayShortcutMap	—	포커스가 안에 있고 입력 필드가 아닐 때만 동작. false를 반환하면 전파
overlay	ReactNode	—	스테이지 위 오버레이: 로딩, 오류, 건너뛰는 중
labels	ReplayPlayerLayoutLabels	—	문구 오버라이드
className	string	—	추가 클래스

테스트 결과 자세히 보기

테스트 커버리지

2026년 7월 9일

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

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

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

FaqAccordion

표시

PageAside

EnvPanel

표시

BranchSelect

표시

DesignGuidePanel

표시

QuickActions

표시

ReplayPlayerLayout

셸

스테이지·컨트롤·인스펙터를 하나의 키보드 범위로

https://shop.example/checkout · 1280×720 · Chrome · macOS

Recording stage (click here, then press Space)

Events

오전 10:05
/
+2 minutes
오전 10:06

Last shortcut: none

ReplayPlayerLayout

Prop	타입	기본값	설명
stage*	ReactNode	—	녹화가 렌더되는 영역(iframe 호스트)
meta	ReactNode	—	스테이지 위 얇은 바: URL, 창, 기기
controls	ReactNode	—	스테이지 아래 트랜스포트와 스크러버
inspector	ReactNode	—	측면 패널. 생략하면 패널 없음
inspectorOpen	boolean	true	인스펙터 표시 여부(제어됨)
onInspectorOpenChange	(open: boolean) => void	—	있으면 토글 버튼 표시
inspectorSize	number	34	인스펙터 초기 폭(%)
layoutId	string	—	리사이즈 레이아웃 영속 id
fullscreen	boolean	false	전체화면 상태(호스트 소유)
onFullscreenChange	(fullscreen: boolean) => void	—	전체화면 변경 콜백. 브라우저가 스스로 나가도 호출된다
shortcuts	ReplayShortcutMap	—	포커스가 안에 있고 입력 필드가 아닐 때만 동작. false를 반환하면 전파
overlay	ReactNode	—	스테이지 위 오버레이: 로딩, 오류, 건너뛰는 중
labels	ReplayPlayerLayoutLabels	—	문구 오버라이드
className	string	—	추가 클래스

테스트 결과 자세히 보기

테스트 커버리지

2026년 7월 9일

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

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

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

FaqAccordion

표시

PageAside

EnvPanel

표시

BranchSelect

표시

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은 다음과 같은 상황에서 유용합니다:

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

ReplayPlayerLayout

스테이지·컨트롤·인스펙터를 하나의 키보드 범위로

ReplayPlayerLayout

테스트 커버리지

관련 컴포넌트

FaqAccordion

PageAside

EnvPanel

BranchSelect

DesignGuidePanel

QuickActions

ReplayPlayerLayout

스테이지·컨트롤·인스펙터를 하나의 키보드 범위로

ReplayPlayerLayout

테스트 커버리지

관련 컴포넌트

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컬럼 그리드

빠른 작업