7강 이수민 과제제출

src/components/CurrentWeather.js

@@ -8,10 +8,20 @@ import { getWeatherDescription } from "../utils/weather";
 
 const CurrentWeather = ({ weatherData, isLoading }) => {
   if (isLoading) {
-    return <div>채워주세요</div>;
+    return <div>로딩 중...</div>;
   }
+  const lastIndex = weatherData.hourly.time.length - 1;
 
-  return <div>채워주세요</div>;
+  const temperature = weatherData.hourly.temperature_2m[lastIndex];
+  const weatherCode = weatherData.hourly.weather_code[lastIndex];
+  const description = getWeatherDescription(weatherCode);
+
+  return (
+    <CurrentWeatherWrapper>
+      <Temperature>{temperature}°C</Temperature>
+      <WeatherCode>{description}</WeatherCode>
+    </CurrentWeatherWrapper>
+  ) 
 };
 
 export default CurrentWeather;

src/components/DailyForecast.js

@@ -3,9 +3,53 @@ import { DailyForecastWrapper, DailyItem } from "./styles/StyledComponents";
 import { getWeatherDescription, formatDailyData } from "../utils/weather";
 
 const DailyForecast = ({ weatherData }) => {
+
   const dailyData = formatDailyData(weatherData);
+
+  /* export const formatDailyData = (weatherData) => { ...
+  const dailyData = [];
+  for (let i = 0; i < 7; i++) {
+    dailyData.push({
+      time: time[i].toString(),
+      temperature: temperature2mMax[i],
+      weatherCode: weatherCode[i],
+    });
+  } */
+
+  const days = ["월", "화", "수", "목", "금", "토", "일"];
+
+return (
+  <DailyForecastWrapper>
+    {dailyData.map((data, idx) => {
+
+      const date = new Date(data.time);
+      /*data.time은 "2025-05-18" 같은 문자열.
+      new Date()를 사용하면 이걸 날짜 객체로 바꿀 수 있음*/
+
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+
+      const weekDay = days[date.getDay()];
+      /* date.getDay() : 요일을 숫자로 반환 → 그래서 미리 만든 배열 days를 이용해서 
+      한글 요일 이름으로 바꾸기*/ 
+
+      const description = getWeatherDescription(data.weatherCode);
+      const temperature = Math.floor(data.temperature);
+
+      /*날씨 데이터에 있는 날짜 문자열 data.time을 진짜 날짜 객체(Date)로 바꾼 뒤, 
+      "월, 일, 요일"을 뽑아내는 작업*/
 
-  return <div>채워주세요</div>;
+//렌더링과정
+      return (
+        <DailyItem key={idx}>
+          <div>{`${month}월 ${day}일 (${weekDay})`}</div>
+          <div>{description}</div>
+          <div>{temperature}°C</div>
+        </DailyItem>
+      );
+    })}
+  </DailyForecastWrapper>
+);
 };
 
 export default DailyForecast;

src/components/HourlyForecast.js

@@ -1,11 +1,35 @@
-import React from "react";
-import { HourlyForecastWrapper, HourlyItem } from "./styles/StyledComponents";
-import { getWeatherDescription, formatHourlyData } from "../utils/weather";
+import React from "react"; 
+import {
+  HourlyForecastWrapper,
+  HourlyItem,
+} from "./styles/StyledComponents"; 
+
+import {
+  getWeatherDescription,
+  formatHourlyData,
+} from "../utils/weather"; 
 
 const HourlyForecast = ({ weatherData }) => {
-  const hourlyData = formatHourlyData(weatherData);
+  const hourlyData = formatHourlyData(weatherData); 
+
+  return (
+    <HourlyForecastWrapper>
+      {hourlyData.map((data) => {
+        const date = new Date(data.time); 
+        const hour = date.getHours().toString().padStart(2, "0"); // 시간만 추출해서 2자리로 포맷 (예: 09)
+        const temperature = Math.floor(data.temperature); 
+        const description = getWeatherDescription(data.weatherCode); 
 
-  return <div>채워주세요</div>;
+        return (
+          <HourlyItem key={data.time}> 
+            <div>{hour}시</div> 
+            <div>{temperature}°C</div> 
+            <div>{description}</div> 
+          </HourlyItem>
+        );
+      })}
+    </HourlyForecastWrapper>
+  );
 };
 
-export default HourlyForecast;
+export default HourlyForecast; 

src/components/styles/StyledComponents.js

@@ -43,6 +43,9 @@ export const HourlyItem = styled.div`
   color: white;
   padding: 10px;
   min-width: 100px;
+  font-size: 13px;
+  text-align: center;
+  word-break: keep-all;
 `;
 
 export const DailyForecastWrapper = styled.div`

src/utils/weather.js

@@ -20,13 +20,39 @@ export const getWeatherDescription = (code) => {
 };
 
 export const formatHourlyData = (weatherData) => {
-  if (!weatherData) return [];
+  if (!weatherData) 
+    return [];
   // 밑에 코드 채워주세요
-  return [];
+  const time = weatherData.hourly.time;
+  const temperature2m = weatherData.hourly.temperature_2m;
+  const weatherCode = weatherData.hourly.weather_code;
+
+  const hourlyData = [];
+  for (let i = 0; i < 12; i++) {
+    hourlyData.push({
+      time: time[i].toString(),
+      temperature: temperature2m[i],
+      weatherCode: weatherCode[i],
+    });
+  }
+  return hourlyData;
 };
 
 export const formatDailyData = (weatherData) => {
   if (!weatherData) return [];
   // 밑에 코드 채워주세요
-  return [];
+  const time = weatherData.daily.time;
+  const temperature2mMax = weatherData.daily.temperature_2m_max;
+  const weatherCode = weatherData.daily.weather_code;
+
+  const dailyData = [];
+  for (let i = 0; i < 7; i++) {
+    dailyData.push({
+      time: time[i].toString(),
+      temperature: temperature2mMax[i],
+      weatherCode: weatherCode[i],
+    });
+  }
+
+  return dailyData;
 };