ReplayScrubber

셸

세션 리플레이의 탐색 트랙. 활동/비활성/미로딩 구간, 활동 밀도, 이벤트 마커를 한 플레이헤드 아래에 겹쳐 그리고, 드래그·키보드 탐색이 끝났을 때만 seek을 커밋한다.

활동 구간과 이벤트 마커가 있는 탐색 트랙

Playhead 45s · preview — · marker none

Striped tail is still loading

ReplayScrubber

Prop	타입	기본값	설명
start*	number	—	재생 가능한 첫 시각(절대값, 보통 epoch ms)
end*	number	—	재생 가능한 마지막 시각
position*	number	—	현재 플레이헤드. [start, end]로 클램프
segments	ReplayScrubberSegment[]	—	활동 분류 구간. active/inactive/gap/buffer
buffered	Array<{ start: number; end: number }>	—	이미 로드된 범위
activity	number[]	—	0..1로 정규화한 활동 밀도 버킷. 로그 스케일 영역으로 그린다
markers	ReplayScrubberMarker[]	—	트랙 위 관심 지점. 가까운 마커는 하나로 합쳐진다
onSeek*	(time: number) => void	—	포인터·키보드 조작이 끝났을 때 한 번 호출
onPreview	(time: number \| null) => void	—	드래그·호버 중 미리보기 시각. 비싼 seek에 쓰지 않는다
onMarkerSelect	(marker: ReplayScrubberMarker) => void	—	마커 선택. 생략하면 해당 시각으로 seek
formatTime	(time: number) => string	—	배지와 aria-valuetext 포맷. 기본 start 기준 m:ss
stepMs	number	5000	화살표 키 이동량
largeStepMs	number	30000	PageUp/PageDown·Shift+화살표 이동량
disabled	boolean	false	모든 조작을 비활성화
labels	ReplayScrubberLabels	—	접근성 문구 오버라이드
className	string	—	추가 클래스

테스트 결과 자세히 보기

테스트 커버리지

2026년 7월 9일

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

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

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

FaqAccordion

표시

PageAside

EnvPanel

표시

BranchSelect

표시

DesignGuidePanel

표시

QuickActions

표시

ReplayScrubber

셸

활동 구간과 이벤트 마커가 있는 탐색 트랙

Playhead 45s · preview — · marker none

Striped tail is still loading

ReplayScrubber

Prop	타입	기본값	설명
start*	number	—	재생 가능한 첫 시각(절대값, 보통 epoch ms)
end*	number	—	재생 가능한 마지막 시각
position*	number	—	현재 플레이헤드. [start, end]로 클램프
segments	ReplayScrubberSegment[]	—	활동 분류 구간. active/inactive/gap/buffer
buffered	Array<{ start: number; end: number }>	—	이미 로드된 범위
activity	number[]	—	0..1로 정규화한 활동 밀도 버킷. 로그 스케일 영역으로 그린다
markers	ReplayScrubberMarker[]	—	트랙 위 관심 지점. 가까운 마커는 하나로 합쳐진다
onSeek*	(time: number) => void	—	포인터·키보드 조작이 끝났을 때 한 번 호출
onPreview	(time: number \| null) => void	—	드래그·호버 중 미리보기 시각. 비싼 seek에 쓰지 않는다
onMarkerSelect	(marker: ReplayScrubberMarker) => void	—	마커 선택. 생략하면 해당 시각으로 seek
formatTime	(time: number) => string	—	배지와 aria-valuetext 포맷. 기본 start 기준 m:ss
stepMs	number	5000	화살표 키 이동량
largeStepMs	number	30000	PageUp/PageDown·Shift+화살표 이동량
disabled	boolean	false	모든 조작을 비활성화
labels	ReplayScrubberLabels	—	접근성 문구 오버라이드
className	string	—	추가 클래스

테스트 결과 자세히 보기

테스트 커버리지

2026년 7월 9일

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

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

테스트를 추가한 뒤 `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은 다음과 같은 상황에서 유용합니다:

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

ReplayScrubber

활동 구간과 이벤트 마커가 있는 탐색 트랙

ReplayScrubber

테스트 커버리지

관련 컴포넌트

FaqAccordion

PageAside

EnvPanel

BranchSelect

DesignGuidePanel

QuickActions

ReplayScrubber

활동 구간과 이벤트 마커가 있는 탐색 트랙

ReplayScrubber

테스트 커버리지

관련 컴포넌트

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

빠른 작업