7주차 김채현 과제제출

src/components/CurrentWeather.js

@@ -6,12 +6,36 @@ import {
 } from "./styles/StyledComponents";
 import { getWeatherDescription } from "../utils/weather";
 
+const getCurrentIndex = (timeArray) =>{
+  const now = new Date();
+  return timeArray.findIndex((t)=>new Date(t)>now)-1;
+};
+
 const CurrentWeather = ({ weatherData, isLoading }) => {
   if (isLoading) {
-    return <div>채워주세요</div>;
+    return <div>날씨 정보를 불러오는 중...</div>;
   }
+  /* 스켈레톤 컴포넌트 적용해보기 */
+  let temperature = null; // let 값 변경 가능, 재선언 불가
+  let code = null;
+
+    if (weatherData && weatherData.hourly) {
+      const timeArray=weatherData.hourly.time;
+      const idx=getCurrentIndex(timeArray);
+      if(idx>=0){
+    temperature = weatherData.hourly.temperature_2m[idx];
+    code = weatherData.hourly.weather_code[idx];
+  }}
+  // 실제 날씨 정보 꺼냄
 
-  return <div>채워주세요</div>;
+  return (
+    <div>
+      <CurrentWeatherWrapper>
+        <Temperature>{temperature}°C</Temperature>
+        <WeatherCode>{getWeatherDescription(code)}</WeatherCode>
+      </CurrentWeatherWrapper>
+    </div>
+  );
 };
 
-export default CurrentWeather;
+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,50 @@ 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 { time, temperature_2m, weather_code } = weatherData.hourly;
+  // weatherData.hourly 객체 안에서 time, temperature_2m, weather_code를 꺼내서 같은 이름의 변수로 한 번에 선언함
+  const result = [];
+  for (let i = 0; i < 12; i++) {
+    /* const str = parseInt(times[i].slice(11, 13), 10) + "시";
+    parseInt: 문자열을 정수로 바꿔주는 함수 */
+    const str = new Date(time[i]).getHours() + "시"
+    result.push({
+      time: str,
+      temperature: temperature_2m[i],
+      code: weather_code[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 { time: dates, temperature_2m_max: temperatures, weather_code: codes } = weatherData.daily;
+  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;
 };