73 lines
3.1 KiB
TypeScript
73 lines
3.1 KiB
TypeScript
import React, { useState, useCallback } from 'react'
|
|
import { View, Text, FlatList, StyleSheet, RefreshControl } from 'react-native'
|
|
import { useFocusEffect } from 'expo-router'
|
|
import { COLORS } from '../../constants/Config'
|
|
import { getDeployHistory } from '../../services/api'
|
|
|
|
const STATUS_COLOR: Record<string, string> = {
|
|
SUCCESS: COLORS.success, COMPLETED: COLORS.success,
|
|
FAILURE: COLORS.danger, FAILED: COLORS.danger,
|
|
RUNNING: COLORS.accent, IN_PROGRESS: COLORS.accent,
|
|
}
|
|
|
|
export default function DeployHistoryScreen() {
|
|
const [items, setItems] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true)
|
|
try { const r = await getDeployHistory(); setItems(r.data?.items ?? r.data ?? []) }
|
|
catch { setItems([]) }
|
|
finally { setLoading(false) }
|
|
}, [])
|
|
|
|
useFocusEffect(useCallback(() => { load() }, [load]))
|
|
|
|
return (
|
|
<FlatList
|
|
data={items}
|
|
keyExtractor={(_, i) => String(i)}
|
|
refreshControl={<RefreshControl refreshing={loading} onRefresh={load} />}
|
|
ListEmptyComponent={<Text style={s.empty}>배포 이력이 없습니다.</Text>}
|
|
contentContainerStyle={{ padding: 12, paddingLeft: 40 }}
|
|
style={{ backgroundColor: COLORS.bg }}
|
|
renderItem={({ item, index }) => {
|
|
const color = STATUS_COLOR[item.status ?? ''] ?? COLORS.muted
|
|
const dur = item.duration_sec ? `${Math.ceil(item.duration_sec / 60)}분` : '-'
|
|
return (
|
|
<View style={s.row}>
|
|
{/* 타임라인 */}
|
|
<View style={s.timeline}>
|
|
<View style={[s.dot, { backgroundColor: color }]} />
|
|
{index < items.length - 1 && <View style={s.line} />}
|
|
</View>
|
|
<View style={s.content}>
|
|
<View style={s.headerRow}>
|
|
<Text style={s.project}>{item.project ?? 'N/A'}</Text>
|
|
<View style={[s.badge, { backgroundColor: color }]}>
|
|
<Text style={s.badgeText}>{item.status ?? '-'}</Text>
|
|
</View>
|
|
</View>
|
|
<Text style={s.meta}>{item.started_at?.slice(0, 16).replace('T', ' ')} · {dur} · {item.deployed_by ?? '-'}</Text>
|
|
</View>
|
|
</View>
|
|
)
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
row: { flexDirection: 'row', marginBottom: 0 },
|
|
timeline: { position: 'absolute', left: -28, top: 0, bottom: 0, alignItems: 'center', width: 16 },
|
|
dot: { width: 12, height: 12, borderRadius: 6, marginTop: 14 },
|
|
line: { flex: 1, width: 2, backgroundColor: COLORS.border, marginTop: 2 },
|
|
content: { flex: 1, backgroundColor: '#fff', borderRadius: 10, padding: 12, marginBottom: 8, elevation: 1 },
|
|
headerRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 },
|
|
project: { fontSize: 14, fontWeight: '700', color: COLORS.text },
|
|
badge: { borderRadius: 4, paddingHorizontal: 6, paddingVertical: 2 },
|
|
badgeText: { fontSize: 10, color: '#fff', fontWeight: '700' },
|
|
meta: { fontSize: 12, color: COLORS.muted },
|
|
empty: { textAlign: 'center', color: COLORS.muted, marginTop: 40 },
|
|
})
|