From c39594ca14ed26eca3e5314c0921885ede9cb576 Mon Sep 17 00:00:00 2001
From: "jeonghyo.k" <jhkang@gcsc.co.kr>
Date: Mon, 20 Apr 2026 16:42:27 +0900
Subject: [PATCH] =?UTF-8?q?feat(hns):=20HNS=20=EB=B6=84=EC=84=9D=20?=
 =?UTF-8?q?=EB=B7=B0=20UI=20=EA=B0=9C=EC=84=A0=20=E2=80=94=20=EC=A7=80?=
 =?UTF-8?q?=EB=8F=84=20=EC=BB=A8=ED=8A=B8=EB=A1=A4=20=EC=9C=84=EC=B9=98=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95=20=EB=B0=8F=20=EB=B6=84=EC=84=9D=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20=EC=98=A4=EB=B2=84=EB=A0=88=EC=9D=B4=20=EC=A1=B0?=
 =?UTF-8?q?=EA=B1=B4=EB=B6=80=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/map/BaseMap.tsx     |  4 +--
 .../incidents/components/IncidentsView.tsx    | 30 ++++++++++---------
 .../weather/components/WeatherView.tsx        |  4 +--
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/common/map/BaseMap.tsx b/frontend/src/components/common/map/BaseMap.tsx
index 62c7705..a18e126 100644
--- a/frontend/src/components/common/map/BaseMap.tsx
+++ b/frontend/src/components/common/map/BaseMap.tsx
@@ -139,8 +139,8 @@ function MapOverlayControls({
 
   return (
     <>
-      {/* 우측 컨트롤 컬럼 */}
-      <div className="absolute top-[10px] right-[10px] z-10 flex flex-col gap-1">
+      {/* 좌측 컨트롤 컬럼 */}
+      <div className="absolute top-[10px] left-[10px] z-10 flex flex-col gap-1">
         {/* 줌 */}
         <button title="줌 인" onClick={() => map?.zoomIn()} className={btn}>
           +
diff --git a/frontend/src/components/incidents/components/IncidentsView.tsx b/frontend/src/components/incidents/components/IncidentsView.tsx
index eddc8ca..c7c8e42 100644
--- a/frontend/src/components/incidents/components/IncidentsView.tsx
+++ b/frontend/src/components/incidents/components/IncidentsView.tsx
@@ -183,6 +183,7 @@ export function IncidentsView() {
   // Analysis view mode
   const [viewMode, setViewMode] = useState<ViewMode>('overlay');
   const [analysisActive, setAnalysisActive] = useState(true);
+  const isOverlayMode = !analysisActive || viewMode === 'overlay';
 
   // 분할 뷰에서 사용할 체크된 원본 아이템들 (우측 패널에서 주입)
   const [checkedPredItems, setCheckedPredItems] = useState<PredictionAnalysis[]>([]);
@@ -797,6 +798,7 @@ export function IncidentsView() {
             <BaseMap
               center={[35.0, 127.8]}
               zoom={7}
+              showOverlays={isOverlayMode}
               cursor={measureMode !== null || dischargeMode ? 'crosshair' : undefined}
                 onMapClick={(lon, lat) => {
                   if (dischargeMode) {
@@ -845,7 +847,7 @@ export function IncidentsView() {
               </BaseMap>
 
               {/* 선박 검색 */}
-              {(allRealVessels.length > 0 || realVessels.length > 0) && !dischargeMode && measureMode === null && (
+              {isOverlayMode && (allRealVessels.length > 0 || realVessels.length > 0) && !dischargeMode && measureMode === null && (
                 <VesselSearchBar
                   vessels={allRealVessels.length > 0 ? allRealVessels : realVessels}
                   onFlyTo={(v) => {
@@ -856,7 +858,7 @@ export function IncidentsView() {
               )}
 
               {/* 호버 툴팁 */}
-              {hoverInfo && (
+              {isOverlayMode && hoverInfo && (
                 <div
                   className="absolute z-[1000] pointer-events-none rounded-md"
                   style={{
@@ -878,7 +880,7 @@ export function IncidentsView() {
               )}
 
               {/* 오염물 배출 규정 토글 */}
-              <button
+              {isOverlayMode && <button
                 onClick={() => {
                   setDischargeMode(!dischargeMode);
                   if (dischargeMode) setDischargeInfo(null);
@@ -886,7 +888,7 @@ export function IncidentsView() {
                 className="absolute z-[500] cursor-pointer rounded-md text-caption font-bold font-korean"
                 style={{
                   top: 10,
-                  right: 180,
+                  right: 230,
                   padding: '6px 10px',
                   background: 'var(--bg-base)',
                   border: '1px solid var(--stroke-default)',
@@ -896,10 +898,10 @@ export function IncidentsView() {
                 }}
               >
                 배출규정 {dischargeMode ? 'ON' : 'OFF'}
-              </button>
+              </button>}
 
               {/* 오염물 배출 규정 패널 */}
-              {dischargeMode && dischargeInfo && (
+              {isOverlayMode && dischargeMode && dischargeInfo && (
                 <DischargeZonePanel
                   lat={dischargeInfo.lat}
                   lon={dischargeInfo.lon}
@@ -910,7 +912,7 @@ export function IncidentsView() {
               )}
 
               {/* 배출규정 모드 안내 */}
-              {dischargeMode && !dischargeInfo && (
+              {isOverlayMode && dischargeMode && !dischargeInfo && (
                 <div
                   className="absolute z-[500] rounded-md text-label-2 font-korean font-semibold"
                   style={{
@@ -930,7 +932,7 @@ export function IncidentsView() {
               )}
 
               {/* AIS Live Badge */}
-              <div
+              {isOverlayMode && <div
                 className="absolute top-[10px] right-[10px] z-[500] rounded-md"
                 style={{
                   background: 'var(--bg-base)',
@@ -956,11 +958,11 @@ export function IncidentsView() {
                   <div className="text-fg-sub">사고 {filteredIncidents.length}</div>
                   <div className="text-fg-sub">방제선 {vesselStatus?.bangjeCount ?? 0}</div>
                 </div>
-              </div>
+              </div>}
 
               {/* Legend */}
-              <div
-                className="absolute bottom-[10px] left-[10px] z-[500] rounded-md flex flex-col gap-1.5"
+              {isOverlayMode && <div
+                className="absolute bottom-[10px] right-[10px] z-[500] rounded-md flex flex-col gap-1.5"
                 style={{
                   background: 'var(--bg-base)',
                   border: '1px solid var(--stroke-default)',
@@ -998,10 +1000,10 @@ export function IncidentsView() {
                     </div>
                   ))}
                 </div>
-              </div>
+              </div>}
 
               {/* 선박 팝업 패널 */}
-              {vesselPopup && selectedVessel && !detailVessel && (
+              {isOverlayMode && vesselPopup && selectedVessel && !detailVessel && (
                 <VesselPopupPanel
                   vessel={selectedVessel}
                   onClose={() => {
@@ -1015,7 +1017,7 @@ export function IncidentsView() {
                   }}
                 />
               )}
-              {detailVessel && (
+              {isOverlayMode && detailVessel && (
                 <VesselDetailModal vessel={detailVessel} onClose={() => setDetailVessel(null)} />
               )}
             </div>
diff --git a/frontend/src/components/weather/components/WeatherView.tsx b/frontend/src/components/weather/components/WeatherView.tsx
index b041c46..7bb3add 100644
--- a/frontend/src/components/weather/components/WeatherView.tsx
+++ b/frontend/src/components/weather/components/WeatherView.tsx
@@ -324,7 +324,7 @@ export function WeatherView() {
           </BaseMap>
 
           {/* 레이어 컨트롤 */}
-          <div className="absolute top-4 left-4 bg-bg-surface border border-stroke rounded-md shadow-md z-10 px-2.5 py-1.5">
+          <div className="absolute top-4 right-4 bg-bg-surface border border-stroke rounded-md shadow-md z-10 px-2.5 py-1.5">
             <div className="text-caption font-semibold text-fg mb-1.5 font-korean">기상 레이어</div>
             <div className="flex flex-col gap-1">
               <label className="flex items-center gap-1.5 cursor-pointer">
@@ -385,7 +385,7 @@ export function WeatherView() {
           </div>
 
           {/* 범례 */}
-          <div className="absolute bottom-4 left-4 bg-bg-surface border border-stroke rounded-md shadow-md z-10 px-2.5 py-1.5 max-w-[180px]">
+          <div className="absolute bottom-4 right-4 bg-bg-surface border border-stroke rounded-md shadow-md z-10 px-2.5 py-1.5 max-w-[180px]">
             <div className="text-caption text-fg mb-1.5 font-korean">기상 범례</div>
             <div className="flex flex-col gap-1.5 text-[8px]">
               {/* 바람 */}