851 lines
29 KiB
TypeScript
851 lines
29 KiB
TypeScript
import { useState, useRef, useEffect } from 'react';
|
|
import { ComboBox } from '@common/components/ui/ComboBox';
|
|
import type { PredictionModel } from './OilSpillView';
|
|
import { analyzeImage } from '../services/predictionApi';
|
|
import type { ImageAnalyzeResult } from '../services/predictionApi';
|
|
|
|
interface PredictionInputSectionProps {
|
|
expanded: boolean;
|
|
onToggle: () => void;
|
|
accidentTime: string;
|
|
onAccidentTimeChange: (time: string) => void;
|
|
incidentCoord: { lon: number; lat: number } | null;
|
|
onCoordChange: (coord: { lon: number; lat: number }) => void;
|
|
isSelectingLocation: boolean;
|
|
onMapSelectClick: () => void;
|
|
onRunSimulation: () => void;
|
|
isRunningSimulation: boolean;
|
|
selectedModels: Set<PredictionModel>;
|
|
onModelsChange: (models: Set<PredictionModel>) => void;
|
|
visibleModels?: Set<PredictionModel>;
|
|
onVisibleModelsChange?: (models: Set<PredictionModel>) => void;
|
|
hasResults?: boolean;
|
|
predictionTime: number;
|
|
onPredictionTimeChange: (time: number) => void;
|
|
spillType: string;
|
|
onSpillTypeChange: (type: string) => void;
|
|
oilType: string;
|
|
onOilTypeChange: (type: string) => void;
|
|
spillAmount: number;
|
|
onSpillAmountChange: (amount: number) => void;
|
|
incidentName: string;
|
|
onIncidentNameChange: (name: string) => void;
|
|
spillUnit: string;
|
|
onSpillUnitChange: (unit: string) => void;
|
|
onImageAnalysisResult?: (result: ImageAnalyzeResult) => void;
|
|
validationErrors?: Set<string>;
|
|
}
|
|
|
|
const PredictionInputSection = ({
|
|
expanded,
|
|
onToggle,
|
|
accidentTime,
|
|
onAccidentTimeChange,
|
|
incidentCoord,
|
|
onCoordChange,
|
|
isSelectingLocation,
|
|
onMapSelectClick,
|
|
onRunSimulation,
|
|
isRunningSimulation,
|
|
selectedModels,
|
|
onModelsChange,
|
|
onVisibleModelsChange,
|
|
hasResults,
|
|
predictionTime,
|
|
onPredictionTimeChange,
|
|
spillType,
|
|
onSpillTypeChange,
|
|
oilType,
|
|
onOilTypeChange,
|
|
spillAmount,
|
|
onSpillAmountChange,
|
|
incidentName,
|
|
onIncidentNameChange,
|
|
spillUnit,
|
|
onSpillUnitChange,
|
|
onImageAnalysisResult,
|
|
validationErrors,
|
|
}: PredictionInputSectionProps) => {
|
|
const [inputMode, setInputMode] = useState<'direct' | 'upload'>('direct');
|
|
const [uploadedFile, setUploadedFile] = useState<File | null>(null);
|
|
const [isAnalyzing, setIsAnalyzing] = useState(false);
|
|
const [analyzeError, setAnalyzeError] = useState<string | null>(null);
|
|
const [analyzeResult, setAnalyzeResult] = useState<ImageAnalyzeResult | null>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0] ?? null;
|
|
setUploadedFile(file);
|
|
setAnalyzeError(null);
|
|
setAnalyzeResult(null);
|
|
};
|
|
|
|
const handleRemoveFile = () => {
|
|
setUploadedFile(null);
|
|
setAnalyzeError(null);
|
|
setAnalyzeResult(null);
|
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
|
};
|
|
|
|
const handleAnalyze = async () => {
|
|
if (!uploadedFile) return;
|
|
setIsAnalyzing(true);
|
|
setAnalyzeError(null);
|
|
try {
|
|
const result = await analyzeImage(uploadedFile, incidentName);
|
|
setAnalyzeResult(result);
|
|
onImageAnalysisResult?.(result);
|
|
} catch (err: unknown) {
|
|
if (err && typeof err === 'object' && 'response' in err) {
|
|
const res = (err as { response?: { data?: { error?: string } } }).response;
|
|
if (res?.data?.error === 'GPS_NOT_FOUND') {
|
|
setAnalyzeError('GPS 정보가 없는 이미지입니다');
|
|
return;
|
|
}
|
|
if (res?.data?.error === 'TIMEOUT') {
|
|
setAnalyzeError('분석 서버 응답 없음 (시간 초과)');
|
|
return;
|
|
}
|
|
}
|
|
setAnalyzeError('이미지 분석 중 오류가 발생했습니다');
|
|
} finally {
|
|
setIsAnalyzing(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="border-b border-stroke">
|
|
<div
|
|
onClick={onToggle}
|
|
className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
|
|
>
|
|
<h3 className="text-title-4 font-bold text-fg-default font-korean">예측정보 입력</h3>
|
|
<span className="text-label-2 text-fg-default">{expanded ? '▼' : '▶'}</span>
|
|
</div>
|
|
|
|
{expanded && (
|
|
<div className="px-4 pb-4 flex flex-col gap-[6px]">
|
|
{/* Input Mode Selection */}
|
|
<div className="flex items-center gap-[10px] text-label-2">
|
|
<label className="flex items-center gap-[3px] cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="prdType"
|
|
checked={inputMode === 'direct'}
|
|
onChange={() => setInputMode('direct')}
|
|
className="accent-[var(--color-accent)] m-0 w-[11px] h-[11px]"
|
|
/>
|
|
직접 입력
|
|
</label>
|
|
<label className="flex items-center gap-[3px] cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="prdType"
|
|
checked={inputMode === 'upload'}
|
|
onChange={() => setInputMode('upload')}
|
|
className="accent-[var(--color-accent)] m-0 w-[11px] h-[11px]"
|
|
/>
|
|
이미지 업로드
|
|
</label>
|
|
</div>
|
|
|
|
{/* 사고명 입력 (직접입력 / 이미지업로드 공통) */}
|
|
<input
|
|
className="prd-i"
|
|
placeholder="사고명 직접 입력"
|
|
value={incidentName}
|
|
onChange={(e) => onIncidentNameChange(e.target.value)}
|
|
style={
|
|
validationErrors?.has('incidentName')
|
|
? { borderColor: 'var(--color-danger)' }
|
|
: undefined
|
|
}
|
|
/>
|
|
<input className="prd-i" placeholder="또는 사고 리스트에서 선택" readOnly />
|
|
|
|
{/* Image Upload Mode */}
|
|
{inputMode === 'upload' && (
|
|
<>
|
|
{/* 파일 선택 영역 */}
|
|
{!uploadedFile ? (
|
|
<label
|
|
className="flex items-center justify-center text-label-2 text-fg-default cursor-pointer"
|
|
style={{
|
|
padding: '20px',
|
|
background: 'var(--bg-base)',
|
|
border: '2px dashed var(--stroke-default)',
|
|
borderRadius: 'var(--radius-sm)',
|
|
transition: '0.15s',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.borderColor = 'var(--color-accent)';
|
|
e.currentTarget.style.background = 'rgba(6,182,212,0.05)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.borderColor = 'var(--stroke-default)';
|
|
e.currentTarget.style.background = 'var(--bg-base)';
|
|
}}
|
|
>
|
|
이미지 파일을 선택하세요
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleFileSelect}
|
|
className="hidden"
|
|
/>
|
|
</label>
|
|
) : (
|
|
<div
|
|
className="flex items-center justify-between font-mono text-label-2 bg-bg-base border border-stroke"
|
|
style={{ padding: '8px 10px', borderRadius: 'var(--radius-sm)' }}
|
|
>
|
|
<span className="text-fg-sub">📄 {uploadedFile.name}</span>
|
|
<button
|
|
onClick={handleRemoveFile}
|
|
className="text-label-2 text-fg-default bg-transparent border-none cursor-pointer"
|
|
style={{ padding: '2px 6px', transition: '0.15s' }}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.color = 'var(--color-danger)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.color = 'var(--fg-disabled)';
|
|
}}
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* 분석 실행 버튼 */}
|
|
<button
|
|
className="prd-btn pri"
|
|
style={{ padding: '7px', fontSize: 'var(--font-size-label-2)' }}
|
|
onClick={handleAnalyze}
|
|
disabled={!uploadedFile || isAnalyzing}
|
|
>
|
|
{isAnalyzing ? '⏳ 분석 중...' : '이미지 분석 실행'}
|
|
</button>
|
|
|
|
{/* 에러 메시지 */}
|
|
{analyzeError && (
|
|
<div
|
|
className="text-label-2 font-medium"
|
|
style={{
|
|
padding: '6px 8px',
|
|
background: 'rgba(239,68,68,0.1)',
|
|
border: '1px solid rgba(239,68,68,0.3)',
|
|
borderRadius: 'var(--radius-sm)',
|
|
color: 'var(--color-danger)',
|
|
}}
|
|
>
|
|
⚠ {analyzeError}
|
|
</div>
|
|
)}
|
|
|
|
{/* 분석 완료 메시지 */}
|
|
{analyzeResult && (
|
|
<div
|
|
className="text-label-2 font-medium"
|
|
style={{
|
|
padding: '6px 8px',
|
|
background: 'rgba(34,197,94,0.1)',
|
|
border: '1px solid rgba(34,197,94,0.3)',
|
|
borderRadius: 'var(--radius-sm)',
|
|
color: '#22c55e',
|
|
lineHeight: 1.6,
|
|
}}
|
|
>
|
|
✓ 분석 완료
|
|
<br />
|
|
<span className="font-normal text-fg-default">
|
|
위도 {analyzeResult.lat.toFixed(4)} / 경도 {analyzeResult.lon.toFixed(4)}
|
|
<br />
|
|
유종: {analyzeResult.oilType} / 면적: {analyzeResult.area.toFixed(1)} m²
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* 사고 발생 시각 */}
|
|
<div className="flex flex-col gap-0.5">
|
|
<label className="text-label-2 text-fg-default font-korean">사고 발생 시각 (KST)</label>
|
|
<DateTimeInput
|
|
value={accidentTime}
|
|
onChange={onAccidentTimeChange}
|
|
error={validationErrors?.has('accidentTime')}
|
|
/>
|
|
</div>
|
|
|
|
{/* Coordinates (DMS) + Map Button */}
|
|
<div className="flex flex-col gap-1">
|
|
<div className="grid grid-cols-[1fr_auto] gap-x-1 gap-y-1">
|
|
<DmsCoordInput
|
|
label="위도"
|
|
isLatitude={true}
|
|
decimal={incidentCoord?.lat ?? 0}
|
|
onChange={(val) => onCoordChange({ lon: incidentCoord?.lon ?? 0, lat: val })}
|
|
error={validationErrors?.has('coord')}
|
|
/>
|
|
<button
|
|
className={`prd-map-btn${isSelectingLocation ? ' active' : ''}`}
|
|
onClick={onMapSelectClick}
|
|
style={{
|
|
gridRow: '1 / 3',
|
|
gridColumn: 2,
|
|
whiteSpace: 'nowrap',
|
|
alignSelf: 'stretch',
|
|
minWidth: 48,
|
|
padding: '0 10px',
|
|
}}
|
|
>
|
|
위경도
|
|
<br />
|
|
선택
|
|
</button>
|
|
<DmsCoordInput
|
|
label="경도"
|
|
isLatitude={false}
|
|
decimal={incidentCoord?.lon ?? 0}
|
|
onChange={(val) => onCoordChange({ lat: incidentCoord?.lat ?? 0, lon: val })}
|
|
error={validationErrors?.has('coord')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Oil Type + Oil Kind */}
|
|
<div className="grid grid-cols-2 gap-1">
|
|
<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 className="grid items-center gap-1" style={{ gridTemplateColumns: '1fr 65px 1fr' }}>
|
|
<input
|
|
className="prd-i"
|
|
placeholder="유출량"
|
|
type="number"
|
|
min="0"
|
|
step="any"
|
|
value={spillAmount}
|
|
onChange={(e) => onSpillAmountChange(parseFloat(e.target.value) || 0)}
|
|
/>
|
|
<ComboBox
|
|
className="prd-i"
|
|
value={spillUnit}
|
|
onChange={onSpillUnitChange}
|
|
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>
|
|
|
|
{/* Divider */}
|
|
<div className="h-px bg-border my-0.5" />
|
|
|
|
{/* Model Selection (다중 선택) */}
|
|
{/* POSEIDON: 엔진 연동 완료. KOSPS: 준비 중 (ready: false) */}
|
|
<div className="grid grid-cols-3 gap-[3px]">
|
|
{(
|
|
[
|
|
{ id: 'KOSPS' as PredictionModel, color: 'var(--color-accent)', ready: false },
|
|
{ id: 'POSEIDON' as PredictionModel, color: 'var(--color-danger)', ready: true },
|
|
{ id: 'OpenDrift' as PredictionModel, color: 'var(--color-info)', ready: true },
|
|
] as const
|
|
).map((m) => (
|
|
<div
|
|
key={m.id}
|
|
className={`prd-mc ${selectedModels.has(m.id) ? 'on' : ''} cursor-pointer text-center`}
|
|
onClick={() => {
|
|
if (!m.ready) {
|
|
alert(`${m.id} 모델은 현재 준비중입니다.`);
|
|
return;
|
|
}
|
|
const next = new Set(selectedModels);
|
|
if (next.has(m.id)) {
|
|
next.delete(m.id);
|
|
} else {
|
|
next.add(m.id);
|
|
}
|
|
onModelsChange(next);
|
|
if (hasResults && onVisibleModelsChange) {
|
|
onVisibleModelsChange(new Set(next));
|
|
}
|
|
}}
|
|
>
|
|
{/* <span className="prd-md" style={{ background: m.color }} /> */}
|
|
{m.id}
|
|
</div>
|
|
))}
|
|
{/* 임시 비활성화 — OpenDrift만 구동 가능 (앙상블은 모든 모델 연동 후 활성화 예정)
|
|
<div
|
|
className={`prd-mc ${selectedModels.size === ALL_MODELS.length ? 'on' : ''} cursor-pointer`}
|
|
onClick={() => {
|
|
alert('앙상블 모델은 현재 준비중입니다.')
|
|
}}
|
|
>
|
|
<span className="prd-md" style={{ background: 'var(--color-tertiary)' }} />
|
|
앙상블
|
|
</div>
|
|
*/}
|
|
</div>
|
|
|
|
{/* 모델 미선택 경고 (실행 시 검증) */}
|
|
{validationErrors?.has('models') && (
|
|
<p className="text-label-2 text-color-danger font-korean">
|
|
⚠ 예측 모델을 하나 이상 선택하세요.
|
|
</p>
|
|
)}
|
|
|
|
{/* Run Button */}
|
|
<button
|
|
className="prd-btn pri mt-0.5"
|
|
style={{ padding: '7px', fontSize: 'var(--font-size-label-2)' }}
|
|
onClick={onRunSimulation}
|
|
disabled={isRunningSimulation}
|
|
>
|
|
{isRunningSimulation ? '⏳ 실행 중...' : '확산예측 실행'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ── 커스텀 날짜/시간 선택 컴포넌트 ─────────────────────
|
|
function DateTimeInput({
|
|
value,
|
|
onChange,
|
|
error,
|
|
}: {
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
error?: boolean;
|
|
}) {
|
|
const [showCal, setShowCal] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
const datePart = value ? value.split('T')[0] : '';
|
|
const timePart = value && value.includes('T') ? value.split('T')[1] : '00:00';
|
|
const timeParts = timePart.split(':').map(Number);
|
|
const hh = isNaN(timeParts[0]) ? 0 : timeParts[0];
|
|
const mm = timeParts[1] === undefined || isNaN(timeParts[1]) ? 0 : timeParts[1];
|
|
|
|
const parsed = datePart ? new Date(datePart + 'T00:00:00') : new Date();
|
|
const [viewYear, setViewYear] = useState(parsed.getFullYear());
|
|
const [viewMonth, setViewMonth] = useState(parsed.getMonth());
|
|
|
|
const selY = datePart ? parsed.getFullYear() : -1;
|
|
const selM = datePart ? parsed.getMonth() : -1;
|
|
const selD = datePart ? parsed.getDate() : -1;
|
|
|
|
useEffect(() => {
|
|
const handler = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) setShowCal(false);
|
|
};
|
|
document.addEventListener('mousedown', handler);
|
|
return () => document.removeEventListener('mousedown', handler);
|
|
}, []);
|
|
|
|
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
|
const firstDay = new Date(viewYear, viewMonth, 1).getDay();
|
|
const days: (number | null)[] = [];
|
|
for (let i = 0; i < firstDay; i++) days.push(null);
|
|
for (let i = 1; i <= daysInMonth; i++) days.push(i);
|
|
|
|
const pickDate = (day: number) => {
|
|
const m = String(viewMonth + 1).padStart(2, '0');
|
|
const d = String(day).padStart(2, '0');
|
|
onChange(`${viewYear}-${m}-${d}T${timePart}`);
|
|
setShowCal(false);
|
|
};
|
|
|
|
const updateTime = (newHH: number, newMM: number) => {
|
|
const date = datePart || new Date().toISOString().split('T')[0];
|
|
onChange(`${date}T${String(newHH).padStart(2, '0')}:${String(newMM).padStart(2, '0')}`);
|
|
};
|
|
|
|
const prevMonth = () => {
|
|
if (viewMonth === 0) {
|
|
setViewYear(viewYear - 1);
|
|
setViewMonth(11);
|
|
} else setViewMonth(viewMonth - 1);
|
|
};
|
|
const nextMonth = () => {
|
|
if (viewMonth === 11) {
|
|
setViewYear(viewYear + 1);
|
|
setViewMonth(0);
|
|
} else setViewMonth(viewMonth + 1);
|
|
};
|
|
|
|
const displayDate = datePart
|
|
? `${selY}.${String(selM + 1).padStart(2, '0')}.${String(selD).padStart(2, '0')}`
|
|
: '날짜 선택';
|
|
|
|
const today = new Date();
|
|
const todayY = today.getFullYear();
|
|
const todayM = today.getMonth();
|
|
const todayD = today.getDate();
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="flex items-center gap-1 relative"
|
|
style={
|
|
error ? { border: '1px solid var(--color-danger)', borderRadius: 6, padding: 2 } : undefined
|
|
}
|
|
>
|
|
{/* 날짜 버튼 */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowCal(!showCal)}
|
|
className="prd-i flex-1 flex items-center justify-between cursor-pointer"
|
|
style={{ padding: '5px 8px', fontSize: 'var(--font-size-label-2)' }}
|
|
>
|
|
<span
|
|
className="font-mono"
|
|
style={{ color: datePart ? 'var(--fg-default)' : 'var(--fg-disabled)' }}
|
|
>
|
|
{displayDate}
|
|
</span>
|
|
<span className="text-label-2 opacity-60">📅</span>
|
|
</button>
|
|
|
|
{/* 시 */}
|
|
<TimeDropdown value={hh} max={24} onChange={(v) => updateTime(v, mm)} />
|
|
<span className="text-label-2 text-fg-default font-bold">:</span>
|
|
{/* 분 */}
|
|
<TimeDropdown value={mm} max={60} onChange={(v) => updateTime(hh, v)} />
|
|
|
|
{/* 캘린더 팝업 */}
|
|
{showCal && (
|
|
<div
|
|
className="absolute z-[9999] rounded-md overflow-hidden"
|
|
style={{
|
|
top: '100%',
|
|
left: 0,
|
|
marginTop: 4,
|
|
width: 200,
|
|
background: 'var(--bg-card)',
|
|
border: '1px solid var(--stroke-default)',
|
|
boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
|
|
}}
|
|
>
|
|
{/* 헤더 */}
|
|
<div
|
|
className="flex items-center justify-between"
|
|
style={{ padding: '6px 8px', borderBottom: '1px solid var(--stroke-default)' }}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={prevMonth}
|
|
className="text-label-2 text-fg-default cursor-pointer px-1 hover:text-fg"
|
|
>
|
|
◀
|
|
</button>
|
|
<span className="text-label-2 font-bold text-fg font-korean">
|
|
{viewYear}년 {viewMonth + 1}월
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={nextMonth}
|
|
className="text-label-2 text-fg-default cursor-pointer px-1 hover:text-fg"
|
|
>
|
|
▶
|
|
</button>
|
|
</div>
|
|
{/* 요일 */}
|
|
<div className="grid grid-cols-7 text-center" style={{ padding: '3px 4px 0' }}>
|
|
{['일', '월', '화', '수', '목', '금', '토'].map((d) => (
|
|
<span
|
|
key={d}
|
|
className="text-label-2 text-fg-default font-korean"
|
|
style={{ padding: '2px 0' }}
|
|
>
|
|
{d}
|
|
</span>
|
|
))}
|
|
</div>
|
|
{/* 날짜 */}
|
|
<div className="grid grid-cols-7 text-center" style={{ padding: '2px 4px 6px' }}>
|
|
{days.map((day, i) => {
|
|
if (day === null) return <span key={`e-${i}`} />;
|
|
const isSelected = viewYear === selY && viewMonth === selM && day === selD;
|
|
const isToday = viewYear === todayY && viewMonth === todayM && day === todayD;
|
|
return (
|
|
<button
|
|
key={day}
|
|
type="button"
|
|
onClick={() => pickDate(day)}
|
|
className="cursor-pointer rounded-sm"
|
|
style={{
|
|
padding: '3px 0',
|
|
fontSize: 'var(--font-size-label-2)',
|
|
fontFamily: 'var(--font-mono)',
|
|
fontWeight: isSelected ? 700 : 400,
|
|
color: isSelected ? '#fff' : isToday ? 'var(--color-accent)' : 'var(--fg-sub)',
|
|
background: isSelected ? 'var(--color-accent)' : 'transparent',
|
|
border: 'none',
|
|
}}
|
|
>
|
|
{day}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
{/* 오늘 버튼 */}
|
|
<div style={{ padding: '0 8px 6px' }}>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const now = new Date();
|
|
setViewYear(now.getFullYear());
|
|
setViewMonth(now.getMonth());
|
|
const m = String(now.getMonth() + 1).padStart(2, '0');
|
|
const d = String(now.getDate()).padStart(2, '0');
|
|
const hh = String(now.getHours()).padStart(2, '0');
|
|
const mm = String(now.getMinutes()).padStart(2, '0');
|
|
onChange(`${now.getFullYear()}-${m}-${d}T${hh}:${mm}`);
|
|
setShowCal(false);
|
|
}}
|
|
className="w-full text-label-2 font-korean font-medium cursor-pointer rounded-sm"
|
|
style={{
|
|
padding: '3px 0',
|
|
background: 'rgba(6,182,212,0.08)',
|
|
border: '1px solid rgba(6,182,212,0.2)',
|
|
color: 'var(--color-accent)',
|
|
}}
|
|
>
|
|
오늘
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── 커스텀 시간 드롭다운 (다크 테마) ───────────────────
|
|
function TimeDropdown({
|
|
value,
|
|
max,
|
|
onChange,
|
|
}: {
|
|
value: number;
|
|
max: number;
|
|
onChange: (v: number) => void;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const dropRef = useRef<HTMLDivElement>(null);
|
|
const listRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handler = (e: MouseEvent) => {
|
|
if (dropRef.current && !dropRef.current.contains(e.target as Node)) setOpen(false);
|
|
};
|
|
document.addEventListener('mousedown', handler);
|
|
return () => document.removeEventListener('mousedown', handler);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (open && listRef.current) {
|
|
const activeEl = listRef.current.querySelector('[data-active="true"]');
|
|
if (activeEl) activeEl.scrollIntoView({ block: 'center' });
|
|
}
|
|
}, [open]);
|
|
|
|
return (
|
|
<div ref={dropRef} className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(!open)}
|
|
className="prd-i text-center font-mono cursor-pointer"
|
|
style={{ width: 38, padding: '5px 2px', fontSize: 'var(--font-size-caption)' }}
|
|
>
|
|
{String(value).padStart(2, '0')}
|
|
</button>
|
|
{open && (
|
|
<div
|
|
ref={listRef}
|
|
className="absolute z-[9999] overflow-y-auto rounded-md"
|
|
style={{
|
|
top: '100%',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
marginTop: 2,
|
|
width: 42,
|
|
maxHeight: 160,
|
|
background: 'var(--bg-card)',
|
|
border: '1px solid var(--stroke-default)',
|
|
boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
|
|
scrollbarWidth: 'thin',
|
|
scrollbarColor: 'var(--stroke-default) transparent',
|
|
}}
|
|
>
|
|
{Array.from({ length: max }, (_, i) => (
|
|
<button
|
|
key={i}
|
|
type="button"
|
|
data-active={i === value}
|
|
onClick={() => {
|
|
onChange(i);
|
|
setOpen(false);
|
|
}}
|
|
className="w-full text-center font-mono cursor-pointer"
|
|
style={{
|
|
padding: '4px 0',
|
|
fontSize: 'var(--font-size-caption)',
|
|
color: i === value ? 'var(--color-accent)' : 'var(--fg-sub)',
|
|
background: i === value ? 'rgba(6,182,212,0.15)' : 'transparent',
|
|
fontWeight: i === value ? 700 : 400,
|
|
border: 'none',
|
|
}}
|
|
>
|
|
{String(i).padStart(2, '0')}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── 도분초 좌표 입력 컴포넌트 ──────────────────────────
|
|
function DmsCoordInput({
|
|
label,
|
|
isLatitude,
|
|
decimal,
|
|
onChange,
|
|
error,
|
|
}: {
|
|
label: string;
|
|
isLatitude: boolean;
|
|
decimal: number;
|
|
onChange: (val: number) => void;
|
|
error?: boolean;
|
|
}) {
|
|
const abs = Math.abs(decimal);
|
|
const d = Math.floor(abs);
|
|
const mDec = (abs - d) * 60;
|
|
const m = Math.floor(mDec);
|
|
const s = parseFloat(((mDec - m) * 60).toFixed(2));
|
|
const dir = isLatitude ? (decimal >= 0 ? 'N' : 'S') : decimal >= 0 ? 'E' : 'W';
|
|
|
|
const update = (deg: number, min: number, sec: number, direction: string) => {
|
|
let val = deg + min / 60 + sec / 3600;
|
|
if (direction === 'S' || direction === 'W') val = -val;
|
|
onChange(val);
|
|
};
|
|
|
|
const fieldStyle = { padding: '5px 2px', fontSize: 'var(--font-size-label-2)', minWidth: 0 };
|
|
|
|
return (
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-caption text-fg-default font-korean">{label}</span>
|
|
<div
|
|
className="flex items-center gap-0.5"
|
|
style={
|
|
error
|
|
? { border: '1px solid var(--color-danger)', borderRadius: 6, padding: 2 }
|
|
: undefined
|
|
}
|
|
>
|
|
<select
|
|
className="prd-i text-center"
|
|
value={dir}
|
|
onChange={(e) => update(d, m, s, e.target.value)}
|
|
style={{
|
|
width: 32,
|
|
padding: '5px 1px',
|
|
fontSize: 'var(--font-size-label-2)',
|
|
appearance: 'none',
|
|
WebkitAppearance: 'none',
|
|
backgroundImage: 'none',
|
|
}}
|
|
>
|
|
{isLatitude ? (
|
|
<>
|
|
<option value="N">N</option>
|
|
<option value="S">S</option>
|
|
</>
|
|
) : (
|
|
<>
|
|
<option value="E">E</option>
|
|
<option value="W">W</option>
|
|
</>
|
|
)}
|
|
</select>
|
|
<input
|
|
className="prd-i text-center flex-1"
|
|
type="number"
|
|
min={0}
|
|
max={isLatitude ? 90 : 180}
|
|
value={d}
|
|
onChange={(e) => update(parseInt(e.target.value) || 0, m, s, dir)}
|
|
style={fieldStyle}
|
|
/>
|
|
<span className="text-caption text-fg-default">°</span>
|
|
<input
|
|
className="prd-i text-center flex-1"
|
|
type="number"
|
|
min={0}
|
|
max={59}
|
|
value={m}
|
|
onChange={(e) => update(d, parseInt(e.target.value) || 0, s, dir)}
|
|
style={fieldStyle}
|
|
/>
|
|
<span className="text-caption text-fg-default">'</span>
|
|
<input
|
|
className="prd-i text-center flex-1"
|
|
type="number"
|
|
min={0}
|
|
max={59.99}
|
|
step={0.01}
|
|
value={s}
|
|
onChange={(e) => update(d, m, parseFloat(e.target.value) || 0, dir)}
|
|
style={fieldStyle}
|
|
/>
|
|
<span className="text-caption text-fg-default">"</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PredictionInputSection;
|