77 lines
3.4 KiB
TypeScript
77 lines
3.4 KiB
TypeScript
import React from 'react'
|
|
import { View, Text, Switch, StyleSheet, ScrollView } from 'react-native'
|
|
import { COLORS } from '../../constants/Config'
|
|
import { useTheme } from '../../contexts/ThemeContext'
|
|
import { useFontScale } from '../../contexts/FontContext'
|
|
|
|
export default function AccessibilityScreen() {
|
|
const { isDark, toggleTheme } = useTheme()
|
|
const { fontScale: scale, setFontScale: setScale } = useFontScale()
|
|
|
|
return (
|
|
<ScrollView style={{ flex: 1, backgroundColor: isDark ? COLORS.gnbBg : COLORS.bg }}>
|
|
<Text style={[s.header, isDark && { color: '#fff' }]}>접근성 설정</Text>
|
|
|
|
<Section title="시각">
|
|
<Row label="다크 모드" isDark={isDark}>
|
|
<Switch value={isDark} onValueChange={toggleTheme} />
|
|
</Row>
|
|
<Row label="글자 크기" isDark={isDark}>
|
|
<View style={s.scaleRow}>
|
|
{([1.0, 1.2, 1.5] as const).map(v => (
|
|
<Text
|
|
key={v}
|
|
style={[s.scaleBtn, scale === v && s.scaleBtnActive]}
|
|
onPress={() => setScale(v)}
|
|
>{v === 1.0 ? '기본' : v === 1.2 ? '크게' : '매우 크게'}</Text>
|
|
))}
|
|
</View>
|
|
</Row>
|
|
</Section>
|
|
|
|
<Section title="미리보기">
|
|
<View style={[s.previewBox, isDark && { backgroundColor: '#2d3748' }]}>
|
|
<Text style={[s.previewText, { fontSize: 14 * scale }, isDark && { color: '#fff' }]}>
|
|
이 텍스트는 현재 접근성 설정이 적용된 예시입니다.
|
|
</Text>
|
|
<Text style={[s.previewSub, { fontSize: 12 * scale }, isDark && { color: '#aaa' }]}>
|
|
서비스 요청 · 인시던트 · 배포 이력
|
|
</Text>
|
|
</View>
|
|
</Section>
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
|
return (
|
|
<View style={s.section}>
|
|
<Text style={s.sectionTitle}>{title}</Text>
|
|
{children}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function Row({ label, isDark, children }: { label: string; isDark: boolean; children: React.ReactNode }) {
|
|
return (
|
|
<View style={[s.row, isDark && { borderBottomColor: '#4a5568' }]}>
|
|
<Text style={[s.rowLabel, isDark && { color: '#e2e8f0' }]}>{label}</Text>
|
|
{children}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
header: { fontSize: 22, fontWeight: '800', color: COLORS.text, padding: 16, paddingBottom: 8 },
|
|
section: { backgroundColor: '#fff', marginHorizontal: 12, marginBottom: 12, borderRadius: 12, overflow: 'hidden', elevation: 1 },
|
|
sectionTitle: { fontSize: 12, color: COLORS.muted, fontWeight: '700', paddingHorizontal: 16, paddingTop: 12, paddingBottom: 4, textTransform: 'uppercase', letterSpacing: 1 },
|
|
row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 14, borderBottomWidth: 1, borderBottomColor: COLORS.light },
|
|
rowLabel: { fontSize: 15, color: COLORS.text },
|
|
scaleRow: { flexDirection: 'row', gap: 8 },
|
|
scaleBtn: { paddingHorizontal: 10, paddingVertical: 6, borderRadius: 6, backgroundColor: COLORS.light, fontSize: 12, color: COLORS.muted },
|
|
scaleBtnActive:{ backgroundColor: COLORS.accent, color: '#fff', fontWeight: '700' },
|
|
previewBox: { margin: 12, padding: 16, backgroundColor: COLORS.bg, borderRadius: 10 },
|
|
previewText: { fontWeight: '600', color: COLORS.text, marginBottom: 4 },
|
|
previewSub: { color: COLORS.muted },
|
|
})
|