diff --git a/src/App.css b/src/App.css index 8be2f00435c0c5692d9a7e32e8a597fcce10172f..114f0290bd5548d3889a4126b6d660548852274c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,7 @@ :root { --primary-color: #2d46c3; --primary-variant-color: #001c98; - --primary-sky-color: #5b7baf; + --primary-sky-color: #8a9dff; --primary-light-color: #e8eaf9; --complementary-color: #c3aa2d; --secondary-color: #6c757d; diff --git a/src/components/MyTripWeather.js b/src/components/MyTripWeather.js index 2f1a7b7fc86142a441e637990d987c1f807d6e77..2dc7b1744949db12d9510aa01524303d18b5b58e 100644 --- a/src/components/MyTripWeather.js +++ b/src/components/MyTripWeather.js @@ -70,31 +70,44 @@ const MyTripWeather = ({ location }) => { fetchWeather(); }, [location]); - if (loading) return <div className="weather-loading">날씨 정보를 불러오는 중...</div>; if (error) return <div className="weather-error">{error}</div>; - if (!weatherData) return null; return ( <div className="weather-container"> - <h4 className="weather-title">{location}의 날씨는?</h4> + <h4 className="weather-title"> + {loading ? ( + <div className="shimmer-text"></div> + ) : ( + `${location}의 날씨는?` + )} + </h4> <div className="weather-days"> - {weatherData.map((day, index) => ( - <div key={index} className="weather-day"> - <div className="weather-date"> - {index === 0 ? '오늘' : - index === 1 ? '내일' : - '모레'} + {loading ? ( + // 로딩 중 shimmer 효과 + Array(3).fill(null).map((_, index) => ( + <div> </div> - <div className="weather-info"> - <img - src={`https://openweathermap.org/img/wn/${day.weather[0].icon}.png`} - alt={day.weather[0].description} - /> - <span className="temperature">{Math.round(day.main.temp)}°</span> + )) + ) : ( + // 실제 날씨 데이터 + weatherData.map((day, index) => ( + <div key={index} className="weather-day"> + <div className="weather-date"> + {index === 0 ? '오늘' : + index === 1 ? '내일' : + '모레'} + </div> + <div className="weather-info"> + <img + src={`https://openweathermap.org/img/wn/${day.weather[0].icon}.png`} + alt={day.weather[0].description} + /> + <span className="temperature">{Math.round(day.main.temp)}°</span> + </div> + <div className="weather-desc">{day.weather[0].description}</div> </div> - <div className="weather-desc">{day.weather[0].description}</div> - </div> - ))} + )) + )} </div> </div> ); diff --git a/src/styles/MyTripWeather.css b/src/styles/MyTripWeather.css index 47cf7ec6cc7028e313c25a9d080a13ad901cb90c..0e9c3d54ef9128204480e6022d263917981a0667 100644 --- a/src/styles/MyTripWeather.css +++ b/src/styles/MyTripWeather.css @@ -4,6 +4,8 @@ padding: 12px; margin: 10px 0; max-width: 100%; + height: 100px; + overflow: hidden; } .weather-title { @@ -15,7 +17,7 @@ .weather-days { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @@ -72,4 +74,52 @@ font-size: 0.9rem; padding: 10px; text-align: center; +} + +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +.shimmer { + background: #f6f7f8; + border-radius: 8px; + padding: 15px; +} + +.shimmer-text { + height: 16px; + background: linear-gradient( + 90deg, + #f0f0f0 25%, + #e0e0e0 50%, + #f0f0f0 75% + ); + background-size: 200% 100%; + animation: shimmer 2s infinite linear; + border-radius: 4px; + margin: 4px 0; +} + +.shimmer-circle { + width: 50px; + height: 50px; + border-radius: 50%; + background: linear-gradient( + 90deg, + #f0f0f0 25%, + #e0e0e0 50%, + #f0f0f0 75% + ); + background-size: 200% 100%; + animation: shimmer 2s infinite linear; + margin: 8px auto; +} + +.weather-day.shimmer { + background: white; } \ No newline at end of file