7강 과제 제출 류승민

src/components/CurrentWeather.js

@@ -7,11 +7,20 @@ import {
 import { getWeatherDescription } from "../utils/weather";
 
 const CurrentWeather = ({ weatherData, isLoading }) => {
-  if (isLoading) {
-    return <div>채워주세요</div>;
+  if (isLoading || !weatherData) {
+    return <div>날씨 정보를 불러오는 중입니다...</div>;
   }
 
-  return <div>채워주세요</div>;
+  const currentTemp = weatherData.hourly.temperature_2m[0];
+  const currentCode = weatherData.hourly.weather_code[0];
+  const description = getWeatherDescription(currentCode);
+
+  return (
+    <CurrentWeatherWrapper>
+      <Temperature>{currentTemp}°C</Temperature>
+      <WeatherCode>{description}</WeatherCode>
+    </CurrentWeatherWrapper>
+  );
 };
 
-export default CurrentWeather;
+export default CurrentWeather;

src/components/DailyForecast.js

@@ -5,7 +5,17 @@ import { getWeatherDescription, formatDailyData } from "../utils/weather";
 const DailyForecast = ({ weatherData }) => {
   const dailyData = formatDailyData(weatherData);
 
-  return <div>채워주세요</div>;
+  return (
+    <DailyForecastWrapper>
+      {dailyData.map((day, index) => (
+        <DailyItem key={index}>
+          <div>{day.date}</div>
+          <div>{getWeatherDescription(day.code)}</div>
+          <div>{day.temp}°C</div>
+        </DailyItem>
+      ))}
+    </DailyForecastWrapper>
+  );
 };
 
-export default DailyForecast;
+export default DailyForecast;

src/components/HourlyForecast.js

@@ -5,7 +5,17 @@ import { getWeatherDescription, formatHourlyData } from "../utils/weather";
 const HourlyForecast = ({ weatherData }) => {
   const hourlyData = formatHourlyData(weatherData);
 
-  return <div>채워주세요</div>;
+  return (
+    <HourlyForecastWrapper>
+      {hourlyData.map((hour, index) => (
+        <HourlyItem key={index}>
+          <div>{hour.time}</div>
+          <div>{getWeatherDescription(hour.code)}</div>
+          <div>{hour.temp}°C</div>
+        </HourlyItem>
+      ))}
+    </HourlyForecastWrapper>
+  );
 };
 
-export default HourlyForecast;
+export default HourlyForecast;

src/utils/weather.js

@@ -21,12 +21,44 @@ export const getWeatherDescription = (code) => {
 
 export const formatHourlyData = (weatherData) => {
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+
+  const times = weatherData.hourly.time;
+  const temps = weatherData.hourly.temperature_2m;
+  const codes = weatherData.hourly.weather_code;
+
+  const now = new Date();
+  const currentHour = now.getHours();
+
+  const result = [];
+  for (let i = 0; i < times.length; i++) {
+    const hour = new Date(times[i]).getHours();
+    if (hour >= currentHour && result.length < 12) {
+      result.push({
+        time: `${hour}시`,
+        temp: temps[i],
+        code: codes[i],
+      });
+    }
+    if (result.length >= 12) break;
+  }
+
+  return result;
 };
 
 export const formatDailyData = (weatherData) => {
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
-};
+
+  const dates = weatherData.daily.time;
+  const temps = weatherData.daily.temperature_2m_max;
+  const codes = weatherData.daily.weather_code;
+
+  return dates.map((dateStr, index) => {
+    const date = new Date(dateStr);
+    const weekday = date.toLocaleDateString("ko-KR", { weekday: "long" });
+    return {
+      date: weekday,
+      temp: temps[index],
+      code: codes[index],
+    };
+  });
+};