From fbdf0e9122eda946541e93a00fa9351bb6a1f7ea Mon Sep 17 00:00:00 2001
From: "jeonghyo.k" <jhkang@gcsc.co.kr>
Date: Mon, 6 Apr 2026 22:31:08 +0900
Subject: [PATCH] =?UTF-8?q?refactor(prediction):=20layerColors=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EB=A5=BC=20OilSpillView=EB=A1=9C=20=EB=81=8C=EC=96=B4?=
 =?UTF-8?q?=EC=98=AC=EB=A6=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

InfoLayerSection 내부 상태였던 layerColors를 OilSpillView에서
관리하도록 변경하여 MapView에 색상 정보를 전달할 수 있도록 함.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/tabs/prediction/components/InfoLayerSection.tsx  | 9 +++++----
 frontend/src/tabs/prediction/components/LeftPanel.tsx    | 4 ++++
 frontend/src/tabs/prediction/components/OilSpillView.tsx | 6 +++++-
 .../src/tabs/prediction/components/leftPanelTypes.ts     | 2 ++
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/tabs/prediction/components/InfoLayerSection.tsx b/frontend/src/tabs/prediction/components/InfoLayerSection.tsx
index 6766c79..33985f9 100644
--- a/frontend/src/tabs/prediction/components/InfoLayerSection.tsx
+++ b/frontend/src/tabs/prediction/components/InfoLayerSection.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { LayerTree } from '@common/components/layer/LayerTree';
 import { useLayerTree } from '@common/hooks/useLayers';
 import type { Layer } from '@common/services/layerService';
@@ -12,6 +11,8 @@ interface InfoLayerSectionProps {
   onLayerOpacityChange: (val: number) => void;
   layerBrightness: number;
   onLayerBrightnessChange: (val: number) => void;
+  layerColors: Record<string, string>;
+  onLayerColorChange: (layerId: string, color: string) => void;
 }
 
 const InfoLayerSection = ({
@@ -23,12 +24,12 @@ const InfoLayerSection = ({
   onLayerOpacityChange,
   layerBrightness,
   onLayerBrightnessChange,
+  layerColors,
+  onLayerColorChange,
 }: InfoLayerSectionProps) => {
   // API에서 레이어 트리 데이터 가져오기 (관리자 설정 USE_YN='Y' 레이어만 반환)
   const { data: layerTree, isLoading } = useLayerTree();
 
-  const [layerColors, setLayerColors] = useState<Record<string, string>>({});
-
   // 관리자에서 사용여부가 ON인 레이어만 표시 (정적 폴백 없음)
   const effectiveLayers: Layer[] = layerTree ?? [];
 
@@ -134,7 +135,7 @@ const InfoLayerSection = ({
               enabledLayers={enabledLayers}
               onToggleLayer={onToggleLayer}
               layerColors={layerColors}
-              onColorChange={(id, color) => setLayerColors((prev) => ({ ...prev, [id]: color }))}
+              onColorChange={onLayerColorChange}
             />
           )}
 
diff --git a/frontend/src/tabs/prediction/components/LeftPanel.tsx b/frontend/src/tabs/prediction/components/LeftPanel.tsx
index 30d9550..71ccb72 100755
--- a/frontend/src/tabs/prediction/components/LeftPanel.tsx
+++ b/frontend/src/tabs/prediction/components/LeftPanel.tsx
@@ -108,6 +108,8 @@ export function LeftPanel({
   onLayerOpacityChange,
   layerBrightness,
   onLayerBrightnessChange,
+  layerColors,
+  onLayerColorChange,
   sensitiveResources = [],
   onImageAnalysisResult,
   validationErrors,
@@ -345,6 +347,8 @@ export function LeftPanel({
           onLayerOpacityChange={onLayerOpacityChange}
           layerBrightness={layerBrightness}
           onLayerBrightnessChange={onLayerBrightnessChange}
+          layerColors={layerColors}
+          onLayerColorChange={onLayerColorChange}
         />
 
         {/* Oil Boom Placement Guide Section */}
diff --git a/frontend/src/tabs/prediction/components/OilSpillView.tsx b/frontend/src/tabs/prediction/components/OilSpillView.tsx
index 3211e73..c37afb9 100755
--- a/frontend/src/tabs/prediction/components/OilSpillView.tsx
+++ b/frontend/src/tabs/prediction/components/OilSpillView.tsx
@@ -216,9 +216,10 @@ export function OilSpillView() {
   const [drawingPoints, setDrawingPoints] = useState<BoomLineCoord[]>([]);
   const [containmentResult, setContainmentResult] = useState<ContainmentResult | null>(null);
 
-  // 레이어 스타일 (투명도 / 밝기)
+  // 레이어 스타일 (투명도 / 밝기 / 색상)
   const [layerOpacity, setLayerOpacity] = useState(50);
   const [layerBrightness, setLayerBrightness] = useState(50);
+  const [layerColors, setLayerColors] = useState<Record<string, string>>({});
 
   // 표시 정보 제어
   const [displayControls, setDisplayControls] = useState<DisplayControls>({
@@ -1200,6 +1201,8 @@ export function OilSpillView() {
           onLayerOpacityChange={setLayerOpacity}
           layerBrightness={layerBrightness}
           onLayerBrightnessChange={setLayerBrightness}
+          layerColors={layerColors}
+          onLayerColorChange={(id, color) => setLayerColors((prev) => ({ ...prev, [id]: color }))}
           sensitiveResources={sensitiveResourceCategories}
           onImageAnalysisResult={handleImageAnalysisResult}
           validationErrors={validationErrors}
@@ -1236,6 +1239,7 @@ export function OilSpillView() {
               drawingPoints={drawingPoints}
               layerOpacity={layerOpacity}
               layerBrightness={layerBrightness}
+              layerColors={layerColors}
               sensitiveResources={sensitiveResources}
               sensitiveResourceGeojson={
                 displayControls.showSensitiveResources ? sensitiveResourceGeojson : null
diff --git a/frontend/src/tabs/prediction/components/leftPanelTypes.ts b/frontend/src/tabs/prediction/components/leftPanelTypes.ts
index 11c579e..4ade4ad 100644
--- a/frontend/src/tabs/prediction/components/leftPanelTypes.ts
+++ b/frontend/src/tabs/prediction/components/leftPanelTypes.ts
@@ -54,6 +54,8 @@ export interface LeftPanelProps {
   onLayerOpacityChange: (val: number) => void;
   layerBrightness: number;
   onLayerBrightnessChange: (val: number) => void;
+  layerColors: Record<string, string>;
+  onLayerColorChange: (layerId: string, color: string) => void;
   // 영향 민감자원
   sensitiveResources?: SensitiveResourceCategory[];
   // 이미지 분석 결과 콜백