htlee
dec066e8bb
Phase 0: CSS 인프라 구축
- Tailwind config 색상 불일치 수정 (t1/t2/t3 → CSS 변수 값으로 통일)
- index.css 1,302줄 → @import 엔트리포인트 7줄로 축소
- common/styles/base.css: @layer base 추출 (CSS 변수, 리셋, body 기본값)
- common/styles/components.css: @layer components + utilities 추출
- common/styles/wing.css: wing-* 디자인 시스템 클래스 신규 정의
- common/utils/cn.ts: className 조합 유틸리티
- App.css 삭제 (내용을 components.css로 통합)
Phase 1: body default 인라인 스타일 일괄 제거
- fontFamily: 'var(--fK)' 781건 제거 (body font-family 상속)
- color: 'var(--t1)' 274건 제거 (body color 상속)
- 빈 style={{}} 78건 정리
- 31개 파일, JS 번들 23KB 감소
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
424 lines
15 KiB
TypeScript
424 lines
15 KiB
TypeScript
import { useState } from 'react'
|
|
import { decimalToDMS } from '@common/utils/coordinates'
|
|
import { ComboBox } from '@common/components/ui/ComboBox'
|
|
import { ALL_MODELS } from './OilSpillView'
|
|
import type { PredictionModel } from './OilSpillView'
|
|
|
|
interface PredictionInputSectionProps {
|
|
expanded: boolean
|
|
onToggle: () => void
|
|
incidentCoord: { lon: number; lat: number }
|
|
onCoordChange: (coord: { lon: number; lat: number }) => void
|
|
onMapSelectClick: () => void
|
|
onRunSimulation: () => void
|
|
isRunningSimulation: boolean
|
|
selectedModels: Set<PredictionModel>
|
|
onModelsChange: (models: Set<PredictionModel>) => void
|
|
predictionTime: number
|
|
onPredictionTimeChange: (time: number) => void
|
|
spillType: string
|
|
onSpillTypeChange: (type: string) => void
|
|
oilType: string
|
|
onOilTypeChange: (type: string) => void
|
|
spillAmount: number
|
|
onSpillAmountChange: (amount: number) => void
|
|
}
|
|
|
|
const PredictionInputSection = ({
|
|
expanded,
|
|
onToggle,
|
|
incidentCoord,
|
|
onCoordChange,
|
|
onMapSelectClick,
|
|
onRunSimulation,
|
|
isRunningSimulation,
|
|
selectedModels,
|
|
onModelsChange,
|
|
predictionTime,
|
|
onPredictionTimeChange,
|
|
spillType,
|
|
onSpillTypeChange,
|
|
oilType,
|
|
onOilTypeChange,
|
|
spillAmount,
|
|
onSpillAmountChange,
|
|
}: PredictionInputSectionProps) => {
|
|
const [inputMode, setInputMode] = useState<'direct' | 'upload'>('direct')
|
|
const [uploadedImage, setUploadedImage] = useState<string | null>(null)
|
|
const [uploadedFileName, setUploadedFileName] = useState<string>('')
|
|
|
|
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0]
|
|
if (file) {
|
|
setUploadedFileName(file.name)
|
|
const reader = new FileReader()
|
|
reader.onload = (event) => {
|
|
setUploadedImage(event.target?.result as string)
|
|
}
|
|
reader.readAsDataURL(file)
|
|
}
|
|
}
|
|
|
|
const removeUploadedImage = () => {
|
|
setUploadedImage(null)
|
|
setUploadedFileName('')
|
|
}
|
|
|
|
return (
|
|
<div className="border-b border-border">
|
|
<div
|
|
onClick={onToggle}
|
|
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-text-2 font-korean">
|
|
예측정보 입력
|
|
</h3>
|
|
<span className="text-[10px] text-text-3">
|
|
{expanded ? '▼' : '▶'}
|
|
</span>
|
|
</div>
|
|
|
|
{expanded && (
|
|
<div className="px-4 pb-4" style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
{/* Input Mode Selection */}
|
|
<div style={{ display: 'flex', gap: '10px', alignItems: 'center', fontSize: '11px' }}>
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: '3px', cursor: 'pointer' }}>
|
|
<input
|
|
type="radio"
|
|
name="prdType"
|
|
checked={inputMode === 'direct'}
|
|
onChange={() => setInputMode('direct')}
|
|
style={{ accentColor: 'var(--cyan)', margin: 0, width: '11px', height: '11px' }}
|
|
/>
|
|
직접 입력
|
|
</label>
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: '3px', cursor: 'pointer' }}>
|
|
<input
|
|
type="radio"
|
|
name="prdType"
|
|
checked={inputMode === 'upload'}
|
|
onChange={() => setInputMode('upload')}
|
|
style={{ accentColor: 'var(--cyan)', margin: 0, width: '11px', height: '11px' }}
|
|
/>
|
|
이미지 업로드
|
|
</label>
|
|
</div>
|
|
|
|
{/* Direct Input Mode */}
|
|
{inputMode === 'direct' && (
|
|
<>
|
|
<input className="prd-i" placeholder="사고명 직접 입력" />
|
|
<input className="prd-i" placeholder="또는 사고 리스트에서 선택" />
|
|
</>
|
|
)}
|
|
|
|
{/* Image Upload Mode */}
|
|
{inputMode === 'upload' && (
|
|
<>
|
|
<input className="prd-i" placeholder="여수 유조선 충돌" />
|
|
<ComboBox
|
|
className="prd-i"
|
|
value=""
|
|
onChange={() => {}}
|
|
options={[
|
|
{ value: '', label: '여수 유조선 충돌 (INC-0042)' },
|
|
{ value: 'INC-0042', label: '여수 유조선 충돌 (INC-0042)' }
|
|
]}
|
|
placeholder="사고 선택"
|
|
/>
|
|
|
|
{/* Upload Success Message */}
|
|
{uploadedImage && (
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '6px',
|
|
padding: '6px 8px',
|
|
background: 'rgba(34,197,94,0.1)',
|
|
border: '1px solid rgba(34,197,94,0.3)',
|
|
borderRadius: 'var(--rS)',
|
|
fontSize: '10px',
|
|
color: '#22c55e',
|
|
fontWeight: 600
|
|
}}>
|
|
<span style={{ fontSize: '12px' }}>✓</span>
|
|
내 이미지가 업로드됨
|
|
</div>
|
|
)}
|
|
|
|
{/* File Upload Area */}
|
|
{!uploadedImage ? (
|
|
<label style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '20px',
|
|
background: 'var(--bg0)',
|
|
border: '2px dashed var(--bd)',
|
|
borderRadius: 'var(--rS)',
|
|
cursor: 'pointer',
|
|
transition: '0.15s',
|
|
fontSize: '11px',
|
|
color: 'var(--t3)',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.borderColor = 'var(--cyan)'
|
|
e.currentTarget.style.background = 'rgba(6,182,212,0.05)'
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.borderColor = 'var(--bd)'
|
|
e.currentTarget.style.background = 'var(--bg0)'
|
|
}}>
|
|
📁 이미지 파일을 선택하세요
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleImageUpload}
|
|
style={{ display: 'none' }}
|
|
/>
|
|
</label>
|
|
) : (
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: '8px 10px',
|
|
background: 'var(--bg0)',
|
|
border: '1px solid var(--bd)',
|
|
borderRadius: 'var(--rS)',
|
|
fontSize: '10px',
|
|
fontFamily: 'var(--fM)'
|
|
}}>
|
|
<span style={{ color: 'var(--t2)' }}>📄 {uploadedFileName || 'example_plot_0.gif'}</span>
|
|
<button
|
|
onClick={removeUploadedImage}
|
|
style={{
|
|
padding: '2px 6px',
|
|
fontSize: '10px',
|
|
color: 'var(--t3)',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
transition: '0.15s'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.color = 'var(--red)'
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.color = 'var(--t3)'
|
|
}}
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Dropdowns */}
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px' }}>
|
|
<ComboBox
|
|
className="prd-i"
|
|
value=""
|
|
onChange={() => {}}
|
|
options={[
|
|
{ value: '', label: '유출회사' },
|
|
{ value: 'company1', label: '회사A' },
|
|
{ value: 'company2', label: '회사B' }
|
|
]}
|
|
placeholder="유출회사"
|
|
/>
|
|
<ComboBox
|
|
className="prd-i"
|
|
value=""
|
|
onChange={() => {}}
|
|
options={[
|
|
{ value: '', label: '예상시각' },
|
|
{ value: '09:00', label: '09:00' },
|
|
{ value: '12:00', label: '12:00' }
|
|
]}
|
|
placeholder="예상시각"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Coordinates + Map Button */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: '4px', alignItems: 'center' }}>
|
|
<input
|
|
className="prd-i"
|
|
type="number"
|
|
step="0.0001"
|
|
value={incidentCoord?.lat ?? ''}
|
|
onChange={(e) => {
|
|
const value = e.target.value === '' ? 0 : parseFloat(e.target.value)
|
|
onCoordChange({ ...incidentCoord, lat: isNaN(value) ? 0 : value })
|
|
}}
|
|
placeholder="위도°"
|
|
/>
|
|
<input
|
|
className="prd-i"
|
|
type="number"
|
|
step="0.0001"
|
|
value={incidentCoord?.lon ?? ''}
|
|
onChange={(e) => {
|
|
const value = e.target.value === '' ? 0 : parseFloat(e.target.value)
|
|
onCoordChange({ ...incidentCoord, lon: isNaN(value) ? 0 : value })
|
|
}}
|
|
placeholder="경도°"
|
|
/>
|
|
<button className="prd-map-btn" onClick={onMapSelectClick}>📍 지도</button>
|
|
</div>
|
|
{/* 도분초 표시 */}
|
|
{incidentCoord && !isNaN(incidentCoord.lat) && !isNaN(incidentCoord.lon) && (
|
|
<div style={{
|
|
fontSize: '9px',
|
|
color: 'var(--t3)',
|
|
fontFamily: 'var(--fM)',
|
|
padding: '4px 8px',
|
|
background: 'var(--bg0)',
|
|
borderRadius: 'var(--rS)',
|
|
border: '1px solid var(--bd)'
|
|
}}>
|
|
{decimalToDMS(incidentCoord.lat, true)} / {decimalToDMS(incidentCoord.lon, false)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Oil Type + Oil Kind */}
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px' }}>
|
|
<ComboBox
|
|
className="prd-i"
|
|
value={spillType}
|
|
onChange={onSpillTypeChange}
|
|
options={[
|
|
{ value: '연속', label: '연속' },
|
|
{ value: '비연속', label: '비연속' },
|
|
{ value: '순간 유출', label: '순간 유출' }
|
|
]}
|
|
/>
|
|
<ComboBox
|
|
className="prd-i"
|
|
value={oilType}
|
|
onChange={onOilTypeChange}
|
|
options={[
|
|
{ value: '벙커C유', label: '벙커C유' },
|
|
{ value: '경유', label: '경유' },
|
|
{ value: '원유', label: '원유' },
|
|
{ value: '중유', label: '중유' },
|
|
{ value: '등유', label: '등유' },
|
|
{ value: '휘발유', label: '휘발유' }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Volume + Unit + Duration */}
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 65px 1fr', gap: '4px', alignItems: 'center' }}>
|
|
<input
|
|
className="prd-i"
|
|
placeholder="유출량"
|
|
type="number"
|
|
min="1"
|
|
step="1"
|
|
value={spillAmount}
|
|
onChange={(e) => onSpillAmountChange(parseInt(e.target.value) || 0)}
|
|
/>
|
|
<ComboBox
|
|
className="prd-i"
|
|
value="kL"
|
|
onChange={() => {}}
|
|
options={[
|
|
{ value: 'kL', label: 'kL' },
|
|
{ value: 'ton', label: 'Ton' },
|
|
{ value: 'barrel', label: '배럴' }
|
|
]}
|
|
/>
|
|
<ComboBox
|
|
className="prd-i"
|
|
value={predictionTime}
|
|
onChange={(v) => onPredictionTimeChange(parseInt(v))}
|
|
options={[
|
|
{ value: '6', label: '6시간' },
|
|
{ value: '12', label: '12시간' },
|
|
{ value: '24', label: '24시간' },
|
|
{ value: '48', label: '48시간' },
|
|
{ value: '72', label: '72시간' }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Image Analysis Note (Upload Mode Only) */}
|
|
{inputMode === 'upload' && uploadedImage && (
|
|
<div style={{
|
|
padding: '8px',
|
|
background: 'rgba(59,130,246,0.08)',
|
|
border: '1px solid rgba(59,130,246,0.2)',
|
|
borderRadius: 'var(--rS)',
|
|
fontSize: '9px',
|
|
color: 'var(--t3)',
|
|
lineHeight: '1.4'
|
|
}}>
|
|
📊 이미지 내 확산경로를 분석하였습니다. 각 방제요소 가이드 참고하세요.
|
|
</div>
|
|
)}
|
|
|
|
{/* Divider */}
|
|
<div style={{ height: '1px', background: 'var(--bd)', margin: '2px 0' }} />
|
|
|
|
{/* Model Selection (다중 선택) */}
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '3px' }}>
|
|
{([
|
|
{ id: 'KOSPS' as PredictionModel, color: 'var(--cyan)' },
|
|
{ id: 'POSEIDON' as PredictionModel, color: 'var(--red)' },
|
|
{ id: 'OpenDrift' as PredictionModel, color: 'var(--blue)' },
|
|
] as const).map(m => (
|
|
<div
|
|
key={m.id}
|
|
className={`prd-mc ${selectedModels.has(m.id) ? 'on' : ''}`}
|
|
onClick={() => {
|
|
const next = new Set(selectedModels)
|
|
if (next.has(m.id)) {
|
|
next.delete(m.id)
|
|
} else {
|
|
next.add(m.id)
|
|
}
|
|
onModelsChange(next)
|
|
}}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<span className="prd-md" style={{ background: m.color }} />
|
|
{m.id}
|
|
</div>
|
|
))}
|
|
<div
|
|
className={`prd-mc ${selectedModels.size === ALL_MODELS.length ? 'on' : ''}`}
|
|
onClick={() => {
|
|
if (selectedModels.size === ALL_MODELS.length) {
|
|
onModelsChange(new Set(['KOSPS']))
|
|
} else {
|
|
onModelsChange(new Set(ALL_MODELS))
|
|
}
|
|
}}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<span className="prd-md" style={{ background: 'var(--purple)' }} />
|
|
앙상블
|
|
</div>
|
|
</div>
|
|
|
|
{/* Run Button */}
|
|
<button
|
|
className="prd-btn pri"
|
|
style={{ padding: '7px', fontSize: '11px', marginTop: '2px' }}
|
|
onClick={onRunSimulation}
|
|
disabled={isRunningSimulation}
|
|
>
|
|
{isRunningSimulation ? '⏳ 실행 중...' : '🔬 확산예측 실행'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PredictionInputSection
|