From 326237b91f33bafec53a7a89afe17d2c94fe25a3 Mon Sep 17 00:00:00 2001
From: Nan Kyung Lee <nankyunglee@Nanui-Macmini.local>
Date: Tue, 17 Mar 2026 08:46:14 +0900
Subject: [PATCH] =?UTF-8?q?style(weather):=20=EC=84=B9=EC=85=98=20?=
 =?UTF-8?q?=EB=82=B4=EB=B6=80=20=EC=BB=A8=ED=85=90=EC=B8=A0=20=EA=B0=92=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=ED=82=A4=EC=9B=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 바람현황 값: 13px, 컴파스 유지
- 파도 카드 값: 14px, 라벨: 10px
- 수온·공기 카드 값: 14px
- 시간별 예보 온도: 13px, 아이콘: lg
- 천문·조석 시각: 13px, 아이콘: base

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../weather/components/WeatherRightPanel.tsx  | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
index 2696665..7cfc678 100755
--- a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
+++ b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
@@ -133,12 +133,12 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
                 <circle cx="25" cy="25" r="3" fill={windColor(wSpd)} />
               </svg>
             </div>
-            <div className="flex-1 grid grid-cols-2 gap-x-3 gap-y-1 text-[11px]">
-              <div className="flex justify-between"><span className="text-text-3">풍향</span><span className="text-text-1 font-mono font-bold">{windDir} {weatherData.wind.direction}°</span></div>
-              <div className="flex justify-between"><span className="text-text-3">기압</span><span className="text-text-1 font-mono">{weatherData.pressure} hPa</span></div>
-              <div className="flex justify-between"><span className="text-text-3">1k 최고</span><span className="font-mono" style={{ color: windColor(weatherData.wind.speed_1k) }}>{Number(weatherData.wind.speed_1k).toFixed(1)}</span></div>
-              <div className="flex justify-between"><span className="text-text-3">3k 평균</span><span className="font-mono" style={{ color: windColor(weatherData.wind.speed_3k) }}>{Number(weatherData.wind.speed_3k).toFixed(1)}</span></div>
-              <div className="col-span-2 flex justify-between"><span className="text-text-3">가시거리</span><span className="text-text-1 font-mono">{weatherData.visibility} km</span></div>
+            <div className="flex-1 grid grid-cols-2 gap-x-3 gap-y-1.5 text-[11px]">
+              <div className="flex justify-between"><span className="text-text-3">풍향</span><span className="text-text-1 font-mono font-bold text-[13px]">{windDir} {weatherData.wind.direction}°</span></div>
+              <div className="flex justify-between"><span className="text-text-3">기압</span><span className="text-text-1 font-mono text-[13px]">{weatherData.pressure} hPa</span></div>
+              <div className="flex justify-between"><span className="text-text-3">1k 최고</span><span className="font-mono text-[13px]" style={{ color: windColor(weatherData.wind.speed_1k) }}>{Number(weatherData.wind.speed_1k).toFixed(1)}</span></div>
+              <div className="flex justify-between"><span className="text-text-3">3k 평균</span><span className="font-mono text-[13px]" style={{ color: windColor(weatherData.wind.speed_3k) }}>{Number(weatherData.wind.speed_3k).toFixed(1)}</span></div>
+              <div className="col-span-2 flex justify-between"><span className="text-text-3">가시거리</span><span className="text-text-1 font-mono text-[13px]">{weatherData.visibility} km</span></div>
             </div>
           </div>
           {/* 풍속 게이지 바 */}
@@ -153,22 +153,22 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
         {/* ── 파도 상세 ── */}
         <div className="px-3 py-2 border-b border-border">
           <div className="text-[11px] font-bold text-text-3 font-korean mb-2">🌊 파도</div>
-          <div className="grid grid-cols-4 gap-1 text-[11px]">
-            <div className="text-center py-1.5 bg-bg-0 border border-border rounded">
-              <div className="font-bold font-mono" style={{ color: waveColor(wHgt) }}>{wHgt.toFixed(1)}m</div>
-              <div className="text-[11px] text-text-3">유의파고</div>
+          <div className="grid grid-cols-4 gap-1">
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono" style={{ color: waveColor(wHgt) }}>{wHgt.toFixed(1)}m</div>
+              <div className="text-[10px] text-text-3">유의파고</div>
             </div>
-            <div className="text-center py-1.5 bg-bg-0 border border-border rounded">
-              <div className="font-bold font-mono text-status-red">{(wHgt * 1.6).toFixed(1)}m</div>
-              <div className="text-[11px] text-text-3">최고파고</div>
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-status-red">{(wHgt * 1.6).toFixed(1)}m</div>
+              <div className="text-[10px] text-text-3">최고파고</div>
             </div>
-            <div className="text-center py-1.5 bg-bg-0 border border-border rounded">
-              <div className="font-bold font-mono text-primary-cyan">{weatherData.wave.period}s</div>
-              <div className="text-[11px] text-text-3">주기</div>
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-primary-cyan">{weatherData.wave.period}s</div>
+              <div className="text-[10px] text-text-3">주기</div>
             </div>
-            <div className="text-center py-1.5 bg-bg-0 border border-border rounded">
-              <div className="font-bold font-mono text-text-1">NW</div>
-              <div className="text-[11px] text-text-3">파향</div>
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-text-1">NW</div>
+              <div className="text-[10px] text-text-3">파향</div>
             </div>
           </div>
           {/* 파고 게이지 바 */}
@@ -183,18 +183,18 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
         {/* ── 수온/공기 ── */}
         <div className="px-3 py-2 border-b border-border">
           <div className="text-[11px] font-bold text-text-3 font-korean mb-2">🌡️ 수온 · 공기</div>
-          <div className="grid grid-cols-3 gap-1 text-[11px]">
-            <div className="text-center py-1.5 bg-bg-0 border border-border rounded">
-              <div className="font-bold font-mono text-primary-cyan">{wTemp.toFixed(1)}°</div>
-              <div className="text-[11px] text-text-3">수온</div>
+          <div className="grid grid-cols-3 gap-1">
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-primary-cyan">{wTemp.toFixed(1)}°</div>
+              <div className="text-[10px] text-text-3">수온</div>
             </div>
-            <div className="text-center py-1.5 bg-bg-0 border border-border rounded">
-              <div className="font-bold font-mono text-text-1">2.1°</div>
-              <div className="text-[11px] text-text-3">기온</div>
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-text-1">2.1°</div>
+              <div className="text-[10px] text-text-3">기온</div>
             </div>
-            <div className="text-center py-1.5 bg-bg-0 border border-border rounded">
-              <div className="font-bold font-mono text-text-1">31.2</div>
-              <div className="text-[11px] text-text-3">염분(PSU)</div>
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-text-1">31.2</div>
+              <div className="text-[10px] text-text-3">염분(PSU)</div>
             </div>
           </div>
         </div>
@@ -204,10 +204,10 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
           <div className="text-[11px] font-bold text-text-3 font-korean mb-2">⏰ 시간별 예보</div>
           <div className="grid grid-cols-5 gap-1">
             {weatherData.forecast.map((f, i) => (
-              <div key={i} className="flex flex-col items-center py-1.5 px-1 bg-bg-0 border border-border rounded">
+              <div key={i} className="flex flex-col items-center py-2 px-1 bg-bg-0 border border-border rounded">
                 <span className="text-[11px] text-text-3 mb-0.5">{f.hour}</span>
-                <span className="text-base mb-0.5">{f.icon}</span>
-                <span className="text-[11px] font-bold text-text-1">{f.temperature}°</span>
+                <span className="text-lg mb-0.5">{f.icon}</span>
+                <span className="text-[13px] font-bold text-text-1">{f.temperature}°</span>
                 <span className="text-[11px] text-text-3 font-mono">{f.windSpeed}</span>
               </div>
             ))}
@@ -217,17 +217,17 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
         {/* ── 천문/조석 ── */}
         <div className="px-3 py-2 border-b border-border">
           <div className="text-[11px] font-bold text-text-3 font-korean mb-2">☀️ 천문 · 조석</div>
-          <div className="grid grid-cols-4 gap-1 text-[11px]">
+          <div className="grid grid-cols-4 gap-1">
             {[
               { icon: '🌅', label: '일출', value: sunriseTime },
               { icon: '🌄', label: '일몰', value: sunsetTime },
               { icon: '🌙', label: '월출', value: moonrise },
               { icon: '🌜', label: '월몰', value: moonset },
             ].map((item, i) => (
-              <div key={i} className="text-center py-1.5 bg-bg-0 border border-border rounded">
-                <div className="text-sm mb-0.5">{item.icon}</div>
-                <div className="text-[11px] text-text-3">{item.label}</div>
-                <div className="font-bold font-mono text-text-1">{item.value}</div>
+              <div key={i} className="text-center py-2 bg-bg-0 border border-border rounded">
+                <div className="text-base mb-0.5">{item.icon}</div>
+                <div className="text-[10px] text-text-3">{item.label}</div>
+                <div className="text-[13px] font-bold font-mono text-text-1">{item.value}</div>
               </div>
             ))}
           </div>