8강 과제제출 이서현

alom-08/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "cra-template": "1.2.0",
-    "react": "^19.0.0",
+    "react": "^18.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.13"

alom-08/src/components/CurrentWeather.js

@@ -3,15 +3,38 @@ import {
   CurrentWeatherWrapper,
   Temperature,
   WeatherCode,
+  LoadingWrapper,
+  LoadingText,
 } from "./styles/StyledComponents";
-import { getWeatherDescription } from "../utils/weather";
+import { getWeatherDescription, formatHourlyData } from "../utils/weather";
 
 const CurrentWeather = ({ weatherData, isLoading }) => {
   if (isLoading) {
-    return <div>채워주세요</div>;
+    return (
+      <LoadingWrapper>
+        <LoadingText> 로딩 중입니당.. 잠시만용ㅠ </LoadingText>
+      </LoadingWrapper>
+    );
   }
+  const currentData = formatHourlyData(weatherData);
+  const currentTime = new Date();
+  const closestIndex = currentData.time.findIndex(time => {
+    const parsedTime = new Date(time);
+    return parsedTime <= currentTime;
+  });  
 
-  return <div>채워주세요</div>;
+  return (
+    <div>
+      <CurrentWeatherWrapper>
+        <Temperature>
+          {currentData.temperature_2m[closestIndex]}°C
+        </Temperature>
+        <WeatherCode>
+          {getWeatherDescription(currentData.weather_code[closestIndex])}
+        </WeatherCode>
+      </CurrentWeatherWrapper>
+    </div>
+  );
 };
 
 export default CurrentWeather;

alom-08/src/components/DailyForecast.js

@@ -4,8 +4,32 @@ import { getWeatherDescription, formatDailyData } from "../utils/weather";
 
 const DailyForecast = ({ weatherData }) => {
   const dailyData = formatDailyData(weatherData);
+
+  const dateFormat = dailyData.time.map(date => {
+    const [year, month, day] = date.split('-');
+    const dateObj = new Date(year, month - 1, day);
+
+    const dayNames = ["일", "월", "화", "수", "목", "금", "토"];
+    const dayName = dayNames[dateObj.getDay()];
+
+    return `${parseInt(month)}월 ${parseInt(day)}일 (${dayName})`;
+  });
 
-  return <div>채워주세요</div>;
+  const daily = dailyData.time.map((_, index) => [dateFormat[index], getWeatherDescription(dailyData.weather_code[index]), dailyData.temperature_2m_max[index]+"°C"]);
+
+  return (
+    <DailyForecastWrapper>
+      {daily.map((row, index) => (
+        <DailyItem key={index}>
+          {row.map((item, i) => (
+            <span key={i}>
+              {item}
+            </span>
+          ))}
+        </DailyItem>
+      ))}
+    </DailyForecastWrapper>
+  );
 };
 
-export default DailyForecast;
+export default DailyForecast;

alom-08/src/components/HourlyForecast.js

@@ -4,8 +4,29 @@ import { getWeatherDescription, formatHourlyData } from "../utils/weather";
 
 const HourlyForecast = ({ weatherData }) => {
   const hourlyData = formatHourlyData(weatherData);
+  const hourlyFormat = hourlyData.time.map((dateString) => {
+    const date = new Date(dateString);
+    const hours = date.getHours();
+    return `${hours}시`;
+  });
 
-  return <div>채워주세요</div>;
+  const hourlyForecast = hourlyData.time.slice(0, 24).map((_, index) => [
+    hourlyFormat[index],
+    hourlyData.temperature_2m[index] + "°C",
+    getWeatherDescription(hourlyData.weather_code[index]),
+  ]);
+
+  return (
+    <HourlyForecastWrapper>
+      {hourlyForecast.map((row, rowIndex) => (
+        <HourlyItem key={rowIndex}>
+          <div>{row[0]}</div>
+          <div>{row[1]}</div>
+          <div>{row[2]}</div>
+        </HourlyItem>
+      ))}
+    </HourlyForecastWrapper>
+  );
 };
 
-export default HourlyForecast;
+export default HourlyForecast;

alom-08/src/components/styles/StyledComponents.js

@@ -28,21 +28,23 @@ export const WeatherCode = styled.p`
 export const HourlyForecastWrapper = styled.div`
   display: flex;
   justify-content: space-between;
-  gap: 10px;
   overflow-x: auto;
-  padding: 20px;
+  padding: 10px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 15px;
   margin-top: auto;
+  box-sizing: border-box;
 `;
 
 export const HourlyItem = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   color: white;
-  padding: 10px;
-  min-width: 100px;
+  padding: 20px;
+  min-width: 110px;
+  font-family: 'Roboto', sans-serif;
+  gap: 20px;
 `;
 
 export const DailyForecastWrapper = styled.div`
@@ -53,6 +55,7 @@ export const DailyForecastWrapper = styled.div`
   background: rgba(255, 255, 255, 0.2);
   border-radius: 15px;
   margin-top: 20px;
+  font-family: 'Roboto', sans-serif;
 `;
 
 export const DailyItem = styled.div`
@@ -67,3 +70,31 @@ export const DailyItem = styled.div`
     border-bottom: none;
   }
 `;
+
+export const LoadingWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  color: white;
+  font-family: 'Roboto', sans-serif;
+`;
+
+export const LoadingText = styled.div`
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+  animation: fadeIn 1.5s ease-in-out infinite;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+`;

alom-08/src/utils/weather.js

@@ -21,12 +21,10 @@ export const getWeatherDescription = (code) => {
 
 export const formatHourlyData = (weatherData) => {
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+  return weatherData.hourly;
 };
 
 export const formatDailyData = (weatherData) => {
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+  return weatherData.daily;
 };