UI 헬퍼

headless 클라이언트는 화면을 그리지 않으므로 버튼·목록·폼은 직접 만듭니다. 다만 이슈 상세의 세션 리플레이 다시보기 뷰어는 만들기 번거로운 부분이라, 이 부분만 그대로 쓸 수 있도록 컴포넌트를 제공합니다.

SessionReplayViewer

React로 이슈 상세 화면을 만든다면 issue-sticker/headless/react의 SessionReplayViewer를 그대로 붙이면 됩니다.

import { SessionReplayViewer } from 'issue-sticker/headless/react';

function IssueDetail({ issue }: { issue: HeadlessSnapshot['activeIssue'] }) {
  return <SessionReplayViewer issue={issue} />;
}

나머지 UI(버튼·목록·폼)는 클라이언트 메서드와 snapshot을 이용해 제품 디자인대로 자유롭게 구성하면 됩니다.