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

style(weather): 기상 레이어 체크박스 및 패널 사이즈 축소

소스 검색 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nan Kyung Lee 2026-03-19 10:53:09 +09:00
부모 7949b96866
커밋 0cf3ff1ea0
1개의 변경된 파일과 21개의 추가작업 그리고 46개의 파일을 삭제
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/tabs/weather/components/WeatherView.tsx
파일 보기

@ -371,88 +371,63 @@ export function WeatherView() {
</Map> </Map>
{/* 레이어 컨트롤 */} {/* 레이어 컨트롤 */}
<div className="absolute top-6 left-6 bg-bg-1/90 border border-border rounded-lg p-4 backdrop-blur-sm z-10"> <div className="absolute top-4 left-4 bg-bg-1/85 border border-border rounded-md backdrop-blur-sm z-10" style={{ padding: '6px 10px' }}>
<div className="text-sm font-semibold text-text-1 mb-3">기상 레이어</div> <div className="text-[9px] font-semibold text-text-1 mb-1.5 font-korean">기상 레이어</div>
<div className="space-y-2"> <div className="flex flex-col gap-1">
<label className="flex items-center gap-2 cursor-pointer"> <label className="flex items-center gap-1.5 cursor-pointer">
<input <input
type="checkbox" type="checkbox"
checked={enabledLayers.has('windParticle')} checked={enabledLayers.has('windParticle')}
onChange={() => toggleLayer('windParticle')} onChange={() => toggleLayer('windParticle')}
className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan" className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
/> />
<span className="text-xs text-text-2">🌬️ 바람 흐름</span> <span className="text-[9px] text-text-2">🌬️ 바람 흐름</span>
</label> </label>
<label className="flex items-center gap-2 cursor-pointer"> <label className="flex items-center gap-1.5 cursor-pointer">
<input <input
type="checkbox" type="checkbox"
checked={enabledLayers.has('wind')} checked={enabledLayers.has('wind')}
onChange={() => toggleLayer('wind')} onChange={() => toggleLayer('wind')}
className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan" className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
/> />
<span className="text-xs text-text-2">🌬️ 바람 벡터</span> <span className="text-[9px] text-text-2">🌬️ 바람 벡터</span>
</label> </label>
{/* 기상 데이터 레이어 — 임시 비활성화 <label className="flex items-center gap-1.5 cursor-pointer">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={enabledLayers.has('labels')}
onChange={() => toggleLayer('labels')}
className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan"
/>
<span className="text-xs text-text-2">📊 기상 데이터</span>
</label>
*/}
<label className="flex items-center gap-2 cursor-pointer">
<input <input
type="checkbox" type="checkbox"
checked={enabledLayers.has('waves')} checked={enabledLayers.has('waves')}
onChange={() => toggleLayer('waves')} onChange={() => toggleLayer('waves')}
className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan" className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
/> />
<span className="text-xs text-text-2">🌊 파고 분포</span> <span className="text-[9px] text-text-2">🌊 파고 분포</span>
</label> </label>
<label className="flex items-center gap-2 cursor-pointer"> <label className="flex items-center gap-1.5 cursor-pointer">
<input <input
type="checkbox" type="checkbox"
checked={enabledLayers.has('temperature')} checked={enabledLayers.has('temperature')}
onChange={() => toggleLayer('temperature')} onChange={() => toggleLayer('temperature')}
className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan" className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
/> />
<span className="text-xs text-text-2">🌡️ 수온 분포</span> <span className="text-[9px] text-text-2">🌡️ 수온 분포</span>
</label> </label>
<label className="flex items-center gap-2 cursor-pointer"> <label className="flex items-center gap-1.5 cursor-pointer">
<input <input
type="checkbox" type="checkbox"
checked={enabledLayers.has('oceanCurrentParticle')} checked={enabledLayers.has('oceanCurrentParticle')}
onChange={() => toggleLayer('oceanCurrentParticle')} onChange={() => toggleLayer('oceanCurrentParticle')}
className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan" className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
/> />
<span className="text-xs text-text-2">🌊 해류 흐름</span> <span className="text-[9px] text-text-2">🌊 해류 흐름</span>
</label> </label>
<label className="flex items-center gap-2 cursor-pointer"> <label className="flex items-center gap-1.5 cursor-pointer">
<input <input
type="checkbox" type="checkbox"
checked={enabledLayers.has('waterTemperature')} checked={enabledLayers.has('waterTemperature')}
onChange={() => toggleLayer('waterTemperature')} onChange={() => toggleLayer('waterTemperature')}
className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan" className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
/> />
<span className="text-xs text-text-2">🌡️ 수온 색상도</span> <span className="text-[9px] text-text-2">🌡️ 수온 색상도</span>
</label> </label>
{/* 해황예보도 레이어 — 임시 비활성화
<div className="pt-2 mt-2 border-t border-border">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={enabledLayers.has('oceanForecast')}
onChange={() => toggleLayer('oceanForecast')}
className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan"
/>
<span className="text-xs text-text-2">🌊 해황예보도</span>
</label>
</div>
*/}
</div> </div>
</div> </div>