From 1dacb2248775339b60ef93210ce242add7980271 Mon Sep 17 00:00:00 2001 From: htlee Date: Sun, 1 Mar 2026 11:31:41 +0900 Subject: [PATCH] =?UTF-8?q?refactor(css):=20=EC=9D=B8=EB=9D=BC=EC=9D=B8=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=E2=86=92=20Tailwind=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B3=80=ED=99=98=20(Phase=202=20=EA=B3=84?= =?UTF-8?q?=EC=86=8D)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 대형 파일 추가 변환: - HNSSubstanceView: 275→209건 (66건 변환) - OilSpillTheoryView: 435→417건 (18건 변환) - IncidentsLeftPanel: 61→34건 (27건 변환) - RescueView: 54→47건 (7건 변환) Co-Authored-By: Claude Opus 4.6 --- .../tabs/hns/components/HNSSubstanceView.tsx | 256 ++++++++++-------- .../components/IncidentsLeftPanel.tsx | 86 +++--- .../components/OilSpillTheoryView.tsx | 37 ++- .../src/tabs/rescue/components/RescueView.tsx | 36 +-- 4 files changed, 211 insertions(+), 204 deletions(-) diff --git a/frontend/src/tabs/hns/components/HNSSubstanceView.tsx b/frontend/src/tabs/hns/components/HNSSubstanceView.tsx index b14cc70..340594b 100755 --- a/frontend/src/tabs/hns/components/HNSSubstanceView.tsx +++ b/frontend/src/tabs/hns/components/HNSSubstanceView.tsx @@ -179,7 +179,7 @@ ${styles} ] return ( -
+
{/* 헤더 */} @@ -197,19 +197,19 @@ ${styles} placeholder="물질명 또는 CAS 번호 검색..." value={searchQuery} onChange={e => setSearchQuery(e.target.value)} - className="rounded-sm border border-border text-[10px] outline-none" - style={{ padding: '6px 12px', background: 'var(--bg3)', width: 200 }} + className="rounded-sm border border-border text-[10px] outline-none bg-bg-3 px-3 py-1.5" + style={{ width: 200 }} />
{/* 서브탭 */} -
+
{tabLabels.map((tab, idx) => (
- HNS 물질이 해양에 유출되었을 때의 물리·화학적 거동에 따라 분류하는 국제 표준 체계입니다. 물질의 밀도, 증기압, 용해도에 따라 5개 주요 거동 유형과 혼합 유형으로 구분되며, 각 유형별로 대응 전략이 달라집니다. + HNS 물질이 해양에 유출되었을 때의 물리·화학적 거동에 따라 분류하는 국제 표준 체계입니다. 물질의 밀도, 증기압, 용해도에 따라 5개 주요 거동 유형과 혼합 유형으로 구분되며, 각 유형별로 대응 전략이 달라집니다.
{/* G: Gas */}
💨
-
G
-
Gas
+
G
+
Gas
기체 상태로 대기 중 확산. 증기압이 높아 빠르게 증발
-
대기확산 모델 적용
+
대기확산 모델 적용
{/* E: Evaporator */}
🔥
-
E
-
Evaporator
+
E
+
Evaporator
해수면에서 증발. 부유 후 기화하여 독성 가스 생성
-
대기+해양 복합 대응
+
대기+해양 복합 대응
{/* F: Floater */}
🟡
-
F
-
Floater
+
F
+
Floater
{'해수면 위에 부유. 비중 < 1.0, 불용성 물질'}
-
오일펜스 유사 봉쇄
+
오일펜스 유사 봉쇄
{/* D: Dissolver */}
💧
-
D
-
Dissolver
+
D
+
Dissolver
해수에 용해. 수중 확산하여 넓은 범위 오염
-
해양확산 모델 적용
+
해양확산 모델 적용
{/* S: Sinker */}
⬇
-
S
-
Sinker
+
S
+
Sinker
{'해저로 침강. 비중 > 1.0, 저층 오염 축적'}
-
저층 3D 모니터링 필수
+
저층 3D 모니터링 필수
{/* 복합 거동 */} -
+
🔀 복합 거동 유형
-
-
GD
기체+용해
-
ED
증발+용해
-
FE
부유+증발
-
FED
부유+증발+용해
-
SD
침강+용해
+
+
GD
기체+용해
+
ED
증발+용해
+
FE
부유+증발
+
FED
부유+증발+용해
+
SD
침강+용해
@@ -312,20 +312,23 @@ ${styles} {/* 암모니아 */} {filtered.find(s => s.casNumber === '7664-41-7') && ( -
+
-
NH₃ 암모니아
-
G/GD독성
+
NH₃ 암모니아
+
+ G/GD + 독성 +
-
-
CAS: 7664-41-7
-
분자량: 17.03
-
끓는점: -33.4°C
-
비중: 0.73
-
인화점: N/A (불연)
-
용해도: 매우 높음
+
+
CAS: 7664-41-7
+
분자량: 17.03
+
끓는점: -33.4°C
+
비중: 0.73
+
인화점: N/A (불연)
+
용해도: 매우 높음
-
+
AEGL-2
160 ppm
ERPG-2
150 ppm
IDLH
300 ppm
@@ -336,20 +339,23 @@ ${styles} {/* 메탄올 */} {filtered.find(s => s.casNumber === '67-56-1') && ( -
+
-
CH₃OH 메탄올
-
ED인화성
+
CH₃OH 메탄올
+
+ ED + 인화성 +
-
-
CAS: 67-56-1
-
분자량: 32.04
-
끓는점: 64.7°C
-
비중: 0.79
-
인화점: 11°C
-
용해도: 완전 혼화
+
+
CAS: 67-56-1
+
분자량: 32.04
+
끓는점: 64.7°C
+
비중: 0.79
+
인화점: 11°C
+
용해도: 완전 혼화
-
+
AEGL-2
2,100 ppm
ERPG-2
1,000 ppm
IDLH
6,000 ppm
@@ -360,18 +366,21 @@ ${styles} {/* 수소 */} {filtered.find(s => s.casNumber === '1333-74-0') && ( -
+
-
H₂ 수소
-
G폭발
+
H₂ 수소
+
+ G + 폭발 +
-
-
CAS: 1333-74-0
-
분자량: 2.016
-
끓는점: -252.9°C
-
비중(기체): 0.07
-
LFL: 4.0%
-
UFL: 75.0%
+
+
CAS: 1333-74-0
+
분자량: 2.016
+
끓는점: -252.9°C
+
비중(기체): 0.07
+
LFL: 4.0%
+
UFL: 75.0%
폭발 범위 극히 넓음(4~75%). 무색·무취로 감지 불가. 극저온 액화수소 유출 시 BLEVE 위험. 급속 상승 확산.
@@ -379,18 +388,21 @@ ${styles} {/* LNG */} {filtered.find(s => s.nameEn === 'LPG (Propane/Butane)' || s.casNumber === '74-82-8') && ( -
+
-
CH₄ LNG (메탄)
-
G인화/폭발
+
CH₄ LNG (메탄)
+
+ G + 인화/폭발 +
-
-
CAS: 74-82-8
-
분자량: 16.04
-
끓는점: -161.5°C
-
비중(액체): 0.42
-
LFL: 5.0%
-
UFL: 15.0%
+
+
CAS: 74-82-8
+
분자량: 16.04
+
끓는점: -161.5°C
+
비중(액체): 0.42
+
LFL: 5.0%
+
UFL: 15.0%
극저온(-162°C) 유출 시 RPT(급속상변환폭발), Pool Fire 위험. Flash 기화 → 가연성 가스운 형성. 인천·평택항 LNG 물동량 상위.
@@ -398,37 +410,43 @@ ${styles} {/* 페놀 */} {filtered.find(s => s.casNumber === '108-95-2' || s.name === '페놀') && ( -
+
-
C₆H₅OH 페놀
-
S/SD독성
+
C₆H₅OH 페놀
+
+ S/SD + 독성 +
-
-
CAS: 108-95-2
-
분자량: 94.11
-
끓는점: 181.7°C
-
비중: 1.07 (침강)
-
인화점: 79°C
-
용해도: 84 g/L
+
+
CAS: 108-95-2
+
분자량: 94.11
+
끓는점: 181.7°C
+
비중: 1.07 (침강)
+
인화점: 79°C
+
용해도: 84 g/L
-
비중 1.07 → Sinker 특성으로 저층 축적. ROMS 검증 결과 저층 농도가 표층의 3.5배. 해양산업시설 배출 주요 HNS (31.8kg/일).
+
비중 1.07 → Sinker 특성으로 저층 축적. ROMS 검증 결과 저층 농도가 표층의 3.5배. 해양산업시설 배출 주요 HNS (31.8kg/일).
)} {/* 톨루엔 */} {filtered.find(s => s.casNumber === '108-88-3') && ( -
+
-
C₇H₈ 톨루엔
-
FE인화성
+
C₇H₈ 톨루엔
+
+ FE + 인화성 +
-
-
CAS: 108-88-3
-
분자량: 92.14
-
끓는점: 110.6°C
-
비중: 0.87 (부유)
-
인화점: 4°C
-
용해도: 0.52 g/L
+
+
CAS: 108-88-3
+
분자량: 92.14
+
끓는점: 110.6°C
+
비중: 0.87 (부유)
+
인화점: 4°C
+
용해도: 0.52 g/L
해수면 부유 → 증발. 인화점 극히 낮아(4°C) 화재 위험 상시. 석유화학 산업의 대표적 HNS. 울산항 주요 취급물질.
@@ -442,49 +460,49 @@ ${styles}
{/* AEGL 기준 */} -
+
🟢 AEGL (Acute Exposure Guideline Level)
미국 EPA — 일반인 급성 노출 기준 (10분, 30분, 60분, 4시간, 8시간)
-
+
AEGL-1 (불쾌감)
눈에 띄는 불쾌감, 자극 또는 비감각적 증상. 노출 중단 시 증상 소멸.
-
+
AEGL-2 (비가역적 영향)
-
비가역적·장기적 건강 영향 또는 대피 능력 저하. 대피 기준으로 사용.
+
비가역적·장기적 건강 영향 또는 대피 능력 저하. 대피 기준으로 사용.
-
+
AEGL-3 (생명 위협)
-
생명을 위협하는 건강 영향 또는 사망. 즉시 대피·격리 구역 설정.
+
생명을 위협하는 건강 영향 또는 사망. 즉시 대피·격리 구역 설정.
{/* ERPG / IDLH */} -
+
🔴 ERPG & IDLH
ERPG (Emergency Response Planning Guideline)
AIHA 발행 — 1시간 노출 기준
-
ERPG-1 — 일시적 건강 영향, 냄새 감지
-
ERPG-2 — 비가역적 영향, 대피 판단 기준
-
ERPG-3 — 생명 위협 농도
+
ERPG-1 — 일시적 건강 영향, 냄새 감지
+
ERPG-2 — 비가역적 영향, 대피 판단 기준
+
ERPG-3 — 생명 위협 농도
-
+
IDLH (Immediately Dangerous to Life or Health)
NIOSH — 30분 노출 시 생명·건강에 즉각적 위험
-
최대 허용 노출 한계로서 이 농도를 초과하면 자급식 호흡장치(SCBA) 없이는 진입 불가. WING 시스템에서 위험구역 자동 설정의 기준값으로 사용.
+
최대 허용 노출 한계로서 이 농도를 초과하면 자급식 호흡장치(SCBA) 없이는 진입 불가. WING 시스템에서 위험구역 자동 설정의 기준값으로 사용.
{/* 물질별 위험도 비교표 */} -
+
📊 주요 HNS 물질별 위험도 기준 비교 (ppm)
@@ -571,18 +589,18 @@ ${styles} {activeTab === 3 && (
{/* ── 검색창 ── */} -
+
🔍 HNS 물질 통합 검색 (화물약어·제품명·동의어·CAS·UN번호 통합)
- - + +
구분: - { setHmsSearchType(e.target.value as typeof hmsSearchType); setHmsPage(1) }} className="rounded-sm border border-border text-[10px] outline-none bg-bg-0 px-2.5 py-1.5" style={{ minWidth: 130 }}> @@ -590,19 +608,19 @@ ${styles}
- { setHmsSearchInput(e.target.value); setHmsPage(1) }} placeholder={hmsSearchType === 'abbr' ? '검색어 입력 (부호·띄어쓰기 제외)' : hmsSearchType === 'cas' ? 'CAS번호 입력 (예: 71-43-2)' : hmsSearchType === 'un' ? 'UN번호 입력 (예: 1114)' : '검색어 입력 (* 동의어 검색)'} className="flex-1 rounded-sm border border-border text-[11px] outline-none" style={{ padding: '8px 12px', background: 'var(--bg0)' }} /> - + { setHmsSearchInput(e.target.value); setHmsPage(1) }} placeholder={hmsSearchType === 'abbr' ? '검색어 입력 (부호·띄어쓰기 제외)' : hmsSearchType === 'cas' ? 'CAS번호 입력 (예: 71-43-2)' : hmsSearchType === 'un' ? 'UN번호 입력 (예: 1114)' : '검색어 입력 (* 동의어 검색)'} className="flex-1 rounded-sm border border-border text-[11px] outline-none bg-bg-0 px-3 py-2" /> +
-
- ※ 국문명·영문명 검색 시 동의어까지 검색  |  약자/제품명 검색 시 부호, 띄어쓰기 제외 후 검색  |  총 1,316종 등록 (화물적부도 277종 / 해양시설 56종 / 용선자 화물코드 983종) +
+ ※ 국문명·영문명 검색 시 동의어까지 검색  |  약자/제품명 검색 시 부호, 띄어쓰기 제외 후 검색  |  총 1,316종 등록 (화물적부도 277종 / 해양시설 56종 / 용선자 화물코드 983종)
{/* ── 검색 결과 테이블 ── */} -
+
📋 검색 결과 — {hmsTotal}건 조회
- { setHmsFilterSebc(e.target.value); setHmsPage(1) }} className="rounded border border-border text-[9px] text-text-2 outline-none bg-bg-0 px-2 py-[3px]">
@@ -648,13 +666,13 @@ ${styles}
- 총 {hmsTotal.toLocaleString()}종 등록 · Port-MIS 화물적부도 연동 · 해경청 물질정보집 · IBC CODE 692종 + 총 {hmsTotal.toLocaleString()}종 등록 · Port-MIS 화물적부도 연동 · 해경청 물질정보집 · IBC CODE 692종
- + {Array.from({ length: Math.min(hmsTotalPages, 5) }, (_, i) => i + 1).map(p => ( - + ))} - +
diff --git a/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx b/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx index 5d194fb..b7052f7 100755 --- a/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx +++ b/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx @@ -169,7 +169,7 @@ export function IncidentsLeftPanel({ } return ( -
+
{/* Search */}
@@ -261,12 +261,12 @@ export function IncidentsLeftPanel({
{/* Count */} -
+
총 {filteredIncidents.length}건
{/* Incident List */} -
+
{pagedIncidents.length === 0 ? (
검색 결과가 없습니다. @@ -300,7 +300,7 @@ export function IncidentsLeftPanel({ onMouseLeave={(e) => { if (!isSel) e.currentTarget.style.background = '' }} > {/* Row 1: name + status */} -
+
{inc.name} @@ -310,7 +310,7 @@ export function IncidentsLeftPanel({
{/* Row 2: meta */} -
+
📅 {inc.date} {inc.time} 🏛 {inc.office}
@@ -371,11 +371,11 @@ export function IncidentsLeftPanel({ )} {/* Pagination */} -
+
총 {filteredIncidents.length}건 중 {(safePage - 1) * pageSize + 1}-{Math.min(safePage * pageSize, filteredIncidents.length)}
-
+
setCurrentPage(1)} /> setCurrentPage(Math.max(1, safePage - 1))} /> {Array.from({ length: totalPages }, (_, i) => i + 1).filter(p => Math.abs(p - safePage) <= 2).map(p => ( @@ -385,8 +385,7 @@ export function IncidentsLeftPanel({ = totalPages} onClick={() => setCurrentPage(totalPages)} />
@@ -418,41 +417,38 @@ const WeatherPopup = forwardRef void }>(({ data, position, onClose }, ref) => { return ( -
{/* Header */} -
-
- 🌤 +
+
+ 🌤
-
{data.locNm}
-
{data.obsDtm}
+
{data.locNm}
+
{data.obsDtm}
- ✕ + ✕
{/* Body */} -
+
{/* Main weather */} -
-
{data.icon}
+
+
{data.icon}
-
{data.temp}
-
{data.weatherDc}
+
{data.temp}
+
{data.weatherDc}
{/* Detail grid */} -
+
@@ -462,39 +458,33 @@ const WeatherPopup = forwardRef {/* Tide info */} -
-
- ⬆ +
+
+ ⬆
-
고조 (만조)
-
{data.highTide}
+
고조 (만조)
+
{data.highTide}
-
- ⬇ +
+ ⬇
-
저조 (간조)
-
{data.lowTide}
+
저조 (간조)
+
{data.lowTide}
{/* 24h Forecast */} -
-
24h 예보
-
+
+
24h 예보
+
{data.forecast.map((f, i) => (
{f.hour}
-
{f.icon}
+
{f.icon}
{f.temp}
))} diff --git a/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx b/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx index e486855..42a8a94 100755 --- a/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx +++ b/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx @@ -79,7 +79,7 @@ ${styles} 🔴 POSEIDON 🔵 OpenDrift ⚡ 앙상블 - 라그랑지안 입자추적 이론 기반 + 라그랑지안 입자추적 이론 기반
@@ -92,8 +92,7 @@ ${styles}
{/* 내부 네비게이션 탭 */} -
+
{theoryTabs.map(tab => (
- z(x,y) = Σ Σ qᵢⱼ xⁱ yʲ (i≤5, i+j≤5) + z(x,y) = Σ Σ qᵢⱼ xⁱ yʲ (i≤5, i+j≤5)
@@ -644,7 +643,7 @@ function KospsPanel() {
{paper.tags.map(t => {t.label})}
- {paper.year} + {paper.year}
{paper.title}
{paper.authors}
@@ -733,7 +732,7 @@ function PoseidonPanel() {
🔵
POSEIDON (입자추적 최적화 예측 시스템)
-
한국환경연구원 · (주)아라종합기술 · 한국해양기상기술 공동개발 · MOHID 해양순환모델 기반 · 뜰개 관측 매개변수 자동 최적화
+
한국환경연구원 · (주)아라종합기술 · 한국해양기상기술 공동개발 · MOHID 해양순환모델 기반 · 뜰개 관측 매개변수 자동 최적화
@@ -752,7 +751,7 @@ function PoseidonPanel() {
-
등록번호
+
등록번호
10-1868791
2018 등록
@@ -891,7 +890,7 @@ function PoseidonPanel() { border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`, }}>
{node.label}
-
{node.sub}
+
{node.sub}
{i < 2 &&
}
@@ -934,7 +933,7 @@ function PoseidonPanel() {
{paper.tags.map(t => {t.label})}
- {paper.year} + {paper.year}
{paper.title}
{paper.authors}
@@ -958,7 +957,7 @@ function OpenDriftPanel() {
🟢
OpenDrift (오픈소스 라그랑지안 확산 프레임워크)
-
노르웨이 MET Norway · OpenOil 공개 프레임워크 · Python 기반 · IMO/IPIECA 검증
+
노르웨이 MET Norway · OpenOil 공개 프레임워크 · Python 기반 · IMO/IPIECA 검증
@@ -1037,7 +1036,7 @@ function OpenDriftPanel() { border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`, }}>
{node.label}
-
{node.sub}
+
{node.sub}
{i < 6 &&
}
@@ -1378,7 +1377,7 @@ function VerificationPanel() { ].map(s => (
{s.value}
-
{s.label}
+
{s.label}
))}
@@ -1483,7 +1482,7 @@ function RoadmapPanel() { ].map(r => (
{r.title}
-
{r.desc}
+
{r.desc}
))}
diff --git a/frontend/src/tabs/rescue/components/RescueView.tsx b/frontend/src/tabs/rescue/components/RescueView.tsx index 8ba59cd..1e14810 100755 --- a/frontend/src/tabs/rescue/components/RescueView.tsx +++ b/frontend/src/tabs/rescue/components/RescueView.tsx @@ -146,7 +146,7 @@ function CenterMap({ activeType }: { activeType: AccidentType }) { const at = accidentTypes.find(t => t.id === activeType)! return ( -
+
{/* 해양 배경 그라데이션 */}
-
M/V SEA GUARDIAN
+
M/V SEA GUARDIAN
{/* 예측 구역 원 */} @@ -193,25 +193,24 @@ function CenterMap({ activeType }: { activeType: AccidentType }) { border: '1.5px dashed rgba(6,182,212,.2)' }} /> {/* 구역 라벨 */} -
{d.zone.replace('\\n', '\n')}
{/* SAR 자산 */} -
ETA 5 MIN ─
-
ETA 15 MIN ─
-
🚁
-
6M
-
🚢
+
ETA 5 MIN ─
+
ETA 15 MIN ─
+
🚁
+
6M
+
🚢
{/* 환경 민감 구역 */} -
-
+
ENVIRONMENTALLY SENSITIVE
AREA: AQUACULTURE FARM
@@ -226,13 +225,14 @@ function CenterMap({ activeType }: { activeType: AccidentType }) { {/* 스케일 바 */}
+ 5 km · Zoom: 100%
{/* 사고 유형 표시 */}
현재 사고 유형
-
{at.icon} {at.label} ({at.eng})
+
{at.icon} {at.label} ({at.eng})
) @@ -687,14 +687,14 @@ function LongStrengthPanel(_props: { activeType: AccidentType }) {
SF 최대/허용 비율
88%
-
+
BM 최대/허용 비율
92%
-
+
@@ -779,9 +779,9 @@ function BottomBar() { [+24H]
-
@@ -790,7 +790,7 @@ function BottomBar() {
- 현재 시간: 10:45 KST + 현재 시간: 10:45 KST