332 lines
15 KiB
TypeScript
Executable File
332 lines
15 KiB
TypeScript
Executable File
import { useState } from 'react'
|
|
import type { LeftPanelProps, ExpandedSections } from './leftPanelTypes'
|
|
|
|
interface CategoryMeta {
|
|
icon: string;
|
|
bg: string;
|
|
}
|
|
|
|
const CATEGORY_ICON_MAP: Record<string, CategoryMeta> = {
|
|
// 수산자원 / 양식장 (green)
|
|
'어장정보': { icon: '🐟', bg: 'rgba(34,197,94,0.15)' },
|
|
'양식장': { icon: '🦪', bg: 'rgba(34,197,94,0.15)' },
|
|
'양식어업': { icon: '🦪', bg: 'rgba(34,197,94,0.15)' },
|
|
'어류양식장': { icon: '🐟', bg: 'rgba(34,197,94,0.15)' },
|
|
'패류양식장': { icon: '🦪', bg: 'rgba(34,197,94,0.15)' },
|
|
'해조류양식장': { icon: '🌿', bg: 'rgba(34,197,94,0.15)' },
|
|
'가두리양식장': { icon: '🔲', bg: 'rgba(34,197,94,0.15)' },
|
|
'갑각류양식장': { icon: '🦐', bg: 'rgba(34,197,94,0.15)' },
|
|
'기타양식장': { icon: '📦', bg: 'rgba(34,197,94,0.15)' },
|
|
'영세어업': { icon: '🎣', bg: 'rgba(34,197,94,0.15)' },
|
|
'유어장': { icon: '🎣', bg: 'rgba(34,197,94,0.15)' },
|
|
'수산시장': { icon: '🐟', bg: 'rgba(34,197,94,0.15)' },
|
|
'인공어초': { icon: '🪸', bg: 'rgba(34,197,94,0.15)' },
|
|
'암초': { icon: '🪨', bg: 'rgba(34,197,94,0.15)' },
|
|
'침선': { icon: '🚢', bg: 'rgba(34,197,94,0.15)' },
|
|
// 관광자원 / 낚시 (yellow)
|
|
'해수욕장': { icon: '🏖', bg: 'rgba(250,204,21,0.15)' },
|
|
'갯바위낚시': { icon: '🪨', bg: 'rgba(250,204,21,0.15)' },
|
|
'선상낚시': { icon: '🚤', bg: 'rgba(250,204,21,0.15)' },
|
|
'마리나항': { icon: '⛵', bg: 'rgba(250,204,21,0.15)' },
|
|
// 항만 / 산업시설 (blue)
|
|
'무역항': { icon: '🚢', bg: 'rgba(99,179,237,0.15)' },
|
|
'연안항': { icon: '⛵', bg: 'rgba(99,179,237,0.15)' },
|
|
'국가어항': { icon: '⚓', bg: 'rgba(99,179,237,0.15)' },
|
|
'지방어항': { icon: '⚓', bg: 'rgba(99,179,237,0.15)' },
|
|
'어항': { icon: '⚓', bg: 'rgba(99,179,237,0.15)' },
|
|
'항만구역': { icon: '⚓', bg: 'rgba(99,179,237,0.15)' },
|
|
'항로': { icon: '🚢', bg: 'rgba(99,179,237,0.15)' },
|
|
'정박지': { icon: '⛵', bg: 'rgba(99,179,237,0.15)' },
|
|
'항로표지': { icon: '🔴', bg: 'rgba(99,179,237,0.15)' },
|
|
'해수취수시설': { icon: '💧', bg: 'rgba(99,179,237,0.15)' },
|
|
'취수구·배수구': { icon: '🚰', bg: 'rgba(99,179,237,0.15)' },
|
|
'LNG': { icon: '⚡', bg: 'rgba(99,179,237,0.15)' },
|
|
'발전소': { icon: '🔌', bg: 'rgba(99,179,237,0.15)' },
|
|
'발전소·산단': { icon: '🏭', bg: 'rgba(99,179,237,0.15)' },
|
|
'임해공단': { icon: '🏭', bg: 'rgba(99,179,237,0.15)' },
|
|
'저유시설': { icon: '🛢', bg: 'rgba(99,179,237,0.15)' },
|
|
'해저케이블·배관': { icon: '🔌', bg: 'rgba(99,179,237,0.15)' },
|
|
// 환경 / 생태 (lime)
|
|
'갯벌': { icon: '🪨', bg: 'rgba(163,230,53,0.12)' },
|
|
'해안선_ESI': { icon: '🏖', bg: 'rgba(163,230,53,0.12)' },
|
|
'보호지역': { icon: '🛡', bg: 'rgba(163,230,53,0.12)' },
|
|
'해양보호구역': { icon: '🌿', bg: 'rgba(163,230,53,0.12)' },
|
|
'철새도래지': { icon: '🐦', bg: 'rgba(163,230,53,0.12)' },
|
|
'습지보호구역': { icon: '🏖', bg: 'rgba(163,230,53,0.12)' },
|
|
'보호종서식지': { icon: '🐢', bg: 'rgba(163,230,53,0.12)' },
|
|
'보호종 서식지': { icon: '🐢', bg: 'rgba(163,230,53,0.12)' },
|
|
};
|
|
|
|
const FALLBACK_META: CategoryMeta = { icon: '🌊', bg: 'rgba(148,163,184,0.15)' };
|
|
import PredictionInputSection from './PredictionInputSection'
|
|
import InfoLayerSection from './InfoLayerSection'
|
|
import OilBoomSection from './OilBoomSection'
|
|
|
|
export type { LeftPanelProps }
|
|
|
|
export function LeftPanel({
|
|
selectedAnalysis,
|
|
enabledLayers,
|
|
onToggleLayer,
|
|
accidentTime,
|
|
onAccidentTimeChange,
|
|
incidentCoord,
|
|
onCoordChange,
|
|
isSelectingLocation,
|
|
onMapSelectClick,
|
|
onRunSimulation,
|
|
isRunningSimulation,
|
|
selectedModels,
|
|
onModelsChange,
|
|
visibleModels,
|
|
onVisibleModelsChange,
|
|
hasResults,
|
|
predictionTime,
|
|
onPredictionTimeChange,
|
|
spillType,
|
|
onSpillTypeChange,
|
|
oilType,
|
|
onOilTypeChange,
|
|
spillAmount,
|
|
onSpillAmountChange,
|
|
incidentName,
|
|
onIncidentNameChange,
|
|
spillUnit,
|
|
onSpillUnitChange,
|
|
boomLines,
|
|
onBoomLinesChange,
|
|
oilTrajectory,
|
|
algorithmSettings,
|
|
onAlgorithmSettingsChange,
|
|
isDrawingBoom,
|
|
onDrawingBoomChange,
|
|
drawingPoints,
|
|
onDrawingPointsChange,
|
|
containmentResult,
|
|
onContainmentResultChange,
|
|
layerOpacity,
|
|
onLayerOpacityChange,
|
|
layerBrightness,
|
|
onLayerBrightnessChange,
|
|
sensitiveResources = [],
|
|
onImageAnalysisResult,
|
|
validationErrors,
|
|
}: LeftPanelProps) {
|
|
const [expandedSections, setExpandedSections] = useState<ExpandedSections>({
|
|
predictionInput: true,
|
|
incident: false,
|
|
impactResources: false,
|
|
infoLayer: false,
|
|
oilBoom: false,
|
|
})
|
|
|
|
const toggleSection = (section: keyof ExpandedSections) => {
|
|
setExpandedSections(prev => ({
|
|
...prev,
|
|
[section]: !prev[section]
|
|
}))
|
|
}
|
|
|
|
return (
|
|
<div className="w-80 min-w-[320px] bg-bg-surface border-r border-stroke flex flex-col">
|
|
{/* Scrollable Content */}
|
|
<div className="flex-1 overflow-y-scroll scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent" style={{ scrollbarGutter: 'stable' }}>
|
|
{/* Prediction Input Section */}
|
|
<PredictionInputSection
|
|
expanded={expandedSections.predictionInput}
|
|
onToggle={() => toggleSection('predictionInput')}
|
|
accidentTime={accidentTime}
|
|
onAccidentTimeChange={onAccidentTimeChange}
|
|
incidentCoord={incidentCoord}
|
|
onCoordChange={onCoordChange}
|
|
isSelectingLocation={isSelectingLocation}
|
|
onMapSelectClick={onMapSelectClick}
|
|
onRunSimulation={onRunSimulation}
|
|
isRunningSimulation={isRunningSimulation}
|
|
selectedModels={selectedModels}
|
|
onModelsChange={onModelsChange}
|
|
visibleModels={visibleModels}
|
|
onVisibleModelsChange={onVisibleModelsChange}
|
|
hasResults={hasResults}
|
|
predictionTime={predictionTime}
|
|
onPredictionTimeChange={onPredictionTimeChange}
|
|
spillType={spillType}
|
|
onSpillTypeChange={onSpillTypeChange}
|
|
oilType={oilType}
|
|
onOilTypeChange={onOilTypeChange}
|
|
spillAmount={spillAmount}
|
|
onSpillAmountChange={onSpillAmountChange}
|
|
incidentName={incidentName}
|
|
onIncidentNameChange={onIncidentNameChange}
|
|
spillUnit={spillUnit}
|
|
onSpillUnitChange={onSpillUnitChange}
|
|
onImageAnalysisResult={onImageAnalysisResult}
|
|
validationErrors={validationErrors}
|
|
/>
|
|
|
|
{/* Incident Section */}
|
|
<div className="border-b border-stroke">
|
|
<div
|
|
onClick={() => toggleSection('incident')}
|
|
className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
|
|
>
|
|
<h3 className="text-[13px] font-bold text-fg-sub font-korean">
|
|
사고정보
|
|
</h3>
|
|
<span className="text-[10px] text-fg-disabled">
|
|
{expandedSections.incident ? '▼' : '▶'}
|
|
</span>
|
|
</div>
|
|
|
|
{expandedSections.incident && (
|
|
selectedAnalysis ? (
|
|
<div className="px-4 pb-4 space-y-3">
|
|
{/* Status Badge */}
|
|
{(() => {
|
|
const statusMap: Record<string, { label: string; style: string; dot: string }> = {
|
|
ACTIVE: {
|
|
label: '진행중',
|
|
style: 'bg-[rgba(239,68,68,0.15)] text-color-danger border border-[rgba(239,68,68,0.3)]',
|
|
dot: 'bg-color-danger animate-pulse',
|
|
},
|
|
INVESTIGATING: {
|
|
label: '조사중',
|
|
style: 'bg-[rgba(249,115,22,0.15)] text-color-warning border border-[rgba(249,115,22,0.3)]',
|
|
dot: 'bg-color-warning animate-pulse',
|
|
},
|
|
CLOSED: {
|
|
label: '종료',
|
|
style: 'bg-[rgba(100,116,139,0.15)] text-fg-disabled border border-[rgba(100,116,139,0.3)]',
|
|
dot: 'bg-fg-disabled',
|
|
},
|
|
}
|
|
const s = statusMap[selectedAnalysis.acdntSttsCd] ?? statusMap['ACTIVE']
|
|
return (
|
|
<div className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[9px] font-semibold ${s.style}`}>
|
|
<span className={`w-1.5 h-1.5 rounded-full ${s.dot}`} />
|
|
{s.label}
|
|
</div>
|
|
)
|
|
})()}
|
|
|
|
{/* Info Grid */}
|
|
<div className="grid gap-1">
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-fg-disabled min-w-[52px] font-korean">사고코드</span>
|
|
<span className="text-[11px] text-fg font-medium font-mono">{selectedAnalysis.acdntSn}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-fg-disabled min-w-[52px] font-korean">사고명</span>
|
|
<span className="text-[11px] text-fg font-medium font-korean">{selectedAnalysis.acdntNm || '—'}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-fg-disabled min-w-[52px] font-korean">사고일시</span>
|
|
<span className="text-[11px] text-fg font-medium font-mono">{selectedAnalysis.occurredAt ? selectedAnalysis.occurredAt.slice(0, 16).replace(' ', 'T') : '—'}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-fg-disabled min-w-[52px] font-korean">유종</span>
|
|
<span className="text-[11px] text-fg font-medium font-korean">{selectedAnalysis.oilType || '—'}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-fg-disabled min-w-[52px] font-korean">유출량</span>
|
|
<span className="text-[11px] text-fg font-medium font-mono">{selectedAnalysis.volume != null ? `${selectedAnalysis.volume.toFixed(2)} kl` : '—'}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-fg-disabled min-w-[52px] font-korean">담당자</span>
|
|
<span className="text-[11px] text-fg font-medium font-korean">{selectedAnalysis.analyst || '—'}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-fg-disabled min-w-[52px] font-korean">위치</span>
|
|
<span className="text-[11px] text-color-warning font-semibold font-korean">{selectedAnalysis.location || '—'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="px-4 pb-4">
|
|
<p className="text-[12px] text-fg-disabled font-korean text-center py-2">선택된 사고정보가 없습니다.</p>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
|
|
{/* Impact Resources Section */}
|
|
<div className="border-b border-stroke">
|
|
<div
|
|
onClick={() => toggleSection('impactResources')}
|
|
className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
|
|
>
|
|
<h3 className="text-[13px] font-bold text-fg-sub font-korean">
|
|
영향 민감자원
|
|
</h3>
|
|
<span className="text-[10px] text-fg-disabled">
|
|
{expandedSections.impactResources ? '▼' : '▶'}
|
|
</span>
|
|
</div>
|
|
|
|
{expandedSections.impactResources && (
|
|
<div className="px-4 pb-4">
|
|
{sensitiveResources.length === 0 ? (
|
|
<p className="text-[12px] text-fg-disabled text-center font-korean">영향받는 민감자원 목록</p>
|
|
) : (
|
|
<div className="space-y-1.5">
|
|
{sensitiveResources.map(({ category, count, totalArea }) => {
|
|
const meta = CATEGORY_ICON_MAP[category] ?? FALLBACK_META;
|
|
return (
|
|
<div key={category} className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className="inline-flex items-center justify-center w-5 h-5 rounded text-[11px] shrink-0"
|
|
style={{ background: meta.bg }}
|
|
>
|
|
{meta.icon}
|
|
</span>
|
|
<span className="text-[11px] text-fg-sub font-korean">{category}</span>
|
|
</div>
|
|
<span className="text-[11px] text-primary font-bold font-mono">
|
|
{totalArea != null
|
|
? `${totalArea.toLocaleString('ko-KR', { maximumFractionDigits: 2 })} ha`
|
|
: `${count}개`}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Info Layer Section */}
|
|
<InfoLayerSection
|
|
expanded={expandedSections.infoLayer}
|
|
onToggle={() => toggleSection('infoLayer')}
|
|
enabledLayers={enabledLayers}
|
|
onToggleLayer={onToggleLayer}
|
|
layerOpacity={layerOpacity}
|
|
onLayerOpacityChange={onLayerOpacityChange}
|
|
layerBrightness={layerBrightness}
|
|
onLayerBrightnessChange={onLayerBrightnessChange}
|
|
/>
|
|
|
|
{/* Oil Boom Placement Guide Section */}
|
|
<OilBoomSection
|
|
expanded={expandedSections.oilBoom}
|
|
onToggle={() => toggleSection('oilBoom')}
|
|
boomLines={boomLines}
|
|
onBoomLinesChange={onBoomLinesChange}
|
|
oilTrajectory={oilTrajectory}
|
|
incidentCoord={incidentCoord ?? { lat: 0, lon: 0 }}
|
|
algorithmSettings={algorithmSettings}
|
|
onAlgorithmSettingsChange={onAlgorithmSettingsChange}
|
|
isDrawingBoom={isDrawingBoom}
|
|
onDrawingBoomChange={onDrawingBoomChange}
|
|
drawingPoints={drawingPoints}
|
|
onDrawingPointsChange={onDrawingPointsChange}
|
|
containmentResult={containmentResult}
|
|
onContainmentResultChange={onContainmentResultChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|