74 lines
3.5 KiB
TypeScript
74 lines
3.5 KiB
TypeScript
import React, { useState, useCallback } from 'react'
|
|
import { View, Text, FlatList, StyleSheet, TouchableOpacity, Alert } from 'react-native'
|
|
import { useFocusEffect, useRouter } from 'expo-router'
|
|
import * as SecureStore from 'expo-secure-store'
|
|
import { COLORS } from '../../constants/Config'
|
|
import client from '../../services/api'
|
|
|
|
const SHORTCUTS_KEY = 'guardia_shortcuts'
|
|
|
|
const ALL_SHORTCUTS = [
|
|
{ key: 'sr', label: 'SR 목록', route: '/(tabs)/sr', icon: '📋' },
|
|
{ key: 'monitoring', label: '서버 모니터링', route: '/(tabs)/monitoring', icon: '📡' },
|
|
{ key: 'chat', label: 'AI 챗봇', route: '/(tabs)/chat', icon: '🤖' },
|
|
{ key: 'kb', label: '지식베이스', route: '/(tabs)/kb', icon: '📚' },
|
|
{ key: 'approvals', label: '승인 관리', route: '/(tabs)/approval', icon: '✅' },
|
|
{ key: 'cve', label: 'CVE 현황', route: '/(tabs)/cve_detail', icon: '🔒' },
|
|
{ key: 'health', label: '건강 점수', route: '/(tabs)/health_scorecard', icon: '💊' },
|
|
{ key: 'leaderboard', label: '성과 리더보드', route: '/(tabs)/team_leaderboard', icon: '🏆' },
|
|
]
|
|
|
|
export default function FavoritesScreen() {
|
|
const [pinned, setPinned] = useState<string[]>([])
|
|
const router = useRouter()
|
|
|
|
const load = useCallback(async () => {
|
|
const raw = await SecureStore.getItemAsync(SHORTCUTS_KEY)
|
|
setPinned(raw ? JSON.parse(raw) : ['sr', 'monitoring', 'chat'])
|
|
}, [])
|
|
|
|
useFocusEffect(useCallback(() => { load() }, [load]))
|
|
|
|
const toggle = async (key: string) => {
|
|
const next = pinned.includes(key) ? pinned.filter(k => k !== key) : [...pinned, key]
|
|
setPinned(next)
|
|
await SecureStore.setItemAsync(SHORTCUTS_KEY, JSON.stringify(next))
|
|
}
|
|
|
|
const pinnedItems = ALL_SHORTCUTS.filter(s => pinned.includes(s.key))
|
|
const unpinned = ALL_SHORTCUTS.filter(s => !pinned.includes(s.key))
|
|
|
|
return (
|
|
<FlatList
|
|
data={[...pinnedItems, ...unpinned]}
|
|
keyExtractor={item => item.key}
|
|
style={{ backgroundColor: COLORS.bg }}
|
|
contentContainerStyle={{ padding: 12 }}
|
|
ListHeaderComponent={<Text style={s.header}>즐겨찾기 바로가기</Text>}
|
|
renderItem={({ item }) => {
|
|
const isPinned = pinned.includes(item.key)
|
|
return (
|
|
<View style={s.row}>
|
|
<TouchableOpacity style={s.link} onPress={() => router.push(item.route as any)}>
|
|
<Text style={s.icon}>{item.icon}</Text>
|
|
<Text style={s.label}>{item.label}</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={[s.pin, { backgroundColor: isPinned ? COLORS.accent + '20' : COLORS.border + '40' }]} onPress={() => toggle(item.key)}>
|
|
<Text style={{ color: isPinned ? COLORS.accent : COLORS.muted, fontSize: 12, fontWeight: '700' }}>{isPinned ? '고정됨' : '고정'}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
header: { fontSize: 16, fontWeight: '800', color: COLORS.text, marginBottom: 12 },
|
|
row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', borderRadius: 10, padding: 12, marginBottom: 6, elevation: 1, gap: 8 },
|
|
link: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 10 },
|
|
icon: { fontSize: 22, width: 32, textAlign: 'center' },
|
|
label: { fontSize: 14, fontWeight: '700', color: COLORS.text },
|
|
pin: { borderRadius: 6, paddingHorizontal: 10, paddingVertical: 6 },
|
|
})
|