대화형 데모를 문서에 추가

문서에 대화형 데모 추가하기

대화형 데모는 @remotion/player를 사용하여 문서 페이지에 Remotion 컴포지션을 인라인으로 렌더링합니다. 이 데모는 packages/docs/components/demos/ 디렉토리에 있습니다.

단계

1. 컴포넌트 생성 — packages/docs/components/demos/ 디렉토리 (예: MyDemo.tsx)에 표준 React 컴포넌트를 만듭니다. 이 컴포넌트는 useCurrentFrame() 및 useVideoConfig() 같은 Remotion 훅을 사용해야 합니다.

2. 데모 등록 — packages/docs/components/demos/types.ts에서 다음을 수행합니다:

   • 컴포넌트를 가져옵니다.
   • 다음 필드를 포함하는 DemoType 객체를 내보냅니다:
     • id: <Demo type="..." />에서 사용할 고유 문자열
     • comp: React 컴포넌트
     • compWidth / compHeight: 캔버스 크기 (예: 1280x720)
     • fps: 프레임 속도 (일반적으로 30)
     • durationInFrames: 애니메이션 길이
     • autoPlay: 자동 재생 여부
     • options: 대화형 컨트롤 배열 (빈 [] 가능)

3. 데모 배열에 추가 — packages/docs/components/demos/index.tsx에서:

   • ./types에서 데모 상수를 가져옵니다.
   • demos 배열에 추가합니다.

4. MDX에서 사용 — <Demo type="your-id" />로 사용합니다.

옵션

옵션은 플레이어 아래에 대화형 컨트롤을 추가합니다. 각 옵션에는 name과 optional ('no', 'default-enabled', 또는 'default-disabled')이 필요합니다.

지원되는 타입:

• type: 'numeric' — min, max, step, default가 있는 슬라이더
• type: 'boolean' — default가 있는 체크박스
• type: 'enum' — values 배열과 default가 있는 드롭다운
• type: 'string' — default가 있는 텍스트 입력

옵션 값은 inputProps로 컴포넌트에 전달됩니다. 일반 React props로 접근할 수 있습니다.

예제 등록

export const myDemo: DemoType = {
  comp: MyDemoComp,
  compHeight: 720,
  compWidth: 1280,
  durationInFrames: 150,
  fps: 30,
  id: 'my-demo',
  autoPlay: true,
  options: [],
};