7강 이고은 과제제출

src/App.js

@@ -6,15 +6,16 @@ import DailyForecast from "./components/DailyForecast";
 
 function App() {
   const API_URL =
-    "https://api.open-meteo.com/v1/forecast?latitude=37.566&longitude=126.9784&hourly=temperature_2m,weather_code&daily=weather_code,temperature_2m_max&timezone=Asia%2FTokyo&forecast_days=7";
-
+    "https://api.open-meteo.com/v1/forecast?latitude=37.566&longitude=126.9784&hourly=temperature_2m,weathercode&daily=weather_code,temperature_2m_min,temperature_2m_max&timezone=Asia%2FSeoul&forecast_days=7"
+    
   const [weatherData, setWeatherData] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     fetch(API_URL)
       .then((response) => response.json())
       .then((data) => {
+        console.log(data);
         setWeatherData(data);
         setIsLoading(false);
       })

src/components/CurrentWeather.js

@@ -6,12 +6,21 @@ import {
 } from "./styles/StyledComponents";
 import { getWeatherDescription } from "../utils/weather";
 
+
 const CurrentWeather = ({ weatherData, isLoading }) => {
   if (isLoading) {
-    return <div>채워주세요</div>;
+    return <div>Loading...</div>;
   }
 
-  return <div>채워주세요</div>;
+  const temperature = weatherData?.hourly?.temperature_2m?.[0];
+  const weathercode = weatherData?.hourly?.weathercode?.[0];
+
+  return (
+    <CurrentWeatherWrapper>
+      <Temperature>{temperature !== undefined ? `${Math.round(temperature)}°C` : "기온 없음"}</Temperature>
+      <WeatherCode>{getWeatherDescription(weathercode)}</WeatherCode>
+    </CurrentWeatherWrapper>
+  );
 };
 
 export default CurrentWeather;

src/components/DailyForecast.js

@@ -4,8 +4,17 @@ import { getWeatherDescription, formatDailyData } from "../utils/weather";
 
 const DailyForecast = ({ weatherData }) => {
   const dailyData = formatDailyData(weatherData);
-
-  return <div>채워주세요</div>;
+  return (
+    <DailyForecastWrapper>
+      {dailyData.map((item, index)=> (
+        <DailyItem key = {index}>
+          <div>{item.day}</div>
+          <div>{getWeatherDescription(item.weatherCode)}</div>
+           <div>{item.tempMin}° / {item.tempMax}°</div>
+        </DailyItem>
+      ))}
+    </DailyForecastWrapper>
+  );
 };
 
 export default DailyForecast;

src/components/HourlyForecast.js

@@ -4,8 +4,20 @@ import { getWeatherDescription, formatHourlyData } from "../utils/weather";
 
 const HourlyForecast = ({ weatherData }) => {
   const hourlyData = formatHourlyData(weatherData);
-
-  return <div>채워주세요</div>;
+  console.log("aaaaa", hourlyData)
+  console.log("weatherData.hourly = ", weatherData?.hourly);
+  return (
+    <HourlyForecastWrapper>
+
+      {hourlyData.map((item, index)=> (
+          <HourlyItem key ={index}>
+              <div>{item.time}</div>
+              <div>{item.temperature}°C</div>
+              <div>{getWeatherDescription(item.weatherCode)}</div>
+          </HourlyItem>
+        ))}
+    </HourlyForecastWrapper>
+  );
 };
 
 export default HourlyForecast;

src/utils/weather.js

@@ -20,13 +20,50 @@ export const getWeatherDescription = (code) => {
 };
 
 export const formatHourlyData = (weatherData) => {
+  console.log("formatHourlyData received:", weatherData);
+
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+  const { time: times, temperature_2m: temps, weathercode: codes } = weatherData.hourly;
+
+ const result = times.map((t, i) => {
+    const [date, hourPart] = t.split("T");
+    return {
+      date,
+      time: `${parseInt(hourPart.slice(0, 2), 10)}시`,
+      temperature: temps[i],
+      weatherCode: codes[i],
+    };
+  });
+
+  return result.slice(0, 24);
 };
 
 export const formatDailyData = (weatherData) => {
-  if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
-};
+  // console.log("formatDailyData received:", weatherData);
+  if (!weatherData ) return [];
+
+  const {
+    time: dates,
+    temperature_2m_max: maxTemps,
+    temperature_2m_min: minTemps,
+    weather_code: codes
+  } = weatherData.daily;
+
+   const days = dates.map((d) => {
+    const date = new Date(d);
+    const month = date.getMonth() + 1;
+    const dayNum = date.getDate();
+    const weekday = date.toLocaleDateString("ko-KR", { weekday: "short" }); 
+    return `${month}월 ${dayNum}일 (${weekday})`;
+  });
+
+  // console.log(weatherData.daily)
+  // console.log(dates)
+  return dates.map((d, i) => ({
+    date: d,
+    day: days[i],
+    tempMax: maxTemps[i],
+    tempMin: minTemps[i],
+    weatherCode: codes[i],
+  }));
+};