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>;
   }
 
-  return <div>채워주세요</div>;
+  const currentTemp = weatherData.hourly.temperature_2m.slice(0, 1);
+  const currentCode = weatherData.hourly.weather_code.slice(0, 1);
+  const description = getWeatherDescription(currentCode[0]);
+
+  return (
+    // 0시의 날씨를 출력..
+    <CurrentWeatherWrapper>
+      <Temperature>{Math.round(currentTemp[0])}°C</Temperature>
+      <WeatherCode>{description}</WeatherCode>
+    </CurrentWeatherWrapper>
+  );
 };
 
 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((item, index) => (
+        <DailyItem key={index}>
+          <div>{item.date}</div>
+          <div>{getWeatherDescription(item.code)}</div>
+          <div>{item.temperature}</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, index) => (
+        <HourlyItem key={index}>
+          <div>{item.time}</div>
+          <div>{item.temperature}</div>
+          <div>{getWeatherDescription(item.code)}</div>
+        </HourlyItem>
+      ))}
+    </HourlyForecastWrapper>
+  );
 };
 
 export default HourlyForecast;

src/utils/weather.js

@@ -22,11 +22,45 @@ export const getWeatherDescription = (code) => {
 export const formatHourlyData = (weatherData) => {
   if (!weatherData) return [];
   // 밑에 코드 채워주세요
-  return [];
+
+  const times = weatherData.hourly.time.slice(0, 12); // 처음 12시간
+  const temps = weatherData.hourly.temperature_2m.slice(0, 12);
+  const codes = weatherData.hourly.weather_code.slice(0, 12);
+
+  const hourlyData = times.map((time, index) => {
+    const hour = new Date(time).getHours();
+    return {
+      time: `${hour}시`,
+      temperature: `${Math.round(temps[index])}°C`,
+      code: codes[index],
+    };
+  });
+
+  return hourlyData;
 };
 
 export const formatDailyData = (weatherData) => {
   if (!weatherData) return [];
   // 밑에 코드 채워주세요
-  return [];
+  const dates = weatherData.daily.time.slice(0, 7); // 7일 날짜 배열
+  const temps = weatherData.daily.temperature_2m_max.slice(0, 7);
+  const codes = weatherData.daily.weather_code.slice(0, 7);
+
+  const dailyData = dates.map((date, index) => {
+    const date1 = new Date(date);
+    // 한국어 형식
+    const date2 = date1.toLocaleDateString("ko-KR", {
+      month: "long",
+      day: "numeric",
+      weekday: "short",
+    });
+
+    return {
+      date: date2,
+      code: codes[index],
+      temperature: `${Math.round(temps[index])}°C`,
+    };
+  });
+
+  return dailyData;
 };