weather

Author: chaeehyeon

src/components/CurrentWeather.js

@@ -8,10 +8,25 @@ import { getWeatherDescription } from "../utils/weather";
 
 const CurrentWeather = ({ weatherData, isLoading }) => {
   if (isLoading) {
-    return <div>채워주세요</div>;
+    return <div>날씨 정보를 불러오는 중...</div>;
   }
 
-  return <div>채워주세요</div>;
+  let temperature = null; // let 값 변경 가능, 재선언 불가
+  let code = null;
+    if (weatherData && weatherData.hourly) {
+    temperature = weatherData.hourly.temperature_2m[0];
+    code = weatherData.hourly.weather_code[0];
+  }
+  // 실제 날씨 정보 꺼냄
+
+  return (
+    <div>
+      <CurrentWeatherWrapper>
+        <Temperature>{temperature}°C</Temperature>
+        <WeatherCode>{getWeatherDescription(code)}</WeatherCode>
+      </CurrentWeatherWrapper>
+    </div>
+  );
 };
 
 export default CurrentWeather;

src/components/DailyForecast.js

@@ -5,7 +5,17 @@ import { getWeatherDescription, formatDailyData } from "../utils/weather";
 const DailyForecast = ({ weatherData }) => {
   const dailyData = formatDailyData(weatherData);
 
-  return <div>채워주세요</div>;
+  return (<div>
+    <DailyForecastWrapper>
+      {dailyData.map((item,index)=>(
+        <DailyItem key={index}>
+          <div>{item.date}</div>
+          <div>{getWeatherDescription(item.code)}</div>
+          <div>{item.temperature}°C</div>
+        </DailyItem>
+      ))}
+    </DailyForecastWrapper>
+  </div>);
 };
 
 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 (<div>
+    <HourlyForecastWrapper>
+      {hourlyData.map((item, index) => (
+        <HourlyItem key={index}>
+          <div>{item.time}</div>
+          <div>{item.temperature}°C</div> 
+          <div>{getWeatherDescription(item.code)}</div>
+        </HourlyItem>
+      ))}
+    </HourlyForecastWrapper>
+  </div>);
 };
-
+// map(요소,순서): 배열의 각 요소를 하나씩 꺼내서 새로운 배열로 만들어줌, JSX 형태로 바꿔줌
 export default HourlyForecast;

src/utils/weather.js

@@ -20,13 +20,42 @@ export const getWeatherDescription = (code) => {
 };
 
 export const formatHourlyData = (weatherData) => {
+  // API 원시 데이터를 시간별 예보 형식으로 처리
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+
+  const times = weatherData.hourly.time;
+  const temperatures = weatherData.hourly.temperature_2m;
+  const codes = weatherData.hourly.weather_code;
+  const result = [];
+  for (let i = 0; i < 12; i++) {
+    const str = parseInt(times[i].slice(11, 13), 10) + "시"; // parseInt: 문자열을 정수로 바꿔주는 함수
+    result.push({
+      time: str,
+      temperature: temperatures[i],
+      code: codes[i],
+    });
+  }
+  return result;
 };
 
 export const formatDailyData = (weatherData) => {
   if (!weatherData) return [];
-  // 밑에 코드 채워주세요
-  return [];
+
+  const dates = weatherData.daily.time;
+  const temperatures = weatherData.daily.temperature_2m_max;
+  const codes = weatherData.daily.weather_code;
+  const result = [];
+  for (let i = 0; i < 7; i++) {
+    const dateObj = new Date(dates[i]);
+    const month = dateObj.getMonth() + 1;
+    const day = dateObj.getDate();
+    const weekday=dateObj.toLocaleDateString("ko-KR", { weekday: "short" });
+    const formatdate = `${month}월 ${day}일 (${weekday})`;
+    result.push({
+      date: formatdate,
+      code: codes[i],
+      temperature: temperatures[i],
+    });
+  }
+  return result;
 };