From 0cf3ff1ea0ec6eb90a70a45fb8d471c803d7a78c Mon Sep 17 00:00:00 2001
From: Nan Kyung Lee <nankyunglee@Nanui-Macmini.local>
Date: Thu, 19 Mar 2026 10:53:09 +0900
Subject: [PATCH] =?UTF-8?q?style(weather):=20=EA=B8=B0=EC=83=81=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=96=B4=20=EC=B2=B4=ED=81=AC=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=20=EB=B0=8F=20=ED=8C=A8=EB=84=90=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EC=A6=88=20=EC=B6=95=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../tabs/weather/components/WeatherView.tsx   | 67 ++++++-------------
 1 file changed, 21 insertions(+), 46 deletions(-)

diff --git a/frontend/src/tabs/weather/components/WeatherView.tsx b/frontend/src/tabs/weather/components/WeatherView.tsx
index 3619fe2..1fe5088 100755
--- a/frontend/src/tabs/weather/components/WeatherView.tsx
+++ b/frontend/src/tabs/weather/components/WeatherView.tsx
@@ -371,88 +371,63 @@ export function WeatherView() {
           </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="text-sm font-semibold text-text-1 mb-3">기상 레이어</div>
-            <div className="space-y-2">
-              <label className="flex items-center gap-2 cursor-pointer">
+          <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-[9px] font-semibold text-text-1 mb-1.5 font-korean">기상 레이어</div>
+            <div className="flex flex-col gap-1">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('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 className="flex items-center gap-2 cursor-pointer">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('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 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">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('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 className="flex items-center gap-2 cursor-pointer">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('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 className="flex items-center gap-2 cursor-pointer">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('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 className="flex items-center gap-2 cursor-pointer">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('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>
-
-              {/* 해황예보도 레이어 — 임시 비활성화
-              <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>