날씨앱 과제 최종 완성

package.json

@@ -7,7 +7,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",
-    "styled-components": "^6.1.13"
+    "styled-components": "^6.1.18"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/CurrentWeather.js

@@ -6,12 +6,48 @@ import {
 } from "./styles/StyledComponents";
 import { getWeatherDescription } from "../utils/weather";
 
+
+const getCurrentWeather = (weatherData) => {
+  const hourIndex = new Date().getHours();
+  const hourly = weatherData.hourly;
+
+  if (
+    !hourly ||
+    !hourly.temperature_2m ||
+    !hourly.temperature_2m[hourIndex]
+  ) {
+    return null;
+  }
+
+  return {
+    temperature: hourly.temperature_2m[hourIndex],
+    time: hourly.time[hourIndex],
+    weatherCode: hourly.weather_code[hourIndex],
+  };
+};
+
 const CurrentWeather = ({ weatherData, isLoading }) => {
   if (isLoading) {
-    return <div>채워주세요</div>;
+    return <div>현재날씨 로딩중...</div>;
+  }
+
+  const currentData = getCurrentWeather(weatherData);
+
+  if (!currentData) {
+    return <div>현재 시각의 날씨 정보가 없습니다.</div>;
   }
 
-  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

@@ -5,7 +5,18 @@ import { getWeatherDescription, formatDailyData } from "../utils/weather";
 const DailyForecast = ({ weatherData }) => {
   const dailyData = formatDailyData(weatherData);
 
-  return <div>채워주세요</div>;
+  return (
+    <DailyForecastWrapper>
+      <h3>일별 예보</h3>
+      {dailyData.map((item, index) => (
+        <DailyItem key={index}>
+          <div>{item.time}</div>
+          <div>{getWeatherDescription(item.weatherCode)}</div>
+          <div>{Math.floor(item.temperature)}°C</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>{Math.floor(item.temperature)}°C</div>
+          <div>{getWeatherDescription(item.weatherCode)}</div>
+        </HourlyItem>
+      ))}
+    </HourlyForecastWrapper>
+  );
 };
 
 export default HourlyForecast;

src/components/styles/StyledComponents.js

@@ -43,8 +43,18 @@ export const HourlyItem = styled.div`
   color: white;
   padding: 10px;
   min-width: 100px;
+
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 15px;
 `;
 
+
+
+
 export const DailyForecastWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -61,9 +71,14 @@ export const DailyItem = styled.div`
   align-items: center;
   color: white;
   padding: 10px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 
-  &:last-child {
-    border-bottom: none;
-  }
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 15px;
 `;
+
+
+

src/utils/weather.js

@@ -1,32 +1,71 @@
 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 temperature = weatherData.hourly.temperature_2m;
+  const weatherCode = weatherData.hourly.weather_code;
+
+  const hourlyData = [];
+
+  for (let i = 0; i < 12; i++) {
+    const hour = new Date(time[i]).getHours() + "시";
+
+    hourlyData.push({
+      time: hour,
+      temperature: temperature[i],
+      weatherCode: weatherCode[i],
+    });
+  }
+
+  return hourlyData;
 };
 
 export const formatDailyData = (weatherData) => {
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
-};
+
+  const time = weatherData.daily.time;
+  const temperature = 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],
+      temperature: temperature[i],
+      weatherCode: weatherCode[i],
+    });
+  }
+
+  return dailyData;
+};