7주차 홍석준 과제 완료

src/App.js

@@ -6,7 +6,7 @@ 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&current_weather=true&hourly=temperature_2m,weather_code&daily=weather_code,temperature_2m_max&timezone=Asia%2FTokyo&forecast_days=7";
 
   const [weatherData, setWeatherData] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -26,7 +26,10 @@ function App() {
 
   return (
     <Container>
-      <CurrentWeather weatherData={weatherData} isLoading={isLoading} />
+      <CurrentWeather
+        weatherData={weatherData}
+        isLoading={isLoading}
+      />
       {!isLoading && weatherData && (
         <>
           <HourlyForecast weatherData={weatherData} />

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 temperature = weatherData?.current_weather?.temperature;
+  const code = weatherData?.current_weather?.weathercode;
+
+  return (
+    <div>
+      <CurrentWeatherWrapper>
+        <Temperature>{Math.round(temperature)}°C</Temperature>
+        <WeatherCode>{getWeatherDescription(code)}</WeatherCode>
+      </CurrentWeatherWrapper>
+    </div>
+  );
 };
 
 export default CurrentWeather;

src/components/DailyForecast.js

@@ -1,11 +1,22 @@
 import React from "react";
 import { DailyForecastWrapper, DailyItem } from "./styles/StyledComponents";
 import { getWeatherDescription, formatDailyData } from "../utils/weather";
+import { formatKoreanDate } from "../utils/date";
 
 const DailyForecast = ({ weatherData }) => {
   const dailyData = formatDailyData(weatherData);
 
-  return <div>채워주세요</div>;
+  return (
+    <DailyForecastWrapper>
+      {dailyData.map((item, index) => (
+        <DailyItem key={index}>
+          <div>{formatKoreanDate(item.date)}</div>
+          <div>{getWeatherDescription(item.weatherCode)}</div>
+          <div>{Math.round(item.maxTemp)}°C</div>
+        </DailyItem>
+      ))}
+    </DailyForecastWrapper>
+  );
 };
 
 export default DailyForecast;

src/components/HourlyForecast.js

@@ -3,9 +3,22 @@ import { HourlyForecastWrapper, HourlyItem } from "./styles/StyledComponents";
 import { getWeatherDescription, formatHourlyData } from "../utils/weather";
 
 const HourlyForecast = ({ weatherData }) => {
-  const hourlyData = formatHourlyData(weatherData);
+  const hourlyData = formatHourlyData(weatherData).slice(0, 12);
 
-  return <div>채워주세요</div>;
+  return (
+    <HourlyForecastWrapper>
+      {hourlyData.map((item, index) => {
+        const hour = parseInt(item.time.slice(0, 2), 10); // "00:00" -> 0
+        return (
+          <HourlyItem key={index}>
+            <div>{hour}시</div>
+            <div>{Math.round(item.temperature)}°C</div>
+            <div>{getWeatherDescription(item.weatherCode)}</div>
+          </HourlyItem>
+        );
+      })}
+    </HourlyForecastWrapper>
+  );
 };
 
 export default HourlyForecast;

src/utils/date.js

@@ -0,0 +1,9 @@
+export const formatKoreanDate = (isoDateStr) => {
+  const date = new Date(isoDateStr);
+  const month = date.getMonth() + 1; // 0부터 시작하므로 +1
+  const day = date.getDate();
+  const weekdayNames = ["일", "월", "화", "수", "목", "금", "토"];
+  const weekday = weekdayNames[date.getDay()];
+
+  return `${month}월 ${day}일 (${weekday})`;
+};

src/utils/weather.js

@@ -21,12 +21,24 @@ export const getWeatherDescription = (code) => {
 
 export const formatHourlyData = (weatherData) => {
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+
+  const { time, temperature_2m, weather_code } = weatherData.hourly;
+
+  return time.map((t, i) => ({
+    time: t.slice(11, 16),
+    temperature: temperature_2m[i],
+    weatherCode: weather_code[i],
+  }));
 };
 
 export const formatDailyData = (weatherData) => {
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+
+  const { time, weather_code, temperature_2m_max } = weatherData.daily;
+
+  return time.map((date, i) => ({
+    date,
+    maxTemp: temperature_2m_max[i],
+    weatherCode: weather_code[i],
+  }));
 };