import { Search, RefreshCw } from "lucide-react"; export default function App() { // 저장된 역 이름 (앱 저장소) const [station, setStation] = useAppStorage("subwaySelectedStation", "홍대입구"); // 저장된 선택 호선 (호선별 세그먼트 탭) const [selectedLine, setSelectedLine] = useSharedStorage("subwaySelectedLine", "전체"); // 입력 폼의 역 이름 (ephemeral) const [inputValue, setInputValue] = useState(station); // API 도착 정보 const [data, setData] = useState(null); // 로딩 상태 const [loading, setLoading] = useState(false); // 에러 상태 const [error, setError] = useState(""); // 마지막 갱신 시각 const [fetchedAt, setFetchedAt] = useState(null); // 새로고침 회전 애니메이션 const [refreshing, setRefreshing] = useState(false); // 수동 새로고침 방지 (더블클릭 락) const reloadRef = useRef(null); // 자동 갱신 타이머 useEffect(() => { let timer = null; if (station) { fetchArrivals(); timer = setInterval(fetchArrivals, 30000); } return () => { if (timer) clearInterval(timer); }; // eslint-disable-next-line }, [station]); // 역 이름이 바뀌면 input도 동기화 useEffect(() => { setInputValue(station); }, [station]); // 도착 데이터 불러오기 const fetchArrivals = useCallback(() => { if (!station) return; setLoading(true); setError(""); fetch(`/api/services/transit?station=${encodeURIComponent(station)}&country=KR&limit=50`) .then(r => r.json()) .then(d => { setData(d); setFetchedAt(new Date()); setError(""); setLoading(false); }) .catch(() => { setLoading(false); setError("도착 정보를 불러오지 못했습니다. 네트워크를 확인하세요."); }); }, [station]); // 수동 조회/새로고침 버튼 클릭 const handleManualFetch = useCallback(() => { if (!inputValue.trim()) return; setStation(inputValue.trim()); // station 상태와 input 분리됨! setRefreshing(true); setTimeout(() => setRefreshing(false), 800); }, [inputValue, setStation]); // 엔터 입력시 조회 const handleInputKeyDown = e => { if (e.key === "Enter" && inputValue.trim()) { handleManualFetch(); } }; // 도착 정보를 전체 -> 호선별로 그룹핑 const groupedArrivals = React.useMemo(() => { const g = {}; if (data && data.arrivals && Array.isArray(data.arrivals)) { data.arrivals.forEach(a => { const key = a.line ?? "기타"; if (!g[key]) g[key] = []; g[key].push(a); }); } return g; }, [data]); // segment 탭 리스트 생성 (호선 목록) + "전체" 탭 포함 const lineTabs = React.useMemo(() => { const lines = Object.keys(groupedArrivals); lines.sort((a, b) => { // 한글/숫자 우선순위 정렬 const numA = parseInt(a.replace(/[^0-9]/g, ""), 10); const numB = parseInt(b.replace(/[^0-9]/g, ""), 10); if (!isNaN(numA) && !isNaN(numB)) return numA - numB; return a.localeCompare(b, "ko"); }); return ["전체", ...lines]; }, [groupedArrivals]); // 선택된 호선별 도착정보 필터링 const filteredArrivals = React.useMemo(() => { if (selectedLine === "전체") { // 전체는 모든 arrivals 합치기 if (!data?.arrivals) return []; return data.arrivals; } return groupedArrivals[selectedLine] || []; }, [selectedLine, groupedArrivals, data]); // 호선별 Empty 상태 판단 const isEmpty = filteredArrivals.length === 0; // UI 렌더 return (

{/* 헤더 */}

지하철 실시간 도착 시간

{/* 메인 컨텐츠 */}

{/* 역 선택기 */}

지하철역 입력

setInputValue(e.target.value)} onKeyDown={handleInputKeyDown} autoComplete="off" spellCheck={false} />

{/* 호선별 Segment Tabs */} {lineTabs.length > 1 && (

{lineTabs.map(line => { const active = line === selectedLine; return ( ); })}

)} {/* 에러 */} {!!error && (

⚠️ {error}

)} {/* 로딩 스켈레톤 */} {loading && (

)} {/* 도착 정보 or Empty */} {!loading && !error && (

{isEmpty ? ( ) : ( )}

)} {/* 데이터 신선도 & 출처 */}

{fetchedAt && {fetchedAt.toLocaleTimeString()} 기준} {station && 📍 {station}역} 데이터 출처: 서울열린데이터광장

); } // 전체 혹은 선택된 호선의 도착정보 리스트 function ArrivalList({ arrivals }) { if (!arrivals || arrivals.length === 0) return null; // 도착정보를 direction 기준으로 그룹핑 (방향별 표시) const groupedByDirection = arrivals.reduce((acc, arrival) => { const dir = arrival.direction ?? "알 수 없음"; if (!acc[dir]) acc[dir] = []; acc[dir].push(arrival); return acc; }, {}); // 방향별 렌더 return ( <> {Object.entries(groupedByDirection).map(([direction, list]) => (

방향: {direction}

{list.map((arrival, i) => ( ))}

))} ); } // 도착정보 한 줄 function ArrivalRow({ arrival }) { const { destination, direction, arrivalMessage } = arrival; return (

{destination ?? '-'} {direction ?? '-'}

{arrivalMessage ?? '-'}

); } // 빈 상태 표시 function EmptyState({ message }) { return (

🚇

{message}

다른 역 이름을 입력하여 도착 정보를 확인해보세요.

); } // 애니메이션 효과용 (조회 버튼 커스텀) // Tailwind CSS 확장 (slow spin) if (typeof window !== "undefined" && !document.getElementById("spin-slow-keyframes")) { const style = document.createElement("style"); style.id = "spin-slow-keyframes"; style.innerHTML = `.animate-spin-slow {animation: spin 1.5s linear infinite;}`; document.head.appendChild(style); }