export default function App() { const [location, setLocation] = useState("서울"); const [inputVal, setInputVal] = useState("서울"); const [weatherData, setWeatherData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const fetchWeather = useCallback(async (loc) => { setLoading(true); setError(null); try { const controller = new AbortController(); const timeout = setTimeout(() => controller.abort(), 10000); const res = await fetch(`/api/services/weather?q=${encodeURIComponent(loc)}`, { signal: controller.signal }); clearTimeout(timeout); if (!res.ok) throw new Error("날씨 데이터를 불러오지 못했습니다"); const data = await res.json(); setWeatherData(data); } catch (e) { if (e.name === "AbortError") setError("요청 시간이 초과되었습니다"); else setError(e.message || "알 수 없는 오류가 발생했습니다"); } finally { setLoading(false); } }, []); useEffect(() => { fetchWeather(location); }, [location, fetchWeather]); const handleSubmit = (e) => { e.preventDefault(); const trimmed = inputVal.trim(); if (!trimmed) return; setLocation(trimmed); }; const todayMax = weatherData?.current?.temp_max ?? weatherData?.forecast?.[0]?.temp_max ?? null; const todayMin = weatherData?.current?.temp_min ?? weatherData?.forecast?.[0]?.temp_min ?? null; const yesterdayMax = weatherData?.yesterday?.temp_max ?? null; const yesterdayMin = weatherData?.yesterday?.temp_min ?? null; const todayTemp = weatherData?.current?.temp ?? null; const yesterdayTemp = weatherData?.yesterday?.temp ?? null; const diffMax = (todayMax !== null && yesterdayMax !== null) ? +(todayMax - yesterdayMax).toFixed(1) : null; const diffMin = (todayMin !== null && yesterdayMin !== null) ? +(todayMin - yesterdayMin).toFixed(1) : null; const getBriefing = () => { if (diffMax === null && diffMin === null) return null; const maxText = diffMax !== null ? diffMax > 0 ? `최고기온은 어제보다 ${diffMax}°C 높고` : diffMax < 0 ? `최고기온은 어제보다 ${Math.abs(diffMax)}°C 낮고` : `최고기온은 어제와 동일하고` : null; const minText = diffMin !== null ? diffMin > 0 ? `최저기온은 ${diffMin}°C 높습니다` : diffMin < 0 ? `최저기온은 ${Math.abs(diffMin)}°C 낮습니다` : `최저기온은 어제와 같습니다` : null; if (maxText && minText) return `오늘 ${maxText}, ${minText}.`; if (maxText) return `오늘 ${maxText}.`; if (minText) return `오늘 ${minText}.`; return null; }; const getOverallFeeling = () => { if (diffMax === null && diffMin === null) return null; const diffs = []; if (diffMax !== null) diffs.push(diffMax); if (diffMin !== null) diffs.push(diffMin); // 3도 미만은 모두 비슷하다고 처리 const avgDiff = diffs.length > 0 ? (diffs || []).reduce((a, b) => a + b, 0) / diffs.length : 0; if (Math.abs(avgDiff) < 3) return { emoji: "😊", text: "어제랑 비슷해요", color: "text-slate-500" }; if (avgDiff >= 3) return { emoji: "🥵", text: "오늘 훨씬 더워요", color: "text-red-500" }; if (avgDiff > 1) return { emoji: "☀️", text: "오늘 더 따뜻해요", color: "text-orange-400" }; if (avgDiff <= -3) return { emoji: "🥶", text: "오늘 훨씬 추워요", color: "text-blue-600" }; if (avgDiff < -1) return { emoji: "❄️", text: "오늘 더 쌀쌀해요", color: "text-blue-400" }; return { emoji: "😊", text: "어제랑 비슷해요", color: "text-slate-500" }; }; const feeling = getOverallFeeling(); const briefing = getBriefing(); const TempRow = ({ label, todayVal, yesterdayVal, diff }) => { if (todayVal === null) return null; const isUp = diff > 0; const isDown = diff < 0; return (

{label}

어제

{yesterdayVal !== null ? Math.round(yesterdayVal) : "–"}°

{diff !== null && ( <> {isUp ? "↑" : isDown ? "↓" : "→"} {diff > 0 ? `+${diff}` : diff}° )}

오늘

{Math.round(todayVal)}°

); }; return (

{/* 위치 표시 */}

📍 {location}

{loading && (

날씨 데이터를 불러오는 중...

)} {!loading && error && (

⚠️

{error}

위치를 다시 확인하거나 잠시 후 시도해 주세요

)} {!loading && !error && weatherData && ( <> {/* 전체 느낌 헤더 */} {feeling && (

{feeling.emoji}

{feeling.text}

{briefing && (

{briefing}

)}

)} {/* 최고기온 비교 */} {/* 최저기온 비교 */} {/* 현재 기온 */} {todayTemp !== null && (

지금 기온 {Math.round(todayTemp)}°C

)} {/* 날씨 설명 */} {weatherData?.current?.description && (

{weatherData.current.icon && (

)}

{weatherData.current.description}

{weatherData.current.feels_like !== null && weatherData.current.feels_like !== undefined && (

체감 {Math.round(weatherData.current.feels_like)}°C

)}

)} )}

{/* 하단 위치 변경 */}

); }

어제 vs 오늘 기온 비교

어제 vs 오늘 기온 비교

reviews