gc/wing-ops
8
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동

style(weather): 기상정보 패널 글자 크기 전체 1단계 키움

소스 검색 
- 라벨 7px→10px, 본문 9px→10px, 섹션제목 9px→10px
- 핵심 지표 숫자 18px→22px
- 헤더 11px→12px

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nan Kyung Lee 2026-03-17 08:42:36 +09:00
부모 6b5d5f89dd
커밋 f5bcbde40e
1개의 변경된 파일과 35개의 추가작업 그리고 35개의 파일을 삭제
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/tabs/weather/components/WeatherRightPanel.tsx
파일 보기

@ -60,7 +60,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
return ( return (
<div className="flex flex-col bg-bg-1 border-l border-border overflow-hidden w-[320px] shrink-0"> <div className="flex flex-col bg-bg-1 border-l border-border overflow-hidden w-[320px] shrink-0">
<div className="p-6 text-center"> <div className="p-6 text-center">
<p className="text-text-3 text-[11px] font-korean">지도에서 해양 지점을 클릭하세요</p> <p className="text-text-3 text-xs font-korean">지도에서 해양 지점을 클릭하세요</p>
</div> </div>
</div> </div>
) )
@ -80,10 +80,10 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
{/* 헤더 */} {/* 헤더 */}
<div className="px-4 py-3 border-b border-border bg-bg-2"> <div className="px-4 py-3 border-b border-border bg-bg-2">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<span className="text-[11px] font-bold text-primary-cyan font-korean">📍 {weatherData.stationName}</span> <span className="text-xs font-bold text-primary-cyan font-korean">📍 {weatherData.stationName}</span>
<span className="px-1.5 py-px text-[8px] rounded bg-primary-cyan/15 text-primary-cyan font-bold">기상예보관</span> <span className="px-1.5 py-px text-[10px] rounded bg-primary-cyan/15 text-primary-cyan font-bold">기상예보관</span>
</div> </div>
<p className="text-[9px] text-text-3 font-mono"> <p className="text-[10px] text-text-3 font-mono">
{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}
</p> </p>
</div> </div>
@ -94,22 +94,22 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
{/* ── 핵심 지표 3칸 카드 ── */} {/* ── 핵심 지표 3칸 카드 ── */}
<div className="grid grid-cols-3 gap-1 px-3 py-2.5"> <div className="grid grid-cols-3 gap-1 px-3 py-2.5">
<div className="text-center py-2.5 bg-bg-0 border border-border rounded-md"> <div className="text-center py-2.5 bg-bg-0 border border-border rounded-md">
<div className="text-[18px] font-bold font-mono" style={{ color: windColor(wSpd) }}>{wSpd.toFixed(1)}</div> <div className="text-[22px] font-bold font-mono" style={{ color: windColor(wSpd) }}>{wSpd.toFixed(1)}</div>
<div className="text-[8px] text-text-3 font-korean">풍속 (m/s)</div> <div className="text-[10px] text-text-3 font-korean">풍속 (m/s)</div>
</div> </div>
<div className="text-center py-2.5 bg-bg-0 border border-border rounded-md"> <div className="text-center py-2.5 bg-bg-0 border border-border rounded-md">
<div className="text-[18px] font-bold font-mono" style={{ color: waveColor(wHgt) }}>{wHgt.toFixed(1)}</div> <div className="text-[22px] font-bold font-mono" style={{ color: waveColor(wHgt) }}>{wHgt.toFixed(1)}</div>
<div className="text-[8px] text-text-3 font-korean">파고 (m)</div> <div className="text-[10px] text-text-3 font-korean">파고 (m)</div>
</div> </div>
<div className="text-center py-2.5 bg-bg-0 border border-border rounded-md"> <div className="text-center py-2.5 bg-bg-0 border border-border rounded-md">
<div className="text-[18px] font-bold font-mono text-primary-cyan">{wTemp.toFixed(1)}</div> <div className="text-[22px] font-bold font-mono text-primary-cyan">{wTemp.toFixed(1)}</div>
<div className="text-[8px] text-text-3 font-korean">수온 (°C)</div> <div className="text-[10px] text-text-3 font-korean">수온 (°C)</div>
</div> </div>
</div> </div>
{/* ── 바람 상세 ── */} {/* ── 바람 상세 ── */}
<div className="px-3 py-2 border-b border-border"> <div className="px-3 py-2 border-b border-border">
<div className="text-[9px] font-bold text-text-3 font-korean mb-2">🌬️ 바람 현황</div> <div className="text-[10px] font-bold text-text-3 font-korean mb-2">🌬️ 바람 현황</div>
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-2">
{/* 풍향 컴파스 */} {/* 풍향 컴파스 */}
<div className="relative w-[50px] h-[50px] shrink-0"> <div className="relative w-[50px] h-[50px] shrink-0">
@ -133,7 +133,7 @@ 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-[9px]"> <div className="flex-1 grid grid-cols-2 gap-x-3 gap-y-1 text-[10px]">
<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">{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">{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" style={{ color: windColor(weatherData.wind.speed_1k) }}>{Number(weatherData.wind.speed_1k).toFixed(1)}</span></div>
@ -146,29 +146,29 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
<div className="flex-1 h-[5px] bg-bg-3 rounded-full overflow-hidden"> <div className="flex-1 h-[5px] bg-bg-3 rounded-full overflow-hidden">
<div className="h-full rounded-full transition-all" style={{ width: `${Math.min(wSpd / 20 * 100, 100)}%`, background: windColor(wSpd) }} /> <div className="h-full rounded-full transition-all" style={{ width: `${Math.min(wSpd / 20 * 100, 100)}%`, background: windColor(wSpd) }} />
</div> </div>
<span className="text-[8px] font-mono text-text-3 shrink-0">{wSpd.toFixed(1)}/20</span> <span className="text-[10px] font-mono text-text-3 shrink-0">{wSpd.toFixed(1)}/20</span>
</div> </div>
</div> </div>
{/* ── 파도 상세 ── */} {/* ── 파도 상세 ── */}
<div className="px-3 py-2 border-b border-border"> <div className="px-3 py-2 border-b border-border">
<div className="text-[9px] font-bold text-text-3 font-korean mb-2">🌊 파도</div> <div className="text-[10px] font-bold text-text-3 font-korean mb-2">🌊 파도</div>
<div className="grid grid-cols-4 gap-1 text-[9px]"> <div className="grid grid-cols-4 gap-1 text-[10px]">
<div className="text-center py-1.5 bg-bg-0 border border-border rounded"> <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="font-bold font-mono" style={{ color: waveColor(wHgt) }}>{wHgt.toFixed(1)}m</div>
<div className="text-[7px] 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-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="font-bold font-mono text-status-red">{(wHgt * 1.6).toFixed(1)}m</div>
<div className="text-[7px] 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-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="font-bold font-mono text-primary-cyan">{weatherData.wave.period}s</div>
<div className="text-[7px] 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-1.5 bg-bg-0 border border-border rounded">
<div className="font-bold font-mono text-text-1">NW</div> <div className="font-bold font-mono text-text-1">NW</div>
<div className="text-[7px] text-text-3">파향</div> <div className="text-[10px] text-text-3">파향</div>
</div> </div>
</div> </div>
{/* 파고 게이지 바 */} {/* 파고 게이지 바 */}
@ -176,39 +176,39 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
<div className="flex-1 h-[5px] bg-bg-3 rounded-full overflow-hidden"> <div className="flex-1 h-[5px] bg-bg-3 rounded-full overflow-hidden">
<div className="h-full rounded-full transition-all" style={{ width: `${Math.min(wHgt / 5 * 100, 100)}%`, background: waveColor(wHgt) }} /> <div className="h-full rounded-full transition-all" style={{ width: `${Math.min(wHgt / 5 * 100, 100)}%`, background: waveColor(wHgt) }} />
</div> </div>
<span className="text-[8px] font-mono text-text-3 shrink-0">{wHgt.toFixed(1)}/5m</span> <span className="text-[10px] font-mono text-text-3 shrink-0">{wHgt.toFixed(1)}/5m</span>
</div> </div>
</div> </div>
{/* ── 수온/공기 ── */} {/* ── 수온/공기 ── */}
<div className="px-3 py-2 border-b border-border"> <div className="px-3 py-2 border-b border-border">
<div className="text-[9px] font-bold text-text-3 font-korean mb-2">🌡️ 수온 · 공기</div> <div className="text-[10px] font-bold text-text-3 font-korean mb-2">🌡️ 수온 · 공기</div>
<div className="grid grid-cols-3 gap-1 text-[9px]"> <div className="grid grid-cols-3 gap-1 text-[10px]">
<div className="text-center py-1.5 bg-bg-0 border border-border rounded"> <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="font-bold font-mono text-primary-cyan">{wTemp.toFixed(1)}°</div>
<div className="text-[7px] 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-1.5 bg-bg-0 border border-border rounded">
<div className="font-bold font-mono text-text-1">2.1°</div> <div className="font-bold font-mono text-text-1">2.1°</div>
<div className="text-[7px] 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-1.5 bg-bg-0 border border-border rounded">
<div className="font-bold font-mono text-text-1">31.2</div> <div className="font-bold font-mono text-text-1">31.2</div>
<div className="text-[7px] text-text-3">염분(PSU)</div> <div className="text-[10px] text-text-3">염분(PSU)</div>
</div> </div>
</div> </div>
</div> </div>
{/* ── 시간별 예보 ── */} {/* ── 시간별 예보 ── */}
<div className="px-3 py-2 border-b border-border"> <div className="px-3 py-2 border-b border-border">
<div className="text-[9px] font-bold text-text-3 font-korean mb-2">⏰ 시간별 예보</div> <div className="text-[10px] 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-1.5 px-1 bg-bg-0 border border-border rounded">
<span className="text-[8px] text-text-3 mb-0.5">{f.hour}</span> <span className="text-[10px] text-text-3 mb-0.5">{f.hour}</span>
<span className="text-base mb-0.5">{f.icon}</span> <span className="text-base mb-0.5">{f.icon}</span>
<span className="text-[10px] font-bold text-text-1">{f.temperature}°</span> <span className="text-[10px] font-bold text-text-1">{f.temperature}°</span>
<span className="text-[8px] text-text-3 font-mono">{f.windSpeed}</span> <span className="text-[10px] text-text-3 font-mono">{f.windSpeed}</span>
</div> </div>
))} ))}
</div> </div>
@ -216,8 +216,8 @@ 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-[9px] font-bold text-text-3 font-korean mb-2">☀️ 천문 · 조석</div> <div className="text-[10px] font-bold text-text-3 font-korean mb-2">☀️ 천문 · 조석</div>
<div className="grid grid-cols-4 gap-1 text-[9px]"> <div className="grid grid-cols-4 gap-1 text-[10px]">
{[ {[
{ icon: '🌅', label: '일출', value: sunriseTime }, { icon: '🌅', label: '일출', value: sunriseTime },
{ icon: '🌄', label: '일몰', value: sunsetTime }, { icon: '🌄', label: '일몰', value: sunsetTime },
@ -226,12 +226,12 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
].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-1.5 bg-bg-0 border border-border rounded">
<div className="text-sm mb-0.5">{item.icon}</div> <div className="text-sm mb-0.5">{item.icon}</div>
<div className="text-[7px] 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="font-bold font-mono text-text-1">{item.value}</div>
</div> </div>
))} ))}
</div> </div>
<div className="flex items-center gap-2 mt-1.5 px-2 py-1 bg-bg-0 border border-border rounded text-[9px]"> <div className="flex items-center gap-2 mt-1.5 px-2 py-1 bg-bg-0 border border-border rounded text-[10px]">
<span className="text-sm">🌓</span> <span className="text-sm">🌓</span>
<span className="text-text-3">상현달 14일</span> <span className="text-text-3">상현달 14일</span>
<span className="ml-auto text-text-1 font-mono">조차 6.7m</span> <span className="ml-auto text-text-1 font-mono">조차 6.7m</span>
@ -240,10 +240,10 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
{/* ── 날씨 특보 ── */} {/* ── 날씨 특보 ── */}
<div className="px-3 py-2"> <div className="px-3 py-2">
<div className="text-[9px] font-bold text-text-3 font-korean mb-2">🚨 날씨 특보</div> <div className="text-[10px] font-bold text-text-3 font-korean mb-2">🚨 날씨 특보</div>
<div className="px-2.5 py-2 rounded border" style={{ background: 'rgba(239,68,68,.06)', borderColor: 'rgba(239,68,68,.2)' }}> <div className="px-2.5 py-2 rounded border" style={{ background: 'rgba(239,68,68,.06)', borderColor: 'rgba(239,68,68,.2)' }}>
<div className="flex items-center gap-2 text-[9px]"> <div className="flex items-center gap-2 text-[10px]">
<span className="px-1.5 py-px rounded text-[8px] font-bold" style={{ background: 'rgba(239,68,68,.15)', color: 'var(--red)' }}>주의</span> <span className="px-1.5 py-px rounded text-[10px] font-bold" style={{ background: 'rgba(239,68,68,.15)', color: 'var(--red)' }}>주의</span>
<span className="text-text-1 font-korean">풍랑주의보 예상 08:00~</span> <span className="text-text-1 font-korean">풍랑주의보 예상 08:00~</span>
</div> </div>
</div> </div>