7강 정연준 과제제출

src/components/CurrentWeather.js

@@ -7,11 +7,37 @@ import {
 import { getWeatherDescription } from "../utils/weather";
 
 const CurrentWeather = ({ weatherData, isLoading }) => {
+  console.log(weatherData);
+  const getCurrentWeather = () => {
+    const time = new Date().getHours(); // 현재 시각 알아내기
+    const hourlyData = weatherData.hourly;
+    const nowWeather = {
+      // hourly 데이터에서 현재 시각을 기준으로 data를 가져옴, 현재 13시라면 hourly 데이터에서 13번째 index에 13시 정보가 있음1
+      temperature: hourlyData.temperature_2m[time],
+      time: hourlyData.time[time].toString(),
+      weatherCode: hourlyData.weather_code[time],
+    };
+
+    return nowWeather;
+  };
   if (isLoading) {
-    return <div>채워주세요</div>;
+    return <div>현재날씨 로딩중...</div>;
   }
+  const currentData = getCurrentWeather();
 
-  return <div>채워주세요</div>;
+  return (
+    <CurrentWeatherWrapper>
+      <h3>
+        현재 위치 : 서울
+        <br />
+        현재 시각 : {new Date(currentData.time).getHours()}시
+      </h3>
+      <Temperature>{Math.floor(currentData.temperature)}°C</Temperature>
+      <WeatherCode>
+        {getWeatherDescription(currentData.weatherCode)}
+      </WeatherCode>
+    </CurrentWeatherWrapper>
+  );
 };
 
 export default CurrentWeather;

src/components/DailyForecast.js

@@ -4,8 +4,23 @@ import { getWeatherDescription, formatDailyData } from "../utils/weather";
 
 const DailyForecast = ({ weatherData }) => {
   const dailyData = formatDailyData(weatherData);
+  const days = ["월", "화", "수", "목", "금", "토", "일"];
 
-  return <div>채워주세요</div>;
+  return (
+    <DailyForecastWrapper>
+      {dailyData.map((data, idx) => (
+        <DailyItem key={idx}>
+          <div>
+            {`${new Date(data.time).getMonth() + 1}월 ${new Date(
+              data.time
+            ).getDate()}일 (${days[new Date(data.time).getDay()]})`}
+          </div>
+          <div>{getWeatherDescription(data.weatherCode)}</div>
+          <div>{Math.floor(data.temperature)}°C</div>
+        </DailyItem>
+      ))}
+    </DailyForecastWrapper>
+  );
 };
 
 export default DailyForecast;

src/components/HourlyForecast.js

@@ -5,7 +5,19 @@ import { getWeatherDescription, formatHourlyData } from "../utils/weather";
 const HourlyForecast = ({ weatherData }) => {
   const hourlyData = formatHourlyData(weatherData);
 
-  return <div>채워주세요</div>;
+  return (
+    <HourlyForecastWrapper>
+      {hourlyData.map((data, idx) => (
+        <HourlyItem key={idx}>
+          <div>
+            {new Date(data.time).getHours().toString().padStart(2, "0")}시
+          </div>
+          <div>{Math.floor(data.temperature)}°C</div>
+          {getWeatherDescription(data.weatherCode)}
+        </HourlyItem>
+      ))}
+    </HourlyForecastWrapper>
+  );
 };
 
 export default HourlyForecast;

src/components/styles/StyledComponents.js

@@ -43,6 +43,7 @@ export const HourlyItem = styled.div`
   color: white;
   padding: 10px;
   min-width: 100px;
+  white-space: nowrap;
 `;
 
 export const DailyForecastWrapper = styled.div`

src/utils/weather.js

@@ -1,32 +1,63 @@
 export const getWeatherDescription = (code) => {
   const weatherCodes = {
-    0: "맑음",
-    1: "대체로 맑음",
-    2: "부분적으로 흐림",
-    3: "흐림",
-    45: "안개",
-    48: "짙은 안개",
-    51: "약한 이슬비",
-    53: "보통 이슬비",
-    55: "강한 이슬비",
-    61: "약한 비",
-    63: "보통 비",
-    65: "강한 비",
-    71: "약한 눈",
-    73: "보통 눈",
-    75: "강한 눈",
+    0: "맑음 ☀️",
+    1: "대체로 맑음 🌤️",
+    2: "부분적으로 흐림 ⛅",
+    3: "흐림 ☁️",
+    45: "안개 🌫️",
+    48: "짙은 안개 🌫️",
+    51: "약한 이슬비 🌦️",
+    53: "보통 이슬비 🌦️",
+    55: "강한 이슬비 🌦️",
+    61: "약한 비 🌧️",
+    63: "보통 비 🌧️",
+    65: "강한 비 🌧️",
+    71: "약한 눈 🌨️",
+    73: "보통 눈 🌨️",
+    75: "강한 눈 🌨️",
+    77: "싸락눈 🌨️",
+    80: "약한 소나기 🌦️",
+    81: "보통 소나기 🌦️",
+    82: "강한 소나기 🌦️",
+    85: "약한 눈 소나기 🌨️",
+    86: "강한 눈 소나기 🌨️",
+    95: "천둥번개 ⛈️",
+    96: "우박 동반 천둥번개 ⛈️",
+    99: "강한 우박 천둥번개 ⛈️",
   };
   return weatherCodes[code] || "알 수 없음";
 };
 
 export const formatHourlyData = (weatherData) => {
   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;
 };