184 lines
8.2 KiB
TypeScript
184 lines
8.2 KiB
TypeScript
import { useState, useRef } from 'react'
|
|
import {
|
|
View, Text, Pressable, StyleSheet, ScrollView,
|
|
ActivityIndicator, Alert,
|
|
} from 'react-native'
|
|
import { COLORS, API_BASE } from '../../constants/Config'
|
|
import { getToken } from '../../utils/auth'
|
|
import { VoiceInput } from '../../components/VoiceInput'
|
|
|
|
// 음성 명령 → ITSM 매핑
|
|
const VOICE_SHORTCUTS = [
|
|
{ label: '서버 상태', command: '/server status', icon: '🖥️' },
|
|
{ label: 'SR 만들기', command: '/sr create', icon: '📋' },
|
|
{ label: '배포 시작', command: '/deploy', icon: '🚀' },
|
|
{ label: '장애 보고', command: '/incident create',icon: '🚨' },
|
|
{ label: '대시보드', command: '/dashboard', icon: '📊' },
|
|
{ label: '경보 목록', command: '/alert list', icon: '🔔' },
|
|
]
|
|
|
|
export default function VoiceTab() {
|
|
const [isListening, setListening] = useState(false)
|
|
const [transcript, setTranscript] = useState('')
|
|
const [result, setResult] = useState<{ cmd: string; response: string } | null>(null)
|
|
const [loading, setLoading] = useState(false)
|
|
const [history, setHistory] = useState<{ text: string; cmd: string; time: string }[]>([])
|
|
|
|
async function processVoice(text: string) {
|
|
if (!text.trim()) return
|
|
setTranscript(text)
|
|
setLoading(true)
|
|
|
|
try {
|
|
const token = await getToken()
|
|
const res = await fetch(`${API_BASE}/api/ux/voice-process`, {
|
|
method: 'POST',
|
|
headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ text, context: 'voice-tab' }),
|
|
})
|
|
const data = await res.json()
|
|
|
|
if (data.mapped_command) {
|
|
setResult({ cmd: data.mapped_command, response: `실행: ${data.mapped_command}` })
|
|
setHistory(prev => [{
|
|
text, cmd: data.mapped_command,
|
|
time: new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' }),
|
|
}, ...prev.slice(0, 9)])
|
|
} else {
|
|
setResult({ cmd: '', response: '명령을 인식하지 못했습니다. 다시 시도하거나 아래 빠른 명령을 사용하세요.' })
|
|
}
|
|
} catch (e) {
|
|
setResult({ cmd: '', response: '서버 연결 오류' })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
async function runShortcut(command: string, label: string) {
|
|
setTranscript(label)
|
|
setLoading(true)
|
|
setResult({ cmd: command, response: `실행 중: ${command}` })
|
|
setHistory(prev => [{
|
|
text: label, cmd: command,
|
|
time: new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' }),
|
|
}, ...prev.slice(0, 9)])
|
|
setLoading(false)
|
|
}
|
|
|
|
return (
|
|
<ScrollView style={S.root} contentContainerStyle={{ paddingBottom: 40 }}>
|
|
{/* 헤더 */}
|
|
<View style={S.header}>
|
|
<Text style={S.title}>🎤 음성 명령</Text>
|
|
<Text style={S.subtitle}>한국어로 말하거나 아래 빠른 명령을 탭하세요</Text>
|
|
</View>
|
|
|
|
{/* 메인 마이크 버튼 */}
|
|
<View style={S.micSection}>
|
|
<View style={S.micWrap}>
|
|
<VoiceInput onTranscript={processVoice} size="normal" />
|
|
</View>
|
|
<Text style={S.micHint}>
|
|
{isListening ? '듣고 있어요... 명령을 말씀하세요' : '마이크를 탭하여 시작'}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* 인식 결과 */}
|
|
{loading && (
|
|
<View style={S.resultBox}>
|
|
<ActivityIndicator color={COLORS.gnbBg} />
|
|
<Text style={{ marginTop: 8, color: '#64748b' }}>처리 중...</Text>
|
|
</View>
|
|
)}
|
|
{!loading && result && (
|
|
<View style={[S.resultBox, result.cmd ? S.resultSuccess : S.resultFail]}>
|
|
{transcript ? <Text style={S.transcriptText}>💬 "{transcript}"</Text> : null}
|
|
{result.cmd ? (
|
|
<View style={S.cmdBadge}>
|
|
<Text style={S.cmdText}>{result.cmd}</Text>
|
|
</View>
|
|
) : null}
|
|
<Text style={S.responseText}>{result.response}</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* 빠른 명령 버튼 */}
|
|
<Text style={S.sectionTitle}>⚡ 빠른 명령</Text>
|
|
<View style={S.shortcuts}>
|
|
{VOICE_SHORTCUTS.map((s, i) => (
|
|
<Pressable key={i} onPress={() => runShortcut(s.command, s.label)} style={S.shortBtn}>
|
|
<Text style={S.shortIcon}>{s.icon}</Text>
|
|
<Text style={S.shortLabel}>{s.label}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
|
|
{/* 사용 이력 */}
|
|
{history.length > 0 && (
|
|
<>
|
|
<Text style={S.sectionTitle}>📋 최근 명령</Text>
|
|
<View style={S.historyBox}>
|
|
{history.map((h, i) => (
|
|
<View key={i} style={S.historyRow}>
|
|
<Text style={S.historyTime}>{h.time}</Text>
|
|
<Text style={S.historyText} numberOfLines={1}>{h.text}</Text>
|
|
<Text style={S.historyCmd}>{h.cmd}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</>
|
|
)}
|
|
|
|
{/* 도움말 */}
|
|
<View style={S.helpBox}>
|
|
<Text style={S.helpTitle}>💡 음성 명령 예시</Text>
|
|
{['"서버 상태 확인해줘"', '"SR 만들어줘"', '"배포 시작해"', '"장애 보고해줘"'].map((e, i) => (
|
|
<Text key={i} style={S.helpItem}>• {e}</Text>
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
const S = StyleSheet.create({
|
|
root: { flex: 1, backgroundColor: '#f8fafc' },
|
|
header: { padding: 20, paddingBottom: 12, backgroundColor: COLORS.gnbBg },
|
|
title: { fontSize: 20, fontWeight: '800', color: '#fff' },
|
|
subtitle: { fontSize: 12, color: 'rgba(255,255,255,0.7)', marginTop: 4 },
|
|
micSection: { alignItems: 'center', paddingVertical: 32, backgroundColor: '#fff',
|
|
borderBottomWidth: 1, borderBottomColor: COLORS.border },
|
|
micWrap: { width: 80, height: 80, borderRadius: 40, backgroundColor: '#eff6ff',
|
|
alignItems: 'center', justifyContent: 'center',
|
|
shadowColor: COLORS.gnbBg, shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.2, shadowRadius: 12, elevation: 6 },
|
|
micHint: { marginTop: 12, fontSize: 13, color: '#64748b' },
|
|
resultBox: { margin: 12, borderRadius: 12, padding: 16, alignItems: 'center' },
|
|
resultSuccess:{ backgroundColor: '#eff6ff', borderWidth: 1, borderColor: '#bfdbfe' },
|
|
resultFail: { backgroundColor: '#fff5f5', borderWidth: 1, borderColor: '#fca5a5' },
|
|
transcriptText:{ fontSize: 13, color: '#64748b', marginBottom: 8, fontStyle: 'italic' },
|
|
cmdBadge: { backgroundColor: COLORS.gnbBg, borderRadius: 8,
|
|
paddingHorizontal: 14, paddingVertical: 6, marginBottom: 8 },
|
|
cmdText: { color: '#fff', fontWeight: '700', fontSize: 14, fontFamily: 'monospace' },
|
|
responseText: { fontSize: 13, color: '#374151', textAlign: 'center' },
|
|
sectionTitle: { fontSize: 14, fontWeight: '700', color: '#374151',
|
|
paddingHorizontal: 16, paddingVertical: 12 },
|
|
shortcuts: { flexDirection: 'row', flexWrap: 'wrap', paddingHorizontal: 12, gap: 8 },
|
|
shortBtn: { width: '30%', backgroundColor: '#fff', borderRadius: 12, padding: 12,
|
|
alignItems: 'center', borderWidth: 1, borderColor: COLORS.border,
|
|
shadowColor: '#000', shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.05, shadowRadius: 3, elevation: 1 },
|
|
shortIcon: { fontSize: 24, marginBottom: 4 },
|
|
shortLabel: { fontSize: 12, fontWeight: '600', color: COLORS.gnbBg, textAlign: 'center' },
|
|
historyBox: { marginHorizontal: 12, backgroundColor: '#fff', borderRadius: 12,
|
|
borderWidth: 1, borderColor: COLORS.border, overflow: 'hidden' },
|
|
historyRow: { flexDirection: 'row', alignItems: 'center', padding: 10,
|
|
borderBottomWidth: 1, borderBottomColor: '#f1f5f9' },
|
|
historyTime: { fontSize: 11, color: '#94a3b8', width: 40 },
|
|
historyText: { flex: 1, fontSize: 12, color: '#374151', marginHorizontal: 8 },
|
|
historyCmd: { fontSize: 11, color: COLORS.gnbBg, fontFamily: 'monospace' },
|
|
helpBox: { margin: 12, backgroundColor: '#fff', borderRadius: 12, padding: 16,
|
|
borderWidth: 1, borderColor: COLORS.border },
|
|
helpTitle: { fontSize: 13, fontWeight: '700', color: '#374151', marginBottom: 8 },
|
|
helpItem: { fontSize: 12, color: '#64748b', marginBottom: 4 },
|
|
})
|