From 3f48f87be733685bee674b8107224e0a88926a9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EC=97=B0=EC=A4=80?= Date: Tue, 13 May 2025 13:33:41 +0900 Subject: [PATCH 1/2] =?UTF-8?q?7=EA=B0=95=20=EC=A0=95=EC=97=B0=EC=A4=80=20?= =?UTF-8?q?=EA=B3=BC=EC=A0=9C=EC=A0=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CurrentWeather.js | 25 ++++++++++++-- src/components/DailyForecast.js | 17 +++++++++- src/components/HourlyForecast.js | 14 +++++++- src/utils/weather.js | 58 ++++++++++++++++++++++---------- 4 files changed, 92 insertions(+), 22 deletions(-) diff --git a/src/components/CurrentWeather.js b/src/components/CurrentWeather.js index ce926d9..8c5c63c 100644 --- a/src/components/CurrentWeather.js +++ b/src/components/CurrentWeather.js @@ -7,11 +7,32 @@ import { import { getWeatherDescription } from "../utils/weather"; const CurrentWeather = ({ weatherData, isLoading }) => { + const getCurrentWeather = () => { + const time = new Date().getHours(); // 현재 시각 알아내기 + const hourlyData = weatherData.hourly; + const nowWeather = { + // hourly 데이터에서 현재 시각을 기준으로 data를 가져옴, 현재 13시라면 hourly 데이터에서 13번째 index에 13시 정보가 있음1 + temperature: hourlyData.temperature_2m[time], + time: hourlyData.time[time], + weatherCode: hourlyData.weather_code[time], + }; + + return nowWeather; + }; if (isLoading) { - return
채워주세요
; + return
현재날씨 로딩중...
; } + const currentData = getCurrentWeather(); - return
채워주세요
; + return ( + +

현재 위치 : 서울

+ {Math.floor(currentData.temperature)}°C + + {getWeatherDescription(currentData.weatherCode)} + + + ); }; export default CurrentWeather; diff --git a/src/components/DailyForecast.js b/src/components/DailyForecast.js index 7300228..5484f5e 100644 --- a/src/components/DailyForecast.js +++ b/src/components/DailyForecast.js @@ -4,8 +4,23 @@ import { getWeatherDescription, formatDailyData } from "../utils/weather"; const DailyForecast = ({ weatherData }) => { const dailyData = formatDailyData(weatherData); + const days = ["월", "화", "수", "목", "금", "토", "일"]; - return
채워주세요
; + return ( + + {dailyData.map((data, idx) => ( + +
+ {`${new Date(data.time).getMonth() + 1}월 ${new Date( + data.time + ).getDate()}일 (${days[new Date(data.time).getDay()]})`} +
+
{getWeatherDescription(data.weatherCode)}
+
{Math.floor(data.temperature)}°C
+ + ))} + + ); }; export default DailyForecast; diff --git a/src/components/HourlyForecast.js b/src/components/HourlyForecast.js index 67c3645..8e21853 100644 --- a/src/components/HourlyForecast.js +++ b/src/components/HourlyForecast.js @@ -5,7 +5,19 @@ import { getWeatherDescription, formatHourlyData } from "../utils/weather"; const HourlyForecast = ({ weatherData }) => { const hourlyData = formatHourlyData(weatherData); - return
채워주세요
; + return ( + + {hourlyData.map((data, idx) => ( + +
+ {new Date(data.time).getHours().toString().padStart(2, "0")}시 +
+
{Math.floor(data.temperature)}°C
+ {getWeatherDescription(data.weatherCode)} + + ))} + + ); }; export default HourlyForecast; diff --git a/src/utils/weather.js b/src/utils/weather.js index e357680..a6a24ce 100644 --- a/src/utils/weather.js +++ b/src/utils/weather.js @@ -1,20 +1,20 @@ export const getWeatherDescription = (code) => { const weatherCodes = { - 0: "맑음", - 1: "대체로 맑음", - 2: "부분적으로 흐림", - 3: "흐림", - 45: "안개", - 48: "짙은 안개", - 51: "약한 이슬비", - 53: "보통 이슬비", - 55: "강한 이슬비", - 61: "약한 비", - 63: "보통 비", - 65: "강한 비", - 71: "약한 눈", - 73: "보통 눈", - 75: "강한 눈", + 0: "맑음 ☀️", + 1: "대체로 맑음 🌤️", + 2: "부분적으로 흐림 ⛅", + 3: "흐림 ☁️", + 45: "안개 🌫️", + 48: "짙은 안개 🌫️", + 51: "약한 이슬비 🌦️", + 53: "보통 이슬비 🌦️", + 55: "강한 이슬비 🌦️", + 61: "약한 비 🌧️", + 63: "보통 비 🌧️", + 65: "강한 비 🌧️", + 71: "약한 눈 🌨️", + 73: "보통 눈 🌨️", + 75: "강한 눈 🌨️", }; return weatherCodes[code] || "알 수 없음"; }; @@ -22,11 +22,33 @@ export const getWeatherDescription = (code) => { export const formatHourlyData = (weatherData) => { if (!weatherData) return []; // 밑에 코드 채워주세요 - return []; + const time = weatherData.hourly.time; + const temperature2m = weatherData.hourly.temperature_2m; + const weatherCode = weatherData.hourly.weather_code; + const hourlyData = []; + for (let i = 0; i < 12; i++) { + hourlyData.push({ + time: time[i].toString(), + temperature: temperature2m[i], + weatherCode: weatherCode[i], + }); + } + return hourlyData; }; export const formatDailyData = (weatherData) => { if (!weatherData) return []; - // 밑에 코드 채워주세요 - return []; + const time = weatherData.daily.time; + const temperature2mMax = weatherData.daily.temperature_2m_max; + const weatherCode = weatherData.daily.weather_code; + const dailyData = []; + for (let i = 0; i < 7; i++) { + dailyData.push({ + time: time[i].toString(), + temperature: temperature2mMax[i], + weatherCode: weatherCode[i], + }); + } + + return dailyData; }; From 72c6da744c4799507891e996d2d488034d1879e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EC=97=B0=EC=A4=80?= Date: Tue, 13 May 2025 13:52:38 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EB=82=A0=EC=A7=9C=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20Hourly=20Item=20=EC=A4=84?= =?UTF-8?q?=EB=B0=94=EA=BF=88=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CurrentWeather.js | 9 +++++++-- src/components/styles/StyledComponents.js | 1 + src/utils/weather.js | 9 +++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/CurrentWeather.js b/src/components/CurrentWeather.js index 8c5c63c..07bb149 100644 --- a/src/components/CurrentWeather.js +++ b/src/components/CurrentWeather.js @@ -7,13 +7,14 @@ import { import { getWeatherDescription } from "../utils/weather"; const CurrentWeather = ({ weatherData, isLoading }) => { + console.log(weatherData); const getCurrentWeather = () => { const time = new Date().getHours(); // 현재 시각 알아내기 const hourlyData = weatherData.hourly; const nowWeather = { // hourly 데이터에서 현재 시각을 기준으로 data를 가져옴, 현재 13시라면 hourly 데이터에서 13번째 index에 13시 정보가 있음1 temperature: hourlyData.temperature_2m[time], - time: hourlyData.time[time], + time: hourlyData.time[time].toString(), weatherCode: hourlyData.weather_code[time], }; @@ -26,7 +27,11 @@ const CurrentWeather = ({ weatherData, isLoading }) => { return ( -

현재 위치 : 서울

+

+ 현재 위치 : 서울 +
+ 현재 시각 : {new Date(currentData.time).getHours()}시 +

{Math.floor(currentData.temperature)}°C {getWeatherDescription(currentData.weatherCode)} diff --git a/src/components/styles/StyledComponents.js b/src/components/styles/StyledComponents.js index ad0c838..d60d9ac 100644 --- a/src/components/styles/StyledComponents.js +++ b/src/components/styles/StyledComponents.js @@ -43,6 +43,7 @@ export const HourlyItem = styled.div` color: white; padding: 10px; min-width: 100px; + white-space: nowrap; `; export const DailyForecastWrapper = styled.div` diff --git a/src/utils/weather.js b/src/utils/weather.js index a6a24ce..d8dac7e 100644 --- a/src/utils/weather.js +++ b/src/utils/weather.js @@ -15,6 +15,15 @@ export const getWeatherDescription = (code) => { 71: "약한 눈 🌨️", 73: "보통 눈 🌨️", 75: "강한 눈 🌨️", + 77: "싸락눈 🌨️", + 80: "약한 소나기 🌦️", + 81: "보통 소나기 🌦️", + 82: "강한 소나기 🌦️", + 85: "약한 눈 소나기 🌨️", + 86: "강한 눈 소나기 🌨️", + 95: "천둥번개 ⛈️", + 96: "우박 동반 천둥번개 ⛈️", + 99: "강한 우박 천둥번개 ⛈️", }; return weatherCodes[code] || "알 수 없음"; };