feat(mobile): Expo → RN CLI 전환 + Android 빌드 성공
RN 0.85 + React 19 기반 apps/mobile-rn 프로젝트 생성. 6개 화면 이식 (Login, Dash, History, Record, Talk, Settings). @react-navigation/native + bottom-tabs 네비게이션 구성. Windows NDK CMake libc++_shared 링크 버그 워크아라운드 포함. Galaxy Fold (SM_F956N) 무선 디버깅 APK 설치 확인.
This commit is contained in:
yunchan8804
parent
55eb62189a
commit
bf36a9d97d
68 changed files with 13955 additions and 9375 deletions
224
apps/mobile-rn/src/screens/TalkScreen.tsx
Normal file
224
apps/mobile-rn/src/screens/TalkScreen.tsx
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
// apps/mobile-rn/src/screens/TalkScreen.tsx
|
||||
// AI Chat tab — text+voice chat
|
||||
// Converted from Expo → RN CLI
|
||||
|
||||
import React, { useState, useRef } from 'react'
|
||||
import {
|
||||
View,
|
||||
ScrollView,
|
||||
TextInput,
|
||||
StyleSheet,
|
||||
Pressable,
|
||||
KeyboardAvoidingView,
|
||||
Platform
|
||||
} from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import {
|
||||
PhosphorText,
|
||||
Led,
|
||||
Header,
|
||||
AppStatusBar,
|
||||
d3roNativePalette,
|
||||
d3roNativeFonts
|
||||
} from '@d3ro/ui-native'
|
||||
import { useI18n } from '@d3ro/i18n'
|
||||
|
||||
interface ChatMessage {
|
||||
id: string
|
||||
role: 'user' | 'assistant'
|
||||
content: string
|
||||
}
|
||||
|
||||
export default function TalkScreen(): React.ReactElement {
|
||||
const insets = useSafeAreaInsets()
|
||||
const { t } = useI18n()
|
||||
const scrollRef = useRef<ScrollView>(null)
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([
|
||||
{
|
||||
id: '1',
|
||||
role: 'assistant',
|
||||
content: t('mobile.talk.greeting')
|
||||
}
|
||||
])
|
||||
const [input, setInput] = useState('')
|
||||
|
||||
function handleSend(): void {
|
||||
if (!input.trim()) return
|
||||
const userMsg: ChatMessage = {
|
||||
id: String(Date.now()),
|
||||
role: 'user',
|
||||
content: input.trim()
|
||||
}
|
||||
setMessages((prev) => [...prev, userMsg])
|
||||
setInput('')
|
||||
// Phase M-5: actual AI response
|
||||
setTimeout(() => {
|
||||
scrollRef.current?.scrollToEnd({ animated: true })
|
||||
}, 100)
|
||||
}
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
keyboardVerticalOffset={80}
|
||||
>
|
||||
<Header
|
||||
title={t('mobile.talk.title')}
|
||||
paddingTop={insets.top}
|
||||
rightContent={
|
||||
<View style={styles.headerRight}>
|
||||
<PhosphorText variant="label" color="amber">{t('mobile.talk.live')}</PhosphorText>
|
||||
<Led color="green" size={6} />
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Chat Messages */}
|
||||
<ScrollView
|
||||
ref={scrollRef}
|
||||
style={styles.chatArea}
|
||||
contentContainerStyle={styles.chatContent}
|
||||
>
|
||||
{/* Date Badge */}
|
||||
<View style={styles.dateBadge}>
|
||||
<PhosphorText variant="label" color="muted">
|
||||
{new Date().toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
}).toUpperCase()}
|
||||
</PhosphorText>
|
||||
</View>
|
||||
|
||||
{messages.map((msg) => (
|
||||
<View
|
||||
key={msg.id}
|
||||
style={[
|
||||
styles.bubble,
|
||||
msg.role === 'user' ? styles.userBubble : styles.aiBubble
|
||||
]}
|
||||
>
|
||||
<PhosphorText
|
||||
variant="body"
|
||||
color={msg.role === 'user' ? 'amber' : 'primary'}
|
||||
style={styles.bubbleText}
|
||||
>
|
||||
{msg.content}
|
||||
</PhosphorText>
|
||||
<PhosphorText variant="label" color="muted" style={styles.bubbleLabel}>
|
||||
{msg.role === 'user' ? t('mobile.talk.you') : t('mobile.talk.claude')}
|
||||
</PhosphorText>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
{/* Input Area */}
|
||||
<View style={styles.inputArea}>
|
||||
<View style={styles.inputRow}>
|
||||
<TextInput
|
||||
style={styles.textInput}
|
||||
placeholder={t('mobile.talk.placeholder')}
|
||||
placeholderTextColor={d3roNativePalette.text.muted}
|
||||
value={input}
|
||||
onChangeText={setInput}
|
||||
onSubmitEditing={handleSend}
|
||||
returnKeyType="send"
|
||||
/>
|
||||
<Pressable style={styles.sendBtn} onPress={handleSend}>
|
||||
<View style={styles.sendArrow} />
|
||||
</Pressable>
|
||||
</View>
|
||||
<AppStatusBar style={styles.inputStatus} />
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: d3roNativePalette.bg.app },
|
||||
headerRight: { flexDirection: 'row', alignItems: 'center', gap: 8 },
|
||||
chatArea: { flex: 1 },
|
||||
chatContent: { padding: 20, paddingBottom: 20, gap: 16 },
|
||||
dateBadge: {
|
||||
alignSelf: 'center',
|
||||
backgroundColor: d3roNativePalette.bg.card,
|
||||
borderWidth: 1,
|
||||
borderColor: d3roNativePalette.border.default,
|
||||
borderRadius: 999,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
marginBottom: 8
|
||||
},
|
||||
bubble: {
|
||||
maxWidth: '85%',
|
||||
padding: 16,
|
||||
borderRadius: 16,
|
||||
marginBottom: 20
|
||||
},
|
||||
aiBubble: {
|
||||
alignSelf: 'flex-start',
|
||||
backgroundColor: d3roNativePalette.bg.card,
|
||||
borderWidth: 1,
|
||||
borderColor: d3roNativePalette.border.default,
|
||||
borderTopLeftRadius: 4
|
||||
},
|
||||
userBubble: {
|
||||
alignSelf: 'flex-end',
|
||||
backgroundColor: d3roNativePalette.accent.amberDim,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 92, 53, 0.3)',
|
||||
borderTopRightRadius: 4
|
||||
},
|
||||
bubbleText: { fontFamily: d3roNativeFonts.sans },
|
||||
bubbleLabel: {
|
||||
position: 'absolute',
|
||||
bottom: -16,
|
||||
fontSize: 9,
|
||||
letterSpacing: 1
|
||||
},
|
||||
inputArea: {
|
||||
backgroundColor: 'rgba(25, 25, 27, 0.95)',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: d3roNativePalette.border.default,
|
||||
paddingHorizontal: 12,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 8
|
||||
},
|
||||
inputRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: d3roNativePalette.bg.inset,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: d3roNativePalette.border.default,
|
||||
padding: 8
|
||||
},
|
||||
textInput: {
|
||||
flex: 1,
|
||||
color: d3roNativePalette.text.primary,
|
||||
fontSize: 14,
|
||||
paddingHorizontal: 8,
|
||||
fontFamily: d3roNativeFonts.sans
|
||||
},
|
||||
sendBtn: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: d3roNativePalette.accent.amberDim,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 92, 53, 0.3)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
sendArrow: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderLeftWidth: 5,
|
||||
borderRightWidth: 5,
|
||||
borderBottomWidth: 8,
|
||||
borderLeftColor: 'transparent',
|
||||
borderRightColor: 'transparent',
|
||||
borderBottomColor: d3roNativePalette.accent.amber
|
||||
},
|
||||
inputStatus: { paddingVertical: 4 }
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue