7주차 고다경 과제구현

src/components/CurrentWeather.js

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

src/components/DailyForecast.js

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

src/components/HourlyForecast.js

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

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/utils/validators.js

@@ -0,0 +1,23 @@
+export const isToDay = (dateInData, currentDate) => {
+  return (
+    dateInData.getFullYear() === currentDate.getFullYear() &&
+    dateInData.getMonth() === currentDate.getMonth() &&
+    dateInData.getDate() === currentDate.getDate()
+  );
+};
+
+export const isWithin12Hours = (dateInData, currentDate) => {
+  const diff = (dateInData - currentDate) / (1000 * 60 * 60);
+  return diff >= 0 && diff <= 12;
+};
+
+export const isInCurrentTime = (dateInData) => {
+  const now = new Date();
+
+  return (
+    dateInData.getFullYear() === now.getFullYear() &&
+    dateInData.getMonth() === now.getMonth() &&
+    dateInData.getDate() === now.getDate() &&
+    dateInData.getHours() === now.getHours()
+  );
+};

src/utils/weather.js

@@ -1,3 +1,6 @@
+import { isToDay, isWithin12Hours, isInCurrentTime } from "./validators";
+import { getWeekdayName } from "./weeks";
+
 export const getWeatherDescription = (code) => {
   const weatherCodes = {
     0: "맑음",
@@ -19,14 +22,59 @@ export const getWeatherDescription = (code) => {
   return weatherCodes[code] || "알 수 없음";
 };
 
+export const formatCurrentData = (weatherData) => {
+  if (!weatherData) return;
+
+  const index = weatherData.hourly.time.findIndex((time) => isInCurrentTime(new Date(time)));
+  const date = new Date(weatherData.hourly.time[index]);
+
+  return {
+    time: date.toISOString(),
+    temperature: Math.floor(weatherData.hourly.temperature_2m[index]),
+    weatherCode: weatherData.hourly.weather_code[index],
+  };
+};
+
 export const formatHourlyData = (weatherData) => {
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+  const currentDate = new Date();
+  const result = [];
+
+  weatherData.hourly.time.forEach((time, index) => {
+    const hourlyDate = new Date(time);
+
+    if (
+      isToDay(hourlyDate, currentDate) &&
+      isWithin12Hours(hourlyDate, currentDate) &&
+      result.length < 12
+    ) {
+      result.push({
+        timeString: hourlyDate.toISOString(),
+        hour: hourlyDate.getHours(),
+        temperature: Math.floor(weatherData.hourly.temperature_2m[index]),
+        weatherCode: weatherData.hourly.weather_code[index],
+      });
+    }
+  });
+
+  return result;
 };
 
 export const formatDailyData = (weatherData) => {
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+
+  const result = weatherData.daily.time.map((time, index) => {
+    const dailyDate = new Date(time);
+
+    return {
+      timeString: dailyDate.toISOString(),
+      date: `${dailyDate.getMonth() + 1}월 ${dailyDate.getDate()}일 (${getWeekdayName(
+        dailyDate.getDay()
+      )})`,
+      temperature: Math.floor(weatherData.daily.temperature_2m_max[index]),
+      weatherCode: weatherData.daily.weather_code[index],
+    };
+  });
+
+  return result;
 };

src/utils/weeks.js

@@ -0,0 +1,13 @@
+export const getWeekdayName = (dayIndex) => {
+  const weeksCodes = {
+    0: "일",
+    1: "월",
+    2: "화",
+    3: "수",
+    4: "목",
+    5: "금",
+    6: "토",
+  };
+
+  return weeksCodes[dayIndex];
+};