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}
             />
           )}
 

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 */}

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

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[];
   // 이미지 분석 결과 콜백