From 6b5d5f89dd1c21b90a37178b3ed03ec26d4a15d4 Mon Sep 17 00:00:00 2001 From: Nan Kyung Lee Date: Tue, 17 Mar 2026 08:40:57 +0900 Subject: [PATCH] =?UTF-8?q?feat(weather):=20=EC=A7=80=EC=97=AD=EB=B3=84=20?= =?UTF-8?q?=EA=B8=B0=EC=83=81=EC=A0=95=EB=B3=B4=20=ED=8C=A8=EB=84=90=20?= =?UTF-8?q?=EA=B8=80=EC=9E=90=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95=20+=20=EC=8B=9C=EA=B0=81=ED=99=94=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 패널 폭 380px → 320px 축소 - 전체 폰트 사이즈 컴팩트화 (큰 숫자 4xl→18px, 본문 xs→9px) - 핵심 지표 3칸 카드 (풍속/파고/수온) 상단 배치, 등급별 색상 - 풍향 컴파스 SVG (N/E/S/W + 화살표, 풍속 색상 연동) - 풍속/파고 게이지 바 (진행률 + 등급 색상) - 파도 4칸 그리드 (유의파고/최고파고/주기/파향) - 수온·공기·염분 3칸 그리드 - 천문·조석 4칸 그리드 (일출/일몰/월출/월몰) - 날씨 특보 배지 스타일 개선 - 전체 패딩 축소로 더 많은 정보 한눈에 표시 Co-Authored-By: Claude Opus 4.6 (1M context) --- .../weather/components/WeatherRightPanel.tsx | 362 +++++++++--------- 1 file changed, 172 insertions(+), 190 deletions(-) diff --git a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx index b009ec8..c22f7d4 100755 --- a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx +++ b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx @@ -33,12 +33,34 @@ interface WeatherRightPanelProps { weatherData: WeatherData | null } +/** 풍속 등급 색상 */ +function windColor(speed: number): string { + if (speed >= 14) return '#ef4444' + if (speed >= 10) return '#f97316' + if (speed >= 6) return '#eab308' + return '#22c55e' +} + +/** 파고 등급 색상 */ +function waveColor(height: number): string { + if (height >= 3) return '#ef4444' + if (height >= 2) return '#f97316' + if (height >= 1) return '#eab308' + return '#22c55e' +} + +/** 풍향 텍스트 */ +function windDirText(deg: number): string { + const dirs = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'] + return dirs[Math.round(deg / 22.5) % 16] +} + export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { if (!weatherData) { return ( -
+
-

지도에서 해양 지점을 클릭하세요

+

지도에서 해양 지점을 클릭하세요

) @@ -48,225 +70,185 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { const sunsetTime = '17:58' const moonrise = '19:35' const moonset = '01:50' - const moonPhase = '상현달 14일' - const moonVisibility = '6.7 m' + const windDir = windDirText(weatherData.wind.direction) + const wSpd = Number(weatherData.wind.speed) + const wHgt = Number(weatherData.wave.height) + const wTemp = Number(weatherData.temperature.current) return ( -
- {/* Header */} -
-
- 📍 {weatherData.stationName} - - 기상예보관 - +
+ {/* 헤더 */} +
+
+ 📍 {weatherData.stationName} + 기상예보관
-

- {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E · 현지시각{' '} - {weatherData.currentTime} +

+ {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E · {weatherData.currentTime}

- {/* Scrollable Content */} -
- {/* Wind Speed */} -
-
- 🌬️ 바람 현황 + {/* 스크롤 콘텐츠 */} +
+ + {/* ── 핵심 지표 3칸 카드 ── */} +
+
+
{wSpd.toFixed(1)}
+
풍속 (m/s)
-
- {Number(weatherData.wind.speed).toFixed(1)} - m/s - NW 315° +
+
{wHgt.toFixed(1)}
+
파고 (m)
-
-
- 순간최고 - - 1k: - {Number(weatherData.wind.speed_1k).toFixed(1)} m/s - -
-
- 평균 - - 3k: - {Number(weatherData.wind.speed_3k).toFixed(1)} m/s - -
-
-
- 기압 - - {weatherData.pressure} hPa (Fresh) - -
-
- 가시거리 - {weatherData.visibility} km +
+
{wTemp.toFixed(1)}
+
수온 (°C)
- {/* Wave Height */} -
-
- 🌊 파도 + {/* ── 바람 상세 ── */} +
+
🌬️ 바람 현황
+
+ {/* 풍향 컴파스 */} +
+ + + + {['N', 'E', 'S', 'W'].map((d, i) => { + const angle = i * 90 + const rad = (angle - 90) * Math.PI / 180 + const x = 25 + 20 * Math.cos(rad) + const y = 25 + 20 * Math.sin(rad) + return {d} + })} + {/* 풍향 화살표 */} + + + +
+
+
풍향{windDir} {weatherData.wind.direction}°
+
기압{weatherData.pressure} hPa
+
1k 최고{Number(weatherData.wind.speed_1k).toFixed(1)}
+
3k 평균{Number(weatherData.wind.speed_3k).toFixed(1)}
+
가시거리{weatherData.visibility} km
+
-
- {Number(weatherData.wave.height).toFixed(1)} - m - 주기:{weatherData.wave.period}초 + {/* 풍속 게이지 바 */} +
+
+
+
+ {wSpd.toFixed(1)}/20
-
-
-
치유파고
-
{Number(weatherData.wave.height).toFixed(1)} m
+
+ + {/* ── 파도 상세 ── */} +
+
🌊 파도
+
+
+
{wHgt.toFixed(1)}m
+
유의파고
-
-
최고파고
-
- {(weatherData.wave.height * 1.6).toFixed(1)} m -
+
+
{(wHgt * 1.6).toFixed(1)}m
+
최고파고
-
-
파향
-
NW 128°
+
+
{weatherData.wave.period}s
+
주기
-
-
주기(초)
-
- 4 (Moderate) - -
+
+
NW
+
파향
+
+
+ {/* 파고 게이지 바 */} +
+
+
+
+ {wHgt.toFixed(1)}/5m +
+
+ + {/* ── 수온/공기 ── */} +
+
🌡️ 수온 · 공기
+
+
+
{wTemp.toFixed(1)}°
+
수온
+
+
+
2.1°
+
기온
+
+
+
31.2
+
염분(PSU)
- {/* Temperature */} -
-
- 🌡️ 수온 • 공기 -
-
- {Number(weatherData.temperature.current).toFixed(1)} - °C - 체감온도 -
-
-
-
기온
-
2.1 °C
-
-
-
습도
-
31.2 PSU
-
-
-
- - {/* Hourly Forecast */} -
-
- ⏰ 시간별 예보 -
-
- {weatherData.forecast.map((forecast, index) => ( -
- {forecast.hour} - {forecast.icon} - - {forecast.temperature}° - -
- 🌬️ - {forecast.windSpeed} -
+ {/* ── 시간별 예보 ── */} +
+
⏰ 시간별 예보
+
+ {weatherData.forecast.map((f, i) => ( +
+ {f.hour} + {f.icon} + {f.temperature}° + {f.windSpeed}
))}
- {/* Sun and Moon */} -
-
- ☀️ 천문 • 조석 + {/* ── 천문/조석 ── */} +
+
☀️ 천문 · 조석
+
+ {[ + { icon: '🌅', label: '일출', value: sunriseTime }, + { icon: '🌄', label: '일몰', value: sunsetTime }, + { icon: '🌙', label: '월출', value: moonrise }, + { icon: '🌜', label: '월몰', value: moonset }, + ].map((item, i) => ( +
+
{item.icon}
+
{item.label}
+
{item.value}
+
+ ))}
-
-
-
- 🌅 -
-
일출
-
- {sunriseTime} - (8.6m) -
-
-
-
- 🌄 -
-
일몰
-
- {sunsetTime} - -
-
-
-
+
+ 🌓 + 상현달 14일 + 조차 6.7m +
+
-
-
- 🌙 -
-
월출
-
- {moonrise} - (8.8m) -
-
-
-
- 🌜 -
-
월몰
-
- {moonset} - (1.8m) -
-
-
-
- -
- 🌓 -
-
달
-
- {moonPhase} - 조차 - {moonVisibility} -
-
+ {/* ── 날씨 특보 ── */} +
+
🚨 날씨 특보
+
+
+ 주의 + 풍랑주의보 예상 08:00~
- {/* Alert */} -
-
- 🚨 날씨 특보 -
-
-
- 주의 - 풍랑주의보 예상 08:00~ -
-
-
)