import { RefreshCw, MapPin, Train, Clock, AlertCircle } from "lucide-react"; export default function App() { const [data, setData] = useSharedStorage("misaLine5Data", null); const [fetchedAt, setFetchedAt] = useSharedStorage("misaLine5FetchedAt", null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [now, setNow] = useState(new Date()); const intervalRef = useRef(null); const tickRef = useRef(null); const fetchArrivals = useCallback(() => { setLoading(true); setError(null); fetch(`/api/services/transit?station=${encodeURIComponent("미사")}&country=KR&limit=20`) .then(r => r.json()) .then(d => { if (d && (d.arrivals !== undefined)) { setData(d); setFetchedAt(new Date().toISOString()); } else { setError("데이터를 불러올 수 없습니다. 다시 시도해 주세요."); } setLoading(false); }) .catch(() => { setError("데이터를 불러올 수 없습니다. 다시 시도해 주세요."); setLoading(false); }); }, []); useEffect(() => { fetchArrivals(); intervalRef.current = setInterval(fetchArrivals, 30000); return () => clearInterval(intervalRef.current); }, [fetchArrivals]); useEffect(() => { tickRef.current = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(tickRef.current); }, []); const arrivals = ((data?.arrivals) || []).filter(a => a.line && (a.line.includes("5") || a.line.includes("5호선")) ); const allArrivals = arrivals.length > 0 ? arrivals : (data?.arrivals || []); const getRemainSec = (a) => { if (typeof a.arrivalSec === "number" && a.arrivalSec >= 0) return a.arrivalSec; return null; }; const formatRemain = (sec) => { if (sec === null || sec === undefined) return null; if (sec <= 0) return "곧 도착"; const m = Math.floor(sec / 60); const s = sec % 60; if (m === 0) return `${s}초`; return `${m}분 ${s}초`; }; const sorted = [...allArrivals].sort((a, b) => { const sa = getRemainSec(a) ?? 99999; const sb = getRemainSec(b) ?? 99999; return sa - sb; }); const soonest = sorted.length > 0 ? sorted[0] : null; const soonestSec = soonest ? getRemainSec(soonest) : null; const fetchedAtDate = fetchedAt ? new Date(fetchedAt) : null; return (

{/* Header Info */}

미사역 5호선 {loading && }

{fetchedAtDate && (

{fetchedAtDate.toLocaleTimeString("ko-KR")} 기준 · 30초마다 자동 갱신

)}

{/* Soonest Train Hero */} {soonest && soonestSec !== null && (

가장 빠른 열차

{soonest.destination || soonest.direction || "방향 미정"} 방면

{soonest.arrivalLocation && (

현재: {soonest.arrivalLocation}

)} {soonest.trainLine && (

{soonest.trainLine}

)}

{formatRemain(soonestSec)}

남음

{soonest.arrivalMessage && (

{soonest.arrivalMessage}

)}

)} {/* Arrival List */}

{error ? (

{error}

) : loading && !data ? (

{[1, 2, 3, 4].map(i => (

))}

) : allArrivals.length === 0 ? (

도착 예정 열차가 없습니다.

) : (

전체 도착 예정 열차 ({sorted.length}개)

{(sorted || []).map((a, idx) => { const sec = getRemainSec(a); const remain = formatRemain(sec); const isFirst = idx === 0; return (

{idx + 1}

{a.destination || a.direction || "방향 미정"} 방면 {a.line && ( {a.line} )} {a.isLast && ( 막차 )}

{a.arrivalLocation && ( 현재: {a.arrivalLocation} )} {a.direction && a.direction !== a.destination && ( {a.direction} )}

{a.arrivalMessage && (

{a.arrivalMessage}

)}

{remain ? (

{remain}

) : (

—

)} {a.arrivalCode && (

{a.arrivalCode}

)}

); })}

)} {/* Footer */}

{fetchedAtDate && {fetchedAtDate.toLocaleTimeString("ko-KR")} 기준} · 📍 미사역 · 데이터 출처: 서울열린데이터광장

{/* Refresh Button */}

); }