7주차 김동은 과제 제출

src/components/CurrentWeather.js

@@ -8,10 +8,24 @@ import { getWeatherDescription } from "../utils/weather";
 
 const CurrentWeather = ({ weatherData, isLoading }) => {
   if (isLoading) {
-    return <div>채워주세요</div>;
+    return <div>날씨 정보를 불러오는 중...</div>;
   }
+  const unit = weatherData.daily_units.temperature_2m_max;
+  const index = new Date().getHours();
 
-  return <div>채워주세요</div>;
+  const temperature = Math.round(weatherData.hourly.temperature_2m[index]);
+  const weatherCode = weatherData.hourly.weather_code[index];
+  return (
+    <div>
+      <CurrentWeatherWrapper>
+        <Temperature>
+          {temperature}
+          {unit}
+        </Temperature>
+        <WeatherCode>{getWeatherDescription(weatherCode)}</WeatherCode>
+      </CurrentWeatherWrapper>
+    </div>
+  );
 };
 
 export default CurrentWeather;

src/components/DailyForecast.js

@@ -4,8 +4,23 @@ import { getWeatherDescription, formatDailyData } from "../utils/weather";
 
 const DailyForecast = ({ weatherData }) => {
   const dailyData = formatDailyData(weatherData);
-
-  return <div>채워주세요</div>;
+  const unit = weatherData.daily_units.temperature_2m_max;
+  return (
+    <div>
+      <DailyForecastWrapper>
+        {dailyData.map((item, index) => (
+          <DailyItem key={index}>
+            <div>{item.time}</div>
+            <div>{getWeatherDescription(item.weatherCode)}</div>
+            <div>
+              {item.temperature}
+              {unit}
+            </div>
+          </DailyItem>
+        ))}
+      </DailyForecastWrapper>
+    </div>
+  );
 };
 
 export default DailyForecast;

src/components/HourlyForecast.js

@@ -4,8 +4,23 @@ import { getWeatherDescription, formatHourlyData } from "../utils/weather";
 
 const HourlyForecast = ({ weatherData }) => {
   const hourlyData = formatHourlyData(weatherData);
-
-  return <div>채워주세요</div>;
+  const unit = weatherData.daily_units.temperature_2m_max;
+  return (
+    <div>
+      <HourlyForecastWrapper>
+        {hourlyData.map((item, index) => (
+          <HourlyItem key={index}>
+            <div>{item.time}</div>
+            <div>
+              {item.temperature}
+              {unit}
+            </div>
+            <div>{getWeatherDescription(item.weatherCode)}</div>
+          </HourlyItem>
+        ))}
+      </HourlyForecastWrapper>
+    </div>
+  );
 };
 
 export default HourlyForecast;

src/components/styles/StyledComponents.js

@@ -34,6 +34,19 @@ export const HourlyForecastWrapper = styled.div`
   background: rgba(255, 255, 255, 0.2);
   border-radius: 15px;
   margin-top: auto;
+
+  &::-webkit-scrollbar {
+    height: 6px; /* 스크롤바 두께 */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.4); /* 손잡이 색상 */
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.6); /* 호버 시 색상 */
+  }
 `;
 
 export const HourlyItem = styled.div`
@@ -43,6 +56,8 @@ export const HourlyItem = styled.div`
   color: white;
   padding: 10px;
   min-width: 100px;
+  font-size: 0.9rem;
+  gap: 10px;
 `;
 
 export const DailyForecastWrapper = styled.div`

src/utils/weather.js

@@ -22,11 +22,38 @@ export const getWeatherDescription = (code) => {
 export const formatHourlyData = (weatherData) => {
   if (!weatherData) return [];
   // 밑에 코드 채워주세요
-  return [];
+  const { time, temperature_2m, weather_code } = weatherData.hourly;
+  const result = [];
+
+  for (let i = 0; i < 12; i++) {
+    result.push({
+      time: `${new Date(time[i]).getHours()}시`,
+      temperature: `${Math.round(temperature_2m[i])}`,
+      weatherCode: weather_code[i],
+    });
+  }
+
+  return result;
 };
 
 export const formatDailyData = (weatherData) => {
   if (!weatherData) return [];
   // 밑에 코드 채워주세요
-  return [];
+  const { time, weather_code, temperature_2m_max } = weatherData.daily;
+  const week = ["일", "월", "화", "수", "목", "금", "토"];
+  const result = [];
+
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(time[i]);
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const weekday = week[date.getDay()];
+
+    result.push({
+      time: `${month}월 ${day}일 (${weekday})`,
+      weatherCode: weather_code[i],
+      temperature: `${Math.round(temperature_2m_max[i])}`,
+    });
+  }
+  return result;
 };