7주차 고다경 과제구현

package.json

@@ -7,6 +7,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.17.0",
     "styled-components": "^6.1.13"
   },
   "scripts": {

src/App.js

@@ -3,6 +3,7 @@ import { Container } from "./components/styles/StyledComponents";
 import CurrentWeather from "./components/CurrentWeather";
 import HourlyForecast from "./components/HourlyForecast";
 import DailyForecast from "./components/DailyForecast";
+import Spinner from "./components/Spinner";
 
 function App() {
   const API_URL =
@@ -26,9 +27,17 @@ function App() {
 
   return (
     <Container>
-      <CurrentWeather weatherData={weatherData} isLoading={isLoading} />
+      {(isLoading || !weatherData) && <Spinner />}
       {!isLoading && weatherData && (
         <>
+          <CurrentWeather weatherData={weatherData} />
+          <HourlyForecast weatherData={weatherData} />
+          <DailyForecast weatherData={weatherData} />
+        </>
+      )}
+      {!isLoading && weatherData && (
+        <>
+          <CurrentWeather weatherData={weatherData} />
           <HourlyForecast weatherData={weatherData} />
           <DailyForecast weatherData={weatherData} />
         </>

src/components/CurrentWeather.js

@@ -1,17 +1,20 @@
-import React from "react";
-import {
-  CurrentWeatherWrapper,
-  Temperature,
-  WeatherCode,
-} from "./styles/StyledComponents";
-import { getWeatherDescription } from "../utils/weather";
+import { CurrentWeatherWrapper, Temperature, WeatherCode } from "./styles/StyledComponents";
+import { formatCurrentData } from "../utils/formatWeatherData";
+import { fetchCurrentData } from "../utils/fetchWeatherData";
+import { DEGREE_CELSIUS } from "../constants/uiConstants";
 
-const CurrentWeather = ({ weatherData, isLoading }) => {
-  if (isLoading) {
-    return <div>채워주세요</div>;
-  }
+const CurrentWeather = ({ weatherData }) => {
+  const currentData = formatCurrentData(fetchCurrentData(weatherData));
 
-  return <div>채워주세요</div>;
+  return (
+    <CurrentWeatherWrapper>
+      <Temperature>
+        {currentData.temperature}
+        {DEGREE_CELSIUS}
+      </Temperature>
+      <WeatherCode>{currentData.weatherCode}</WeatherCode>
+    </CurrentWeatherWrapper>
+  );
 };
 
 export default CurrentWeather;

src/components/DailyForecast.js

@@ -1,11 +1,25 @@
-import React from "react";
 import { DailyForecastWrapper, DailyItem } from "./styles/StyledComponents";
-import { getWeatherDescription, formatDailyData } from "../utils/weather";
+import { formatDailyData } from "../utils/formatWeatherData";
+import { fetchDailyData } from "../utils/fetchWeatherData";
+import { DEGREE_CELSIUS } from "../constants/uiConstants";
 
 const DailyForecast = ({ weatherData }) => {
-  const dailyData = formatDailyData(weatherData);
+  const dailyData = formatDailyData(fetchDailyData(weatherData));
 
-  return <div>채워주세요</div>;
+  return (
+    <DailyForecastWrapper>
+      {dailyData.map((data) => (
+        <DailyItem key={data.time}>
+          <div>{data.date}</div>
+          <div>{data.weatherCode}</div>
+          <div>
+            {data.temperature}
+            {DEGREE_CELSIUS}
+          </div>
+        </DailyItem>
+      ))}
+    </DailyForecastWrapper>
+  );
 };
 
 export default DailyForecast;

src/components/HourlyForecast.js

@@ -1,11 +1,28 @@
-import React from "react";
 import { HourlyForecastWrapper, HourlyItem } from "./styles/StyledComponents";
-import { getWeatherDescription, formatHourlyData } from "../utils/weather";
+import { formatHourlyData } from "../utils/formatWeatherData";
+import { fetchHourlyData } from "../utils/fetchWeatherData";
+import { DEGREE_CELSIUS, HOUR_SUFFIX } from "../constants/uiConstants";
 
 const HourlyForecast = ({ weatherData }) => {
-  const hourlyData = formatHourlyData(weatherData);
+  const hourlyData = formatHourlyData(fetchHourlyData(weatherData));
 
-  return <div>채워주세요</div>;
+  return (
+    <HourlyForecastWrapper>
+      {hourlyData.map((data) => (
+        <div key={data.time}>
+          <HourlyItem>
+            {data.hour}
+            {HOUR_SUFFIX}
+          </HourlyItem>
+          <HourlyItem>
+            {data.temperature}
+            {DEGREE_CELSIUS}
+          </HourlyItem>
+          <HourlyItem>{data.weatherCode}</HourlyItem>
+        </div>
+      ))}
+    </HourlyForecastWrapper>
+  );
 };
 
 export default HourlyForecast;

src/components/Spinner.js

@@ -0,0 +1,12 @@
+import { SpinnerWrapper } from "./styles/StyledComponents";
+import { ClockLoader } from "react-spinners";
+
+const Spinner = () => {
+  return (
+    <SpinnerWrapper>
+      <ClockLoader color="white" size={150} />
+    </SpinnerWrapper>
+  );
+};
+
+export default Spinner;

src/components/styles/StyledComponents.js

@@ -67,3 +67,11 @@ export const DailyItem = styled.div`
     border-bottom: none;
   }
 `;
+
+export const SpinnerWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;

src/constants/errorMessage.js

@@ -0,0 +1,2 @@
+// Error
+export const FAILED_LOAD_DATA = "데이터가 비어있습니다.";

src/constants/exampleResponse.js

@@ -183,29 +183,25 @@ const exampleResponse = {
       "2024-12-17T23:00",
     ],
     temperature_2m: [
-      0.9, 0.6, 0.1, -0.3, -0.8, -0.6, -1.3, -1.4, -1.5, -1.0, 0.1, 1.6, 2.7,
-      4.2, 5.3, 5.7, 5.7, 4.8, 3.6, 2.8, 1.8, 0.8, 0.0, -0.6, -1.0, -1.6, -2.1,
-      -2.6, -3.1, -3.5, -3.8, -4.2, -4.7, -3.9, -2.5, -1.0, 0.3, 1.4, 2.0, 2.2,
-      2.0, 1.3, 0.6, 0.1, -0.3, -0.6, -0.9, -1.0, -1.3, -1.4, -1.5, -1.8, -1.8,
-      -2.0, -2.1, -2.1, -2.1, -1.4, -0.2, -0.8, -0.6, 0.3, 0.9, 1.5, 1.4, 0.9,
-      0.4, 0.3, 0.0, -0.9, -1.5, -2.2, -2.8, -3.3, -4.0, -4.7, -5.2, -5.7, -6.1,
-      -6.3, -6.5, -5.9, -4.8, -3.4, -2.2, -1.1, -0.5, -0.1, 0.4, -0.2, -0.9,
-      -1.3, -1.9, -2.6, -3.1, -3.4, -3.7, -3.8, -3.9, -4.0, -4.1, -4.1, -4.1,
-      -3.9, -3.7, -3.0, -1.6, 0.2, 1.8, 2.9, 3.7, 4.0, 3.7, 2.9, 2.1, 1.3, 0.6,
-      -0.1, -0.7, -1.3, -1.8, -2.3, -2.7, -3.1, -3.7, -4.3, -4.6, -4.8, -4.6,
-      -3.9, -2.1, 0.3, 2.1, 2.7, 2.8, 2.8, 2.0, 1.0, 0.2, -0.3, -0.6, -0.8,
-      -1.0, -1.1, -1.4, -1.8, -2.4, -2.9, -3.4, -3.8, -4.1, -4.2, -4.0, -3.5,
-      -2.3, -0.7, 0.7, 1.5, 2.0, 2.2, 1.7, 0.9, 0.2, -0.1, -0.3, -0.5, -0.8,
-      -1.1,
+      0.9, 0.6, 0.1, -0.3, -0.8, -0.6, -1.3, -1.4, -1.5, -1.0, 0.1, 1.6, 2.7, 4.2, 5.3, 5.7, 5.7,
+      4.8, 3.6, 2.8, 1.8, 0.8, 0.0, -0.6, -1.0, -1.6, -2.1, -2.6, -3.1, -3.5, -3.8, -4.2, -4.7,
+      -3.9, -2.5, -1.0, 0.3, 1.4, 2.0, 2.2, 2.0, 1.3, 0.6, 0.1, -0.3, -0.6, -0.9, -1.0, -1.3, -1.4,
+      -1.5, -1.8, -1.8, -2.0, -2.1, -2.1, -2.1, -1.4, -0.2, -0.8, -0.6, 0.3, 0.9, 1.5, 1.4, 0.9,
+      0.4, 0.3, 0.0, -0.9, -1.5, -2.2, -2.8, -3.3, -4.0, -4.7, -5.2, -5.7, -6.1, -6.3, -6.5, -5.9,
+      -4.8, -3.4, -2.2, -1.1, -0.5, -0.1, 0.4, -0.2, -0.9, -1.3, -1.9, -2.6, -3.1, -3.4, -3.7, -3.8,
+      -3.9, -4.0, -4.1, -4.1, -4.1, -3.9, -3.7, -3.0, -1.6, 0.2, 1.8, 2.9, 3.7, 4.0, 3.7, 2.9, 2.1,
+      1.3, 0.6, -0.1, -0.7, -1.3, -1.8, -2.3, -2.7, -3.1, -3.7, -4.3, -4.6, -4.8, -4.6, -3.9, -2.1,
+      0.3, 2.1, 2.7, 2.8, 2.8, 2.0, 1.0, 0.2, -0.3, -0.6, -0.8, -1.0, -1.1, -1.4, -1.8, -2.4, -2.9,
+      -3.4, -3.8, -4.1, -4.2, -4.0, -3.5, -2.3, -0.7, 0.7, 1.5, 2.0, 2.2, 1.7, 0.9, 0.2, -0.1, -0.3,
+      -0.5, -0.8, -1.1,
     ],
     weather_code: [
-      2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 1, 1, 1, 1, 1, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 2, 3, 2, 2,
-      2, 2, 1, 1, 2, 2, 1, 1, 2, 73, 75, 51, 51, 1, 2, 1, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 2, 2, 2, 1, 1, 1, 2, 2, 2, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
-      0, 3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 2, 2, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 2, 2, 2, 2,
+      2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 1, 1, 1, 1, 1, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 2, 3, 2, 2, 2, 2, 1, 1, 2, 2, 1, 1, 2, 73, 75,
+      51, 51, 1, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1,
+      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 1, 1, 1, 2, 2, 2, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
+      0, 3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 2, 2, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+      2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 2, 2, 2, 2,
     ],
   },
   daily_units: { time: "iso8601", weather_code: "wmo code" },

src/constants/uiConstants.js

@@ -0,0 +1,6 @@
+// Units
+export const DEGREE_CELSIUS = "°C";
+export const HOUR_SUFFIX = "시";
+
+// Message
+export const LOADING = "Loading...";

src/constants/weatherCodes.js

@@ -0,0 +1,17 @@
+export const WEATHER_CODE = {
+  0: "맑음",
+  1: "대체로 맑음",
+  2: "부분적으로 흐림",
+  3: "흐림",
+  45: "안개",
+  48: "짙은 안개",
+  51: "약한 이슬비",
+  53: "보통 이슬비",
+  55: "강한 이슬비",
+  61: "약한 비",
+  63: "보통 비",
+  65: "강한 비",
+  71: "약한 눈",
+  73: "보통 눈",
+  75: "강한 눈",
+};

src/constants/weekdays.js

@@ -0,0 +1,9 @@
+export const WEEKDAYS = {
+  0: "일",
+  1: "월",
+  2: "화",
+  3: "수",
+  4: "목",
+  5: "금",
+  6: "토",
+};

src/utils/fetchWeatherData.js

@@ -0,0 +1,58 @@
+import { isValidHourlyData, isInCurrentTime } from "./validators";
+import { FAILED_LOAD_DATA } from "../constants/errorMessage";
+import { errorLog } from "../utils/logger";
+
+export const fetchCurrentData = (weatherData) => {
+  if (!weatherData) {
+    errorLog(fetchCurrentData.name, FAILED_LOAD_DATA);
+    return;
+  }
+
+  const index = weatherData.hourly.time.findIndex((time) => isInCurrentTime(new Date(time)));
+
+  return {
+    time: new Date(weatherData.hourly.time[index]),
+    temperature: weatherData.hourly.temperature_2m[index],
+    weatherCode: weatherData.hourly.weather_code[index],
+  };
+};
+
+export const fetchHourlyData = (weatherData) => {
+  if (!weatherData) {
+    errorLog(fetchHourlyData.name, FAILED_LOAD_DATA);
+    return;
+  }
+  const currentDate = new Date();
+  const collectedForecasts = [];
+
+  weatherData.hourly.time.forEach((time, index) => {
+    const hourlyDate = new Date(time);
+
+    if (isValidHourlyData(hourlyDate, currentDate, collectedForecasts)) {
+      collectedForecasts.push({
+        time: hourlyDate,
+        temperature: weatherData.hourly.temperature_2m[index],
+        weatherCode: weatherData.hourly.weather_code[index],
+      });
+    }
+  });
+
+  return collectedForecasts;
+};
+
+export const fetchDailyData = (weatherData) => {
+  if (!weatherData) {
+    errorLog(fetchDailyData.name, FAILED_LOAD_DATA);
+    return;
+  }
+
+  const collectedForecasts = weatherData.daily.time.map((time, index) => {
+    return {
+      time: new Date(time),
+      temperature: weatherData.daily.temperature_2m_max[index],
+      weatherCode: weatherData.daily.weather_code[index],
+    };
+  });
+
+  return collectedForecasts;
+};

src/utils/formatWeatherData.js

@@ -0,0 +1,53 @@
+import { getWeekdayDescription, getWeatherDescription } from "./getDescription";
+import { FAILED_LOAD_DATA } from "../constants/errorMessage";
+import { errorLog } from "../utils/logger";
+
+export const formatCurrentData = (weatherData) => {
+  if (!weatherData) {
+    errorLog(formatCurrentData.name, FAILED_LOAD_DATA);
+    return null;
+  }
+
+  return {
+    time: new Date(weatherData.time).toISOString(),
+    temperature: Math.floor(weatherData.temperature),
+    weatherCode: getWeatherDescription(weatherData.weatherCode),
+  };
+};
+
+export const formatHourlyData = (weatherData) => {
+  if (!weatherData) {
+    errorLog(formatHourlyData.name, FAILED_LOAD_DATA);
+    return null;
+  }
+
+  return weatherData.map(({ time, temperature, weatherCode }) => {
+    const date = new Date(time);
+    return {
+      time: date.toISOString(),
+      hour: date.getHours(),
+      temperature: Math.floor(temperature),
+      weatherCode: getWeatherDescription(weatherCode),
+    };
+  });
+};
+
+export const formatDailyData = (weatherData) => {
+  if (!weatherData) {
+    errorLog(formatDailyData.name, FAILED_LOAD_DATA);
+    return null;
+  }
+
+  return weatherData.map(({ time, temperature, weatherCode }) => {
+    const date = new Date(time);
+
+    return {
+      time: date.toISOString(),
+      date: `${date.getMonth() + 1}월 ${date.getDate()}일 (${getWeekdayDescription(
+        date.getDay()
+      )})`,
+      temperature: Math.floor(temperature),
+      weatherCode: getWeatherDescription(weatherCode),
+    };
+  });
+};

src/utils/getDescription.js

@@ -0,0 +1,10 @@
+import { WEEKDAYS } from "../constants/weekdays";
+import { WEATHER_CODE } from "../constants/weatherCodes";
+
+export const getWeekdayDescription = (dayIndex) => {
+  return WEEKDAYS[dayIndex] || "알 수 없음";
+};
+
+export const getWeatherDescription = (code) => {
+  return WEATHER_CODE[code] || "알 수 없음";
+};

src/utils/logger.js

@@ -0,0 +1,3 @@
+export const errorLog = (component, message) => {
+  console.log(`[${component}] ${message}`);
+};