style(weather): 섹션 내부 컨텐츠 값 사이즈 키움
- 바람현황 값: 13px, 컴파스 유지 - 파도 카드 값: 14px, 라벨: 10px - 수온·공기 카드 값: 14px - 시간별 예보 온도: 13px, 아이콘: lg - 천문·조석 시각: 13px, 아이콘: base Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nan Kyung Lee
부모
bbdb654857
커밋
326237b91f
@ -133,12 +133,12 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
|
|||||||
<circle cx="25" cy="25" r="3" fill={windColor(wSpd)} />
|
<circle cx="25" cy="25" r="3" fill={windColor(wSpd)} />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 grid grid-cols-2 gap-x-3 gap-y-1 text-[11px]">
|
<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">{windDir} {weatherData.wind.direction}°</span></div>
|
<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">{weatherData.pressure} hPa</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" 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">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" style={{ color: windColor(weatherData.wind.speed_3k) }}>{Number(weatherData.wind.speed_3k).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">{weatherData.visibility} km</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>
|
||||||
</div>
|
</div>
|
||||||
{/* 풍속 게이지 바 */}
|
{/* 풍속 게이지 바 */}
|
||||||
@ -153,22 +153,22 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
|
|||||||
{/* ── 파도 상세 ── */}
|
{/* ── 파도 상세 ── */}
|
||||||
<div className="px-3 py-2 border-b border-border">
|
<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="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">
|
||||||
<div className="text-center py-1.5 bg-bg-0 border border-border rounded">
|
<div className="text-center py-2 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-[14px] font-bold font-mono" style={{ color: waveColor(wHgt) }}>{wHgt.toFixed(1)}m</div>
|
||||||
<div className="text-[11px] text-text-3">유의파고</div>
|
<div className="text-[10px] text-text-3">유의파고</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center py-1.5 bg-bg-0 border border-border rounded">
|
<div className="text-center py-2 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-[14px] 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-[10px] text-text-3">최고파고</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center py-1.5 bg-bg-0 border border-border rounded">
|
<div className="text-center py-2 bg-bg-0 border border-border rounded">
|
||||||
<div className="font-bold font-mono text-primary-cyan">{weatherData.wave.period}s</div>
|
<div className="text-[14px] font-bold font-mono text-primary-cyan">{weatherData.wave.period}s</div>
|
||||||
<div className="text-[11px] text-text-3">주기</div>
|
<div className="text-[10px] text-text-3">주기</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center py-1.5 bg-bg-0 border border-border rounded">
|
<div className="text-center py-2 bg-bg-0 border border-border rounded">
|
||||||
<div className="font-bold font-mono text-text-1">NW</div>
|
<div className="text-[14px] font-bold font-mono text-text-1">NW</div>
|
||||||
<div className="text-[11px] text-text-3">파향</div>
|
<div className="text-[10px] text-text-3">파향</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* 파고 게이지 바 */}
|
{/* 파고 게이지 바 */}
|
||||||
@ -183,18 +183,18 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
|
|||||||
{/* ── 수온/공기 ── */}
|
{/* ── 수온/공기 ── */}
|
||||||
<div className="px-3 py-2 border-b border-border">
|
<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="text-[11px] font-bold text-text-3 font-korean mb-2">🌡️ 수온 · 공기</div>
|
||||||
<div className="grid grid-cols-3 gap-1 text-[11px]">
|
<div className="grid grid-cols-3 gap-1">
|
||||||
<div className="text-center py-1.5 bg-bg-0 border border-border rounded">
|
<div className="text-center py-2 bg-bg-0 border border-border rounded">
|
||||||
<div className="font-bold font-mono text-primary-cyan">{wTemp.toFixed(1)}°</div>
|
<div className="text-[14px] font-bold font-mono text-primary-cyan">{wTemp.toFixed(1)}°</div>
|
||||||
<div className="text-[11px] text-text-3">수온</div>
|
<div className="text-[10px] text-text-3">수온</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center py-1.5 bg-bg-0 border border-border rounded">
|
<div className="text-center py-2 bg-bg-0 border border-border rounded">
|
||||||
<div className="font-bold font-mono text-text-1">2.1°</div>
|
<div className="text-[14px] font-bold font-mono text-text-1">2.1°</div>
|
||||||
<div className="text-[11px] text-text-3">기온</div>
|
<div className="text-[10px] text-text-3">기온</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center py-1.5 bg-bg-0 border border-border rounded">
|
<div className="text-center py-2 bg-bg-0 border border-border rounded">
|
||||||
<div className="font-bold font-mono text-text-1">31.2</div>
|
<div className="text-[14px] font-bold font-mono text-text-1">31.2</div>
|
||||||
<div className="text-[11px] text-text-3">염분(PSU)</div>
|
<div className="text-[10px] text-text-3">염분(PSU)</div>
|
||||||
</div>
|
</div>
|
||||||
</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="text-[11px] font-bold text-text-3 font-korean mb-2">⏰ 시간별 예보</div>
|
||||||
<div className="grid grid-cols-5 gap-1">
|
<div className="grid grid-cols-5 gap-1">
|
||||||
{weatherData.forecast.map((f, i) => (
|
{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-[11px] text-text-3 mb-0.5">{f.hour}</span>
|
||||||
<span className="text-base mb-0.5">{f.icon}</span>
|
<span className="text-lg mb-0.5">{f.icon}</span>
|
||||||
<span className="text-[11px] font-bold text-text-1">{f.temperature}°</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>
|
<span className="text-[11px] text-text-3 font-mono">{f.windSpeed}</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@ -217,17 +217,17 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
|
|||||||
{/* ── 천문/조석 ── */}
|
{/* ── 천문/조석 ── */}
|
||||||
<div className="px-3 py-2 border-b border-border">
|
<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="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: sunriseTime },
|
||||||
{ icon: '🌄', label: '일몰', value: sunsetTime },
|
{ icon: '🌄', label: '일몰', value: sunsetTime },
|
||||||
{ icon: '🌙', label: '월출', value: moonrise },
|
{ icon: '🌙', label: '월출', value: moonrise },
|
||||||
{ icon: '🌜', label: '월몰', value: moonset },
|
{ icon: '🌜', label: '월몰', value: moonset },
|
||||||
].map((item, i) => (
|
].map((item, i) => (
|
||||||
<div key={i} className="text-center py-1.5 bg-bg-0 border border-border rounded">
|
<div key={i} className="text-center py-2 bg-bg-0 border border-border rounded">
|
||||||
<div className="text-sm mb-0.5">{item.icon}</div>
|
<div className="text-base mb-0.5">{item.icon}</div>
|
||||||
<div className="text-[11px] text-text-3">{item.label}</div>
|
<div className="text-[10px] text-text-3">{item.label}</div>
|
||||||
<div className="font-bold font-mono text-text-1">{item.value}</div>
|
<div className="text-[13px] font-bold font-mono text-text-1">{item.value}</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
불러오는 중...
Reference in New Issue
Block a user