SpeechToText · Overview

스토리북 개발자들을 위한 내부 문서

Components

SpeechToText

Overview

SpeechToText는 Web Speech API로 음성을 텍스트로 변환하는 버튼입니다. 기본 스타일·아이콘·무음 종료 시간은 토큰/기본값을 따르고, className · icon · listeningIcon · timeout 등 props로 커스텀합니다. 소비 앱에서는 필요한 props만 전달해 사용합니다.

Basic

mic → stop → onResult. 지원 여부는 런타임에 표시됩니다.

  • idle클릭하면 인식 시작.
  • listening클릭하면 종료 후 텍스트 반환.

Web Speech API: 확인 중…

인식 버튼

종료 후 여기에 결과가 표시됩니다.

className

className으로 배경색, icon / listeningIcon으로 아이콘을 교체합니다.

  • className예: bg-[var(--surface-primary)]. bg-* 시 기본 배경 제거.

className

icon

idle(시작) 아이콘. 기본 MicIcon.

  • icon{resolvedIcon}로 바로 사용할 수 있는 형태로 전달. 예) <SpeechToText icon={<img src="/path/to/icon.png" alt="icon" />} />

icon

Timeout

무음 자동 종료 시간(ms). 미전달 시 기본 3000(3초). 소비 앱이 timeout props로 전달합니다.

  • defaultprops 미전달 → 3초.
  • timeout예: 10000 → 10초. 0 이하면 비활성.

default (3초)

timeout 미전달

timeout={10000}

10초 무음 시 종료

timeout={0}