|
|
@ -145,83 +145,95 @@ export function WeatherContainer({ mapAreaCoordList }) { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
{loading ? ( |
|
|
|
{loading ? ( |
|
|
|
<div className='grid-loading'> |
|
|
|
<div |
|
|
|
<div> |
|
|
|
style={{ |
|
|
|
<Spinner color='primary' /> |
|
|
|
display: 'flex', |
|
|
|
<span>Loading...</span> |
|
|
|
flexDirection: 'column', |
|
|
|
</div> |
|
|
|
justifyContent: 'center', |
|
|
|
|
|
|
|
alignItems: 'center' |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Spinner color='primary' /> |
|
|
|
|
|
|
|
<span>Loading...</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
<div className='layer-content'> |
|
|
|
<> |
|
|
|
{Object.keys(dayData).length != 0 && |
|
|
|
<p className='ti'> |
|
|
|
mapAreaCoordList[0]?.coordList[0].lat != 0 ? ( |
|
|
|
오늘 날짜 기준으로 3일 이내 날짜만 조회 가능합니다. |
|
|
|
<div className='layer-weather-box'> |
|
|
|
</p> |
|
|
|
<div className='layer-weather-info'> |
|
|
|
<div className='layer-content'> |
|
|
|
<div className='layer-weather-table'> |
|
|
|
{Object.keys(dayData).length != 0 && |
|
|
|
<div className='layer-weather-address'> |
|
|
|
mapAreaCoordList[0]?.coordList[0].lat != 0 ? ( |
|
|
|
검색하신 지역의 날씨 정보입니다. |
|
|
|
<div className='layer-weather-box'> |
|
|
|
<span> |
|
|
|
<div className='layer-weather-info'> |
|
|
|
<Compass size={20} />{' '} |
|
|
|
<div className='layer-weather-table'> |
|
|
|
{weather.area1 != undefined |
|
|
|
<div className='layer-weather-address'> |
|
|
|
? `${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}` |
|
|
|
검색하신 지역의 날씨 정보입니다. |
|
|
|
: `선택하신 좌표는 없는 주소입니다.`} |
|
|
|
<span> |
|
|
|
</span> |
|
|
|
<Compass size={20} />{' '} |
|
|
|
</div> |
|
|
|
{weather.area1 != undefined |
|
|
|
|
|
|
|
? `${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}` |
|
|
|
|
|
|
|
: `선택하신 좌표는 없는 주소입니다.`} |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
{weather.area1 != undefined ? ( |
|
|
|
{weather.area1 != undefined ? ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<div className='tab-menu'> |
|
|
|
<div className='tab-menu'> |
|
|
|
<ul> |
|
|
|
<ul> |
|
|
|
<li |
|
|
|
<li |
|
|
|
className={activeTab == 1 ? `active` : ''} |
|
|
|
className={activeTab == 1 ? `active` : ''} |
|
|
|
onClick={() => toggle('1')} |
|
|
|
onClick={() => toggle('1')} |
|
|
|
> |
|
|
|
> |
|
|
|
오늘 |
|
|
|
오늘 |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li |
|
|
|
<li |
|
|
|
className={activeTab == 2 ? `active` : ''} |
|
|
|
className={activeTab == 2 ? `active` : ''} |
|
|
|
onClick={() => toggle('2')} |
|
|
|
onClick={() => toggle('2')} |
|
|
|
> |
|
|
|
> |
|
|
|
내일 |
|
|
|
내일 |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li |
|
|
|
<li |
|
|
|
className={activeTab == 3 ? `active` : ''} |
|
|
|
className={activeTab == 3 ? `active` : ''} |
|
|
|
onClick={() => toggle('3')} |
|
|
|
onClick={() => toggle('3')} |
|
|
|
> |
|
|
|
> |
|
|
|
모레 |
|
|
|
모레 |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
|
|
|
|
{activeTab == 1 ? ( |
|
|
|
|
|
|
|
<div className='tab-content active'> |
|
|
|
|
|
|
|
<TodayWeather todayData={dayData.todayData} /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<></> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
{activeTab == 2 ? ( |
|
|
|
|
|
|
|
<div className='tab-content active'> |
|
|
|
|
|
|
|
<TomorrowWeahter |
|
|
|
|
|
|
|
tomorrowData={dayData.tomorrowData} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<></> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
{activeTab == 3 ? ( |
|
|
|
|
|
|
|
<div className='tab-content active'> |
|
|
|
|
|
|
|
<AfterTomorrowWeahter afterData={dayData.afterData} /> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
{activeTab == 1 ? ( |
|
|
|
<></> |
|
|
|
<div className='tab-content active'> |
|
|
|
)} |
|
|
|
<TodayWeather todayData={dayData.todayData} /> |
|
|
|
</> |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
) : ( |
|
|
|
|
|
|
|
<></> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
{activeTab == 2 ? ( |
|
|
|
|
|
|
|
<div className='tab-content active'> |
|
|
|
|
|
|
|
<TomorrowWeahter |
|
|
|
|
|
|
|
tomorrowData={dayData.tomorrowData} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<></> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
{activeTab == 3 ? ( |
|
|
|
|
|
|
|
<div className='tab-content active'> |
|
|
|
|
|
|
|
<AfterTomorrowWeahter |
|
|
|
|
|
|
|
afterData={dayData.afterData} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<></> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
) : null} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</> |
|
|
|
)} |
|
|
|
)} |
|
|
|
</> |
|
|
|
</> |
|
|
|
); |
|
|
|
); |
|
|
|