Components
Voice Indicator
음성 통화의 상태를 보여줍니다 — 마이크 버튼, 파형, 상태 칩으로 구성됩니다.
듣는 중
대기
코드 보기
<button class="tn-mic">🎙</button>
<span class="tn-wave"><i></i>×5</span>
<span class="tn-chip">듣는 중</span>
<!-- 종료: .tn-mic.end / 무음: .tn-wave.idle -->Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 통화 중 | 검정 마이크 + 파랑 파형 + 상태 칩 | 🎙 |
| 듣는 중 / 말하는 중 | 상태 칩 텍스트로 구분 — 파형은 입력 레벨 반영 | 듣는 중 |
| 종료 | 레드 버튼 (.end) | ✕ |
| 대기 | 파형 정지 (.idle) — 회색 4px |
Guidelines
✓ Do
- 파형은 실제 오디오 레벨과 연동 (장식 금지)
- 상태는 항상 텍스트 병기 (파형만으로 전달 금지)
- Agent Orb와 함께 쓸 땐 오브=에이전트, 파형=사용자
✕ Don't
- 파형에 여러 색 쓰지 않는다 (파랑 단색)
- 마이크 버튼을 화면에 2개 두지 않는다
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
마이크 버튼 | 52px / --foreground → hover 파랑 | |
종료 | var(--err) | |
파형 | 3px bar × 5 / var(--primary) |
비교
Voice Indicator vs Agent Orb — 파형은 사용자 음성 입력, 오브는 에이전트의 상태.