htlee
a0f64e4b11
- frontend: ESLint 에러 86건 수정 (unused-vars, set-state-in-effect, static-components 등) - backend: simulation.ts req.params 타입 단언 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2048 lines
131 KiB
TypeScript
Executable File
2048 lines
131 KiB
TypeScript
Executable File
import { useState, useEffect, useRef } from 'react'
|
||
import L from 'leaflet'
|
||
import 'leaflet/dist/leaflet.css'
|
||
|
||
type AssetsTab = 'management' | 'upload' | 'theory' | 'insurance'
|
||
|
||
// ── Mock Data ──
|
||
|
||
interface AssetOrg {
|
||
id: number
|
||
type: string
|
||
jurisdiction: string
|
||
area: string
|
||
name: string
|
||
address: string
|
||
vessel: number
|
||
skimmer: number
|
||
pump: number
|
||
vehicle: number
|
||
sprayer: number
|
||
totalAssets: number
|
||
phone: string
|
||
lat: number
|
||
lng: number
|
||
pinSize: 'hq' | 'lg' | 'md'
|
||
equipment: { category: string; icon: string; count: number }[]
|
||
contacts: { role: string; name: string; phone: string }[]
|
||
}
|
||
|
||
const organizations: AssetOrg[] = [
|
||
// ── 중부지방해양경찰청 ──
|
||
{
|
||
id: 1, type: '해경관할', jurisdiction: '중부지방해양경찰청', area: '인천', name: '인천해양경찰서',
|
||
address: '인천광역시 중구 북성동1가 80-8', vessel: 19, skimmer: 30, pump: 18, vehicle: 2, sprayer: 15, totalAssets: 234, phone: '010-4779-4191',
|
||
lat: 37.4563, lng: 126.5922, pinSize: 'hq',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 19 }, { category: '유회수기', icon: '⚙', count: 30 }, { category: '비치크리너', icon: '🏖', count: 2 },
|
||
{ category: '이송펌프', icon: '🔧', count: 18 }, { category: '방제차량', icon: '🚛', count: 2 }, { category: '해안운반차', icon: '🚜', count: 1 },
|
||
{ category: '고압세척기', icon: '💧', count: 26 }, { category: '저압세척기', icon: '🚿', count: 3 }, { category: '동력분무기', icon: '💨', count: 14 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 19 }, { category: '발전기', icon: '⚡', count: 9 },
|
||
{ category: '현장지휘소', icon: '🏕', count: 2 }, { category: '지원장비', icon: '🔩', count: 9 }, { category: '장비부품', icon: '🔗', count: 46 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 18 }, { category: '살포장치', icon: '🌊', count: 15 },
|
||
],
|
||
contacts: [{ role: '방제과장', name: '김○○', phone: '032-835-0001' }, { role: '방제담당', name: '이○○', phone: '032-835-0002' }],
|
||
},
|
||
{
|
||
id: 2, type: '해경경찰서', jurisdiction: '중부지방해양경찰청', area: '평택', name: '평택해양경찰서',
|
||
address: '평택시 만호리 706번지', vessel: 14, skimmer: 27, pump: 33, vehicle: 3, sprayer: 22, totalAssets: 193, phone: '010-9812-8102',
|
||
lat: 36.9694, lng: 126.8300, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 14 }, { category: '유회수기', icon: '⚙', count: 27 }, { category: '비치크리너', icon: '🏖', count: 1 },
|
||
{ category: '이송펌프', icon: '🔧', count: 33 }, { category: '방제차량', icon: '🚛', count: 3 }, { category: '해안운반차', icon: '🚜', count: 1 },
|
||
{ category: '고압세척기', icon: '💧', count: 12 }, { category: '저압세척기', icon: '🚿', count: 5 }, { category: '동력분무기', icon: '💨', count: 2 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 35 }, { category: '발전기', icon: '⚡', count: 9 },
|
||
{ category: '지원장비', icon: '🔩', count: 10 }, { category: '장비부품', icon: '🔗', count: 4 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 14 }, { category: '살포장치', icon: '🌊', count: 22 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '박○○', phone: '031-682-0001' }],
|
||
},
|
||
{
|
||
id: 3, type: '해경경찰서', jurisdiction: '중부지방해양경찰청', area: '태안', name: '태안해양경찰서',
|
||
address: '충남 태안군 근흥면 신진부두길2', vessel: 10, skimmer: 27, pump: 21, vehicle: 8, sprayer: 15, totalAssets: 185, phone: '010-2965-4423',
|
||
lat: 36.7456, lng: 126.2978, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 10 }, { category: '유회수기', icon: '⚙', count: 27 }, { category: '비치크리너', icon: '🏖', count: 4 },
|
||
{ category: '이송펌프', icon: '🔧', count: 21 }, { category: '방제차량', icon: '🚛', count: 8 }, { category: '해안운반차', icon: '🚜', count: 8 },
|
||
{ category: '고압세척기', icon: '💧', count: 14 }, { category: '저압세척기', icon: '🚿', count: 8 }, { category: '동력분무기', icon: '💨', count: 6 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 28 }, { category: '발전기', icon: '⚡', count: 11 },
|
||
{ category: '지원장비', icon: '🔩', count: 16 }, { category: '경비함정방제', icon: '⚓', count: 8 }, { category: '살포장치', icon: '🌊', count: 15 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '최○○', phone: '041-674-0001' }],
|
||
},
|
||
{
|
||
id: 4, type: '파출소', jurisdiction: '중부지방해양경찰청', area: '보령', name: '보령해양경찰서',
|
||
address: '보령시 해안로 740', vessel: 3, skimmer: 8, pump: 5, vehicle: 3, sprayer: 11, totalAssets: 80, phone: '010-2940-6343',
|
||
lat: 36.3335, lng: 126.5874, pinSize: 'md',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 3 }, { category: '유회수기', icon: '⚙', count: 8 }, { category: '이송펌프', icon: '🔧', count: 5 },
|
||
{ category: '방제차량', icon: '🚛', count: 3 }, { category: '해안운반차', icon: '🚜', count: 1 }, { category: '고압세척기', icon: '💧', count: 5 },
|
||
{ category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 1 }, { category: '유량계측기', icon: '📏', count: 1 },
|
||
{ category: '방제창고', icon: '🏭', count: 22 }, { category: '발전기', icon: '⚡', count: 2 }, { category: '지원장비', icon: '🔩', count: 6 },
|
||
{ category: '장비부품', icon: '🔗', count: 4 }, { category: '경비함정방제', icon: '⚓', count: 6 }, { category: '살포장치', icon: '🌊', count: 11 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '정○○', phone: '041-931-0001' }],
|
||
},
|
||
// ── 서해지방해양경찰청 ──
|
||
{
|
||
id: 5, type: '해경관할', jurisdiction: '서해지방해양경찰청', area: '여수', name: '여수해양경찰서',
|
||
address: '광양시 항만9로 89', vessel: 55, skimmer: 92, pump: 63, vehicle: 12, sprayer: 47, totalAssets: 464, phone: '010-2785-2493',
|
||
lat: 34.7407, lng: 127.7385, pinSize: 'hq',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 55 }, { category: '유회수기', icon: '⚙', count: 92 }, { category: '비치크리너', icon: '🏖', count: 5 },
|
||
{ category: '이송펌프', icon: '🔧', count: 63 }, { category: '방제차량', icon: '🚛', count: 12 }, { category: '해안운반차', icon: '🚜', count: 4 },
|
||
{ category: '고압세척기', icon: '💧', count: 48 }, { category: '저압세척기', icon: '🚿', count: 7 }, { category: '동력분무기', icon: '💨', count: 25 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 37 }, { category: '발전기', icon: '⚡', count: 16 },
|
||
{ category: '현장지휘소', icon: '🏕', count: 2 }, { category: '지원장비', icon: '🔩', count: 14 }, { category: '장비부품', icon: '🔗', count: 14 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 22 }, { category: '살포장치', icon: '🌊', count: 47 },
|
||
],
|
||
contacts: [{ role: '방제과장', name: '윤○○', phone: '061-660-0001' }, { role: '방제담당', name: '장○○', phone: '061-660-0002' }],
|
||
},
|
||
{
|
||
id: 6, type: '해경경찰서', jurisdiction: '서해지방해양경찰청', area: '목포', name: '목포해양경찰서',
|
||
address: '목포시 고하대로 597번길 99-64', vessel: 10, skimmer: 19, pump: 18, vehicle: 3, sprayer: 16, totalAssets: 169, phone: '010-9812-8439',
|
||
lat: 34.7936, lng: 126.3839, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 10 }, { category: '유회수기', icon: '⚙', count: 19 }, { category: '이송펌프', icon: '🔧', count: 18 },
|
||
{ category: '방제차량', icon: '🚛', count: 3 }, { category: '해안운반차', icon: '🚜', count: 1 }, { category: '고압세척기', icon: '💧', count: 7 },
|
||
{ category: '저압세척기', icon: '🚿', count: 4 }, { category: '동력분무기', icon: '💨', count: 2 }, { category: '유량계측기', icon: '📏', count: 1 },
|
||
{ category: '방제창고', icon: '🏭', count: 21 }, { category: '발전기', icon: '⚡', count: 4 }, { category: '지원장비', icon: '🔩', count: 31 },
|
||
{ category: '장비부품', icon: '🔗', count: 17 }, { category: '경비함정방제', icon: '⚓', count: 15 }, { category: '살포장치', icon: '🌊', count: 16 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '조○○', phone: '061-244-0001' }],
|
||
},
|
||
{
|
||
id: 7, type: '해경경찰서', jurisdiction: '서해지방해양경찰청', area: '군산', name: '군산해양경찰서',
|
||
address: '전북 군산시 오식도동 506', vessel: 6, skimmer: 22, pump: 12, vehicle: 3, sprayer: 17, totalAssets: 155, phone: '010-2618-3406',
|
||
lat: 35.9900, lng: 126.7133, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 6 }, { category: '유회수기', icon: '⚙', count: 22 }, { category: '비치크리너', icon: '🏖', count: 2 },
|
||
{ category: '이송펌프', icon: '🔧', count: 12 }, { category: '방제차량', icon: '🚛', count: 3 }, { category: '해안운반차', icon: '🚜', count: 1 },
|
||
{ category: '고압세척기', icon: '💧', count: 5 }, { category: '저압세척기', icon: '🚿', count: 4 }, { category: '동력분무기', icon: '💨', count: 2 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 6 }, { category: '발전기', icon: '⚡', count: 5 },
|
||
{ category: '현장지휘소', icon: '🏕', count: 3 }, { category: '지원장비', icon: '🔩', count: 11 }, { category: '장비부품', icon: '🔗', count: 50 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 5 }, { category: '살포장치', icon: '🌊', count: 17 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '한○○', phone: '063-462-0001' }],
|
||
},
|
||
{
|
||
id: 8, type: '해경경찰서', jurisdiction: '서해지방해양경찰청', area: '완도', name: '완도해양경찰서',
|
||
address: '완도군 완도읍 장보고대로 383', vessel: 3, skimmer: 9, pump: 7, vehicle: 3, sprayer: 11, totalAssets: 75, phone: '061-550-2183',
|
||
lat: 34.3110, lng: 126.7550, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 3 }, { category: '유회수기', icon: '⚙', count: 9 }, { category: '이송펌프', icon: '🔧', count: 7 },
|
||
{ category: '방제차량', icon: '🚛', count: 3 }, { category: '해안운반차', icon: '🚜', count: 1 }, { category: '고압세척기', icon: '💧', count: 3 },
|
||
{ category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 1 }, { category: '유량계측기', icon: '📏', count: 1 },
|
||
{ category: '방제창고', icon: '🏭', count: 24 }, { category: '발전기', icon: '⚡', count: 2 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 8 }, { category: '살포장치', icon: '🌊', count: 11 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '이○○', phone: '061-550-0001' }],
|
||
},
|
||
{
|
||
id: 9, type: '파출소', jurisdiction: '서해지방해양경찰청', area: '부안', name: '부안해양경찰서',
|
||
address: '전북 군산시 오식도동 506', vessel: 2, skimmer: 8, pump: 7, vehicle: 2, sprayer: 7, totalAssets: 66, phone: '063-928-xxxx',
|
||
lat: 35.7316, lng: 126.7328, pinSize: 'md',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 2 }, { category: '유회수기', icon: '⚙', count: 8 }, { category: '이송펌프', icon: '🔧', count: 7 },
|
||
{ category: '방제차량', icon: '🚛', count: 2 }, { category: '해안운반차', icon: '🚜', count: 1 }, { category: '고압세척기', icon: '💧', count: 2 },
|
||
{ category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 1 }, { category: '유량계측기', icon: '📏', count: 1 },
|
||
{ category: '방제창고', icon: '🏭', count: 15 }, { category: '발전기', icon: '⚡', count: 3 }, { category: '현장지휘소', icon: '🏕', count: 2 },
|
||
{ category: '지원장비', icon: '🔩', count: 6 }, { category: '경비함정방제', icon: '⚓', count: 7 }, { category: '살포장치', icon: '🌊', count: 7 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '김○○', phone: '063-928-0001' }],
|
||
},
|
||
// ── 남해지방해양경찰청 ──
|
||
{
|
||
id: 10, type: '해경관할', jurisdiction: '남해지방해양경찰청', area: '부산', name: '부산해양경찰서',
|
||
address: '부산시 영도구 해양로 293', vessel: 108, skimmer: 22, pump: 25, vehicle: 10, sprayer: 24, totalAssets: 313, phone: '010-2609-1456',
|
||
lat: 35.0746, lng: 129.0686, pinSize: 'hq',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 108 }, { category: '유회수기', icon: '⚙', count: 22 }, { category: '이송펌프', icon: '🔧', count: 25 },
|
||
{ category: '방제차량', icon: '🚛', count: 10 }, { category: '해안운반차', icon: '🚜', count: 1 }, { category: '고압세척기', icon: '💧', count: 38 },
|
||
{ category: '저압세척기', icon: '🚿', count: 8 }, { category: '동력분무기', icon: '💨', count: 6 }, { category: '유량계측기', icon: '📏', count: 1 },
|
||
{ category: '방제창고', icon: '🏭', count: 21 }, { category: '발전기', icon: '⚡', count: 11 }, { category: '현장지휘소', icon: '🏕', count: 2 },
|
||
{ category: '지원장비', icon: '🔩', count: 20 }, { category: '경비함정방제', icon: '⚓', count: 16 }, { category: '살포장치', icon: '🌊', count: 24 },
|
||
],
|
||
contacts: [{ role: '방제과장', name: '임○○', phone: '051-400-0001' }],
|
||
},
|
||
{
|
||
id: 11, type: '해경관할', jurisdiction: '남해지방해양경찰청', area: '울산', name: '울산해양경찰서',
|
||
address: '울산광역시 남구 장생포 고래로 166', vessel: 46, skimmer: 69, pump: 26, vehicle: 11, sprayer: 20, totalAssets: 311, phone: '010-9812-8210',
|
||
lat: 35.5008, lng: 129.3824, pinSize: 'hq',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 46 }, { category: '유회수기', icon: '⚙', count: 69 }, { category: '비치크리너', icon: '🏖', count: 4 },
|
||
{ category: '이송펌프', icon: '🔧', count: 26 }, { category: '방제차량', icon: '🚛', count: 11 }, { category: '해안운반차', icon: '🚜', count: 5 },
|
||
{ category: '고압세척기', icon: '💧', count: 23 }, { category: '저압세척기', icon: '🚿', count: 6 }, { category: '동력분무기', icon: '💨', count: 6 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 32 }, { category: '발전기', icon: '⚡', count: 7 },
|
||
{ category: '현장지휘소', icon: '🏕', count: 1 }, { category: '지원장비', icon: '🔩', count: 40 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 14 }, { category: '살포장치', icon: '🌊', count: 20 },
|
||
],
|
||
contacts: [{ role: '방제과장', name: '강○○', phone: '052-228-0001' }],
|
||
},
|
||
{
|
||
id: 12, type: '해경경찰서', jurisdiction: '남해지방해양경찰청', area: '창원', name: '창원해양경찰서',
|
||
address: '창원시 마산합포구 신포동 1가', vessel: 12, skimmer: 25, pump: 14, vehicle: 10, sprayer: 10, totalAssets: 139, phone: '010-4634-7364',
|
||
lat: 35.1796, lng: 128.5681, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 12 }, { category: '유회수기', icon: '⚙', count: 25 }, { category: '비치크리너', icon: '🏖', count: 2 },
|
||
{ category: '이송펌프', icon: '🔧', count: 14 }, { category: '방제차량', icon: '🚛', count: 10 }, { category: '해안운반차', icon: '🚜', count: 1 },
|
||
{ category: '고압세척기', icon: '💧', count: 7 }, { category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 1 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 21 }, { category: '발전기', icon: '⚡', count: 4 },
|
||
{ category: '현장지휘소', icon: '🏕', count: 2 }, { category: '지원장비', icon: '🔩', count: 20 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 7 }, { category: '살포장치', icon: '🌊', count: 10 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '송○○', phone: '055-220-0001' }],
|
||
},
|
||
{
|
||
id: 13, type: '해경경찰서', jurisdiction: '남해지방해양경찰청', area: '통영', name: '통영해양경찰서',
|
||
address: '통영시 광도면 죽림리 1564-4', vessel: 6, skimmer: 15, pump: 9, vehicle: 5, sprayer: 13, totalAssets: 104, phone: '010-9812-8495',
|
||
lat: 34.8544, lng: 128.4331, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 6 }, { category: '유회수기', icon: '⚙', count: 15 }, { category: '비치크리너', icon: '🏖', count: 2 },
|
||
{ category: '이송펌프', icon: '🔧', count: 9 }, { category: '방제차량', icon: '🚛', count: 5 }, { category: '해안운반차', icon: '🚜', count: 1 },
|
||
{ category: '고압세척기', icon: '💧', count: 3 }, { category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 1 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 18 }, { category: '발전기', icon: '⚡', count: 4 },
|
||
{ category: '현장지휘소', icon: '🏕', count: 1 }, { category: '지원장비', icon: '🔩', count: 11 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 12 }, { category: '살포장치', icon: '🌊', count: 13 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '서○○', phone: '055-640-0001' }],
|
||
},
|
||
{
|
||
id: 14, type: '해경경찰서', jurisdiction: '남해지방해양경찰청', area: '사천', name: '사천해양경찰서',
|
||
address: '사천시 신항만길 1길 17', vessel: 2, skimmer: 9, pump: 6, vehicle: 2, sprayer: 7, totalAssets: 80, phone: '010-9812-8352',
|
||
lat: 34.9310, lng: 128.0660, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 2 }, { category: '유회수기', icon: '⚙', count: 9 }, { category: '이송펌프', icon: '🔧', count: 6 },
|
||
{ category: '방제차량', icon: '🚛', count: 2 }, { category: '해안운반차', icon: '🚜', count: 1 }, { category: '고압세척기', icon: '💧', count: 2 },
|
||
{ category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 4 }, { category: '유량계측기', icon: '📏', count: 1 },
|
||
{ category: '방제창고', icon: '🏭', count: 31 }, { category: '발전기', icon: '⚡', count: 2 }, { category: '현장지휘소', icon: '🏕', count: 2 },
|
||
{ category: '지원장비', icon: '🔩', count: 1 }, { category: '경비함정방제', icon: '⚓', count: 8 }, { category: '살포장치', icon: '🌊', count: 7 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '박○○', phone: '055-830-0001' }],
|
||
},
|
||
// ── 동해지방해양경찰청 ──
|
||
{
|
||
id: 15, type: '해경경찰서', jurisdiction: '동해지방해양경찰청', area: '동해', name: '동해해양경찰서',
|
||
address: '동해시 임항로 130', vessel: 6, skimmer: 23, pump: 11, vehicle: 6, sprayer: 14, totalAssets: 156, phone: '010-9812-8073',
|
||
lat: 37.5247, lng: 129.1143, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 6 }, { category: '유회수기', icon: '⚙', count: 23 }, { category: '비치크리너', icon: '🏖', count: 1 },
|
||
{ category: '이송펌프', icon: '🔧', count: 11 }, { category: '방제차량', icon: '🚛', count: 6 }, { category: '해안운반차', icon: '🚜', count: 3 },
|
||
{ category: '고압세척기', icon: '💧', count: 5 }, { category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 5 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 38 }, { category: '발전기', icon: '⚡', count: 2 },
|
||
{ category: '현장지휘소', icon: '🏕', count: 1 }, { category: '지원장비', icon: '🔩', count: 20 }, { category: '장비부품', icon: '🔗', count: 10 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 8 }, { category: '살포장치', icon: '🌊', count: 14 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '남○○', phone: '033-530-0001' }],
|
||
},
|
||
{
|
||
id: 16, type: '해경경찰서', jurisdiction: '동해지방해양경찰청', area: '포항', name: '포항해양경찰서',
|
||
address: '포항시 남구 희망대로 1341', vessel: 10, skimmer: 13, pump: 21, vehicle: 4, sprayer: 21, totalAssets: 135, phone: '010-3108-2183',
|
||
lat: 36.0190, lng: 129.3651, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 10 }, { category: '유회수기', icon: '⚙', count: 13 }, { category: '비치크리너', icon: '🏖', count: 1 },
|
||
{ category: '이송펌프', icon: '🔧', count: 21 }, { category: '방제차량', icon: '🚛', count: 4 }, { category: '해안운반차', icon: '🚜', count: 1 },
|
||
{ category: '고압세척기', icon: '💧', count: 7 }, { category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 3 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 15 }, { category: '발전기', icon: '⚡', count: 5 },
|
||
{ category: '현장지휘소', icon: '🏕', count: 1 }, { category: '지원장비', icon: '🔩', count: 20 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 10 }, { category: '살포장치', icon: '🌊', count: 21 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '오○○', phone: '054-244-0001' }],
|
||
},
|
||
{
|
||
id: 17, type: '파출소', jurisdiction: '동해지방해양경찰청', area: '속초', name: '속초해양경찰서',
|
||
address: '속초시 설악금강대교로 206', vessel: 2, skimmer: 6, pump: 4, vehicle: 1, sprayer: 17, totalAssets: 85, phone: '033-634-2186',
|
||
lat: 38.2070, lng: 128.5918, pinSize: 'md',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 2 }, { category: '유회수기', icon: '⚙', count: 6 }, { category: '이송펌프', icon: '🔧', count: 4 },
|
||
{ category: '방제차량', icon: '🚛', count: 1 }, { category: '해안운반차', icon: '🚜', count: 1 }, { category: '고압세척기', icon: '💧', count: 2 },
|
||
{ category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 1 }, { category: '유량계측기', icon: '📏', count: 1 },
|
||
{ category: '방제창고', icon: '🏭', count: 16 }, { category: '발전기', icon: '⚡', count: 2 }, { category: '지원장비', icon: '🔩', count: 11 },
|
||
{ category: '장비부품', icon: '🔗', count: 11 }, { category: '경비함정방제', icon: '⚓', count: 8 }, { category: '살포장치', icon: '🌊', count: 17 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '양○○', phone: '033-633-0001' }],
|
||
},
|
||
{
|
||
id: 18, type: '파출소', jurisdiction: '동해지방해양경찰청', area: '울진', name: '울진해양경찰서',
|
||
address: '울진군 후포면 후포리 623-148', vessel: 2, skimmer: 6, pump: 4, vehicle: 1, sprayer: 8, totalAssets: 66, phone: '010-9812-8076',
|
||
lat: 36.9932, lng: 129.4003, pinSize: 'md',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 2 }, { category: '유회수기', icon: '⚙', count: 6 }, { category: '이송펌프', icon: '🔧', count: 4 },
|
||
{ category: '방제차량', icon: '🚛', count: 1 }, { category: '해안운반차', icon: '🚜', count: 1 }, { category: '고압세척기', icon: '💧', count: 3 },
|
||
{ category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 1 }, { category: '유량계측기', icon: '📏', count: 1 },
|
||
{ category: '방제창고', icon: '🏭', count: 13 }, { category: '발전기', icon: '⚡', count: 4 }, { category: '현장지휘소', icon: '🏕', count: 2 },
|
||
{ category: '지원장비', icon: '🔩', count: 4 }, { category: '장비부품', icon: '🔗', count: 4 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 10 }, { category: '살포장치', icon: '🌊', count: 8 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '배○○', phone: '054-782-0001' }],
|
||
},
|
||
// ── 제주지방해양경찰청 ──
|
||
{
|
||
id: 19, type: '해경경찰서', jurisdiction: '제주지방해양경찰청', area: '제주', name: '제주해양경찰서',
|
||
address: '제주시 임항로 85', vessel: 4, skimmer: 21, pump: 17, vehicle: 3, sprayer: 16, totalAssets: 113, phone: '064-766-2691',
|
||
lat: 33.5154, lng: 126.5268, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 4 }, { category: '유회수기', icon: '⚙', count: 21 }, { category: '비치크리너', icon: '🏖', count: 2 },
|
||
{ category: '이송펌프', icon: '🔧', count: 17 }, { category: '방제차량', icon: '🚛', count: 3 }, { category: '해안운반차', icon: '🚜', count: 1 },
|
||
{ category: '고압세척기', icon: '💧', count: 5 }, { category: '저압세척기', icon: '🚿', count: 3 }, { category: '동력분무기', icon: '💨', count: 4 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '방제창고', icon: '🏭', count: 24 }, { category: '발전기', icon: '⚡', count: 6 },
|
||
{ category: '현장지휘소', icon: '🏕', count: 2 }, { category: '경비함정방제', icon: '⚓', count: 4 }, { category: '살포장치', icon: '🌊', count: 16 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '문○○', phone: '064-750-0001' }],
|
||
},
|
||
{
|
||
id: 20, type: '해경경찰서', jurisdiction: '제주지방해양경찰청', area: '서귀포', name: '서귀포해양경찰서',
|
||
address: '서귀포시 안덕면 화순해안로69', vessel: 3, skimmer: 9, pump: 15, vehicle: 3, sprayer: 14, totalAssets: 67, phone: '064-793-2186',
|
||
lat: 33.2469, lng: 126.5600, pinSize: 'lg',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 3 }, { category: '유회수기', icon: '⚙', count: 9 }, { category: '비치크리너', icon: '🏖', count: 1 },
|
||
{ category: '이송펌프', icon: '🔧', count: 15 }, { category: '방제차량', icon: '🚛', count: 3 }, { category: '해안운반차', icon: '🚜', count: 1 },
|
||
{ category: '고압세척기', icon: '💧', count: 2 }, { category: '동력분무기', icon: '💨', count: 1 }, { category: '유량계측기', icon: '📏', count: 1 },
|
||
{ category: '방제창고', icon: '🏭', count: 10 }, { category: '발전기', icon: '⚡', count: 3 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 4 }, { category: '살포장치', icon: '🌊', count: 14 },
|
||
],
|
||
contacts: [{ role: '방제담당', name: '고○○', phone: '064-730-0001' }],
|
||
},
|
||
// ── 중앙특수구조단 ──
|
||
{
|
||
id: 21, type: '관련기관', jurisdiction: '해양경찰청(중앙)', area: '중앙', name: '중앙특수구조단',
|
||
address: '부산광역시 영도구 해양로 301', vessel: 1, skimmer: 0, pump: 5, vehicle: 2, sprayer: 0, totalAssets: 39, phone: '051-580-2044',
|
||
lat: 35.0580, lng: 129.0590, pinSize: 'md',
|
||
equipment: [
|
||
{ category: '방제선', icon: '🚢', count: 1 }, { category: '이송펌프', icon: '🔧', count: 5 }, { category: '방제차량', icon: '🚛', count: 2 },
|
||
{ category: '유량계측기', icon: '📏', count: 1 }, { category: '발전기', icon: '⚡', count: 2 }, { category: '지원장비', icon: '🔩', count: 27 },
|
||
{ category: '경비함정방제', icon: '⚓', count: 1 },
|
||
],
|
||
contacts: [{ role: '구조단장', name: '김○○', phone: '051-580-2044' }],
|
||
},
|
||
// ── 기름저장시설 ──
|
||
{
|
||
id: 22, type: '기름저장시설', jurisdiction: '서해지방해양경찰청', area: '여수', name: '오일허브코리아여수㈜ 외 4개',
|
||
address: '전남 여수시 신덕동 325', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 1, phone: '061-686-3611',
|
||
lat: 34.745, lng: 127.745, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }],
|
||
contacts: [{ role: '담당', name: '오일허브코리아여수㈜', phone: '061-686-3611' }],
|
||
},
|
||
{
|
||
id: 23, type: '기름저장시설', jurisdiction: '남해지방해양경찰청', area: '부산', name: 'SK에너지 외 2개',
|
||
address: '부산시 영도구 해양로 1', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 3, phone: '051-643-3331',
|
||
lat: 35.175, lng: 129.075, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }, { category: '동력분무기', icon: '💨', count: 1 }, { category: '방제창고', icon: '🏭', count: 1 }],
|
||
contacts: [{ role: '담당', name: 'HD현대오일뱅크㈜', phone: '051-643-3331' }],
|
||
},
|
||
{
|
||
id: 24, type: '기름저장시설', jurisdiction: '남해지방해양경찰청', area: '울산', name: 'SK지오센트릭 외 5개',
|
||
address: '울산광역시 남구 신여천로 2', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 9, phone: '052-208-2851',
|
||
lat: 35.535, lng: 129.305, pinSize: 'md',
|
||
equipment: [{ category: '동력분무기', icon: '💨', count: 4 }, { category: '방제창고', icon: '🏭', count: 5 }],
|
||
contacts: [{ role: '담당', name: 'SK엔텀㈜', phone: '052-208-2851' }],
|
||
},
|
||
{
|
||
id: 25, type: '기름저장시설', jurisdiction: '남해지방해양경찰청', area: '통영', name: '한국가스공사 통영기지본부',
|
||
address: '통영시 광도면 안정로 770', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 1, phone: '055-640-6014',
|
||
lat: 35.05, lng: 128.41, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 1 }],
|
||
contacts: [{ role: '담당', name: '한국가스공사', phone: '055-640-6014' }],
|
||
},
|
||
{
|
||
id: 26, type: '기름저장시설', jurisdiction: '동해지방해양경찰청', area: '동해', name: 'HD현대오일뱅크㈜ 외 4개',
|
||
address: '강릉시 옥계면 동해대로 206', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 9, phone: '033-534-2093',
|
||
lat: 37.52, lng: 129.11, pinSize: 'md',
|
||
equipment: [{ category: '동력분무기', icon: '💨', count: 2 }, { category: '방제창고', icon: '🏭', count: 6 }, { category: '발전기', icon: '⚡', count: 1 }],
|
||
contacts: [{ role: '담당', name: 'HD현대오일뱅크㈜', phone: '033-534-2093' }],
|
||
},
|
||
{
|
||
id: 27, type: '기름저장시설', jurisdiction: '동해지방해양경찰청', area: '포항', name: '포스코케미칼 외 1개',
|
||
address: '포항시 남구 동해안로 6262', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 1, totalAssets: 2, phone: '054-290-8222',
|
||
lat: 37.73, lng: 129.01, pinSize: 'md',
|
||
equipment: [{ category: '동력분무기', icon: '💨', count: 1 }, { category: '살포장치', icon: '🌊', count: 1 }],
|
||
contacts: [{ role: '담당', name: 'OCI(주)', phone: '054-290-8222' }],
|
||
},
|
||
{
|
||
id: 28, type: '기름저장시설', jurisdiction: '서해지방해양경찰청', area: '목포', name: '흑산도내연발전소 외 2개',
|
||
address: '전남 신안군 흑산일주로70', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 4, phone: '061-351-2342',
|
||
lat: 35.04, lng: 126.58, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 3 }, { category: '발전기', icon: '⚡', count: 1 }],
|
||
contacts: [{ role: '담당', name: '안마도내연발전소', phone: '061-351-2342' }],
|
||
},
|
||
{
|
||
id: 29, type: '기름저장시설', jurisdiction: '서해지방해양경찰청', area: '여수', name: '오일허브코리아여수㈜ 외 4개',
|
||
address: '전남 여수시 신덕동 325', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 4, phone: '061-686-3611',
|
||
lat: 34.75, lng: 127.735, pinSize: 'md',
|
||
equipment: [{ category: '동력분무기', icon: '💨', count: 1 }, { category: '방제창고', icon: '🏭', count: 3 }],
|
||
contacts: [{ role: '담당', name: '오일허브코리아여수㈜', phone: '061-686-3611' }],
|
||
},
|
||
{
|
||
id: 30, type: '기름저장시설', jurisdiction: '중부지방해양경찰청', area: '인천', name: 'GS칼텍스㈜ 외 10개',
|
||
address: '인천광역시 중구 월미로 182', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 13, phone: '010-8777-6922',
|
||
lat: 37.45, lng: 126.505, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 7 }, { category: '동력분무기', icon: '💨', count: 6 }],
|
||
contacts: [{ role: '담당', name: 'GS칼텍스㈜', phone: '010-8777-6922' }],
|
||
},
|
||
{
|
||
id: 31, type: '기름저장시설', jurisdiction: '중부지방해양경찰청', area: '태안', name: 'HD현대케미칼 외 4개',
|
||
address: '충남 서산시 대산읍 평신2로 26', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 4, phone: '041-924-1068',
|
||
lat: 36.91, lng: 126.415, pinSize: 'md',
|
||
equipment: [{ category: '해안운반차', icon: '🚜', count: 2 }, { category: '동력분무기', icon: '💨', count: 2 }],
|
||
contacts: [{ role: '담당', name: 'HD현대케미칼', phone: '041-924-1068' }],
|
||
},
|
||
{
|
||
id: 32, type: '기름저장시설', jurisdiction: '중부지방해양경찰청', area: '평택', name: '현대오일터미널(주) 외 4개',
|
||
address: '평택시 포승읍 포승공단순환로 11', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 1, totalAssets: 4, phone: '031-683-5101',
|
||
lat: 36.985, lng: 126.835, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 2 }, { category: '발전기', icon: '⚡', count: 1 }, { category: '살포장치', icon: '🌊', count: 1 }],
|
||
contacts: [{ role: '담당', name: '(주)경동탱크터미널', phone: '031-683-5101' }],
|
||
},
|
||
// ── 기타 ──
|
||
{
|
||
id: 33, type: '기타', jurisdiction: '남해지방해양경찰청', area: '사천', name: '한국남동발전(주) 외 2개',
|
||
address: '고성군 하이면 하이로1', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 8, phone: '070-4486-7474',
|
||
lat: 34.965, lng: 128.56, pinSize: 'md',
|
||
equipment: [{ category: '동력분무기', icon: '💨', count: 3 }, { category: '방제창고', icon: '🏭', count: 5 }],
|
||
contacts: [{ role: '담당', name: '(주)고성그린파워', phone: '070-4486-7474' }],
|
||
},
|
||
{
|
||
id: 34, type: '기타', jurisdiction: '남해지방해양경찰청', area: '울산', name: 'HD현대미포',
|
||
address: '울산광역시 동구 방어진순환도로100', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 1, phone: '052-250-3551',
|
||
lat: 35.53, lng: 129.315, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 1 }],
|
||
contacts: [{ role: '담당', name: 'HD현대미포', phone: '052-250-3551' }],
|
||
},
|
||
{
|
||
id: 35, type: '기타', jurisdiction: '남해지방해양경찰청', area: '통영', name: '삼성중공업 외 1개',
|
||
address: '거제시 장평3로 80', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 2, phone: '055-630-5373',
|
||
lat: 35.05, lng: 128.41, pinSize: 'md',
|
||
equipment: [{ category: '동력분무기', icon: '💨', count: 2 }],
|
||
contacts: [{ role: '담당', name: '삼성중공업', phone: '055-630-5373' }],
|
||
},
|
||
{
|
||
id: 36, type: '기타', jurisdiction: '동해지방해양경찰청', area: '동해', name: '한국남부발전㈜',
|
||
address: '삼척시 원덕읍 삼척로 734', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 2, phone: '070-7713-5153',
|
||
lat: 37.45, lng: 129.17, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 2 }],
|
||
contacts: [{ role: '담당', name: '한국남부발전㈜', phone: '070-7713-5153' }],
|
||
},
|
||
{
|
||
id: 37, type: '기타', jurisdiction: '동해지방해양경찰청', area: '울진', name: '한울원전',
|
||
address: '울진군 북면 울진북로 2040', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 4, phone: '054-785-4833',
|
||
lat: 37.065, lng: 129.39, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 2 }, { category: '지원장비', icon: '🔩', count: 2 }],
|
||
contacts: [{ role: '담당', name: '한울원전', phone: '054-785-4833' }],
|
||
},
|
||
{
|
||
id: 38, type: '기타', jurisdiction: '서해지방해양경찰청', area: '여수', name: '㈜HR-PORT 외 5개',
|
||
address: '여수시 제철로', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 16, phone: '061-791-0358',
|
||
lat: 34.755, lng: 127.73, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }, { category: '저압세척기', icon: '🚿', count: 1 }, { category: '동력분무기', icon: '💨', count: 7 }, { category: '방제창고', icon: '🏭', count: 3 }, { category: '발전기', icon: '⚡', count: 1 }, { category: '지원장비', icon: '🔩', count: 3 }],
|
||
contacts: [{ role: '담당', name: '㈜ 한진', phone: '061-791-0358' }],
|
||
},
|
||
{
|
||
id: 39, type: '기타', jurisdiction: '중부지방해양경찰청', area: '인천', name: '삼광조선공업㈜ 외 1개',
|
||
address: '인천 동구 보세로42번길41', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 5, phone: '010-3321-2959',
|
||
lat: 37.45, lng: 126.505, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 5 }],
|
||
contacts: [{ role: '담당', name: '삼광조선공업㈜', phone: '010-3321-2959' }],
|
||
},
|
||
// ── 방제유창청소업체 ──
|
||
{
|
||
id: 40, type: '업체', jurisdiction: '중부지방해양경찰청', area: '인천', name: '방제유창청소업체(㈜클린포트)',
|
||
address: '㈜클린포트', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 3, phone: '032-882-8279',
|
||
lat: 37.45, lng: 126.505, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 2 }, { category: '발전기', icon: '⚡', count: 1 }],
|
||
contacts: [{ role: '담당', name: '㈜클린포트', phone: '032-882-8279' }],
|
||
},
|
||
{
|
||
id: 41, type: '업체', jurisdiction: '남해지방해양경찰청', area: '부산', name: '방제유창청소업체(대용환경㈜ 외 38개)',
|
||
address: '㈜태평양해양산업', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 51, phone: '051-242-0622',
|
||
lat: 35.18, lng: 129.085, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 31 }, { category: '저압세척기', icon: '🚿', count: 5 }, { category: '동력분무기', icon: '💨', count: 3 }, { category: '방제창고', icon: '🏭', count: 5 }, { category: '발전기', icon: '⚡', count: 6 }, { category: '현장지휘소', icon: '🏕', count: 1 }],
|
||
contacts: [{ role: '담당', name: '(주)경원마린서비스', phone: '051-242-0622' }],
|
||
},
|
||
{
|
||
id: 42, type: '업체', jurisdiction: '남해지방해양경찰청', area: '울산', name: '방제유창청소업체((주)한유마린서비스 외 8개)',
|
||
address: '대상해운(주)', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 12, phone: '010-5499-7401',
|
||
lat: 35.54, lng: 129.295, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 11 }, { category: '방제창고', icon: '🏭', count: 1 }],
|
||
contacts: [{ role: '담당', name: '(주)골든씨', phone: '010-5499-7401' }],
|
||
},
|
||
{
|
||
id: 43, type: '업체', jurisdiction: '동해지방해양경찰청', area: '포항', name: '방제유창청소업체(블루씨 외 1개)',
|
||
address: '(주)블루씨', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 1, totalAssets: 3, phone: '054-278-8200',
|
||
lat: 36.015, lng: 129.365, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 2 }, { category: '살포장치', icon: '🌊', count: 1 }],
|
||
contacts: [{ role: '담당', name: '(주)블루씨', phone: '054-278-8200' }],
|
||
},
|
||
{
|
||
id: 44, type: '업체', jurisdiction: '서해지방해양경찰청', area: '목포', name: '방제유창청소업체(㈜한국해운 외 1개)',
|
||
address: '㈜한국해운 목포지사', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 1, phone: '010-8615-4326',
|
||
lat: 35.04, lng: 126.58, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }],
|
||
contacts: [{ role: '담당', name: '㈜아라', phone: '010-8615-4326' }],
|
||
},
|
||
{
|
||
id: 45, type: '업체', jurisdiction: '서해지방해양경찰청', area: '여수', name: '방제유창청소업체(마로해운 외 11개)',
|
||
address: '㈜우진실업', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 2, totalAssets: 54, phone: '061-654-9603',
|
||
lat: 34.74, lng: 127.75, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 28 }, { category: '동력분무기', icon: '💨', count: 15 }, { category: '방제창고', icon: '🏭', count: 5 }, { category: '발전기', icon: '⚡', count: 4 }, { category: '살포장치', icon: '🌊', count: 2 }],
|
||
contacts: [{ role: '담당', name: '(유)피케이엘', phone: '061-654-9603' }],
|
||
},
|
||
{
|
||
id: 46, type: '업체', jurisdiction: '중부지방해양경찰청', area: '태안', name: '방제유창청소업체(우진해운㈜)',
|
||
address: '우진해운㈜', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 6, phone: '010-4384-6817',
|
||
lat: 36.905, lng: 126.42, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 3 }, { category: '저압세척기', icon: '🚿', count: 1 }, { category: '발전기', icon: '⚡', count: 2 }],
|
||
contacts: [{ role: '담당', name: '우진해운㈜', phone: '010-4384-6817' }],
|
||
},
|
||
{
|
||
id: 47, type: '업체', jurisdiction: '중부지방해양경찰청', area: '평택', name: '방제유창청소업체((주)씨앤 외 3개)',
|
||
address: '㈜씨앤', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 6, phone: '031-683-2389',
|
||
lat: 36.99, lng: 126.825, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 3 }, { category: '저압세척기', icon: '🚿', count: 1 }, { category: '발전기', icon: '⚡', count: 2 }],
|
||
contacts: [{ role: '담당', name: '(주)소스코리아', phone: '031-683-2389' }],
|
||
},
|
||
{
|
||
id: 48, type: '업체', jurisdiction: '남해지방해양경찰청', area: '부산', name: '방제유창청소업체(㈜지앤비마린서비스)',
|
||
address: '㈜지앤비마린서비스', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 1, phone: '051-242-0622',
|
||
lat: 35.185, lng: 129.07, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 1 }],
|
||
contacts: [{ role: '담당', name: '(주)경원마린서비스', phone: '051-242-0622' }],
|
||
},
|
||
// ── 정유사 ──
|
||
{
|
||
id: 49, type: '정유사', jurisdiction: '남해지방해양경찰청', area: '울산', name: 'SK엔텀(주) 외 4개',
|
||
address: '울산광역시 남구 고사동 110-64', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 5, phone: '052-231-2318',
|
||
lat: 35.545, lng: 129.31, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 5 }],
|
||
contacts: [{ role: '담당', name: 'S-OIL㈜', phone: '052-231-2318' }],
|
||
},
|
||
{
|
||
id: 50, type: '정유사', jurisdiction: '서해지방해양경찰청', area: '여수', name: 'GS칼텍스㈜',
|
||
address: '여수시 낙포단지길 251', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 20, totalAssets: 27, phone: '061-680-2121',
|
||
lat: 34.735, lng: 127.755, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 3 }, { category: '방제창고', icon: '🏭', count: 4 }, { category: '살포장치', icon: '🌊', count: 20 }],
|
||
contacts: [{ role: '담당', name: 'GS칼텍스㈜', phone: '061-680-2121' }],
|
||
},
|
||
{
|
||
id: 51, type: '정유사', jurisdiction: '중부지방해양경찰청', area: '태안', name: 'HD현대오일뱅크㈜',
|
||
address: '서산시 대산읍 평신2로 182', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 2, phone: '010-2050-5291',
|
||
lat: 36.915, lng: 126.41, pinSize: 'md',
|
||
equipment: [{ category: '동력분무기', icon: '💨', count: 2 }],
|
||
contacts: [{ role: '담당', name: 'HD현대오일뱅크㈜', phone: '010-2050-5291' }],
|
||
},
|
||
// ── 지자체 ──
|
||
{
|
||
id: 52, type: '지자체', jurisdiction: '남해지방해양경찰청', area: '부산', name: '부산광역시 외 8개',
|
||
address: '부산광역시 동구 좌천동', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 12, phone: '051-607-4484',
|
||
lat: 35.17, lng: 129.08, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }, { category: '방제창고', icon: '🏭', count: 11 }],
|
||
contacts: [{ role: '담당', name: '남구청', phone: '051-607-4484' }],
|
||
},
|
||
{
|
||
id: 53, type: '지자체', jurisdiction: '남해지방해양경찰청', area: '사천', name: '사천시 외 3개',
|
||
address: '사천시 신항로 3', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 6, phone: '055-670-2484',
|
||
lat: 34.935, lng: 128.075, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 6 }],
|
||
contacts: [{ role: '담당', name: '고성군', phone: '055-670-2484' }],
|
||
},
|
||
{
|
||
id: 54, type: '지자체', jurisdiction: '남해지방해양경찰청', area: '울산', name: '울산북구청 외 2개',
|
||
address: '울산광역시 북구 구유동 654-2', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 4, phone: '051-709-4611',
|
||
lat: 35.55, lng: 129.32, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 4 }],
|
||
contacts: [{ role: '담당', name: '부산기장군청', phone: '051-709-4611' }],
|
||
},
|
||
{
|
||
id: 55, type: '지자체', jurisdiction: '남해지방해양경찰청', area: '창원', name: '창원 진해구 외 1개',
|
||
address: '창원시 진해구 천자로 105', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 2, phone: '051-970-4482',
|
||
lat: 35.055, lng: 128.645, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }, { category: '방제창고', icon: '🏭', count: 1 }],
|
||
contacts: [{ role: '담당', name: '부산 강서구', phone: '051-970-4482' }],
|
||
},
|
||
{
|
||
id: 56, type: '지자체', jurisdiction: '동해지방해양경찰청', area: '동해', name: '삼척시 외 1개',
|
||
address: '삼척시 근덕면 덕산리 107-74', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 4, phone: '033-640-5284',
|
||
lat: 37.45, lng: 129.16, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }, { category: '방제창고', icon: '🏭', count: 3 }],
|
||
contacts: [{ role: '담당', name: '강릉시', phone: '033-640-5284' }],
|
||
},
|
||
{
|
||
id: 57, type: '지자체', jurisdiction: '동해지방해양경찰청', area: '울진', name: '영덕군',
|
||
address: '남정면 장사리 74-1', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 3, phone: '054-730-6562',
|
||
lat: 36.35, lng: 129.4, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 3 }],
|
||
contacts: [{ role: '담당', name: '영덕군', phone: '054-730-6562' }],
|
||
},
|
||
{
|
||
id: 58, type: '지자체', jurisdiction: '서해지방해양경찰청', area: '목포', name: '영광군 외 1개',
|
||
address: '영광군 염산면 향화로', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 5, phone: '061-270-3419',
|
||
lat: 35.04, lng: 126.58, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 5 }],
|
||
contacts: [{ role: '담당', name: '목포시', phone: '061-270-3419' }],
|
||
},
|
||
{
|
||
id: 59, type: '지자체', jurisdiction: '서해지방해양경찰청', area: '여수', name: '광양시 외 1개',
|
||
address: '순천시 진상면 성지로 8', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 3, phone: '061-797-2791',
|
||
lat: 34.76, lng: 127.725, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 3 }],
|
||
contacts: [{ role: '담당', name: '광양시', phone: '061-797-2791' }],
|
||
},
|
||
{
|
||
id: 60, type: '지자체', jurisdiction: '중부지방해양경찰청', area: '인천', name: '옹진군청 외 4개',
|
||
address: '인천광역시 옹진군 덕적면 진리 387', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 10, phone: '010-2740-9388',
|
||
lat: 37.45, lng: 126.505, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 5 }, { category: '동력분무기', icon: '💨', count: 4 }, { category: '발전기', icon: '⚡', count: 1 }],
|
||
contacts: [{ role: '담당', name: '김포시청', phone: '010-2740-9388' }],
|
||
},
|
||
{
|
||
id: 61, type: '지자체', jurisdiction: '중부지방해양경찰청', area: '태안', name: '태안군청',
|
||
address: '충남 태안군 근흥면 신진도리 75-36', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 1, phone: '041-670-2877',
|
||
lat: 36.745, lng: 126.305, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 1 }],
|
||
contacts: [{ role: '담당', name: '태안군청', phone: '041-670-2877' }],
|
||
},
|
||
{
|
||
id: 62, type: '지자체', jurisdiction: '중부지방해양경찰청', area: '평택', name: '안산시청 외 2개',
|
||
address: '경기도 안산시 단원구 진두길 97', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 6, phone: '041-350-4292',
|
||
lat: 37.32, lng: 126.83, pinSize: 'md',
|
||
equipment: [{ category: '동력분무기', icon: '💨', count: 1 }, { category: '방제창고', icon: '🏭', count: 5 }],
|
||
contacts: [{ role: '담당', name: '당진시청', phone: '041-350-4292' }],
|
||
},
|
||
// ── 하역시설 ──
|
||
{
|
||
id: 63, type: '기타', jurisdiction: '서해지방해양경찰청', area: '여수', name: '㈜HR-PORT 외 5개',
|
||
address: '여수시 제철로', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 1, phone: '061-791-0358',
|
||
lat: 34.748, lng: 127.74, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 1 }],
|
||
contacts: [{ role: '담당', name: '㈜ 한진', phone: '061-791-0358' }],
|
||
},
|
||
// ── 해군 ──
|
||
{
|
||
id: 64, type: '해군', jurisdiction: '동해지방해양경찰청', area: '동해', name: '해군1함대사령부 외 1개',
|
||
address: '동해시 대동로 430', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 1, phone: '033-539-7323',
|
||
lat: 37.525, lng: 129.115, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 1 }],
|
||
contacts: [{ role: '담당', name: '1함대 사령부', phone: '033-539-7323' }],
|
||
},
|
||
{
|
||
id: 65, type: '해군', jurisdiction: '중부지방해양경찰청', area: '인천', name: '해병대 제9518부대',
|
||
address: '인천광역시 옹진군', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 2, phone: '010-4801-3473',
|
||
lat: 37.45, lng: 126.505, pinSize: 'md',
|
||
equipment: [{ category: '발전기', icon: '⚡', count: 2 }],
|
||
contacts: [{ role: '담당', name: '해병대 제9518부대', phone: '010-4801-3473' }],
|
||
},
|
||
// ── 해양환경공단 ──
|
||
{
|
||
id: 66, type: '해양환경공단', jurisdiction: '남해지방해양경찰청', area: '부산', name: '부산지사',
|
||
address: '창원시 진해구 안골동', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 6, totalAssets: 14, phone: '051-466-3944',
|
||
lat: 35.105, lng: 128.715, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 3 }, { category: '저압세척기', icon: '🚿', count: 1 }, { category: '방제창고', icon: '🏭', count: 1 }, { category: '발전기', icon: '⚡', count: 2 }, { category: '현장지휘소', icon: '🏕', count: 1 }, { category: '살포장치', icon: '🌊', count: 6 }],
|
||
contacts: [{ role: '담당', name: '부산지사', phone: '051-466-3944' }],
|
||
},
|
||
{
|
||
id: 67, type: '해양환경공단', jurisdiction: '남해지방해양경찰청', area: '사천', name: '마산지사',
|
||
address: '사천시 신항만1길 23', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 9, phone: '010-3598-4202',
|
||
lat: 34.925, lng: 128.065, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 8 }, { category: '발전기', icon: '⚡', count: 1 }],
|
||
contacts: [{ role: '담당', name: '마산지사', phone: '010-3598-4202' }],
|
||
},
|
||
{
|
||
id: 68, type: '해양환경공단', jurisdiction: '남해지방해양경찰청', area: '울산', name: '울산지사',
|
||
address: '울산광역시 남구 장생포고래로 276번길 27', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 1, totalAssets: 16, phone: '052-238-7718',
|
||
lat: 35.538, lng: 129.3, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 6 }, { category: '저압세척기', icon: '🚿', count: 1 }, { category: '방제창고', icon: '🏭', count: 4 }, { category: '발전기', icon: '⚡', count: 4 }, { category: '살포장치', icon: '🌊', count: 1 }],
|
||
contacts: [{ role: '담당', name: '울산지사', phone: '052-238-7718' }],
|
||
},
|
||
{
|
||
id: 69, type: '해양환경공단', jurisdiction: '남해지방해양경찰청', area: '창원', name: '마산지사',
|
||
address: '창원시 마산합포구 드림베이대로59', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 1, totalAssets: 7, phone: '010-2265-3928',
|
||
lat: 35.055, lng: 128.645, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 4 }, { category: '발전기', icon: '⚡', count: 2 }, { category: '살포장치', icon: '🌊', count: 1 }],
|
||
contacts: [{ role: '담당', name: '마산지사', phone: '010-2265-3928' }],
|
||
},
|
||
{
|
||
id: 70, type: '해양환경공단', jurisdiction: '남해지방해양경찰청', area: '통영', name: '마산지사',
|
||
address: '거제시 장승로 112', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 8, phone: '010-2636-5313',
|
||
lat: 35.05, lng: 128.41, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 8 }],
|
||
contacts: [{ role: '담당', name: '마산지사', phone: '010-2636-5313' }],
|
||
},
|
||
{
|
||
id: 71, type: '해양환경공단', jurisdiction: '동해지방해양경찰청', area: '동해', name: '동해지사',
|
||
address: '동해시 대동로 210', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 2, totalAssets: 17, phone: '010-7499-0257',
|
||
lat: 37.515, lng: 129.105, pinSize: 'md',
|
||
equipment: [{ category: '해안운반차', icon: '🚜', count: 2 }, { category: '고압세척기', icon: '💧', count: 2 }, { category: '동력분무기', icon: '💨', count: 2 }, { category: '방제창고', icon: '🏭', count: 8 }, { category: '발전기', icon: '⚡', count: 1 }, { category: '살포장치', icon: '🌊', count: 2 }],
|
||
contacts: [{ role: '담당', name: '동해지사', phone: '010-7499-0257' }],
|
||
},
|
||
{
|
||
id: 72, type: '해양환경공단', jurisdiction: '동해지방해양경찰청', area: '울진', name: '포항지사',
|
||
address: '울진군 죽변면 죽변리 36-88', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 2, phone: '054-273-5595',
|
||
lat: 37.06, lng: 129.42, pinSize: 'md',
|
||
equipment: [{ category: '방제창고', icon: '🏭', count: 2 }],
|
||
contacts: [{ role: '담당', name: '포항지사', phone: '054-273-5595' }],
|
||
},
|
||
{
|
||
id: 73, type: '해양환경공단', jurisdiction: '동해지방해양경찰청', area: '포항', name: '포항지사',
|
||
address: '포항시 북구 해안로 44-10', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 2, totalAssets: 8, phone: '054-273-5595',
|
||
lat: 36.025, lng: 129.375, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 2 }, { category: '동력분무기', icon: '💨', count: 1 }, { category: '발전기', icon: '⚡', count: 2 }, { category: '현장지휘소', icon: '🏕', count: 1 }, { category: '살포장치', icon: '🌊', count: 2 }],
|
||
contacts: [{ role: '담당', name: '포항지사', phone: '054-273-5595' }],
|
||
},
|
||
{
|
||
id: 74, type: '해양환경공단', jurisdiction: '서해지방해양경찰청', area: '군산', name: '군산지사',
|
||
address: '군산시 임해로 452', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 4, totalAssets: 12, phone: '063-443-4813',
|
||
lat: 35.975, lng: 126.715, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 2 }, { category: '저압세척기', icon: '🚿', count: 2 }, { category: '동력분무기', icon: '💨', count: 1 }, { category: '발전기', icon: '⚡', count: 3 }, { category: '살포장치', icon: '🌊', count: 4 }],
|
||
contacts: [{ role: '담당', name: '군산지사', phone: '063-443-4813' }],
|
||
},
|
||
{
|
||
id: 75, type: '해양환경공단', jurisdiction: '서해지방해양경찰청', area: '목포', name: '목포지사',
|
||
address: '전남 목포시 죽교동 683', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 10, phone: '061-242-9663',
|
||
lat: 35.04, lng: 126.58, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }, { category: '저압세척기', icon: '🚿', count: 2 }, { category: '방제창고', icon: '🏭', count: 6 }, { category: '발전기', icon: '⚡', count: 1 }],
|
||
contacts: [{ role: '담당', name: '목포지사', phone: '061-242-9663' }],
|
||
},
|
||
{
|
||
id: 76, type: '해양환경공단', jurisdiction: '서해지방해양경찰청', area: '여수', name: '여수지사',
|
||
address: '여수시 덕충동', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 3, totalAssets: 12, phone: '061-654-6431',
|
||
lat: 34.742, lng: 127.748, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 5 }, { category: '저압세척기', icon: '🚿', count: 1 }, { category: '발전기', icon: '⚡', count: 3 }, { category: '살포장치', icon: '🌊', count: 3 }],
|
||
contacts: [{ role: '담당', name: '여수지사', phone: '061-654-6431' }],
|
||
},
|
||
{
|
||
id: 77, type: '해양환경공단', jurisdiction: '서해지방해양경찰청', area: '완도', name: '목포지사 완도사업소',
|
||
address: '완도군 완도읍 해변공원로 20-1', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 3, phone: '061-242-9663',
|
||
lat: 34.315, lng: 126.755, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }, { category: '방제창고', icon: '🏭', count: 2 }],
|
||
contacts: [{ role: '담당', name: '목포지사', phone: '061-242-9663' }],
|
||
},
|
||
{
|
||
id: 78, type: '해양환경공단', jurisdiction: '제주지방해양경찰청', area: '서귀포', name: '제주지사(서귀포)',
|
||
address: '서귀포시 칠십리로72번길 14', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 1, totalAssets: 1, phone: '064-753-4356',
|
||
lat: 33.245, lng: 126.565, pinSize: 'md',
|
||
equipment: [{ category: '살포장치', icon: '🌊', count: 1 }],
|
||
contacts: [{ role: '담당', name: '제주지사', phone: '064-753-4356' }],
|
||
},
|
||
{
|
||
id: 79, type: '해양환경공단', jurisdiction: '제주지방해양경찰청', area: '제주', name: '제주지사(제주)',
|
||
address: '제주시 임항로97', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 3, totalAssets: 20, phone: '064-753-4356',
|
||
lat: 33.517, lng: 126.528, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 3 }, { category: '저압세척기', icon: '🚿', count: 1 }, { category: '동력분무기', icon: '💨', count: 2 }, { category: '방제창고', icon: '🏭', count: 10 }, { category: '발전기', icon: '⚡', count: 1 }, { category: '살포장치', icon: '🌊', count: 3 }],
|
||
contacts: [{ role: '담당', name: '제주지사', phone: '064-753-4356' }],
|
||
},
|
||
{
|
||
id: 80, type: '해양환경공단', jurisdiction: '중부지방해양경찰청', area: '보령', name: '대산지사(보령)',
|
||
address: '보령시 해안로 740', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 5, phone: '041-664-9101',
|
||
lat: 36.333, lng: 126.612, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }, { category: '방제창고', icon: '🏭', count: 4 }],
|
||
contacts: [{ role: '담당', name: '대산지사', phone: '041-664-9101' }],
|
||
},
|
||
{
|
||
id: 81, type: '해양환경공단', jurisdiction: '중부지방해양경찰청', area: '인천', name: '인천지사',
|
||
address: '인천광역시 중구 연안부두로 128번길 35', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 11, phone: '010-7133-2167',
|
||
lat: 37.45, lng: 126.505, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 5 }, { category: '저압세척기', icon: '🚿', count: 1 }, { category: '동력분무기', icon: '💨', count: 3 }, { category: '발전기', icon: '⚡', count: 2 }],
|
||
contacts: [{ role: '담당', name: '인천지사', phone: '010-7133-2167' }],
|
||
},
|
||
{
|
||
id: 82, type: '해양환경공단', jurisdiction: '중부지방해양경찰청', area: '태안', name: '대산지사(태안)',
|
||
address: '서산시 대산읍 대죽1로 325', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 1, totalAssets: 17, phone: '041-664-9101',
|
||
lat: 36.908, lng: 126.413, pinSize: 'md',
|
||
equipment: [{ category: '해안운반차', icon: '🚜', count: 1 }, { category: '고압세척기', icon: '💧', count: 5 }, { category: '저압세척기', icon: '🚿', count: 1 }, { category: '동력분무기', icon: '💨', count: 1 }, { category: '방제창고', icon: '🏭', count: 5 }, { category: '발전기', icon: '⚡', count: 3 }, { category: '살포장치', icon: '🌊', count: 1 }],
|
||
contacts: [{ role: '담당', name: '대산지사', phone: '041-664-9101' }],
|
||
},
|
||
{
|
||
id: 83, type: '해양환경공단', jurisdiction: '중부지방해양경찰청', area: '평택', name: '평택지사',
|
||
address: '당진시 송악읍 고대공단2길', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 1, totalAssets: 13, phone: '031-683-7973',
|
||
lat: 36.905, lng: 126.635, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 3 }, { category: '저압세척기', icon: '🚿', count: 2 }, { category: '방제창고', icon: '🏭', count: 3 }, { category: '발전기', icon: '⚡', count: 4 }, { category: '살포장치', icon: '🌊', count: 1 }],
|
||
contacts: [{ role: '담당', name: '평택지사', phone: '031-683-7973' }],
|
||
},
|
||
// ── 수협 ──
|
||
{
|
||
id: 84, type: '기타', jurisdiction: '남해지방해양경찰청', area: '통영', name: '삼성중공업 외 1개',
|
||
address: '거제시 장평3로 80', vessel: 0, skimmer: 0, pump: 0, vehicle: 0, sprayer: 0, totalAssets: 1, phone: '055-630-5373',
|
||
lat: 35.05, lng: 128.41, pinSize: 'md',
|
||
equipment: [{ category: '고압세척기', icon: '💧', count: 1 }],
|
||
contacts: [{ role: '담당', name: '삼성중공업', phone: '055-630-5373' }],
|
||
},
|
||
]
|
||
|
||
interface InsuranceRow {
|
||
shipName: string
|
||
mmsi: string
|
||
imo: string
|
||
insType: string
|
||
insurer: string
|
||
policyNo: string
|
||
start: string
|
||
expiry: string
|
||
limit: string
|
||
}
|
||
|
||
const insuranceDemoData: InsuranceRow[] = [
|
||
{ shipName: '유조선 한라호', mmsi: '440123456', imo: '9876001', insType: 'P&I 보험', insurer: '한국P&I클럽', policyNo: 'PI-2025-1234', start: '2025-07-01', expiry: '2026-06-30', limit: '50억' },
|
||
{ shipName: '화학물질운반선 제주호', mmsi: '440345678', imo: '9876002', insType: '선주책임보험', insurer: '삼성화재', policyNo: 'SF-2025-9012', start: '2025-09-16', expiry: '2026-09-15', limit: '80억' },
|
||
{ shipName: '방제선 OCEAN STAR', mmsi: '440123789', imo: '9876003', insType: 'P&I 보험', insurer: '한국P&I클럽', policyNo: 'PI-2025-3456', start: '2025-11-21', expiry: '2026-11-20', limit: '120억' },
|
||
{ shipName: 'LNG운반선 부산호', mmsi: '440567890', imo: '9876004', insType: '해상보험', insurer: 'DB손해보험', policyNo: 'DB-2025-7890', start: '2025-08-02', expiry: '2026-08-01', limit: '200억' },
|
||
{ shipName: '유조선 백두호', mmsi: '440789012', imo: '9876005', insType: 'P&I 보험', insurer: 'SK해운보험', policyNo: 'MH-2025-5678', start: '2025-01-01', expiry: '2025-12-31', limit: '30억' },
|
||
]
|
||
|
||
const uploadHistory = [
|
||
{ filename: '여수서_장비자재_2601.xlsx', date: '2026-01-25 14:30', uploader: '남해청_방제과', count: 45 },
|
||
{ filename: '인천서_오일펜스현황.xlsx', date: '2026-01-22 10:15', uploader: '중부청_방제과', count: 12 },
|
||
{ filename: '전체_방제정_현황.xlsx', date: '2026-01-20 09:00', uploader: '본청_방제과', count: 18 },
|
||
]
|
||
|
||
const typeTagCls = (type: string) => {
|
||
if (type === '해경관할') return 'bg-[rgba(239,68,68,0.1)] text-status-red'
|
||
if (type === '해경경찰서') return 'bg-[rgba(59,130,246,0.1)] text-primary-blue'
|
||
if (type === '파출소') return 'bg-[rgba(34,197,94,0.1)] text-status-green'
|
||
if (type === '관련기관') return 'bg-[rgba(168,85,247,0.1)] text-primary-purple'
|
||
if (type === '해양환경공단') return 'bg-[rgba(6,182,212,0.1)] text-primary-cyan'
|
||
if (type === '업체') return 'bg-[rgba(245,158,11,0.1)] text-status-orange'
|
||
if (type === '지자체') return 'bg-[rgba(236,72,153,0.1)] text-[#ec4899]'
|
||
if (type === '기름저장시설') return 'bg-[rgba(139,92,246,0.1)] text-[#8b5cf6]'
|
||
if (type === '정유사') return 'bg-[rgba(20,184,166,0.1)] text-[#14b8a6]'
|
||
if (type === '해군') return 'bg-[rgba(100,116,139,0.1)] text-[#64748b]'
|
||
if (type === '기타') return 'bg-[rgba(107,114,128,0.1)] text-[#6b7280]'
|
||
return 'bg-[rgba(156,163,175,0.1)] text-[#9ca3af]'
|
||
}
|
||
|
||
const typeColor = (type: string) => {
|
||
switch (type) {
|
||
case '해경관할': return { bg: 'rgba(6,182,212,0.3)', border: '#06b6d4', selected: '#22d3ee' }
|
||
case '해경경찰서': return { bg: 'rgba(59,130,246,0.3)', border: '#3b82f6', selected: '#60a5fa' }
|
||
case '파출소': return { bg: 'rgba(34,197,94,0.3)', border: '#22c55e', selected: '#4ade80' }
|
||
case '관련기관': return { bg: 'rgba(168,85,247,0.3)', border: '#a855f7', selected: '#c084fc' }
|
||
case '해양환경공단': return { bg: 'rgba(20,184,166,0.3)', border: '#14b8a6', selected: '#2dd4bf' }
|
||
case '업체': return { bg: 'rgba(245,158,11,0.3)', border: '#f59e0b', selected: '#fbbf24' }
|
||
case '지자체': return { bg: 'rgba(236,72,153,0.3)', border: '#ec4899', selected: '#f472b6' }
|
||
case '기름저장시설': return { bg: 'rgba(139,92,246,0.3)', border: '#8b5cf6', selected: '#a78bfa' }
|
||
case '정유사': return { bg: 'rgba(13,148,136,0.3)', border: '#0d9488', selected: '#2dd4bf' }
|
||
case '해군': return { bg: 'rgba(100,116,139,0.3)', border: '#64748b', selected: '#94a3b8' }
|
||
default: return { bg: 'rgba(107,114,128,0.3)', border: '#6b7280', selected: '#9ca3af' }
|
||
}
|
||
}
|
||
|
||
// ── AssetMap (Leaflet) ──
|
||
|
||
function AssetMap({
|
||
organizations: orgs,
|
||
selectedOrg,
|
||
onSelectOrg,
|
||
regionFilter,
|
||
onRegionFilterChange,
|
||
}: {
|
||
organizations: AssetOrg[]
|
||
selectedOrg: AssetOrg
|
||
onSelectOrg: (o: AssetOrg) => void
|
||
regionFilter: string
|
||
onRegionFilterChange: (v: string) => void
|
||
}) {
|
||
const mapContainerRef = useRef<HTMLDivElement>(null)
|
||
const mapRef = useRef<L.Map | null>(null)
|
||
const markersRef = useRef<L.LayerGroup | null>(null)
|
||
|
||
// Initialize map once
|
||
useEffect(() => {
|
||
if (!mapContainerRef.current || mapRef.current) return
|
||
|
||
const map = L.map(mapContainerRef.current, {
|
||
center: [35.9, 127.8],
|
||
zoom: 7,
|
||
zoomControl: false,
|
||
attributionControl: false,
|
||
})
|
||
|
||
// Dark-themed OpenStreetMap tiles
|
||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||
maxZoom: 19,
|
||
}).addTo(map)
|
||
|
||
L.control.zoom({ position: 'topright' }).addTo(map)
|
||
L.control.attribution({ position: 'bottomright' }).addAttribution(
|
||
'© <a href="https://www.openstreetmap.org/copyright">OSM</a> © <a href="https://carto.com/">CARTO</a>'
|
||
).addTo(map)
|
||
|
||
mapRef.current = map
|
||
markersRef.current = L.layerGroup().addTo(map)
|
||
|
||
return () => {
|
||
map.remove()
|
||
mapRef.current = null
|
||
markersRef.current = null
|
||
}
|
||
}, [])
|
||
|
||
// Update markers when orgs or selectedOrg changes
|
||
useEffect(() => {
|
||
if (!mapRef.current || !markersRef.current) return
|
||
|
||
markersRef.current.clearLayers()
|
||
|
||
orgs.forEach(org => {
|
||
const isSelected = selectedOrg.id === org.id
|
||
const tc = typeColor(org.type)
|
||
const radius = org.pinSize === 'hq' ? 14 : org.pinSize === 'lg' ? 10 : 7
|
||
|
||
const cm = L.circleMarker([org.lat, org.lng], {
|
||
radius: isSelected ? radius + 4 : radius,
|
||
fillColor: isSelected ? tc.selected : tc.bg,
|
||
color: isSelected ? tc.selected : tc.border,
|
||
weight: isSelected ? 3 : 2,
|
||
fillOpacity: isSelected ? 0.9 : 0.7,
|
||
})
|
||
cm.bindTooltip(
|
||
`<div style="text-align:center;font-family:'Noto Sans KR',sans-serif;">
|
||
<div style="font-weight:700;font-size:11px;">${org.name}</div>
|
||
<div style="font-size:10px;opacity:0.7;">${org.type} · 자산 ${org.totalAssets}건</div>
|
||
</div>`,
|
||
{ permanent: org.pinSize === 'hq' || isSelected, direction: 'top', offset: [0, -radius - 2], className: 'asset-map-tooltip' }
|
||
)
|
||
cm.on('click', () => onSelectOrg(org))
|
||
|
||
markersRef.current!.addLayer(cm)
|
||
})
|
||
}, [orgs, selectedOrg, onSelectOrg])
|
||
|
||
// Pan to selected org
|
||
useEffect(() => {
|
||
if (!mapRef.current) return
|
||
mapRef.current.flyTo([selectedOrg.lat, selectedOrg.lng], 10, { duration: 0.8 })
|
||
}, [selectedOrg])
|
||
|
||
return (
|
||
<div className="w-full h-full relative">
|
||
<style>{`
|
||
.asset-map-tooltip {
|
||
background: rgba(15,21,36,0.92) !important;
|
||
border: 1px solid rgba(30,42,66,0.8) !important;
|
||
color: #e4e8f1 !important;
|
||
border-radius: 6px !important;
|
||
padding: 4px 8px !important;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
|
||
}
|
||
.asset-map-tooltip::before {
|
||
border-top-color: rgba(15,21,36,0.92) !important;
|
||
}
|
||
`}</style>
|
||
<div ref={mapContainerRef} className="w-full h-full" />
|
||
|
||
{/* Region filter overlay */}
|
||
<div className="absolute top-3 left-3 z-[1000] flex gap-1">
|
||
{[
|
||
{ value: 'all', label: '전체' },
|
||
{ value: '남해', label: '남해청' },
|
||
{ value: '서해', label: '서해청' },
|
||
{ value: '중부', label: '중부청' },
|
||
{ value: '동해', label: '동해청' },
|
||
{ value: '제주', label: '제주청' },
|
||
].map(r => (
|
||
<button
|
||
key={r.value}
|
||
onClick={() => onRegionFilterChange(r.value)}
|
||
className={`px-2.5 py-1.5 text-[10px] font-bold rounded font-korean transition-colors ${
|
||
regionFilter === r.value
|
||
? 'bg-primary-cyan/20 text-primary-cyan border border-primary-cyan/40'
|
||
: 'bg-bg-0/80 text-text-2 border border-border hover:bg-bg-hover/80'
|
||
}`}
|
||
>
|
||
{r.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Legend overlay */}
|
||
<div className="absolute bottom-3 left-3 z-[1000] bg-bg-0/90 border border-border rounded-sm p-2.5 backdrop-blur-sm">
|
||
<div className="text-[9px] text-text-3 font-bold mb-1.5 font-korean">범례</div>
|
||
{[
|
||
{ color: '#06b6d4', label: '해경관할' },
|
||
{ color: '#3b82f6', label: '해경경찰서' },
|
||
{ color: '#22c55e', label: '파출소' },
|
||
{ color: '#a855f7', label: '관련기관' },
|
||
{ color: '#14b8a6', label: '해양환경공단' },
|
||
{ color: '#f59e0b', label: '업체' },
|
||
{ color: '#ec4899', label: '지자체' },
|
||
{ color: '#8b5cf6', label: '기름저장시설' },
|
||
{ color: '#0d9488', label: '정유사' },
|
||
{ color: '#64748b', label: '해군' },
|
||
{ color: '#6b7280', label: '기타' },
|
||
].map((item, i) => (
|
||
<div key={i} className="flex items-center gap-1.5 mb-0.5 last:mb-0">
|
||
<span className="w-2.5 h-2.5 rounded-full inline-block flex-shrink-0" style={{ background: item.color }} />
|
||
<span className="text-[10px] text-text-2 font-korean">{item.label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Tab 0: 자산 관리 ──
|
||
|
||
function AssetManagementTab() {
|
||
const [viewMode, setViewMode] = useState<'list' | 'map'>('list')
|
||
const [selectedOrg, setSelectedOrg] = useState<AssetOrg>(organizations[0])
|
||
const [detailTab, setDetailTab] = useState<'equip' | 'material' | 'contact'>('equip')
|
||
const [regionFilter, setRegionFilter] = useState('all')
|
||
const [searchTerm, setSearchTerm] = useState('')
|
||
const [typeFilterVal, setTypeFilterVal] = useState('all')
|
||
const [currentPage, setCurrentPage] = useState(1)
|
||
const pageSize = 15
|
||
|
||
const filtered = organizations.filter(o => {
|
||
if (regionFilter !== 'all' && !o.jurisdiction.includes(regionFilter)) return false
|
||
if (typeFilterVal !== 'all' && o.type !== typeFilterVal) return false
|
||
if (searchTerm && !o.name.includes(searchTerm) && !o.address.includes(searchTerm)) return false
|
||
return true
|
||
})
|
||
|
||
const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize))
|
||
const safePage = Math.min(currentPage, totalPages)
|
||
const paged = filtered.slice((safePage - 1) * pageSize, safePage * pageSize)
|
||
|
||
// 필터 변경 시 첫 페이지로
|
||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||
useEffect(() => { setCurrentPage(1) }, [regionFilter, typeFilterVal, searchTerm])
|
||
|
||
const regionShort = (j: string) => {
|
||
if (j.includes('중부')) return '중부청'
|
||
if (j.includes('서해')) return '서해청'
|
||
if (j.includes('남해')) return '남해청'
|
||
if (j.includes('동해')) return '동해청'
|
||
if (j.includes('중앙')) return '중특단'
|
||
return '제주청'
|
||
}
|
||
|
||
return (
|
||
<div className="flex flex-col h-full">
|
||
{/* View Switcher & Filters */}
|
||
<div className="flex items-center justify-between mb-3 pb-3 border-b border-border">
|
||
<div className="flex gap-1">
|
||
<button
|
||
onClick={() => setViewMode('list')}
|
||
className={`px-3 py-1.5 text-[11px] font-semibold rounded-sm font-korean transition-colors ${
|
||
viewMode === 'list'
|
||
? 'bg-[rgba(6,182,212,0.15)] text-primary-cyan border border-primary-cyan/30'
|
||
: 'bg-bg-3 border border-border text-text-2 hover:bg-bg-hover'
|
||
}`}
|
||
>
|
||
📋 방제자산리스트
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('map')}
|
||
className={`px-3 py-1.5 text-[11px] font-semibold rounded-sm font-korean transition-colors ${
|
||
viewMode === 'map'
|
||
? 'bg-[rgba(6,182,212,0.15)] text-primary-cyan border border-primary-cyan/30'
|
||
: 'bg-bg-3 border border-border text-text-2 hover:bg-bg-hover'
|
||
}`}
|
||
>
|
||
🗺 지도 보기
|
||
</button>
|
||
</div>
|
||
<div className="flex gap-1.5 items-center">
|
||
<input
|
||
type="text"
|
||
placeholder="기관명 검색..."
|
||
value={searchTerm}
|
||
onChange={e => setSearchTerm(e.target.value)}
|
||
className="prd-i w-40 py-1.5 px-2.5"
|
||
/>
|
||
<select value={regionFilter} onChange={e => setRegionFilter(e.target.value)} className="prd-i w-[100px] py-1.5 px-2">
|
||
<option value="all">전체 관할</option>
|
||
<option value="남해">남해청</option>
|
||
<option value="서해">서해청</option>
|
||
<option value="중부">중부청</option>
|
||
<option value="동해">동해청</option>
|
||
<option value="제주">제주청</option>
|
||
</select>
|
||
<select value={typeFilterVal} onChange={e => setTypeFilterVal(e.target.value)} className="prd-i w-[100px] py-1.5 px-2">
|
||
<option value="all">전체 유형</option>
|
||
<option value="해경관할">해경관할</option>
|
||
<option value="해경경찰서">해경경찰서</option>
|
||
<option value="파출소">파출소</option>
|
||
<option value="관련기관">관련기관</option>
|
||
<option value="해양환경공단">해양환경공단</option>
|
||
<option value="업체">업체</option>
|
||
<option value="지자체">지자체</option>
|
||
<option value="기름저장시설">기름저장시설</option>
|
||
<option value="정유사">정유사</option>
|
||
<option value="해군">해군</option>
|
||
<option value="기타">기타</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{viewMode === 'list' ? (
|
||
/* ── LIST VIEW ── */
|
||
<div className="flex-1 bg-bg-3 border border-border rounded-md overflow-hidden flex flex-col">
|
||
<div className="flex-1">
|
||
<table className="w-full text-left" style={{ tableLayout: 'fixed' }}>
|
||
<colgroup>
|
||
<col style={{ width: '3.5%' }} />
|
||
<col style={{ width: '7%' }} />
|
||
<col style={{ width: '7%' }} />
|
||
<col style={{ width: '12%' }} />
|
||
<col />
|
||
<col style={{ width: '8%' }} />
|
||
<col style={{ width: '7%' }} />
|
||
<col style={{ width: '7%' }} />
|
||
<col style={{ width: '5%' }} />
|
||
<col style={{ width: '5%' }} />
|
||
<col style={{ width: '5%' }} />
|
||
</colgroup>
|
||
<thead>
|
||
<tr className="border-b border-border bg-bg-0">
|
||
{['번호', '유형', '관할청', '기관명', '주소', '방제선', '유회수기', '이송펌프', '방제차량', '살포장치', '총자산'].map((h, i) => (
|
||
<th key={i} className={`px-2.5 py-2.5 text-[10px] font-bold text-text-2 font-korean border-b border-border ${[0,5,6,7,8,9,10].includes(i) ? 'text-center' : ''}`}>
|
||
{h}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{paged.map((org, idx) => (
|
||
<tr
|
||
key={org.id}
|
||
className={`border-b border-border/50 hover:bg-[rgba(255,255,255,0.02)] cursor-pointer transition-colors ${
|
||
selectedOrg.id === org.id ? 'bg-[rgba(6,182,212,0.03)]' : ''
|
||
}`}
|
||
onClick={() => { setSelectedOrg(org); setViewMode('map') }}
|
||
>
|
||
<td className="px-2.5 py-2 text-center font-mono text-[10px]">{(safePage - 1) * pageSize + idx + 1}</td>
|
||
<td className="px-2.5 py-2">
|
||
<span className={`text-[9px] px-1.5 py-0.5 rounded font-bold font-korean ${typeTagCls(org.type)}`}>{org.type}</span>
|
||
</td>
|
||
<td className="px-2.5 py-2 text-[10px] font-semibold font-korean">{regionShort(org.jurisdiction)}</td>
|
||
<td className="px-2.5 py-2 text-[10px] font-semibold text-primary-cyan font-korean cursor-pointer truncate">{org.name}</td>
|
||
<td className="px-2.5 py-2 text-[10px] text-text-3 font-korean truncate">{org.address}</td>
|
||
<td className="px-2.5 py-2 text-center font-mono text-[10px] font-semibold">{org.vessel}척</td>
|
||
<td className="px-2.5 py-2 text-center font-mono text-[10px]">{org.skimmer}대</td>
|
||
<td className="px-2.5 py-2 text-center font-mono text-[10px]">{org.pump}대</td>
|
||
<td className="px-2.5 py-2 text-center font-mono text-[10px]">{org.vehicle}대</td>
|
||
<td className="px-2.5 py-2 text-center font-mono text-[10px]">{org.sprayer}대</td>
|
||
<td className="px-2.5 py-2 text-center font-bold text-primary-cyan font-mono text-[10px]">{org.totalAssets}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Pagination */}
|
||
<div className="flex items-center justify-center gap-4 px-4 py-2.5 border-t border-border bg-bg-0">
|
||
<span className="text-[10px] text-text-3 font-korean">
|
||
전체 <span className="font-semibold text-text-2">{filtered.length}</span>건 중{' '}
|
||
<span className="font-semibold text-text-2">{(safePage - 1) * pageSize + 1}-{Math.min(safePage * pageSize, filtered.length)}</span>
|
||
</span>
|
||
<div className="flex items-center gap-1">
|
||
<button
|
||
onClick={() => setCurrentPage(1)}
|
||
disabled={safePage <= 1}
|
||
className="px-1.5 py-1 text-[10px] rounded border border-border bg-bg-3 text-text-2 disabled:opacity-30 hover:bg-bg-hover transition-colors cursor-pointer disabled:cursor-default"
|
||
>«</button>
|
||
<button
|
||
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
||
disabled={safePage <= 1}
|
||
className="px-1.5 py-1 text-[10px] rounded border border-border bg-bg-3 text-text-2 disabled:opacity-30 hover:bg-bg-hover transition-colors cursor-pointer disabled:cursor-default"
|
||
>‹</button>
|
||
{Array.from({ length: totalPages }, (_, i) => i + 1).map(p => (
|
||
<button
|
||
key={p}
|
||
onClick={() => setCurrentPage(p)}
|
||
className={`w-6 h-6 text-[10px] font-bold rounded transition-colors cursor-pointer ${
|
||
p === safePage
|
||
? 'bg-primary-cyan/20 text-primary-cyan border border-primary-cyan/40'
|
||
: 'border border-border bg-bg-3 text-text-3 hover:bg-bg-hover'
|
||
}`}
|
||
>{p}</button>
|
||
))}
|
||
<button
|
||
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
||
disabled={safePage >= totalPages}
|
||
className="px-1.5 py-1 text-[10px] rounded border border-border bg-bg-3 text-text-2 disabled:opacity-30 hover:bg-bg-hover transition-colors cursor-pointer disabled:cursor-default"
|
||
>›</button>
|
||
<button
|
||
onClick={() => setCurrentPage(totalPages)}
|
||
disabled={safePage >= totalPages}
|
||
className="px-1.5 py-1 text-[10px] rounded border border-border bg-bg-3 text-text-2 disabled:opacity-30 hover:bg-bg-hover transition-colors cursor-pointer disabled:cursor-default"
|
||
>»</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
/* ── MAP VIEW ── */
|
||
<div className="flex-1 flex overflow-hidden rounded-md border border-border">
|
||
{/* Map */}
|
||
<div className="flex-1 relative overflow-hidden">
|
||
<AssetMap
|
||
organizations={filtered}
|
||
selectedOrg={selectedOrg}
|
||
onSelectOrg={setSelectedOrg}
|
||
regionFilter={regionFilter}
|
||
onRegionFilterChange={setRegionFilter}
|
||
/>
|
||
</div>
|
||
|
||
{/* Right Detail Panel */}
|
||
<aside className="w-[340px] min-w-[340px] bg-bg-1 border-l border-border flex flex-col">
|
||
{/* Header */}
|
||
<div className="p-4 border-b border-border">
|
||
<div className="text-sm font-bold mb-1 font-korean">{selectedOrg.name}</div>
|
||
<div className="text-[11px] text-text-2 font-semibold font-korean mb-1">{selectedOrg.type} · {regionShort(selectedOrg.jurisdiction)} · {selectedOrg.area}</div>
|
||
<div className="text-[11px] text-text-3 font-korean">{selectedOrg.address}</div>
|
||
</div>
|
||
|
||
{/* Sub-tabs */}
|
||
<div className="flex border-b border-border">
|
||
{(['equip', 'material', 'contact'] as const).map(t => (
|
||
<button
|
||
key={t}
|
||
onClick={() => setDetailTab(t)}
|
||
className={`flex-1 py-2.5 text-center text-[11px] font-semibold font-korean border-b-2 transition-colors cursor-pointer ${
|
||
detailTab === t
|
||
? 'text-primary-cyan border-primary-cyan'
|
||
: 'text-text-3 border-transparent hover:text-text-2'
|
||
}`}
|
||
>
|
||
{t === 'equip' ? '장비' : t === 'material' ? '자재' : '연락처'}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="flex-1 overflow-y-auto p-3.5 scrollbar-thin">
|
||
{/* Summary */}
|
||
<div className="grid grid-cols-3 gap-1.5 mb-3">
|
||
{[
|
||
{ value: `${selectedOrg.vessel}척`, label: '방제선' },
|
||
{ value: `${selectedOrg.skimmer}대`, label: '유회수기' },
|
||
{ value: String(selectedOrg.totalAssets), label: '총 자산' },
|
||
].map((s, i) => (
|
||
<div key={i} className="bg-bg-3 border border-border rounded-sm p-2.5 text-center">
|
||
<div className="text-lg font-bold text-primary-cyan font-mono">{s.value}</div>
|
||
<div className="text-[9px] text-text-3 mt-0.5 font-korean">{s.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{detailTab === 'equip' && (
|
||
<div className="flex flex-col gap-1">
|
||
{selectedOrg.equipment.length > 0 ? selectedOrg.equipment.map((cat, ci) => {
|
||
const unitMap: Record<string, string> = {
|
||
'방제선': '척', '유회수기': '대', '비치크리너': '대', '이송펌프': '대', '방제차량': '대',
|
||
'해안운반차': '대', '고압세척기': '대', '저압세척기': '대', '동력분무기': '대', '유량계측기': '대',
|
||
'방제창고': '개소', '발전기': '대', '현장지휘소': '개', '지원장비': '대', '장비부품': '개',
|
||
'경비함정방제': '대', '살포장치': '대',
|
||
}
|
||
const unit = unitMap[cat.category] || '개'
|
||
return (
|
||
<div key={ci} className="flex items-center justify-between px-2.5 py-2 bg-bg-3 border border-border rounded-sm hover:bg-bg-hover transition-colors">
|
||
<span className="text-[11px] font-semibold flex items-center gap-1.5 font-korean">
|
||
{cat.icon} {cat.category}
|
||
</span>
|
||
<span className="text-[11px] font-bold font-mono"><span className="text-primary-cyan">{cat.count}</span><span className="text-text-3 font-normal ml-0.5">{unit}</span></span>
|
||
</div>
|
||
)
|
||
}) : (
|
||
<div className="text-center text-text-3 text-xs py-8 font-korean">상세 장비 데이터가 없습니다.</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{detailTab === 'material' && (
|
||
<div className="flex flex-col gap-1.5">
|
||
{[
|
||
['방제선', `${selectedOrg.vessel}척`],
|
||
['유회수기', `${selectedOrg.skimmer}대`],
|
||
['이송펌프', `${selectedOrg.pump}대`],
|
||
['방제차량', `${selectedOrg.vehicle}대`],
|
||
['살포장치', `${selectedOrg.sprayer}대`],
|
||
['총 자산', `${selectedOrg.totalAssets}건`],
|
||
].map(([k, v], i) => (
|
||
<div key={i} className="flex justify-between px-2.5 py-2 bg-bg-0 rounded text-[11px]">
|
||
<span className="text-text-3 font-korean">{k}</span>
|
||
<span className="font-mono font-semibold text-text-1">{v}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{detailTab === 'contact' && (
|
||
<div className="bg-bg-3 border border-border rounded-sm p-3">
|
||
{selectedOrg.contacts.length > 0 ? selectedOrg.contacts.map((c, i) => (
|
||
<div key={i} className="flex flex-col gap-1 mb-3 last:mb-0">
|
||
{[
|
||
['기관/업체', c.name],
|
||
['연락처', c.phone],
|
||
].map(([k, v], j) => (
|
||
<div key={j} className="flex justify-between py-1 text-[11px]">
|
||
<span className="text-text-3 font-korean">{k}</span>
|
||
<span className="font-mono text-text-1">{v}</span>
|
||
</div>
|
||
))}
|
||
{i < selectedOrg.contacts.length - 1 && <div className="border-t border-border my-1" />}
|
||
</div>
|
||
)) : (
|
||
<div className="text-center text-text-3 text-xs py-4 font-korean">연락처 정보가 없습니다.</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Bottom Actions */}
|
||
<div className="p-3.5 border-t border-border flex gap-2">
|
||
<button className="flex-1 py-2.5 rounded-sm text-xs font-semibold font-korean text-white border-none cursor-pointer" style={{ background: 'linear-gradient(135deg, var(--cyan), var(--blue))' }}>
|
||
📥 다운로드
|
||
</button>
|
||
<button className="flex-1 py-2.5 rounded-sm text-xs font-semibold font-korean bg-bg-3 border border-border text-text-2 cursor-pointer hover:bg-bg-hover transition-colors">
|
||
✏ 수정
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Tab: 방제자원 이론 ──
|
||
|
||
interface TheoryItem {
|
||
title: string
|
||
source: string
|
||
desc: string
|
||
tags?: { label: string; color: string }[]
|
||
highlight?: boolean
|
||
}
|
||
|
||
interface TheorySection {
|
||
icon: string
|
||
title: string
|
||
color: string
|
||
bgTint: string
|
||
items: TheoryItem[]
|
||
dividerAfter?: number
|
||
dividerLabel?: string
|
||
}
|
||
|
||
const THEORY_SECTIONS: TheorySection[] = [
|
||
{
|
||
icon: '🚢', title: '방제선 성능 기준', color: 'var(--blue)', bgTint: 'rgba(59,130,246,.08)',
|
||
items: [
|
||
{
|
||
title: '해양경찰청 방제선 성능기준 고시',
|
||
source: '해양경찰청 고시 제2022-11호 | 방제선·방제정 등급별 회수용량·속력·펌프사양 기준 정의',
|
||
desc: '1~5등급 방제선 기준 · 회수능력(㎥/h) · 오일펜스 전장 탑재량 · WING 자산 등급 필터링 근거',
|
||
},
|
||
{
|
||
title: 'IMO OPRC 1990 — 방제자원 비축 기준',
|
||
source: 'International Convention on Oil Pollution Preparedness, Response and Co-operation | IMO, 1990',
|
||
desc: '국가 방제역량 비축 최저 기준 · 항만별 Tier 1/2/3 대응자원 분류 · 국내 방제자원 DB 설계 기초',
|
||
},
|
||
{
|
||
title: '해양오염방제업 등록기준 (해양환경관리법 시행규칙)',
|
||
source: '해양수산부령 | 별표 9 — 방제업 종류별 방제선·기자재 보유기준',
|
||
desc: '제1종·제2종 방제업 자산 보유기준 · 오일펜스 전장·회수기 용량 법적 최저기준 · WING 자산현황 적법성 검증 기준',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
icon: '🪢', title: '오일펜스·흡착재 규격', color: 'var(--boom, #f59e0b)', bgTint: 'rgba(245,158,11,.08)',
|
||
items: [
|
||
{
|
||
title: 'ASTM F625 — Standard Guide for Selecting Mechanical Oil Spill Equipment',
|
||
source: 'ASTM International | 오일펜스·회수기·흡착재 성능시험·선정 기준 가이드',
|
||
desc: '오일펜스 인장강도·부력기준 · 흡착포 흡수율(g/g) 측정법 · WING 자산 성능등급 분류 참조 기준',
|
||
},
|
||
{
|
||
title: '기름오염방제시 오일펜스 사용지침 (ITOPF TIP 03 한국어판)',
|
||
source: 'ITOPF | 해양경찰청·해양환경관리공단 번역, 2011',
|
||
desc: '커튼형·펜스형·해안용 규격분류 · 유속별 운용한계(0.7~3.0 kt) · 힘 계산식 F=100·A·V² · 앵커 파지력 기준표',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
icon: '⚙️', title: '방제자원 배치·동원 이론', color: 'var(--purple)', bgTint: 'rgba(168,85,247,.08)',
|
||
dividerAfter: 2, dividerLabel: '📐 최적화 수리모델 참고문헌',
|
||
items: [
|
||
{
|
||
title: 'An Emergency Scheduling Model for Oil Containment Boom in Dynamically Changing Marine Oil Spills',
|
||
source: 'Xu, Y. et al. | Ningbo Univ. | Systems 2025, 13, 716 · DOI: 10.3390/systems13080716',
|
||
desc: 'IMOGWO 다목적 최적화 · 스케줄링 시간+경제·생태손실 동시 최소화 · 동적 오일필름 기반 방제정 라우팅',
|
||
highlight: true,
|
||
},
|
||
{
|
||
title: 'Dynamic Resource Allocation to Support Oil Spill Response Planning',
|
||
source: 'Garrett, R.A. et al. | Eur. J. Oper. Res. 257:272–286, 2017',
|
||
desc: '불확실성 하 방제자원 동적 배분 최적화 · 시나리오별 비축량 산정 · WING 자산 우선순위 배치 알고리즘 이론 기반',
|
||
},
|
||
{
|
||
title: '해양오염방제 국가긴급방제계획 (NOSCP)',
|
||
source: '해양경찰청 | 국가긴급방제계획, 2023년판',
|
||
desc: 'Tier 3급 대형사고 자원 동원체계 · 기관별 역할분담·지휘계통 · WING 방제자산 연계 법적 근거',
|
||
},
|
||
{
|
||
title: 'A Mixed Integer Programming Approach to Improve Oil Spill Response Resource Allocation in the Canadian Arctic',
|
||
source: 'Das, T., Goerlandt, F. & Pelot, R. | Multimodal Transportation Vol.3 No.1, 100110, 2023',
|
||
desc: '혼합정수계획법으로 응급 방제자원 거점 위치 선택 + 자원 할당 동시 최적화. 비용·응답시간 트레이드오프 파레토 분석.',
|
||
highlight: true,
|
||
tags: [
|
||
{ label: 'MIP 수리모델', color: 'var(--purple)' },
|
||
{ label: '자원 위치 선택', color: 'var(--blue)' },
|
||
{ label: '북극해 적용', color: 'var(--cyan)' },
|
||
],
|
||
},
|
||
{
|
||
title: '유전알고리즘을 이용하여 최적화된 방제자원 배치안의 분포도 분석',
|
||
source: '김혜진, 김용혁 | 한국융합학회논문지 Vol.11 No.4, pp.11–16, 2020',
|
||
desc: 'GA(유전알고리즘)로 방제자원 배치 최적화 및 시뮬레이션 분포도 분석. 국내 해역 실정에 맞는 자원 배치 패턴 도출.',
|
||
highlight: true,
|
||
tags: [
|
||
{ label: 'GA 메타휴리스틱', color: 'var(--purple)' },
|
||
{ label: '국내 연구', color: 'var(--green, #22c55e)' },
|
||
{ label: '배치 분포도 분석', color: 'var(--boom, #f59e0b)' },
|
||
],
|
||
},
|
||
{
|
||
title: 'A Two-Stage Stochastic Optimization Framework for Environmentally Sensitive Oil Spill Response Resource Allocation',
|
||
source: 'Rahman, M.A., Kuhel, M.T. & Novoa, C. | arXiv preprint arXiv:2511.22218, 2025',
|
||
desc: '확률적 MILP 2단계 프레임워크로 불확실성 포함 최적 자원 배치. 환경민감구역 가중치 반영.',
|
||
highlight: true,
|
||
tags: [
|
||
{ label: '확률적 MILP', color: 'var(--purple)' },
|
||
{ label: '2단계 최적화', color: 'var(--blue)' },
|
||
{ label: '환경민감구역', color: 'var(--green, #22c55e)' },
|
||
],
|
||
},
|
||
{
|
||
title: 'Mixed-Integer Dynamic Optimization for Oil-Spill Response Planning with Integration of Dynamic Oil Weathering Model',
|
||
source: 'You, F. & Leyffer, S. | Argonne National Laboratory Technical Note, 2008',
|
||
desc: '동적 최적화(MINLP/MILP) 프레임워크로 오일스필 대응 스케줄링 + 오일 풍화·거동 물리모델 통합.',
|
||
highlight: true,
|
||
tags: [
|
||
{ label: 'MINLP 동적 최적화', color: 'var(--purple)' },
|
||
{ label: '오일 풍화 모델 통합', color: 'var(--boom, #f59e0b)' },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
icon: '🗄', title: '자산 현행화·데이터 관리', color: 'var(--green, #22c55e)', bgTint: 'rgba(34,197,94,.08)',
|
||
items: [
|
||
{
|
||
title: '해양오염방제자원 현황관리 지침',
|
||
source: '해양경찰청 예규 | 방제자원 등록·현행화·이력관리 절차 규정',
|
||
desc: '분기별 자산 실사 기준 · 자산분류코드 체계 · WING 업로드 양식(xlsx) 필드 정의 근거',
|
||
},
|
||
{
|
||
title: 'ISO 55000 — Asset Management: Overview, Principles and Terminology',
|
||
source: 'International Organization for Standardization | ISO 55000:2014',
|
||
desc: '자산 생애주기 관리 원칙 · 자산가치·상태 평가 프레임워크 · WING 자산 노후도·교체주기 산정 이론 기준',
|
||
},
|
||
],
|
||
},
|
||
]
|
||
|
||
const TAG_COLORS: Record<string, { bg: string; bd: string; fg: string }> = {
|
||
'var(--purple)': { bg: 'rgba(168,85,247,0.08)', bd: 'rgba(168,85,247,0.2)', fg: '#a855f7' },
|
||
'var(--blue)': { bg: 'rgba(59,130,246,0.08)', bd: 'rgba(59,130,246,0.2)', fg: '#3b82f6' },
|
||
'var(--cyan)': { bg: 'rgba(6,182,212,0.08)', bd: 'rgba(6,182,212,0.2)', fg: '#06b6d4' },
|
||
'var(--green, #22c55e)': { bg: 'rgba(34,197,94,0.08)', bd: 'rgba(34,197,94,0.2)', fg: '#22c55e' },
|
||
'var(--boom, #f59e0b)': { bg: 'rgba(245,158,11,0.08)', bd: 'rgba(245,158,11,0.2)', fg: '#f59e0b' },
|
||
}
|
||
|
||
function AssetTheoryTab() {
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
|
||
<div style={{ fontSize: '18px', fontWeight: 700, fontFamily: 'var(--fK)', marginBottom: '4px' }}>
|
||
📚 방제자원 이론
|
||
</div>
|
||
<div style={{ fontSize: '12px', color: 'var(--t3)', fontFamily: 'var(--fK)', marginBottom: '24px' }}>
|
||
방제자산 운용 기준·성능 이론 및 관련 법령·고시 근거 문헌
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '18px', alignItems: 'start' }}>
|
||
{/* Left column */}
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
||
{THEORY_SECTIONS.slice(0, 2).map((sec) => (
|
||
<TheoryCard key={sec.title} section={sec} />
|
||
))}
|
||
</div>
|
||
{/* Right column */}
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
||
{THEORY_SECTIONS.slice(2).map((sec) => (
|
||
<TheoryCard key={sec.title} section={sec} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function TheoryCard({ section }: { section: TheorySection }) {
|
||
const badgeBg = section.bgTint.replace(/[\d.]+\)$/, '0.15)')
|
||
return (
|
||
<div style={{
|
||
background: 'var(--bg3)', border: '1px solid var(--bd)',
|
||
borderRadius: 'var(--rM, 10px)', overflow: 'hidden',
|
||
}}>
|
||
{/* Section Header */}
|
||
<div style={{
|
||
padding: '12px 16px', background: section.bgTint,
|
||
borderBottom: '1px solid var(--bd)',
|
||
display: 'flex', alignItems: 'center', gap: '8px',
|
||
}}>
|
||
<span style={{ fontSize: '14px' }}>{section.icon}</span>
|
||
<span style={{ fontSize: '12px', fontWeight: 700, color: section.color, fontFamily: 'var(--fK)' }}>
|
||
{section.title}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Items */}
|
||
<div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: '8px', fontSize: '9px', fontFamily: 'var(--fK)' }}>
|
||
{section.items.map((item, i) => (
|
||
<div key={i}>
|
||
{/* Divider */}
|
||
{section.dividerAfter !== undefined && i === section.dividerAfter + 1 && (
|
||
<div style={{ borderTop: '1px dashed var(--bd)', margin: '4px 0 12px', paddingTop: '8px' }}>
|
||
<div style={{ fontSize: '8px', fontWeight: 700, color: section.color, marginBottom: '6px', opacity: 0.7 }}>
|
||
{section.dividerLabel}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div style={{
|
||
display: 'grid', gridTemplateColumns: '24px 1fr', gap: '8px',
|
||
padding: '8px 10px', background: 'var(--bg0)', borderRadius: '6px',
|
||
borderLeft: item.highlight ? `2px solid ${section.color}` : undefined,
|
||
}}>
|
||
{/* Number badge */}
|
||
<div style={{
|
||
width: '20px', height: '20px', borderRadius: '4px',
|
||
background: badgeBg,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
fontSize: '9px', flexShrink: 0,
|
||
fontWeight: item.highlight ? 700 : 400,
|
||
color: item.highlight ? section.color : undefined,
|
||
}}>
|
||
{['①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩'][i]}
|
||
</div>
|
||
<div>
|
||
<div style={{ color: 'var(--t1)', fontWeight: 700, marginBottom: '2px' }}>
|
||
{item.title}
|
||
</div>
|
||
<div style={{ color: 'var(--t3)', lineHeight: '1.6' }}>
|
||
{item.source}
|
||
</div>
|
||
{/* Tags */}
|
||
{item.tags && (
|
||
<div style={{ marginTop: '3px', display: 'flex', flexWrap: 'wrap', gap: '3px' }}>
|
||
{item.tags.map((tag, ti) => {
|
||
const tc = TAG_COLORS[tag.color] || { bg: 'rgba(107,114,128,0.08)', bd: 'rgba(107,114,128,0.2)', fg: '#6b7280' }
|
||
return (
|
||
<span key={ti} style={{
|
||
padding: '1px 5px', borderRadius: '3px', fontSize: '8px',
|
||
color: tc.fg, background: tc.bg, border: `1px solid ${tc.bd}`,
|
||
}}>
|
||
{tag.label}
|
||
</span>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
<div style={{ marginTop: '2px', color: 'var(--t2)' }}>
|
||
{item.desc}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Tab 1: 자산 현행화 (업로드) ──
|
||
|
||
function AssetUploadTab() {
|
||
const [uploadMode, setUploadMode] = useState<'add' | 'replace'>('add')
|
||
const [uploaded, setUploaded] = useState(false)
|
||
|
||
const handleUpload = () => {
|
||
setUploaded(true)
|
||
setTimeout(() => setUploaded(false), 3000)
|
||
}
|
||
|
||
return (
|
||
<div className="flex gap-8 h-full overflow-auto">
|
||
{/* Left - Upload */}
|
||
<div className="flex-1 max-w-[580px]">
|
||
<div className="text-[13px] font-bold mb-3.5 font-korean">📤 자산 데이터 업로드</div>
|
||
|
||
{/* Drop Zone */}
|
||
<div className="border-2 border-dashed border-border-light rounded-md py-10 px-5 text-center mb-5 cursor-pointer hover:border-primary-cyan/40 transition-colors">
|
||
<div className="text-4xl mb-2.5 opacity-50">📁</div>
|
||
<div className="text-sm font-semibold mb-1.5 font-korean">파일을 드래그하거나 클릭하여 업로드</div>
|
||
<div className="text-[11px] text-text-3 mb-4 font-korean">엑셀(.xlsx), CSV 파일 지원 · 최대 10MB</div>
|
||
<button className="px-7 py-2.5 text-[13px] font-semibold rounded-sm text-white border-none cursor-pointer font-korean" style={{ background: 'linear-gradient(135deg, var(--blue), #2563eb)' }}>
|
||
파일 선택
|
||
</button>
|
||
</div>
|
||
|
||
{/* Asset Classification */}
|
||
<div className="mb-4">
|
||
<label className="block text-xs font-semibold mb-1.5 text-text-2 font-korean">자산 분류</label>
|
||
<select className="prd-i w-full">
|
||
<option>장비자재</option>
|
||
<option>방제선</option>
|
||
<option>경비함정</option>
|
||
<option>방제창고</option>
|
||
<option>공단·지자체</option>
|
||
<option>MPRS·행안부</option>
|
||
</select>
|
||
</div>
|
||
|
||
{/* Jurisdiction */}
|
||
<div className="mb-4">
|
||
<label className="block text-xs font-semibold mb-1.5 text-text-2 font-korean">업로드 대상 관할</label>
|
||
<select className="prd-i w-full">
|
||
<option>남해청 - 여수서</option>
|
||
<option>남해청 - 부산서</option>
|
||
<option>남해청 - 울산서</option>
|
||
<option>서해청 - 목포서</option>
|
||
<option>중부청 - 인천서</option>
|
||
<option>동해청 - 동해서</option>
|
||
<option>제주청 - 제주서</option>
|
||
</select>
|
||
</div>
|
||
|
||
{/* Upload Mode */}
|
||
<div className="mb-5">
|
||
<label className="block text-xs font-semibold mb-1.5 text-text-2 font-korean">업로드 방식</label>
|
||
<div className="flex gap-4 text-xs text-text-2 font-korean">
|
||
<label className="flex items-center gap-1.5 cursor-pointer">
|
||
<input type="radio" checked={uploadMode === 'add'} onChange={() => setUploadMode('add')} className="accent-primary-blue" />
|
||
추가 (기존 + 신규)
|
||
</label>
|
||
<label className="flex items-center gap-1.5 cursor-pointer">
|
||
<input type="radio" checked={uploadMode === 'replace'} onChange={() => setUploadMode('replace')} className="accent-primary-blue" />
|
||
전체 교체
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Upload Button */}
|
||
<button
|
||
onClick={handleUpload}
|
||
className={`w-full py-3.5 rounded-sm text-sm font-bold font-korean border-none cursor-pointer transition-all ${
|
||
uploaded
|
||
? 'bg-[rgba(34,197,94,0.2)] text-status-green border border-status-green'
|
||
: 'text-white'
|
||
}`}
|
||
style={!uploaded ? { background: 'linear-gradient(135deg, var(--blue), #2563eb)' } : undefined}
|
||
>
|
||
{uploaded ? '✅ 업로드 완료!' : '📤 업로드 실행'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Right - Permission & History */}
|
||
<div className="flex-1 max-w-[480px]">
|
||
{/* Permission System */}
|
||
<div className="text-[13px] font-bold mb-3.5 font-korean">🔐 수정 권한 체계</div>
|
||
<div className="flex flex-col gap-2 mb-7">
|
||
{[
|
||
{ icon: '👑', role: '본청 관리자', desc: '전체 자산 조회·수정·삭제·업로드', color: 'text-status-red', bg: 'rgba(239,68,68,0.15)' },
|
||
{ icon: '🏛', role: '지방청 담당자', desc: '소속 지방청 및 하위 해경서 자산 수정·업로드', color: 'text-status-orange', bg: 'rgba(249,115,22,0.15)' },
|
||
{ icon: '⚓', role: '해경서 담당자', desc: '소속 해경서 자산 수정·업로드', color: 'text-primary-blue', bg: 'rgba(59,130,246,0.15)' },
|
||
{ icon: '👤', role: '일반 사용자', desc: '조회·다운로드만 가능', color: 'text-text-2', bg: 'rgba(100,116,139,0.15)' },
|
||
].map((p, i) => (
|
||
<div key={i} className="flex items-center gap-3 p-3.5 px-4 bg-bg-3 border border-border rounded-sm">
|
||
<div className="w-9 h-9 rounded-full flex items-center justify-center text-base" style={{ background: p.bg }}>{p.icon}</div>
|
||
<div>
|
||
<div className={`text-xs font-bold font-korean ${p.color}`}>{p.role}</div>
|
||
<div className="text-[10px] text-text-3 font-korean">{p.desc}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Upload History */}
|
||
<div className="text-[13px] font-bold mb-3.5 font-korean">📋 최근 업로드 이력</div>
|
||
<div className="flex flex-col gap-2">
|
||
{uploadHistory.map((h, i) => (
|
||
<div key={i} className="flex justify-between items-center p-3.5 px-4 bg-bg-3 border border-border rounded-sm">
|
||
<div>
|
||
<div className="text-xs font-semibold font-korean">{h.filename}</div>
|
||
<div className="text-[10px] text-text-3 mt-0.5 font-korean">{h.date} · {h.uploader} · {h.count}건</div>
|
||
</div>
|
||
<span className="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-[rgba(34,197,94,0.15)] text-status-green">완료</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Tab 2: 선박 보험정보 — 한국해운조합 API 연동 ──
|
||
|
||
function ShipInsuranceTab() {
|
||
const [apiConnected, setApiConnected] = useState(false)
|
||
const [showConfig, setShowConfig] = useState(false)
|
||
const [configEndpoint, setConfigEndpoint] = useState('https://api.haewoon.or.kr/v1/insurance')
|
||
const [configApiKey, setConfigApiKey] = useState('')
|
||
const [configKeyType, setConfigKeyType] = useState('mmsi')
|
||
const [configRespType, setConfigRespType] = useState('json')
|
||
const [searchType, setSearchType] = useState('mmsi')
|
||
const [searchVal, setSearchVal] = useState('')
|
||
const [insTypeFilter, setInsTypeFilter] = useState('전체')
|
||
const [viewState, setViewState] = useState<'empty' | 'loading' | 'result'>('empty')
|
||
const [resultData, setResultData] = useState<InsuranceRow[]>([])
|
||
const [lastSync, setLastSync] = useState('—')
|
||
|
||
const placeholderMap: Record<string, string> = {
|
||
mmsi: 'MMSI 번호 입력 (예: 440123456)',
|
||
imo: 'IMO 번호 입력 (예: 9876543)',
|
||
shipname: '선박명 입력 (예: 한라호)',
|
||
callsign: '호출부호 입력 (예: HLXX1)',
|
||
}
|
||
|
||
const getStatus = (expiry: string) => {
|
||
const now = new Date()
|
||
const exp = new Date(expiry)
|
||
const daysLeft = Math.ceil((exp.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
|
||
if (exp < now) return 'expired' as const
|
||
if (daysLeft <= 30) return 'soon' as const
|
||
return 'valid' as const
|
||
}
|
||
|
||
const handleSaveConfig = () => {
|
||
if (!configApiKey) { alert('API Key를 입력하세요.'); return }
|
||
setShowConfig(false)
|
||
alert('API 설정이 저장되었습니다.')
|
||
}
|
||
|
||
const handleTestConnect = async () => {
|
||
await new Promise(r => setTimeout(r, 1200))
|
||
alert('⚠ API Key가 설정되지 않았습니다.\n[API 설정] 버튼에서 한국해운조합 API Key를 먼저 등록하세요.')
|
||
}
|
||
|
||
const loadDemoData = () => {
|
||
setResultData(insuranceDemoData)
|
||
setViewState('result')
|
||
setApiConnected(false)
|
||
setLastSync(new Date().toLocaleString('ko-KR'))
|
||
}
|
||
|
||
const handleQuery = async () => {
|
||
if (!searchVal.trim()) { alert('조회값을 입력하세요.'); return }
|
||
setViewState('loading')
|
||
await new Promise(r => setTimeout(r, 900))
|
||
loadDemoData()
|
||
}
|
||
|
||
const handleBatchQuery = async () => {
|
||
setViewState('loading')
|
||
await new Promise(r => setTimeout(r, 1400))
|
||
loadDemoData()
|
||
}
|
||
|
||
const handleFullSync = async () => {
|
||
setLastSync('동기화 중...')
|
||
await new Promise(r => setTimeout(r, 1000))
|
||
setLastSync(new Date().toLocaleString('ko-KR'))
|
||
alert('전체 동기화는 API 연동 후 활성화됩니다.')
|
||
}
|
||
|
||
// summary computation
|
||
const validCount = resultData.filter(r => getStatus(r.expiry) !== 'expired').length
|
||
const soonList = resultData.filter(r => getStatus(r.expiry) === 'soon')
|
||
const expiredList = resultData.filter(r => getStatus(r.expiry) === 'expired')
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'auto' }}>
|
||
|
||
{/* ── 헤더 ── */}
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 20 }}>
|
||
<div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
|
||
<div style={{ fontSize: 18, fontWeight: 700, fontFamily: 'var(--fK)' }}>🛡 선박 보험정보 조회</div>
|
||
<div style={{
|
||
display: 'flex', alignItems: 'center', gap: 5, padding: '3px 10px', borderRadius: 10,
|
||
fontSize: 10, fontWeight: 700, fontFamily: 'var(--fK)',
|
||
background: apiConnected ? 'rgba(34,197,94,.12)' : 'rgba(239,68,68,.12)',
|
||
color: apiConnected ? 'var(--green)' : 'var(--red)',
|
||
border: `1px solid ${apiConnected ? 'rgba(34,197,94,.25)' : 'rgba(239,68,68,.25)'}`,
|
||
}}>
|
||
<span style={{ width: 6, height: 6, borderRadius: '50%', background: apiConnected ? 'var(--green)' : 'var(--red)', display: 'inline-block' }} />
|
||
{apiConnected ? 'API 연결됨' : 'API 미연결'}
|
||
</div>
|
||
</div>
|
||
<div style={{ fontSize: 12, color: 'var(--t3)', fontFamily: 'var(--fK)' }}>한국해운조합(KSA) Open API 연동 · 선박 P&I 보험 및 선주 책임보험 실시간 조회</div>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<button onClick={handleTestConnect} style={{ padding: '8px 16px', background: 'rgba(6,182,212,.12)', color: 'var(--cyan)', border: '1px solid rgba(6,182,212,.3)', borderRadius: 'var(--rS)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'var(--fK)' }}>🔌 연결 테스트</button>
|
||
<button onClick={() => setShowConfig(v => !v)} style={{ padding: '8px 16px', background: 'var(--bg3)', color: 'var(--t2)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'var(--fK)' }}>⚙ API 설정</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── API 설정 패널 ── */}
|
||
{showConfig && (
|
||
<div style={{ background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 'var(--rM)', padding: '20px 24px', marginBottom: 20 }}>
|
||
<div style={{ fontSize: 13, fontWeight: 700, fontFamily: 'var(--fK)', marginBottom: 14, color: 'var(--cyan)' }}>⚙ 한국해운조합 API 연동 설정</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--t2)', fontFamily: 'var(--fK)', marginBottom: 5 }}>API Endpoint URL</label>
|
||
<input type="text" value={configEndpoint} onChange={e => setConfigEndpoint(e.target.value)} placeholder="https://api.haewoon.or.kr/v1/..."
|
||
style={{ width: '100%', padding: '9px 12px', background: 'var(--bg0)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)', color: 'var(--t1)', fontFamily: 'var(--fM)', fontSize: 12, outline: 'none', boxSizing: 'border-box' }} />
|
||
</div>
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--t2)', fontFamily: 'var(--fK)', marginBottom: 5 }}>API Key</label>
|
||
<input type="password" value={configApiKey} onChange={e => setConfigApiKey(e.target.value)} placeholder="발급받은 API Key 입력"
|
||
style={{ width: '100%', padding: '9px 12px', background: 'var(--bg0)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)', color: 'var(--t1)', fontFamily: 'var(--fM)', fontSize: 12, outline: 'none', boxSizing: 'border-box' }} />
|
||
</div>
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--t2)', fontFamily: 'var(--fK)', marginBottom: 5 }}>조회 기본값 — 조회 키 타입</label>
|
||
<select value={configKeyType} onChange={e => setConfigKeyType(e.target.value)} className="prd-i" style={{ borderColor: 'var(--bd)', width: '100%' }}>
|
||
<option value="mmsi">MMSI</option>
|
||
<option value="imo">IMO 번호</option>
|
||
<option value="shipname">선박명</option>
|
||
<option value="callsign">호출부호</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--t2)', fontFamily: 'var(--fK)', marginBottom: 5 }}>응답 형식</label>
|
||
<select value={configRespType} onChange={e => setConfigRespType(e.target.value)} className="prd-i" style={{ borderColor: 'var(--bd)', width: '100%' }}>
|
||
<option value="json">JSON</option>
|
||
<option value="xml">XML</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<button onClick={handleSaveConfig} style={{ padding: '9px 20px', background: 'linear-gradient(135deg, var(--cyan), var(--blue))', color: '#fff', border: 'none', borderRadius: 'var(--rS)', fontSize: 12, fontWeight: 700, cursor: 'pointer', fontFamily: 'var(--fK)' }}>💾 저장</button>
|
||
<button onClick={() => setShowConfig(false)} style={{ padding: '9px 16px', background: 'var(--bg0)', color: 'var(--t2)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)', fontSize: 12, cursor: 'pointer', fontFamily: 'var(--fK)' }}>취소</button>
|
||
</div>
|
||
{/* API 연동 안내 */}
|
||
<div style={{ marginTop: 16, padding: '12px 16px', background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.15)', borderRadius: 'var(--rS)', fontSize: 10, color: 'var(--t3)', fontFamily: 'var(--fK)', lineHeight: 1.8 }}>
|
||
<span style={{ color: 'var(--cyan)', fontWeight: 700 }}>📋 한국해운조합 API 발급 안내</span><br />
|
||
• 한국해운조합 공공데이터포털 또는 해운조합 IT지원팀에 API 키 신청<br />
|
||
• 해양경찰청 기관 계정으로 신청 시 전용 엔드포인트 및 키 발급<br />
|
||
• 조회 가능 데이터: P&I 보험, 선주책임보험, 해상보험 가입 여부, 증권번호, 보험기간, 보상한도
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── 검색 영역 ── */}
|
||
<div style={{ background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 'var(--rM)', padding: '18px 20px', marginBottom: 16 }}>
|
||
<div style={{ fontSize: 12, fontWeight: 700, fontFamily: 'var(--fK)', marginBottom: 12, color: 'var(--t2)' }}>🔍 보험정보 조회</div>
|
||
<div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', flexWrap: 'wrap' }}>
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 10, fontWeight: 600, color: 'var(--t3)', fontFamily: 'var(--fK)', marginBottom: 4 }}>조회 키 타입</label>
|
||
<select value={searchType} onChange={e => setSearchType(e.target.value)} className="prd-i" style={{ borderColor: 'var(--bd)', minWidth: 120 }}>
|
||
<option value="mmsi">MMSI</option>
|
||
<option value="imo">IMO 번호</option>
|
||
<option value="shipname">선박명</option>
|
||
<option value="callsign">호출부호</option>
|
||
</select>
|
||
</div>
|
||
<div style={{ flex: 1, minWidth: 220 }}>
|
||
<label style={{ display: 'block', fontSize: 10, fontWeight: 600, color: 'var(--t3)', fontFamily: 'var(--fK)', marginBottom: 4 }}>조회값</label>
|
||
<input type="text" value={searchVal} onChange={e => setSearchVal(e.target.value)} placeholder={placeholderMap[searchType]}
|
||
style={{ width: '100%', padding: '9px 14px', background: 'var(--bg0)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)', color: 'var(--t1)', fontFamily: 'var(--fM)', fontSize: 13, outline: 'none', boxSizing: 'border-box' }} />
|
||
</div>
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 10, fontWeight: 600, color: 'var(--t3)', fontFamily: 'var(--fK)', marginBottom: 4 }}>보험 종류</label>
|
||
<select value={insTypeFilter} onChange={e => setInsTypeFilter(e.target.value)} className="prd-i" style={{ borderColor: 'var(--bd)', minWidth: 140 }}>
|
||
<option>전체</option>
|
||
<option>P&I 보험</option>
|
||
<option>선주책임보험</option>
|
||
<option>해상보험(선박)</option>
|
||
<option>방제보증보험</option>
|
||
</select>
|
||
</div>
|
||
<button onClick={handleQuery} style={{ padding: '9px 24px', background: 'linear-gradient(135deg, var(--cyan), var(--blue))', color: '#fff', border: 'none', borderRadius: 'var(--rS)', fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'var(--fK)', flexShrink: 0 }}>🔍 조회</button>
|
||
<button onClick={handleBatchQuery} style={{ padding: '9px 18px', background: 'rgba(168,85,247,.12)', color: 'var(--purple)', border: '1px solid rgba(168,85,247,.3)', borderRadius: 'var(--rS)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'var(--fK)', flexShrink: 0 }}>📋 자산목록 일괄조회</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── 결과 영역 ── */}
|
||
|
||
{/* 초기 안내 상태 */}
|
||
{viewState === 'empty' && (
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '60px 20px', background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 'var(--rM)' }}>
|
||
<div style={{ fontSize: 48, marginBottom: 16, opacity: 0.3 }}>🛡</div>
|
||
<div style={{ fontSize: 14, fontWeight: 700, color: 'var(--t2)', fontFamily: 'var(--fK)', marginBottom: 8 }}>한국해운조합 API 연동 대기 중</div>
|
||
<div style={{ fontSize: 12, color: 'var(--t3)', fontFamily: 'var(--fK)', textAlign: 'center', lineHeight: 1.8 }}>
|
||
API 설정에서 한국해운조합 API Key를 등록하거나<br />
|
||
MMSI·IMO·선박명으로 직접 조회하세요.<br />
|
||
<span style={{ color: 'var(--cyan)' }}>자산목록 일괄조회</span> 시 등록된 방제자산 전체의 보험 현황을 한번에 확인할 수 있습니다.
|
||
</div>
|
||
<div style={{ marginTop: 20, display: 'flex', gap: 10 }}>
|
||
<button onClick={() => setShowConfig(true)} style={{ padding: '10px 20px', background: 'rgba(6,182,212,.12)', color: 'var(--cyan)', border: '1px solid rgba(6,182,212,.3)', borderRadius: 'var(--rS)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'var(--fK)' }}>⚙ API 설정</button>
|
||
<button onClick={loadDemoData} style={{ padding: '10px 20px', background: 'var(--bg0)', color: 'var(--t2)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'var(--fK)' }}>📊 샘플 데이터 보기</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 로딩 */}
|
||
{viewState === 'loading' && (
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 60, background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 'var(--rM)' }}>
|
||
<div style={{ width: 36, height: 36, border: '3px solid var(--bd)', borderTopColor: 'var(--cyan)', borderRadius: '50%', animation: 'spin 0.8s linear infinite', marginBottom: 14 }} />
|
||
<div style={{ fontSize: 13, color: 'var(--t2)', fontFamily: 'var(--fK)' }}>한국해운조합 API 조회 중...</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 결과 테이블 */}
|
||
{viewState === 'result' && (
|
||
<>
|
||
{/* 요약 카드 */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 14 }}>
|
||
{[
|
||
{ label: '전체', val: resultData.length, color: 'var(--cyan)', bg: 'rgba(6,182,212,.08)' },
|
||
{ label: '유효', val: validCount, color: 'var(--green)', bg: 'rgba(34,197,94,.08)' },
|
||
{ label: '만료임박(30일)', val: soonList.length, color: 'var(--yellow)', bg: 'rgba(234,179,8,.08)' },
|
||
{ label: '만료/미가입', val: resultData.length - validCount, color: 'var(--red)', bg: 'rgba(239,68,68,.08)' },
|
||
].map((c, i) => (
|
||
<div key={i} style={{ padding: '14px 16px', background: c.bg, border: `1px solid ${c.color}33`, borderRadius: 'var(--rS)', textAlign: 'center' }}>
|
||
<div style={{ fontSize: 22, fontWeight: 800, color: c.color, fontFamily: 'var(--fM)' }}>{c.val}</div>
|
||
<div style={{ fontSize: 10, color: 'var(--t3)', fontFamily: 'var(--fK)', marginTop: 2 }}>{c.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 테이블 */}
|
||
<div style={{ background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 'var(--rM)', overflow: 'hidden', marginBottom: 12 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderBottom: '1px solid var(--bd)' }}>
|
||
<div style={{ fontSize: 12, fontWeight: 700, fontFamily: 'var(--fK)', color: 'var(--t1)' }}>조회 결과 <span style={{ color: 'var(--cyan)' }}>{resultData.length}</span>건</div>
|
||
<div style={{ display: 'flex', gap: 6 }}>
|
||
<button onClick={() => alert('엑셀 내보내기 기능은 실제 API 연동 후 활성화됩니다.')} style={{ padding: '5px 12px', background: 'rgba(34,197,94,.1)', color: 'var(--green)', border: '1px solid rgba(34,197,94,.25)', borderRadius: 'var(--rS)', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'var(--fK)' }}>📥 엑셀 내보내기</button>
|
||
<button onClick={handleQuery} style={{ padding: '5px 12px', background: 'var(--bg0)', color: 'var(--t2)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)', fontSize: 11, cursor: 'pointer', fontFamily: 'var(--fK)' }}>🔄 새로고침</button>
|
||
</div>
|
||
</div>
|
||
<div style={{ overflowX: 'auto' }}>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 11, fontFamily: 'var(--fK)' }}>
|
||
<thead>
|
||
<tr style={{ background: 'var(--bg0)' }}>
|
||
{[
|
||
{ label: '선박명', align: 'left' },
|
||
{ label: 'MMSI', align: 'center' },
|
||
{ label: 'IMO', align: 'center' },
|
||
{ label: '보험종류', align: 'center' },
|
||
{ label: '보험사', align: 'center' },
|
||
{ label: '증권번호', align: 'center' },
|
||
{ label: '보험기간', align: 'center' },
|
||
{ label: '보상한도', align: 'right' },
|
||
{ label: '상태', align: 'center' },
|
||
].map((h, i) => (
|
||
<th key={i} style={{ padding: '10px 14px', textAlign: h.align as 'left' | 'center' | 'right', fontWeight: 700, color: 'var(--t2)', borderBottom: '1px solid var(--bd)', whiteSpace: 'nowrap' }}>{h.label}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{resultData.map((r, i) => {
|
||
const st = getStatus(r.expiry)
|
||
const isExp = st === 'expired'
|
||
const isSoon = st === 'soon'
|
||
return (
|
||
<tr key={i} style={{ borderBottom: '1px solid var(--bd)', background: isExp ? 'rgba(239,68,68,.03)' : undefined }}>
|
||
<td style={{ padding: '10px 14px', fontWeight: 600 }}>{r.shipName}</td>
|
||
<td style={{ padding: '10px 14px', textAlign: 'center', fontFamily: 'var(--fM)', fontSize: 11 }}>{r.mmsi || '—'}</td>
|
||
<td style={{ padding: '10px 14px', textAlign: 'center', fontFamily: 'var(--fM)', fontSize: 11 }}>{r.imo || '—'}</td>
|
||
<td style={{ padding: '10px 14px', textAlign: 'center' }}>{r.insType}</td>
|
||
<td style={{ padding: '10px 14px', textAlign: 'center' }}>{r.insurer}</td>
|
||
<td style={{ padding: '10px 14px', textAlign: 'center', fontFamily: 'var(--fM)', fontSize: 10, color: 'var(--t3)' }}>{r.policyNo}</td>
|
||
<td style={{ padding: '10px 14px', textAlign: 'center', fontFamily: 'var(--fM)', fontSize: 11, color: isExp ? 'var(--red)' : isSoon ? 'var(--yellow)' : undefined, fontWeight: isExp || isSoon ? 700 : undefined }}>{r.start} ~ {r.expiry}</td>
|
||
<td style={{ padding: '10px 14px', textAlign: 'right', fontWeight: 700, fontFamily: 'var(--fM)' }}>{r.limit}</td>
|
||
<td style={{ padding: '10px 14px', textAlign: 'center' }}>
|
||
<span style={{
|
||
padding: '3px 10px', borderRadius: 10, fontSize: 10, fontWeight: 600,
|
||
background: isExp ? 'rgba(239,68,68,.15)' : isSoon ? 'rgba(234,179,8,.15)' : 'rgba(34,197,94,.15)',
|
||
color: isExp ? 'var(--red)' : isSoon ? 'var(--yellow)' : 'var(--green)',
|
||
}}>
|
||
{isExp ? '만료' : isSoon ? '만료임박' : '유효'}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
)
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 경고 */}
|
||
{(expiredList.length > 0 || soonList.length > 0) && (
|
||
<div style={{ padding: '12px 16px', background: 'rgba(234,179,8,.06)', border: '1px solid rgba(234,179,8,.25)', borderRadius: 'var(--rS)', fontSize: 12, color: 'var(--t2)', fontFamily: 'var(--fK)', marginBottom: 12 }}>
|
||
{expiredList.length > 0 && (
|
||
<><span style={{ color: 'var(--red)', fontWeight: 700 }}>⛔ 만료 {expiredList.length}건:</span> {expiredList.map(r => r.shipName).join(', ')}<br /></>
|
||
)}
|
||
{soonList.length > 0 && (
|
||
<><span style={{ color: 'var(--yellow)', fontWeight: 700 }}>⚠ 만료임박(30일) {soonList.length}건:</span> {soonList.map(r => r.shipName).join(', ')}</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* ── API 연동 정보 푸터 ── */}
|
||
<div style={{ marginTop: 16, padding: '12px 16px', background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<div style={{ fontSize: 10, color: 'var(--t3)', fontFamily: 'var(--fK)', lineHeight: 1.7 }}>
|
||
<span style={{ color: 'var(--t2)', fontWeight: 700 }}>데이터 출처:</span> 한국해운조합(KSA) · haewoon.or.kr<br />
|
||
<span style={{ color: 'var(--t2)', fontWeight: 700 }}>연동 방식:</span> REST API (JSON) · 실시간 조회 · 캐시 TTL 1시간
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||
<span style={{ fontSize: 10, color: 'var(--t3)', fontFamily: 'var(--fK)' }}>마지막 동기화:</span>
|
||
<span style={{ fontSize: 10, color: 'var(--t2)', fontFamily: 'var(--fM)' }}>{lastSync}</span>
|
||
<button onClick={handleFullSync} style={{ padding: '4px 10px', background: 'var(--bg0)', color: 'var(--t2)', border: '1px solid var(--bd)', borderRadius: 4, fontSize: 10, cursor: 'pointer', fontFamily: 'var(--fK)' }}>전체 동기화</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Main AssetsView ──
|
||
|
||
export function AssetsView() {
|
||
const [activeTab, setActiveTab] = useState<AssetsTab>('management')
|
||
|
||
return (
|
||
<div className="flex flex-col h-full w-full bg-bg-0">
|
||
{/* Tab Navigation */}
|
||
<div className="flex items-center justify-between border-b border-border bg-bg-1" style={{ flexShrink: 0 }}>
|
||
<div className="flex">
|
||
{([
|
||
{ id: 'management' as const, icon: '🗂', label: '자산 관리' },
|
||
{ id: 'upload' as const, icon: '📤', label: '자산 현행화 (업로드)' },
|
||
{ id: 'theory' as const, icon: '📚', label: '방제자원 이론' },
|
||
{ id: 'insurance' as const, icon: '🛡', label: '선박 보험정보' },
|
||
]).map(tab => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`px-5 py-3.5 text-xs font-semibold transition-all font-korean border-b-2 ${
|
||
activeTab === tab.id
|
||
? 'text-primary-cyan border-primary-cyan'
|
||
: 'text-text-3 border-transparent hover:text-text-2'
|
||
}`}
|
||
>
|
||
{tab.icon} {tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="flex items-center gap-1.5 px-3.5 py-1.5 border rounded-full text-[11px] text-primary-blue font-korean mr-4" style={{ borderColor: 'rgba(59,130,246,0.3)' }}>
|
||
👤 남해청_방제과 (수정 권한 ✅)
|
||
</div>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="flex-1 overflow-auto px-6 py-5">
|
||
<div className="w-full h-full">
|
||
{activeTab === 'management' && <AssetManagementTab />}
|
||
{activeTab === 'upload' && <AssetUploadTab />}
|
||
{activeTab === 'theory' && <AssetTheoryTab />}
|
||
{activeTab === 'insurance' && <ShipInsuranceTab />}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|