import React, { useState, useRef, useEffect, useMemo } from "react"; import { Sun, CloudRain, Wind, Thermometer, Loader2, RefreshCw } from "lucide-react"; import dayjs from "dayjs"; export default function App() { const city = "서울"; const { data, loading, error, refetch, fetchedAt } = useData("weather", { q: city }); // 시간별 (오늘) 차트 데이터 준비 const hourly = data?.hourly || []; const today = hourly.filter(h => { if (!h.dt) return false; const d = new Date(h.dt * 1000); return d.toDateString() === new Date().toDateString(); }); const chartData = today.slice(0, 16); // 오전~밤까지 최대 16시간 // 요일 이름 변환 const getWeekday = (dt) => { return new Date(dt * 1000).toLocaleDateString("ko", { weekday: "short" }); }; // 시간 표시 const getHour = (dt) => { return new Date(dt * 1000).getHours() + "시"; }; // 최대-최소로 SVG 크기 맞춤 const temps = chartData.map(h => h.temp); const tempMin = Math.min(...temps, 0); const tempMax = Math.max(...temps, 0); // SVG 높이(80px): 상단30px~하단70px 사이 const tempToY = (t) => { if (tempMax === tempMin) return 50; return 30 + 40 * (1 - (t - tempMin) / (tempMax - tempMin)); }; // 7일 예보 (5일만 오면 최대 7개 채움) const forecast = useMemo(() => { const arr = data?.forecast ?? []; // 7일로 확장 (5일 이하이면 마지막 복제) if (arr.length >= 7) return arr.slice(0, 7); if (arr.length === 0) return []; const extra = new Array(7 - arr.length).fill(arr[arr.length - 1]); return arr.concat(extra); }, [data]); if (loading) return (

날씨 정보를 불러오는 중...

); if (error) return (

날씨 정보를 가져오지 못했어요

); if (!data?.current) return null; return (

{/* 현재 날씨 */}

{data.current.icon &&

}

{Math.round(data.current.temp ?? 0)}°

{data.current.description ?? '-'}

체감 {Math.round(data.current.feels_like ?? 0)}° · {data.city ?? city}

{data.current.humidity ?? '-'}%

{data.current.wind_speed ?? '-'} m/s

{fetchedAt &&

{dayjs(fetchedAt).format('M월 D일 HH:mm')} 기준

}

{/* 오늘 시간별 기온 차트 */}

시간별 기온 변화

{chartData.length > 2 ? (

) :

시간별 데이터가 부족해요

}

{/* 7일 예보 카드 */}

요일별 예보

{forecast.map((day,i)=>(

{getWeekday(day.dt)} {day.icon &&

} {Math.round(day.temp_max)}° / {Math.round(day.temp_min)}° {day.description ?? '-'}

))}

); }

서울 이번주 날씨 한눈에 보기

서울 이번주 날씨 한눈에 보기

reviews