김현서 7주차 과제

package.json

@@ -6,7 +6,7 @@
     "cra-template": "1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "styled-components": "^6.1.13"
   },
   "scripts": {

src/components/CurrentWeather.js

@@ -11,7 +11,12 @@ const CurrentWeather = ({ weatherData, isLoading }) => {
     return <div>채워주세요</div>;
   }
 
-  return <div>채워주세요</div>;
+  return (
+    <CurrentWeatherWrapper>
+      <Temperature>{weatherData.hourly.temperature_2m[0]}°C</Temperature>
+      <WeatherCode>{getWeatherDescription(weatherData.hourly.weather_code[0])}</WeatherCode>
+    </CurrentWeatherWrapper>
+  );
 };
 
 export default CurrentWeather;

src/components/DailyForecast.js

@@ -3,9 +3,19 @@ import { DailyForecastWrapper, DailyItem } from "./styles/StyledComponents";
 import { getWeatherDescription, formatDailyData } from "../utils/weather";
 
 const DailyForecast = ({ weatherData }) => {
-  const dailyData = formatDailyData(weatherData);
+  const Data = formatDailyData(weatherData);
 
-  return <div>채워주세요</div>;
+return (
+    <DailyForecastWrapper>
+      {Data.map((item, idx) => (
+        <DailyItem key={idx}>
+          <div>{item.date}</div>
+          <div>{getWeatherDescription(item.code)}</div>
+          <div>{item.temp}°</div>
+        </DailyItem>
+      ))}
+    </DailyForecastWrapper>
+  );
 };
 
 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((item, idx) => (
+        <HourlyItem key={idx}>
+          <div>{item.time}</div>
+          <div>{item.temp}°</div>
+          <div>{getWeatherDescription(item.code)}</div>
+        </HourlyItem>
+      ))}
+    </HourlyForecastWrapper>
+  );
 };
 
 export default HourlyForecast;

src/utils/weather.js

@@ -20,13 +20,35 @@ export const getWeatherDescription = (code) => {
 };
 
 export const formatHourlyData = (weatherData) => {
-  if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+  if (!weatherData || !weatherData.hourly) return [];
+
+  const { time, temperature_2m, weather_code } = weatherData.hourly;
+  const now = new Date();
+  const startIdx = time.findIndex(t => new Date(t) > now);
+
+  let result = [];
+  for (let i = startIdx; i < startIdx + 12; i++) {
+    if (i >= time.length) break;
+    result.push({
+      time: `${new Date(time[i]).getHours()}시`,
+      temp: Math.round(temperature_2m[i]),
+      code: weather_code[i],
+    });
+  }
+  return result;
 };
 
 export const formatDailyData = (weatherData) => {
-  if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
-};
+  if (!weatherData || !weatherData.daily) return [];
+
+  const { time, weather_code, temperature_2m_max } = weatherData.daily;
+  return time.map((dateStr, idx) => {
+    const dateObj = new Date(dateStr);
+    const date = `${dateObj.getMonth() + 1}/${dateObj.getDate()} (${["일","월","화","수","목","금","토"][dateObj.getDay()]})`;
+    return {
+      date,
+      code: weather_code[idx],
+      temp: Math.round(temperature_2m_max[idx]),
+    };
+  });
+};