278f9639c9
Config.ts: - COLORS: accent #4f6ef7 -> #00A0C8(cyan), primary #003366(navy) - gnbBg: deeper navy #001530 _layout.tsx: - TabBar: elevated shadow, cyan active tint, bolder label index.tsx (Dashboard): - StatCard: top color bar + icon box (screenshot9 pattern) - Header: deep navy gradient rounded bottom - QuickBtn: bg-light card style - Section: deeper shadow, navy title login.tsx: - Background: deep navy #001530 - Card: white + strong shadow - Button: solid cyan with shadow - Label: cyan uppercase Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { Tabs } from 'expo-router'
|
|
import { View, Text, StyleSheet } from 'react-native'
|
|
import { COLORS } from '../../constants/Config'
|
|
|
|
function TabIcon({ icon, label, focused }: { icon: string; label: string; focused: boolean }) {
|
|
return (
|
|
<View style={[tab.wrap, focused && tab.active]}>
|
|
<Text style={tab.icon}>{icon}</Text>
|
|
<Text style={[tab.label, focused && tab.labelActive]}>{label}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const tab = StyleSheet.create({
|
|
wrap: { alignItems: 'center', paddingTop: 4, paddingHorizontal: 2 },
|
|
active: {},
|
|
icon: { fontSize: 21 },
|
|
label: { fontSize: 10, color: COLORS.muted, marginTop: 2, letterSpacing: 0.2 },
|
|
labelActive: { color: COLORS.accent, fontWeight: '700' },
|
|
})
|
|
|
|
export default function TabLayout() {
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerStyle: { backgroundColor: COLORS.gnbBg },
|
|
headerTintColor: '#fff',
|
|
headerTitleStyle: { fontWeight: '800', fontSize: 16, letterSpacing: -0.3 },
|
|
tabBarStyle: {
|
|
backgroundColor: '#fff',
|
|
borderTopColor: COLORS.border,
|
|
borderTopWidth: 1,
|
|
height: 62,
|
|
elevation: 8,
|
|
shadowColor: '#003366',
|
|
shadowOffset: { width: 0, height: -2 },
|
|
shadowOpacity: 0.08,
|
|
shadowRadius: 8,
|
|
},
|
|
tabBarActiveTintColor: COLORS.accent,
|
|
tabBarInactiveTintColor: COLORS.muted,
|
|
tabBarShowLabel: false,
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: '대시보드',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="📊" label="대시보드" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="sr"
|
|
options={{
|
|
title: '서비스 요청',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="📋" label="SR" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="chat"
|
|
options={{
|
|
title: 'AI 챗봇',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="🤖" label="AI" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="notifications"
|
|
options={{
|
|
title: '알림',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="🔔" label="알림" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="dr"
|
|
options={{
|
|
title: 'DR 관제',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="🛡️" label="DR" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="network"
|
|
options={{
|
|
title: '네트워크',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="🔀" label="네트워크" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="settings"
|
|
options={{
|
|
title: '설정',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="⚙️" label="설정" focused={focused} />,
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
)
|
|
}
|