6363 lines
225 KiB
TypeScript
Executable File
6363 lines
225 KiB
TypeScript
Executable File
import { useState, useRef } from 'react';
|
||
|
||
const theoryTabs = [
|
||
{ icon: '🔬', name: '시스템 개요' },
|
||
{ icon: '🌀', name: '가우시안 모델' },
|
||
{ icon: '🧪', name: '물질별 시나리오' },
|
||
{ icon: '🌊', name: '해양환경 보정' },
|
||
{ icon: '✅', name: '모델 검증' },
|
||
{ icon: '⚡', name: '실시간 비교' },
|
||
{ icon: '🚀', name: 'WRF-Chem·발전' },
|
||
];
|
||
|
||
/* ═══ 공통 스타일 유틸 ═══ */
|
||
const card = 'rounded-[10px] p-[14px] mb-4';
|
||
const cardBg = 'bg-bg-card border border-stroke';
|
||
const labelStyle = (color: string) =>
|
||
({ fontSize: 'var(--font-size-title-3)', fontWeight: 700, color, marginBottom: '10px' }) as const;
|
||
const tag = (color: string) =>
|
||
({
|
||
padding: '3px 8px',
|
||
borderRadius: '4px',
|
||
fontSize: 'var(--font-size-label-2)',
|
||
color,
|
||
background: `${color}14`,
|
||
border: `1px solid ${color}30`,
|
||
}) as const;
|
||
const bodyText = 'text-label-1 text-fg-sub leading-[1.8]';
|
||
|
||
/* ═══ 패널 0: 시스템 개요 ═══ */
|
||
|
||
function SystemOverviewPanel() {
|
||
return (
|
||
<>
|
||
{/* 시스템 개요 */}
|
||
<div className={`${card} ${cardBg}`}>
|
||
{/* 1행: 정의 + 목적 */}
|
||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||
<div>
|
||
<div style={labelStyle('var(--fg-default)')}>📋 HNS 대기확산 모델이란?</div>
|
||
<div className={bodyText}>
|
||
해상에서 유출된 <b>위험유해물질(Hazardous & Noxious Substances, HNS)</b>이 대기로
|
||
증발하여 퍼지는 농도를 물리·화학적 이론에 기반해 전산으로 모의하는 프로그램입니다.
|
||
기상 예측 모델(<b>WRF</b>)과 대기화학 모델(<b>Chem</b>)을 결합하여 실시간 대기 확산을
|
||
시뮬레이션합니다.
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style={labelStyle('var(--fg-default)')}>🎯 목적</div>
|
||
<div className="flex flex-col gap-[6px] text-label-1 text-fg-sub">
|
||
<div className="flex items-center gap-[6px] px-[10px] py-[6px] rounded-[10px] bg-bg-base">
|
||
<span style={{ color: 'var(--fg-default)', fontWeight: 700 }}>①</span> 유출 사고 시{' '}
|
||
<b>신속한 위험 범위 예측</b>
|
||
</div>
|
||
<div className="flex items-center gap-[6px] px-[10px] py-[6px] rounded-[10px] bg-bg-base">
|
||
<span style={{ color: 'var(--fg-default)', fontWeight: 700 }}>②</span> 독성물질 농도
|
||
기반 <b>대피 명령</b> 의사결정
|
||
</div>
|
||
<div className="flex items-center gap-[6px] px-[10px] py-[6px] rounded-[10px] bg-bg-base">
|
||
<span style={{ color: 'var(--fg-default)', fontWeight: 700 }}>③</span> 사고 대응
|
||
체계 구축 및 <b>피해 최소화</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* 2행: 물질 특성 + 기상 데이터 + 확산 알고리즘 */}
|
||
<div className="grid grid-cols-3 gap-4">
|
||
<div>
|
||
<div style={labelStyle('var(--fg-default)')}>🧪 물질 특성 반영</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
marginBottom: '10px',
|
||
}}
|
||
>
|
||
HNS는 <b>약 6,000종 이상</b>으로, 종류가 매우 다양합니다. 각 물질의 고유 거동 특성을
|
||
모델에 반영합니다.
|
||
</div>
|
||
<div className="flex flex-wrap gap-1">
|
||
{['증발률', '독성', '기화 특성', '비중', '인화점', '용해도'].map((item) => (
|
||
<span
|
||
key={item}
|
||
style={{
|
||
padding: '2px 8px',
|
||
borderRadius: '4px',
|
||
fontSize: 'var(--font-size-label-2)',
|
||
color: 'var(--fg-sub)',
|
||
background: 'var(--bg-base)',
|
||
}}
|
||
>
|
||
{item}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style={labelStyle('var(--fg-default)')}>🌬 기상 데이터 연동</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
marginBottom: '10px',
|
||
}}
|
||
>
|
||
<b>실시간 기상 정보</b>를 입력 데이터로 사용하여 확산 방향과 속도를 결정합니다.
|
||
</div>
|
||
<div
|
||
className="flex flex-col gap-1"
|
||
style={{ fontSize: 'var(--font-size-label-2)', color: 'var(--fg-sub)' }}
|
||
>
|
||
{[
|
||
'💨 풍향·풍속 (KMA·ECMWF)',
|
||
'🌡 기온·습도·강수',
|
||
'📊 대기 안정도 (Pasquill-Gifford)',
|
||
].map((item) => (
|
||
<div
|
||
key={item}
|
||
style={{ padding: '4px 8px', borderRadius: '4px', background: 'var(--bg-base)' }}
|
||
>
|
||
{item}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style={labelStyle('var(--fg-default)')}>🔬 확산 알고리즘</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
marginBottom: '10px',
|
||
}}
|
||
>
|
||
가우시안 플룸/퍼프 모델 또는 WRF-Chem 수치 모델을 사용하여 <b>대기 중 농도</b>를
|
||
계산합니다.
|
||
</div>
|
||
<div
|
||
className="flex flex-col gap-1"
|
||
style={{ fontSize: 'var(--font-size-label-2)', color: 'var(--fg-sub)' }}
|
||
>
|
||
{['📍 Gaussian Plume/Puff', '⚡ WRF-Chem (기상+화학)', '🔧 ALOHA / CAMEO'].map(
|
||
(item) => (
|
||
<div
|
||
key={item}
|
||
style={{
|
||
padding: '4px 8px',
|
||
borderRadius: '4px',
|
||
background: 'var(--bg-base)',
|
||
}}
|
||
>
|
||
{item}
|
||
</div>
|
||
),
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 주요 기능 및 특징 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '14px',
|
||
}}
|
||
>
|
||
⚙ 주요 기능 및 특징
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-3">
|
||
<div
|
||
style={{
|
||
padding: '14px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid var(--stroke-default)',
|
||
borderRadius: '8px',
|
||
}}
|
||
>
|
||
<div className="flex items-center gap-[6px] mb-2">
|
||
<span style={{ fontSize: 'var(--font-size-title-1)' }}>📡</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
실시간 모니터링
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
'<b style={{ color: 'var(--color-accent)' }}>HNS 유출 블랙박스 시스템</b>'과 같이 사고
|
||
즉시 확산 방향과 농도를 예측하여 시각화합니다. 사고 발생 → 자동 감지 → 실시간 확산 맵
|
||
생성의 자동화 파이프라인을 제공합니다.
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '14px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid var(--stroke-default)',
|
||
borderRadius: '8px',
|
||
}}
|
||
>
|
||
<div className="flex items-center gap-[6px] mb-2">
|
||
<span style={{ fontSize: 'var(--font-size-title-1)' }}>🎯</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
위험 범위 예측
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
대기 중 독성물질 농도에 따른{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>안전/경고/위험 구역</b>을 AEGL·ERPG
|
||
기준으로 자동 설정합니다. 시간대별 확산 경계를 지도 위에 오버레이합니다.
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '14px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid var(--stroke-default)',
|
||
borderRadius: '8px',
|
||
}}
|
||
>
|
||
<div className="flex items-center gap-[6px] mb-2">
|
||
<span style={{ fontSize: 'var(--font-size-title-1)' }}>⚡</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
긴급 대응
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
해상 사고 시 <b style={{ color: 'var(--color-accent)' }}>조화상수 DB</b>를 이용한 빠른
|
||
예측 기술을 포함합니다. 사전 계산된 시나리오 DB를 활용하여 초기 대응 시간을{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>수 분 이내</b>로 단축합니다.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 주요 기술 아키텍처 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '14px',
|
||
}}
|
||
>
|
||
🏗 주요 기술 아키텍처
|
||
</div>
|
||
{/* Flow diagram */}
|
||
<div className="flex items-center justify-center flex-wrap gap-0 mb-4">
|
||
{[
|
||
{
|
||
icon: '🧪',
|
||
label: 'HNS 물질 DB',
|
||
sub: '6,000+ 물질',
|
||
},
|
||
{
|
||
icon: '🌬',
|
||
label: '기상 데이터',
|
||
sub: 'KMA / AWS',
|
||
},
|
||
{
|
||
icon: '🔬',
|
||
label: '확산 모델 엔진',
|
||
sub: 'WRF-Chem / Gaussian',
|
||
},
|
||
{
|
||
icon: '🗺',
|
||
label: 'GIS 시각화',
|
||
sub: '위험 구역 맵',
|
||
},
|
||
{
|
||
icon: '🚨',
|
||
label: '대응 의사결정',
|
||
sub: '대피·방제 명령',
|
||
},
|
||
].map((item, idx) => (
|
||
<>
|
||
<div
|
||
key={item.label}
|
||
style={{
|
||
padding: '10px 16px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid var(--stroke-default)',
|
||
borderRadius: '8px',
|
||
textAlign: 'center',
|
||
minWidth: idx === 2 ? '140px' : '120px',
|
||
}}
|
||
>
|
||
<div style={{ fontSize: 'var(--font-size-title-2)', marginBottom: '4px' }}>
|
||
{item.icon}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
{item.label}
|
||
</div>
|
||
<div
|
||
className="font-mono"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
|
||
>
|
||
{item.sub}
|
||
</div>
|
||
</div>
|
||
{idx < 4 && (
|
||
<div
|
||
key={`arrow-${idx}`}
|
||
style={{
|
||
fontSize: 'var(--font-size-title-2)',
|
||
color: 'var(--fg-disabled)',
|
||
padding: '0 6px',
|
||
}}
|
||
>
|
||
→
|
||
</div>
|
||
)}
|
||
</>
|
||
))}
|
||
</div>
|
||
|
||
{/* 기술 상세 비교 */}
|
||
<div className="grid grid-cols-3 gap-[10px]">
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
borderRadius: '8px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
WRF-Chem
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
기상 예측 모델(<b style={{ color: 'var(--color-accent)' }}>WRF</b>)과 대기화학 모델(
|
||
<b style={{ color: 'var(--color-accent)' }}>Chem</b>)을 결합. 3차원 바람장·난류를
|
||
실시간 계산하여 화학물질 이류·확산·반응을 동시에 모의합니다.
|
||
<br />
|
||
<span
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
해상도: 1~3 km / 시간분해능: 1 hr
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
borderRadius: '8px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
Gaussian Plume/Puff
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
ALOHA/CAMEO 표준 알고리즘 기반. 연속 배출(
|
||
<b style={{ color: 'var(--color-accent)' }}>Plume</b>) 또는 순간 배출(
|
||
<b style={{ color: 'var(--color-accent)' }}>Puff</b>) 시나리오 선택. 빠른 계산 속도로{' '}
|
||
<b>초기 대응</b>에 최적화.
|
||
<br />
|
||
<span
|
||
className="font-mono"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
|
||
>
|
||
계산시간: < 10초 / 정확도: ±10~40%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
borderRadius: '8px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
ROMS 해양 연동
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
Regional Ocean Modeling System과 연동하여 해수면 유출물의{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>해양 확산 + 대기 증발</b>을 동시에
|
||
모의합니다. 입자 추적 방식의 한계를 극복한 수치 모델.
|
||
<br />
|
||
<span
|
||
className="font-mono"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
|
||
>
|
||
장기 모의 가능 / 정밀 농도 계산
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* WING 시스템 적용 전략 */}
|
||
<div className={`${card} ${cardBg}`}>
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
🖥 WING 시스템 적용 전략
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '2px 8px',
|
||
borderRadius: '10px',
|
||
background: 'rgba(6,182,212,.12)',
|
||
color: 'var(--color-accent)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
현재 구현
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-4 gap-2">
|
||
{[
|
||
{
|
||
icon: '🧪',
|
||
label: 'HNS DB 연동',
|
||
sub: 'CHRIS/CAMEO DB\n6,000+종 물질 검색',
|
||
bar: 'var(--color-accent)',
|
||
},
|
||
{
|
||
icon: '⚡',
|
||
label: '가우시안 모델',
|
||
sub: 'ALOHA + 이문진박사모델\n초기 대응 10초 이내',
|
||
bar: 'var(--color-accent)',
|
||
},
|
||
{
|
||
icon: '🌐',
|
||
label: 'WRF-Chem',
|
||
sub: '정밀 수치 모의\n3D 확산 시뮬레이션',
|
||
bar: 'var(--color-accent)',
|
||
},
|
||
{
|
||
icon: '🌊',
|
||
label: 'ROMS 연동',
|
||
sub: '해양-대기 결합\n장기 모의 지원',
|
||
bar: 'var(--color-accent)',
|
||
},
|
||
].map((item) => (
|
||
<div
|
||
key={item.label}
|
||
style={{
|
||
padding: '10px',
|
||
background: 'var(--bg-card)',
|
||
border: '1px solid var(--stroke-default)',
|
||
borderRadius: '6px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div style={{ fontSize: 'var(--font-size-heading-3)', marginBottom: '4px' }}>
|
||
{item.icon}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
{item.label}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginTop: '2px',
|
||
}}
|
||
>
|
||
{item.sub.split('\n').map((line, i) => (
|
||
<span key={i}>
|
||
{line}
|
||
{i === 0 && <br />}
|
||
</span>
|
||
))}
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '6px',
|
||
height: '3px',
|
||
background: item.bar,
|
||
borderRadius: '2px',
|
||
}}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
className="flex gap-3 mt-[10px]"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
|
||
>
|
||
<span className="flex items-center gap-1">
|
||
<span
|
||
style={{
|
||
display: 'inline-block',
|
||
width: '10px',
|
||
height: '3px',
|
||
background: 'var(--color-accent)',
|
||
borderRadius: '2px',
|
||
}}
|
||
/>{' '}
|
||
구현 완료
|
||
</span>
|
||
<span className="flex items-center gap-1">
|
||
<span
|
||
style={{
|
||
display: 'inline-block',
|
||
width: '10px',
|
||
height: '3px',
|
||
background: 'var(--color-accent)',
|
||
borderRadius: '2px',
|
||
}}
|
||
/>{' '}
|
||
개발 진행중
|
||
</span>
|
||
<span className="flex items-center gap-1">
|
||
<span
|
||
style={{
|
||
display: 'inline-block',
|
||
width: '10px',
|
||
height: '3px',
|
||
background: 'var(--color-accent)',
|
||
borderRadius: '2px',
|
||
}}
|
||
/>{' '}
|
||
계획
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* HNS 사고 실태 및 항만별 위험도 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4 mt-4 mb-4`}>
|
||
<div className="flex items-center justify-between mb-[14px]">
|
||
<div className="flex items-center gap-2">
|
||
<div
|
||
style={{
|
||
width: '28px',
|
||
height: '28px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.15)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: 'var(--font-size-title-3)',
|
||
}}
|
||
>
|
||
🚨
|
||
</div>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
HNS 사고 실태 및 항만별 위험도
|
||
</div>
|
||
<div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
|
||
유영현 (2013), 한국위기관리논집 · 해양경찰청 (2010, 2011)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '3px 10px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
전 세계 HNS 6,500+종
|
||
</span>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-[14px]">
|
||
{/* 주요 항만별 위험도 */}
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
🏭 주요 항만별 화재·폭발·누출 위험도
|
||
</div>
|
||
<div style={{ overflowX: 'auto' }}>
|
||
<table
|
||
style={{
|
||
width: '100%',
|
||
borderCollapse: 'collapse',
|
||
fontSize: 'var(--font-size-caption)',
|
||
}}
|
||
>
|
||
<thead>
|
||
<tr style={{ background: 'rgba(6,182,212,.06)' }}>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'left',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
항만
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
화재
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
폭발
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
누출
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
HNS(천톤)
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{[
|
||
{
|
||
name: '울산',
|
||
fire: '◎',
|
||
exp: '◎',
|
||
leak: '◎',
|
||
hns: '27,574',
|
||
danger: true,
|
||
},
|
||
{
|
||
name: '여수·광양',
|
||
fire: '◎',
|
||
exp: '◎',
|
||
leak: '◎',
|
||
hns: '38,700',
|
||
danger: true,
|
||
},
|
||
{ name: '대산', fire: '◎', exp: '○', leak: '◎', hns: '19,401', danger: false },
|
||
{ name: '인천', fire: '○', exp: '◎', leak: '○', hns: '41,618', danger: false },
|
||
{ name: '부산', fire: '○', exp: '△', leak: '○', hns: '25,417', danger: false },
|
||
{
|
||
name: '평택·당진',
|
||
fire: '○',
|
||
exp: '◎',
|
||
leak: '○',
|
||
hns: '29,248',
|
||
danger: false,
|
||
},
|
||
].map((row) => (
|
||
<tr
|
||
key={row.name}
|
||
style={{
|
||
borderBottom: '1px solid rgba(255,255,255,.04)',
|
||
background: row.danger ? 'rgba(6,182,212,.03)' : undefined,
|
||
}}
|
||
>
|
||
<td
|
||
style={{
|
||
padding: '5px 8px',
|
||
fontWeight: 700,
|
||
color: row.danger ? 'var(--color-accent)' : 'var(--fg-default)',
|
||
}}
|
||
>
|
||
{row.name}
|
||
</td>
|
||
<td style={{ textAlign: 'center' }}>{row.fire}</td>
|
||
<td style={{ textAlign: 'center' }}>{row.exp}</td>
|
||
<td style={{ textAlign: 'center' }}>{row.leak}</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{
|
||
textAlign: 'center',
|
||
color: row.danger ? 'var(--color-accent)' : 'var(--color-accent)',
|
||
}}
|
||
>
|
||
{row.hns}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div
|
||
className="flex gap-2 mt-[6px]"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
|
||
>
|
||
<span>◎ 아주높음</span>
|
||
<span>○ 높음</span>
|
||
<span>△ 보통이상</span>
|
||
<span>□ 보통</span>
|
||
<span className="ml-auto">단위: 천톤, 2010년 기준</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* HNS 구분 및 사고 유형 */}
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
⚠ HNS 위험물질 vs 유해물질
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-[6px] mb-2">
|
||
<div
|
||
style={{
|
||
padding: '8px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '6px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
위험물질
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
폭발·인화·독성·부식·질식·중합 등으로 생명체에 위험을 초래하는 물질
|
||
</div>
|
||
<div className="flex flex-wrap gap-[2px] mt-1">
|
||
{['포장위험물', '산적고체', '산적액체', '액화가스'].map((t) => (
|
||
<span
|
||
key={t}
|
||
style={{
|
||
padding: '1px 5px',
|
||
borderRadius: '3px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
{t}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '8px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '6px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
유해물질
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
해양에서 해로운 영향을 초래하는 물질·에너지 (해양환경관리법)
|
||
</div>
|
||
<div className="flex flex-wrap gap-[2px] mt-1">
|
||
{['유해액체', '포장유해', '대기오염', '폐기물'].map((t) => (
|
||
<span
|
||
key={t}
|
||
style={{
|
||
padding: '1px 5px',
|
||
borderRadius: '3px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
{t}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '6px',
|
||
}}
|
||
>
|
||
📊 유류 vs HNS 사고 대응 차이
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'auto 1fr 1fr',
|
||
fontSize: 'var(--font-size-caption)',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
padding: '4px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
fontWeight: 600,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
구분
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.08)',
|
||
textAlign: 'center',
|
||
fontWeight: 600,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
유류
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.08)',
|
||
textAlign: 'center',
|
||
fontWeight: 600,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
HNS
|
||
</div>
|
||
{[
|
||
{
|
||
label: '물질',
|
||
oil: '눈으로 확인 가능',
|
||
hns: '보이지 않는 경우 多',
|
||
hnsC: 'var(--color-accent)',
|
||
},
|
||
{
|
||
label: '위험',
|
||
oil: '낮은 위험성',
|
||
hns: '독성·폭발·화재 복합',
|
||
hnsC: 'var(--color-accent)',
|
||
},
|
||
{
|
||
label: '예측',
|
||
oil: '단기 예측 가능',
|
||
hns: '다매체 피해예측 필요',
|
||
hnsC: 'var(--color-accent)',
|
||
},
|
||
{
|
||
label: '대응',
|
||
oil: '초기대응자 방제가능',
|
||
hns: '전문가 방제 필수',
|
||
hnsC: 'var(--color-accent)',
|
||
},
|
||
].map((row) => (
|
||
<>
|
||
<div
|
||
key={`${row.label}-label`}
|
||
style={{
|
||
padding: '3px 6px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
>
|
||
{row.label}
|
||
</div>
|
||
<div
|
||
key={`${row.label}-oil`}
|
||
style={{
|
||
padding: '3px 6px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
{row.oil}
|
||
</div>
|
||
<div
|
||
key={`${row.label}-hns`}
|
||
style={{
|
||
padding: '3px 6px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: row.hnsC,
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
{row.hns}
|
||
</div>
|
||
</>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 국내외 대응 체계 비교 */}
|
||
<div className="grid grid-cols-2 gap-[14px] mb-4">
|
||
{/* 한국 */}
|
||
<div className={`${cardBg} rounded-[10px] p-[14px]`}>
|
||
<div className="flex items-center gap-[6px] mb-[10px]">
|
||
<span style={{ fontSize: 'var(--font-size-title-3)' }}>🇰🇷</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
한국 HNS 대응 체계
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col gap-[6px]" style={{ fontSize: 'var(--font-size-caption)' }}>
|
||
{[
|
||
{
|
||
title: 'OPRC-HNS 의정서',
|
||
sub: '2008.1.11 가입 → 2008.4.11 발효',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
{
|
||
title: '국가/지역 긴급방제계획',
|
||
sub: "HNS 국가긴급방제계획 수립 ('09.6)",
|
||
color: 'var(--color-accent)',
|
||
},
|
||
{
|
||
title: 'CARIS 대응정보시스템',
|
||
sub: '사고대응 매뉴얼 + 화학물질 정보',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
{
|
||
title: '통합 대응 체계',
|
||
sub: '대통령 → 중앙안전관리위 → 중앙방제대책본부(해양경찰청장)',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
{
|
||
title: '현장 대응팀',
|
||
sub: '상황관리팀 → 사고대응팀(통제반·물질탐지반·방제작업반·제독지원반)',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
].map((item) => (
|
||
<div
|
||
key={item.title}
|
||
style={{
|
||
padding: '6px 8px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '4px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '6px',
|
||
}}
|
||
>
|
||
<div>
|
||
<b style={{ color: 'var(--fg-default)' }}>{item.title}</b>
|
||
<br />
|
||
<span style={{ color: 'var(--fg-disabled)' }}>{item.sub}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 미국 */}
|
||
<div className={`${cardBg} rounded-[10px] p-[14px]`}>
|
||
<div className="flex items-center gap-[6px] mb-[10px]">
|
||
<span style={{ fontSize: 'var(--font-size-title-3)' }}>🇺🇸</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
미국 HNS 대응 체계
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col gap-[6px]" style={{ fontSize: 'var(--font-size-caption)' }}>
|
||
{[
|
||
{
|
||
title: 'OPA90 / NCP',
|
||
sub: '국가긴급계획 ESF #10 — HNS 포함',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
{
|
||
title: '공동의장 체제',
|
||
sub: '환경청(EPA) + 해안경비대(USCG) 공동 지휘',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
{
|
||
title: 'CAMEO / ALOHA / MARPLOT',
|
||
sub: '6,000+종 화학물질 통합 DB · 대기확산 모델',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
{
|
||
title: 'NRT / RRT / NSF',
|
||
sub: '국가방제팀 + 지역방제팀 + 국가기동타격대',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
{
|
||
title: '통합지휘시스템(ICS)',
|
||
sub: '16개 부처 + 주·지방정부 + 유출책임자 통합 조정',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
].map((item) => (
|
||
<div
|
||
key={item.title}
|
||
style={{
|
||
padding: '6px 8px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '4px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '6px',
|
||
}}
|
||
>
|
||
<div>
|
||
<b style={{ color: 'var(--fg-default)' }}>{item.title}</b>
|
||
<br />
|
||
<span style={{ color: 'var(--fg-disabled)' }}>{item.sub}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 국제 협약 체계 */}
|
||
<div className={`${card} ${cardBg}`}>
|
||
<div className="flex items-center gap-2 mb-[10px]">
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
🌐 HNS 관련 국제 협약 체계
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'auto 1fr 1fr 1fr',
|
||
fontSize: 'var(--font-size-caption)',
|
||
}}
|
||
>
|
||
{[{ label: '구분', 협약: '협약', 담당: '담당', 대상: '대상', header: true }].map(() => (
|
||
<>
|
||
<div
|
||
key="h-div"
|
||
style={{
|
||
padding: '5px 8px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
}}
|
||
>
|
||
구분
|
||
</div>
|
||
<div
|
||
key="h-conv"
|
||
style={{
|
||
padding: '5px 8px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
fontWeight: 600,
|
||
color: 'var(--fg-default)',
|
||
textAlign: 'center',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
}}
|
||
>
|
||
협약
|
||
</div>
|
||
<div
|
||
key="h-resp"
|
||
style={{
|
||
padding: '5px 8px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
fontWeight: 600,
|
||
color: 'var(--fg-default)',
|
||
textAlign: 'center',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
}}
|
||
>
|
||
담당
|
||
</div>
|
||
<div
|
||
key="h-target"
|
||
style={{
|
||
padding: '5px 8px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
fontWeight: 600,
|
||
color: 'var(--fg-default)',
|
||
textAlign: 'center',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
}}
|
||
>
|
||
대상
|
||
</div>
|
||
</>
|
||
))}
|
||
{/* 안전 */}
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
>
|
||
안전
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
74 SOLAS
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
IMO
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
위험물질
|
||
</div>
|
||
{/* 보호 */}
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
>
|
||
보호
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
MARPOL 73/78
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
IMO
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
기름·유해액체·포장유해·하수·폐기물
|
||
</div>
|
||
{/* 대비·대응 */}
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
background: 'rgba(6,182,212,.03)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
대비·대응
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
background: 'rgba(6,182,212,.03)',
|
||
color: 'var(--color-accent)',
|
||
textAlign: 'center',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
2000 OPRC-HNS
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
background: 'rgba(6,182,212,.03)',
|
||
color: 'var(--fg-sub)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
IMO
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
background: 'rgba(6,182,212,.03)',
|
||
color: 'var(--color-accent)',
|
||
textAlign: 'center',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
위험·유해물질(HNS)
|
||
</div>
|
||
{/* 배상 */}
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
>
|
||
배상
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
96 HNS협약
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
IMO
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
유해물질 및 위험물질
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* HATS 사고이력 통계 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
|
||
<div className="flex items-center justify-between mb-[14px]">
|
||
<div className="flex items-center gap-2">
|
||
<div
|
||
style={{
|
||
width: '28px',
|
||
height: '28px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.15)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: 'var(--font-size-title-3)',
|
||
}}
|
||
>
|
||
📊
|
||
</div>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
국내 HNS 사고 통계 (23년간 76건)
|
||
</div>
|
||
<div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
|
||
장하용·이문진 외 (2017) HATS 분석 · 1994~2016년 해양경비안전본부 데이터
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '3px 10px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
연평균 3.3건
|
||
</span>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-5 gap-2 mb-[14px]">
|
||
{[
|
||
{
|
||
label: '사고시기 1위',
|
||
val: '41%',
|
||
title: '춘계 (3~5월)',
|
||
sub: '동절기 30%',
|
||
color: 'var(--color-accent)',
|
||
border: 'rgba(6,182,212,.12)',
|
||
},
|
||
{
|
||
label: '사고장소 1위',
|
||
val: '51%',
|
||
title: '계류장',
|
||
sub: '항만 29% · 연안 17%',
|
||
color: 'var(--color-accent)',
|
||
border: 'rgba(6,182,212,.12)',
|
||
},
|
||
{
|
||
label: '오염원 1위',
|
||
val: '49%',
|
||
title: '케미컬운반선',
|
||
sub: '육상시설 32%',
|
||
color: 'var(--color-accent)',
|
||
border: 'rgba(6,182,212,.12)',
|
||
},
|
||
{
|
||
label: '사고원인 1위',
|
||
val: '45%',
|
||
title: '승무원 과실',
|
||
sub: '화물 22% · 외적원인 17%',
|
||
color: 'var(--color-accent)',
|
||
border: 'rgba(6,182,212,.12)',
|
||
},
|
||
{
|
||
label: '사고물질 1위',
|
||
val: '12%',
|
||
title: '자일렌류',
|
||
sub: '옥탄올·라텍스·팜유 순',
|
||
color: 'var(--color-accent)',
|
||
border: 'rgba(6,182,212,.12)',
|
||
},
|
||
].map((item) => (
|
||
<div
|
||
key={item.label}
|
||
style={{
|
||
padding: '10px',
|
||
background: 'var(--bg-base)',
|
||
border: `1px solid ${item.border}`,
|
||
borderRadius: '6px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
{item.label}
|
||
</div>
|
||
<div
|
||
className="font-mono"
|
||
style={{ fontSize: 'var(--font-size-title-1)', fontWeight: 800, color: item.color }}
|
||
>
|
||
{item.val}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
{item.title}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginTop: '2px',
|
||
}}
|
||
>
|
||
{item.sub}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{/* 유출량 분포 */}
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '6px',
|
||
}}
|
||
>
|
||
📈 유출량 분포 (76건)
|
||
</div>
|
||
<div
|
||
className="flex flex-col gap-[3px]"
|
||
style={{ fontSize: 'var(--font-size-caption)' }}
|
||
>
|
||
{[
|
||
{
|
||
range: '0~50L',
|
||
width: '36%',
|
||
gradient: 'var(--color-accent)',
|
||
count: '27건',
|
||
color: 'var(--fg-default)',
|
||
},
|
||
{
|
||
range: '1K~10KL',
|
||
width: '20%',
|
||
gradient: 'var(--color-accent)',
|
||
count: '15건',
|
||
color: 'var(--fg-default)',
|
||
},
|
||
{
|
||
range: '101~500L',
|
||
width: '13%',
|
||
gradient: 'var(--color-accent)',
|
||
count: '10건',
|
||
color: 'var(--fg-default)',
|
||
},
|
||
{
|
||
range: '100만L+',
|
||
width: '12%',
|
||
gradient: 'var(--color-accent)',
|
||
count: '9건',
|
||
color: 'var(--color-accent)',
|
||
rangeColor: 'var(--color-accent)',
|
||
},
|
||
].map((bar) => (
|
||
<div key={bar.range} className="flex items-center gap-[6px]">
|
||
<div
|
||
style={{
|
||
width: '60px',
|
||
color: (bar as { rangeColor?: string }).rangeColor ?? 'var(--fg-disabled)',
|
||
}}
|
||
>
|
||
{bar.range}
|
||
</div>
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
height: '14px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '3px',
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: bar.width,
|
||
height: '100%',
|
||
background: bar.gradient,
|
||
borderRadius: '3px',
|
||
}}
|
||
/>
|
||
</div>
|
||
<span
|
||
style={{
|
||
color: bar.color,
|
||
fontWeight: 600,
|
||
width: '32px',
|
||
textAlign: 'right',
|
||
}}
|
||
>
|
||
{bar.count}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '4px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
>
|
||
※ 소형(50L이하)과 대형(100만L+) 양극화 → 차별화된 대응 필요
|
||
</div>
|
||
</div>
|
||
|
||
{/* HATS 표준코드 체계 */}
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '6px',
|
||
}}
|
||
>
|
||
🏷 HATS 표준코드 10개 항목
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(5,1fr)',
|
||
gap: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
{[
|
||
{ label: '1.오염원', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
|
||
{ label: '2.위치·일시', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
|
||
{ label: '3.기상환경', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
|
||
{ label: '4.사고유형', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
|
||
{ label: '5.유출물질', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
|
||
{ label: '6.대응', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
|
||
{ label: '7.피해복구', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
|
||
{ label: '8.사고원인', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
|
||
{ label: '9.피해상황', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
|
||
{ label: '10.영향', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
|
||
].map((item) => (
|
||
<div
|
||
key={item.label}
|
||
style={{
|
||
padding: '5px 2px',
|
||
background: item.bg,
|
||
borderRadius: '3px',
|
||
color: item.color,
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
{item.label}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '6px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
해상 특수성 반영(GPS 좌표, 선박종류, 해상기상, 파고, 유출물질 CAS번호·SEBC 거동분류).{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>WING 사고이력 모듈</b>과 표준코드 연동
|
||
설계.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 국내외 사고관리시스템 비교 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '10px',
|
||
}}
|
||
>
|
||
🌐 국내외 HNS/화학 사고관리시스템 비교
|
||
</div>
|
||
<div style={{ overflowX: 'auto' }}>
|
||
<table
|
||
style={{
|
||
width: '100%',
|
||
borderCollapse: 'collapse',
|
||
fontSize: 'var(--font-size-caption)',
|
||
}}
|
||
>
|
||
<thead>
|
||
<tr style={{ background: 'rgba(6,182,212,.06)' }}>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'left',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
항목
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
eMARS (EU)
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
PSID (미국)
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
RISCAD (일본)
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
CSC (한국)
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '6px 8px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 800,
|
||
}}
|
||
>
|
||
WING (개발중)
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{[
|
||
{
|
||
label: '운영기관',
|
||
eu: 'EC',
|
||
us: 'CCPS',
|
||
jp: 'JST·AIST',
|
||
kr: '화학물질안전원',
|
||
wing: '해양경찰청',
|
||
},
|
||
{
|
||
label: '대상',
|
||
eu: '중대화학사고',
|
||
us: '공정사고',
|
||
jp: '화학사고',
|
||
kr: '화학사고',
|
||
wing: '해상 HNS',
|
||
},
|
||
{
|
||
label: '초점',
|
||
eu: '산업시설',
|
||
us: '산업시설',
|
||
jp: '사고원인·산업',
|
||
kr: '사고물질',
|
||
wing: '해역·선박·확산',
|
||
},
|
||
{ label: '형태', eu: '웹DB', us: '앱CD', jp: '웹', kr: '앱', wing: '웹+GIS 통합' },
|
||
{
|
||
label: '해상 특화',
|
||
eu: '△',
|
||
us: '✕',
|
||
jp: '✕',
|
||
kr: '△',
|
||
wing: '◎',
|
||
wingColor: 'var(--color-accent)',
|
||
},
|
||
].map((row, i) => (
|
||
<tr
|
||
key={row.label}
|
||
style={{ borderBottom: i < 4 ? '1px solid rgba(255,255,255,.04)' : undefined }}
|
||
>
|
||
<td style={{ padding: '5px 8px', color: 'var(--fg-disabled)' }}>{row.label}</td>
|
||
<td style={{ textAlign: 'center', color: 'var(--fg-sub)' }}>{row.eu}</td>
|
||
<td style={{ textAlign: 'center', color: 'var(--fg-sub)' }}>{row.us}</td>
|
||
<td style={{ textAlign: 'center', color: 'var(--fg-sub)' }}>{row.jp}</td>
|
||
<td
|
||
style={{
|
||
textAlign: 'center',
|
||
color: i === 4 ? 'var(--color-accent)' : 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
{row.kr}
|
||
</td>
|
||
<td
|
||
style={{
|
||
textAlign: 'center',
|
||
color: (row as { wingColor?: string }).wingColor ?? 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
{row.wing}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '8px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
>
|
||
※ WING은 HATS 표준코드 + CAMEO/ALOHA + WRF-Chem + ROMS를 통합한 해상 특화 위기대응 시스템
|
||
</div>
|
||
</div>
|
||
|
||
{/* WING 적용 시사점 */}
|
||
<div className={`${card} ${cardBg}`}>
|
||
<div className="flex items-center gap-2 mb-[10px]">
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
💡 논문 시사점 → WING 시스템 반영
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-5 gap-2" style={{ fontSize: 'var(--font-size-caption)' }}>
|
||
{[
|
||
{
|
||
icon: '🔗',
|
||
title: '통합정보시스템',
|
||
sub: 'CARIS·CAMEO·기상·GIS 통합 → 사고 대응 의사결정 지원',
|
||
style: {},
|
||
},
|
||
{
|
||
icon: '🏭',
|
||
title: '항만별 특화 대응',
|
||
sub: '울산·여수·대산 등 고위험 항만 맞춤 시나리오 사전 구축',
|
||
style: {},
|
||
},
|
||
{
|
||
icon: '📡',
|
||
title: '실시간 모니터링',
|
||
sub: 'HNS 블랙박스 + 대기확산 예측 + 위험구역 자동 설정',
|
||
style: {},
|
||
},
|
||
{
|
||
icon: '🤝',
|
||
title: '통합지휘 지원',
|
||
sub: '미국 ICS 모델 참조 — 다기관 협업 정보공유 플랫폼',
|
||
style: {},
|
||
},
|
||
{
|
||
icon: '📊',
|
||
title: 'HATS 사고이력',
|
||
sub: '표준코드 DB 연동 → 동일해역·물질 과거사고 즉시 조회',
|
||
style: {
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
},
|
||
titleColor: 'var(--color-accent)',
|
||
},
|
||
].map((item) => (
|
||
<div
|
||
key={item.title}
|
||
style={{
|
||
padding: '10px',
|
||
background: 'var(--bg-card)',
|
||
border: '1px solid var(--stroke-default)',
|
||
borderRadius: '6px',
|
||
textAlign: 'center',
|
||
...item.style,
|
||
}}
|
||
>
|
||
<div style={{ fontSize: 'var(--font-size-title-2)', marginBottom: '4px' }}>
|
||
{item.icon}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontWeight: 700,
|
||
color: (item as { titleColor?: string }).titleColor ?? 'var(--fg-default)',
|
||
marginBottom: '3px',
|
||
}}
|
||
>
|
||
{item.title}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
{item.sub}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function GaussianModelPanel() {
|
||
return (
|
||
<>
|
||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||
{/* 가우시안 플룸 모델 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4`}>
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<div
|
||
style={{
|
||
width: '28px',
|
||
height: '28px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.15)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: 'var(--font-size-title-3)',
|
||
}}
|
||
>
|
||
🌀
|
||
</div>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
Gaussian Plume Model
|
||
</div>
|
||
<div
|
||
className="font-mono"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
|
||
>
|
||
연속 방출 (Continuous Release)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
borderRadius: '8px',
|
||
padding: '14px',
|
||
marginBottom: '12px',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '6px',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
📌 농도 산출식 (Concentration Equation)
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
color: 'var(--color-accent)',
|
||
lineHeight: 2,
|
||
letterSpacing: '.3px',
|
||
}}
|
||
>
|
||
C(x,y,z) = <span style={{ color: 'var(--color-accent)' }}>Q</span> / (2π ·{' '}
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>y</sub>
|
||
</span>{' '}
|
||
·{' '}
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>z</sub>
|
||
</span>{' '}
|
||
· <span style={{ color: 'var(--color-accent)' }}>u</span>)
|
||
<br />× exp(-y² / 2
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>y</sub>
|
||
</span>
|
||
²)
|
||
<br />× [exp(-(z-H)² / 2
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>z</sub>
|
||
</span>
|
||
²) + exp(-(z+H)² / 2
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>z</sub>
|
||
</span>
|
||
²)]
|
||
</div>
|
||
</div>
|
||
<div
|
||
className="grid grid-cols-2 gap-[6px]"
|
||
style={{ fontSize: 'var(--font-size-caption)' }}
|
||
>
|
||
<div
|
||
style={{
|
||
padding: '6px 8px',
|
||
background: 'rgba(6,182,212,.05)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '4px',
|
||
}}
|
||
>
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
|
||
Q
|
||
</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>= 배출률 (g/s)</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px 8px',
|
||
background: 'rgba(6,182,212,.05)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '4px',
|
||
}}
|
||
>
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
|
||
u
|
||
</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>= 풍속 (m/s)</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px 8px',
|
||
background: 'rgba(6,182,212,.05)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '4px',
|
||
}}
|
||
>
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
|
||
σ<sub>y</sub>
|
||
</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>= 수평 확산계수</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px 8px',
|
||
background: 'rgba(6,182,212,.05)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '4px',
|
||
}}
|
||
>
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
|
||
σ<sub>z</sub>
|
||
</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>= 연직 확산계수</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px 8px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '4px',
|
||
gridColumn: 'span 2',
|
||
}}
|
||
>
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
|
||
H
|
||
</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>
|
||
= 유효 방출고도 (m) — 물리적 높이 + 부력 상승 보정
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '10px',
|
||
padding: '8px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '6px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
💡 <b style={{ color: 'var(--color-accent)' }}>적용 조건:</b> 정상 상태 연속 배출, 균일
|
||
풍속, 평탄 지형. 해양 HNS 사고에서 탱크 파손으로 인한 지속적 누출 시나리오에 적합.
|
||
</div>
|
||
</div>
|
||
|
||
{/* 가우시안 퍼프 모델 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4`}>
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<div
|
||
style={{
|
||
width: '28px',
|
||
height: '28px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.15)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: 'var(--font-size-title-3)',
|
||
}}
|
||
>
|
||
💨
|
||
</div>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
Gaussian Puff Model
|
||
</div>
|
||
<div
|
||
className="font-mono"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
|
||
>
|
||
순간 방출 (Instantaneous Release)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
borderRadius: '8px',
|
||
padding: '14px',
|
||
marginBottom: '12px',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '6px',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
📌 농도 산출식 (Puff Concentration)
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
color: 'var(--color-accent)',
|
||
lineHeight: 2,
|
||
letterSpacing: '.3px',
|
||
}}
|
||
>
|
||
C(x,y,z,t) = <span style={{ color: 'var(--color-accent)' }}>M</span> / [(2π)
|
||
<sup>3/2</sup> ·{' '}
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>x</sub>
|
||
</span>{' '}
|
||
·{' '}
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>y</sub>
|
||
</span>{' '}
|
||
·{' '}
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>z</sub>
|
||
</span>
|
||
]
|
||
<br />× exp(-(x-<span style={{ color: 'var(--color-accent)' }}>u</span>t)² / 2
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>x</sub>
|
||
</span>
|
||
²)
|
||
<br />× exp(-y² / 2
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>y</sub>
|
||
</span>
|
||
²)
|
||
<br />× [exp(-(z-H)² / 2
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>z</sub>
|
||
</span>
|
||
²) + exp(-(z+H)² / 2
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
σ<sub>z</sub>
|
||
</span>
|
||
²)]
|
||
</div>
|
||
</div>
|
||
<div
|
||
className="grid grid-cols-2 gap-[6px]"
|
||
style={{ fontSize: 'var(--font-size-caption)' }}
|
||
>
|
||
<div
|
||
style={{
|
||
padding: '6px 8px',
|
||
background: 'rgba(6,182,212,.05)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '4px',
|
||
}}
|
||
>
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
|
||
M
|
||
</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>= 총 배출량 (g)</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px 8px',
|
||
background: 'rgba(6,182,212,.05)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '4px',
|
||
}}
|
||
>
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
|
||
t
|
||
</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>= 경과시간 (s)</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px 8px',
|
||
background: 'rgba(6,182,212,.05)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '4px',
|
||
gridColumn: 'span 2',
|
||
}}
|
||
>
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
|
||
σ<sub>x</sub>
|
||
</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>
|
||
= 풍하방향 확산계수 — Plume에서는 u에 의해 이미 반영
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '10px',
|
||
padding: '8px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '6px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
💡 <b style={{ color: 'var(--color-accent)' }}>적용 조건:</b> 순간적 대량 방출,
|
||
폭발·탱크 파열. 해양 사고 중 LPG/LNG 탱크 파열, 수소 연료선 폭발 시나리오에 적합.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Pasquill-Gifford 확산 계수 테이블 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
|
||
<div className="flex items-center justify-between mb-[14px]">
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
📊 Pasquill-Gifford 대기안정도 분류 및 확산계수
|
||
</div>
|
||
<div
|
||
className="font-mono"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
|
||
>
|
||
σ<sub>y</sub> = a·x<sup>b</sup> , σ<sub>z</sub> = c·x<sup>d</sup> + f
|
||
</div>
|
||
</div>
|
||
<div style={{ overflowX: 'auto' }}>
|
||
<table
|
||
style={{
|
||
width: '100%',
|
||
borderCollapse: 'collapse',
|
||
fontSize: 'var(--font-size-caption)',
|
||
}}
|
||
>
|
||
<thead>
|
||
<tr style={{ background: 'rgba(6,182,212,.08)' }}>
|
||
<th
|
||
style={{
|
||
padding: '8px 10px',
|
||
textAlign: 'left',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
안정도
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '8px 10px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
분류
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '8px 10px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
기상 조건
|
||
</th>
|
||
<th
|
||
className="font-mono"
|
||
style={{
|
||
padding: '8px 10px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
σ<sub>y</sub> 계수 (a, b)
|
||
</th>
|
||
<th
|
||
className="font-mono"
|
||
style={{
|
||
padding: '8px 10px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
σ<sub>z</sub> 계수 (c, d, f)
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '8px 10px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
풍속 범위
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '8px 10px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
해양 적용성
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{[
|
||
{
|
||
grade: 'A',
|
||
class: '매우 불안정',
|
||
cond: '맑은 날 강한 일사',
|
||
sy: '0.3658, 0.9024',
|
||
sz: '0.192, 0.936, 0',
|
||
wind: '< 2 m/s',
|
||
ocean: {
|
||
label: '드물게',
|
||
bg: 'rgba(6,182,212,.12)',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
gradeColor: 'var(--color-accent)',
|
||
rowBg: undefined,
|
||
},
|
||
{
|
||
grade: 'B',
|
||
class: '불안정',
|
||
cond: '맑은 날 약한 일사',
|
||
sy: '0.2751, 0.9031',
|
||
sz: '0.156, 0.922, 0',
|
||
wind: '2–3 m/s',
|
||
ocean: {
|
||
label: '드물게',
|
||
bg: 'rgba(6,182,212,.12)',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
gradeColor: 'var(--color-accent)',
|
||
rowBg: undefined,
|
||
},
|
||
{
|
||
grade: 'C',
|
||
class: '약간 불안정',
|
||
cond: '흐린 날 주간',
|
||
sy: '0.2090, 0.9031',
|
||
sz: '0.116, 0.905, 0',
|
||
wind: '3–5 m/s',
|
||
ocean: {
|
||
label: '적합',
|
||
bg: 'rgba(6,182,212,.12)',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
gradeColor: 'var(--color-accent)',
|
||
rowBg: undefined,
|
||
},
|
||
{
|
||
grade: 'D ★',
|
||
class: '중립',
|
||
cond: '흐린 날 / 해상풍',
|
||
sy: '0.1471, 0.9031',
|
||
sz: '0.079, 0.881, 0',
|
||
wind: '5–6 m/s',
|
||
ocean: {
|
||
label: '★ 해양 대표',
|
||
bg: 'rgba(6,182,212,.15)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 700,
|
||
},
|
||
gradeColor: 'var(--color-accent)',
|
||
rowBg: 'rgba(6,182,212,.03)',
|
||
},
|
||
{
|
||
grade: 'E',
|
||
class: '약간 안정',
|
||
cond: '야간 약한 바람',
|
||
sy: '0.1046, 0.9031',
|
||
sz: '0.064, 0.871, 0',
|
||
wind: '3–5 m/s',
|
||
ocean: {
|
||
label: '적합',
|
||
bg: 'rgba(6,182,212,.12)',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
gradeColor: 'var(--color-accent)',
|
||
rowBg: undefined,
|
||
},
|
||
{
|
||
grade: 'F',
|
||
class: '안정',
|
||
cond: '야간 맑은 하늘',
|
||
sy: '0.0722, 0.9031',
|
||
sz: '0.051, 0.814, 0',
|
||
wind: '< 3 m/s',
|
||
ocean: {
|
||
label: '위험↑',
|
||
bg: 'rgba(6,182,212,.12)',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
gradeColor: 'var(--color-accent)',
|
||
rowBg: undefined,
|
||
},
|
||
].map((row, idx) => (
|
||
<tr
|
||
key={row.grade}
|
||
style={{
|
||
borderBottom: idx < 5 ? '1px solid rgba(255,255,255,.04)' : undefined,
|
||
background: row.rowBg,
|
||
}}
|
||
>
|
||
<td style={{ padding: '7px 10px', fontWeight: 700, color: row.gradeColor }}>
|
||
{row.grade}
|
||
</td>
|
||
<td
|
||
style={{ padding: '7px 10px', textAlign: 'center', color: 'var(--fg-default)' }}
|
||
>
|
||
{row.class}
|
||
</td>
|
||
<td style={{ padding: '7px 10px', textAlign: 'center', color: 'var(--fg-sub)' }}>
|
||
{row.cond}
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{
|
||
padding: '7px 10px',
|
||
textAlign: 'center',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
{row.sy}
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{
|
||
padding: '7px 10px',
|
||
textAlign: 'center',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
{row.sz}
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{
|
||
padding: '7px 10px',
|
||
textAlign: 'center',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
{row.wind}
|
||
</td>
|
||
<td style={{ padding: '7px 10px', textAlign: 'center' }}>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
borderRadius: '4px',
|
||
background: row.ocean.bg,
|
||
color: row.ocean.color,
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: (row.ocean as { fontWeight?: number }).fontWeight ?? 600,
|
||
}}
|
||
>
|
||
{row.ocean.label}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '10px',
|
||
padding: '8px 10px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.1)',
|
||
borderRadius: '6px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
★ 해양 환경에서는 <b style={{ color: 'var(--color-accent)' }}>D 등급(중립)</b>이 가장
|
||
빈번하게 나타남. 해풍·육풍 전환 시 일시적으로 A~C 등급 출현 가능. F 등급(안정)은 농도가
|
||
국지적으로 높게 유지되어 <b style={{ color: 'var(--color-accent)' }}>위험도 상승</b>.
|
||
</div>
|
||
</div>
|
||
|
||
{/* 플룸 vs 퍼프 비교 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4`}>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '14px',
|
||
}}
|
||
>
|
||
⚖ Plume vs Puff — 모델 선택 기준
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
borderRadius: '8px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
🌀 Plume (연속 배출) 선택 기준
|
||
</div>
|
||
<div
|
||
className="flex flex-col gap-[5px]"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-sub)' }}
|
||
>
|
||
{[
|
||
'유출 지속시간 > 10분',
|
||
'탱크 균열/배관 파손 — 지속적 누출',
|
||
'풍속 > 1.5 m/s (정상류 가정 가능)',
|
||
'톨루엔, 벤젠, 자일렌 등 증발성 액체',
|
||
'암모니아 냉동 저장탱크 누출',
|
||
].map((item) => (
|
||
<div key={item} className="flex items-center gap-[5px]">
|
||
<span style={{ color: 'var(--color-accent)' }}>✓</span> {item}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
borderRadius: '8px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
💨 Puff (순간 배출) 선택 기준
|
||
</div>
|
||
<div
|
||
className="flex flex-col gap-[5px]"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-sub)' }}
|
||
>
|
||
{[
|
||
'유출 지속시간 < 10분',
|
||
'탱크 폭발/BLEVE — 순간 방출',
|
||
'풍향 변동이 큰 경우 (여러 퍼프 중첩)',
|
||
'LPG, 수소, LNG 탱크 파열',
|
||
'컨테이너 화학물질 돌발 유출',
|
||
].map((item) => (
|
||
<div key={item} className="flex items-center gap-[5px]">
|
||
<span style={{ color: 'var(--color-accent)' }}>✓</span> {item}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function SubstanceScenarioPanel() {
|
||
return (
|
||
<>
|
||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||
{/* 암모니아 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4`}>
|
||
<div className="flex items-center justify-between mb-[10px]">
|
||
<div className="flex items-center gap-2">
|
||
<span style={{ fontSize: 'var(--font-size-title-1)' }}>🧪</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-title-3)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
암모니아 (NH₃)
|
||
</span>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '3px 8px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.12)',
|
||
color: 'var(--color-accent)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
독성 ★★★
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-[6px] mb-[10px]">
|
||
{[
|
||
{ val: '-33°C', label: '비등점', color: 'var(--color-accent)' },
|
||
{ val: '0.682', label: '비중', color: 'var(--color-accent)' },
|
||
{ val: '300 ppm', label: 'IDLH', color: 'var(--color-accent)' },
|
||
].map((item) => (
|
||
<div
|
||
key={item.label}
|
||
style={{
|
||
padding: '6px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-title-3)',
|
||
fontWeight: 700,
|
||
color: item.color,
|
||
}}
|
||
>
|
||
{item.val}
|
||
</div>
|
||
<div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
|
||
{item.label}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
<div>
|
||
• 해수면 유출 시 <b style={{ color: 'var(--color-accent)' }}>급속 기화</b> → Flash
|
||
Evaporation
|
||
</div>
|
||
<div>
|
||
• 2D 기화율:{' '}
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
ṁ = 0.0168t − 0.01
|
||
</span>
|
||
</div>
|
||
<div>
|
||
• 3D 기화율:{' '}
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
ṁ = 0.0182t − 0.0112
|
||
</span>
|
||
</div>
|
||
<div>
|
||
• 독성 구름 풍하측 <b style={{ color: 'var(--color-accent)' }}>최대 10km</b>까지 영향
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 메탄올 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4`}>
|
||
<div className="flex items-center justify-between mb-[10px]">
|
||
<div className="flex items-center gap-2">
|
||
<span style={{ fontSize: 'var(--font-size-title-1)' }}>🧫</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-title-3)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
메탄올 (CH₃OH)
|
||
</span>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '3px 8px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.12)',
|
||
color: 'var(--color-accent)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
인화성+독성
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-[6px] mb-[10px]">
|
||
{[
|
||
{ val: '64.7°C', label: '비등점', color: 'var(--color-accent)' },
|
||
{ val: '0.791', label: '비중', color: 'var(--color-accent)' },
|
||
{ val: '6,000 ppm', label: 'IDLH', color: 'var(--color-accent)' },
|
||
].map((item) => (
|
||
<div
|
||
key={item.label}
|
||
style={{
|
||
padding: '6px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-title-3)',
|
||
fontWeight: 700,
|
||
color: item.color,
|
||
}}
|
||
>
|
||
{item.val}
|
||
</div>
|
||
<div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
|
||
{item.label}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
<div>
|
||
• 수용성 → 해수 용해 + 증발 <b style={{ color: 'var(--color-accent)' }}>복합 거동</b>
|
||
</div>
|
||
<div>
|
||
• 인화점{' '}
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
11°C
|
||
</span>{' '}
|
||
→ 상온에서 증기 인화 위험
|
||
</div>
|
||
<div>
|
||
• 무색·무취 → <b style={{ color: 'var(--color-accent)' }}>감지 어려움</b>, 계측기 필수
|
||
</div>
|
||
<div>
|
||
• LFL~UFL:{' '}
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
6.0% ~ 36.5%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 수소 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4`}>
|
||
<div className="flex items-center justify-between mb-[10px]">
|
||
<div className="flex items-center gap-2">
|
||
<span style={{ fontSize: 'var(--font-size-title-1)' }}>⚡</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-title-3)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
수소 (H₂)
|
||
</span>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '3px 8px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.12)',
|
||
color: 'var(--color-accent)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
폭발성 ★★★
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-[6px] mb-[10px]">
|
||
{[
|
||
{ val: '-253°C', label: '비등점', color: 'var(--color-accent)' },
|
||
{ val: '0.071', label: '비중', color: 'var(--color-accent)' },
|
||
{ val: 'N/A', label: 'IDLH(질식)', color: 'var(--color-accent)' },
|
||
].map((item) => (
|
||
<div
|
||
key={item.label}
|
||
style={{
|
||
padding: '6px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-title-3)',
|
||
fontWeight: 700,
|
||
color: item.color,
|
||
}}
|
||
>
|
||
{item.val}
|
||
</div>
|
||
<div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
|
||
{item.label}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
<div>
|
||
• 공기보다 <b style={{ color: 'var(--color-accent)' }}>14배 가벼움</b> → 급속 상승
|
||
확산
|
||
</div>
|
||
<div>
|
||
• LFL~UFL:{' '}
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
4.0% ~ 75.0%
|
||
</span>{' '}
|
||
(극넓은 가연범위)
|
||
</div>
|
||
<div>
|
||
• 점화에너지{' '}
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
0.017 mJ
|
||
</span>{' '}
|
||
(정전기로도 폭발)
|
||
</div>
|
||
<div>
|
||
• Puff 모델 필수 → <b style={{ color: 'var(--color-accent)' }}>BLEVE/VCE</b> 시나리오
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* LNG */}
|
||
<div className={`${cardBg} rounded-[10px] p-4`}>
|
||
<div className="flex items-center justify-between mb-[10px]">
|
||
<div className="flex items-center gap-2">
|
||
<span style={{ fontSize: 'var(--font-size-title-1)' }}>🔵</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-title-3)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
LNG (CH₄)
|
||
</span>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '3px 8px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.12)',
|
||
color: 'var(--color-accent)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
인화성 ★★
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-[6px] mb-[10px]">
|
||
{[
|
||
{ val: '-162°C', label: '비등점', color: 'var(--color-accent)' },
|
||
{ val: '0.450', label: '비중', color: 'var(--color-accent)' },
|
||
{ val: 'N/A', label: 'IDLH(질식)', color: 'var(--color-accent)' },
|
||
].map((item) => (
|
||
<div
|
||
key={item.label}
|
||
style={{
|
||
padding: '6px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-title-3)',
|
||
fontWeight: 700,
|
||
color: item.color,
|
||
}}
|
||
>
|
||
{item.val}
|
||
</div>
|
||
<div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
|
||
{item.label}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.7,
|
||
}}
|
||
>
|
||
<div>
|
||
• 극저온 유출 시 <b style={{ color: 'var(--color-accent)' }}>RPT</b>(Rapid Phase
|
||
Transition) 발생
|
||
</div>
|
||
<div>
|
||
• 해수면 Pool 형성 → 기화율{' '}
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
0.025t
|
||
</span>
|
||
</div>
|
||
<div>
|
||
• 가연범위:{' '}
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
5.0% ~ 15.0%
|
||
</span>
|
||
</div>
|
||
<div>
|
||
• 초기 냉각 증기 → <b style={{ color: 'var(--color-accent)' }}>지표면 체류</b> 후 상승
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 물질별 AEGL 비교표 */}
|
||
<div className={`${cardBg} rounded-[10px] p-4`}>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '12px',
|
||
}}
|
||
>
|
||
📊 물질별 AEGL/ERPG 기준 비교 (ppm, 1시간 노출)
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(5,1fr)',
|
||
gap: '8px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
}}
|
||
>
|
||
{/* 헤더 */}
|
||
<div
|
||
style={{
|
||
padding: '8px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '6px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
기준
|
||
</div>
|
||
<div style={{ fontWeight: 700, color: 'var(--fg-default)' }}>등급</div>
|
||
</div>
|
||
{[
|
||
{ icon: '🧪', label: 'NH₃', color: 'var(--color-accent)' },
|
||
{ icon: '🧫', label: 'MeOH', color: 'var(--color-accent)' },
|
||
{ icon: '⚡', label: 'H₂', color: 'var(--color-accent)' },
|
||
{ icon: '🔵', label: 'LNG', color: 'var(--color-accent)' },
|
||
].map((item) => (
|
||
<div
|
||
key={item.label}
|
||
style={{
|
||
padding: '8px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '6px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
{item.icon}
|
||
</div>
|
||
<div style={{ fontWeight: 700, color: item.color }}>{item.label}</div>
|
||
</div>
|
||
))}
|
||
{/* AEGL-1 */}
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
fontWeight: 600,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
AEGL-1
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
30
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
670
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
N/A
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
N/A
|
||
</div>
|
||
{/* AEGL-2 */}
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
fontWeight: 600,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
AEGL-2
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
160
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
2,100
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
N/A
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
N/A
|
||
</div>
|
||
{/* AEGL-3 */}
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
fontWeight: 600,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
AEGL-3
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
1,100
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
14,000
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
N/A
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
N/A
|
||
</div>
|
||
{/* LFL */}
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
fontWeight: 600,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
LFL (%)
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
15.0
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
6.0
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
4.0
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '6px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
borderRadius: '4px',
|
||
textAlign: 'center',
|
||
}}
|
||
className="font-mono"
|
||
>
|
||
5.0
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '8px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
>
|
||
※ H₂, LNG는 독성이 아닌 질식/인화성 위험으로 AEGL 대신 LFL/UFL, 과압(kPa) 기준 적용
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
/* ═══ Panel 3: 해양환경 보정 ═══ */
|
||
function OceanCorrectionPanel() {
|
||
return (
|
||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||
{/* 해양 보정 인자 */}
|
||
<div className={`${card} ${cardBg} p-4`}>
|
||
<div style={labelStyle('var(--color-accent)')}>🌊 해양환경 특수 보정 인자</div>
|
||
<div className="flex flex-col gap-2.5">
|
||
{/* 해풍·육풍 순환 보정 */}
|
||
<div
|
||
className="p-2.5 bg-bg-base rounded-md"
|
||
style={{ border: '1px solid rgba(6,182,212,.15)' }}
|
||
>
|
||
<div className="flex items-center justify-between mb-1.5">
|
||
<span className="text-label-2 font-bold text-fg">해풍·육풍 순환 보정</span>
|
||
<span style={tag('var(--color-accent)')}>핵심 인자</span>
|
||
</div>
|
||
<div className="text-caption text-fg-sub leading-[1.7]">
|
||
해안에서는 주간(해풍)·야간(육풍) 풍향 전환 발생. 기존 가우시안 모델은 정상 풍향을
|
||
가정하므로, <b style={{ color: 'var(--color-accent)' }}>풍향 전환 시점</b>에서 플룸
|
||
방향 급변을 반영해야 함.
|
||
<br />
|
||
<span
|
||
className="font-mono"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
|
||
>
|
||
θ(t) = θ₀ + Δθ · sigmoid((t - t<sub>shift</sub>)/τ)
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{/* 해수면 거칠기 */}
|
||
<div
|
||
className="p-2.5 bg-bg-base rounded-md"
|
||
style={{ border: '1px solid rgba(6,182,212,.15)' }}
|
||
>
|
||
<div className="flex items-center justify-between mb-1.5">
|
||
<span className="text-label-2 font-bold text-fg">해수면 거칠기 (z₀) 보정</span>
|
||
<span style={tag('var(--color-accent)')}>중요</span>
|
||
</div>
|
||
<div className="text-caption text-fg-sub leading-[1.7]">
|
||
해수면은 육상 대비 표면 거칠기가 매우 낮음 (
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
z₀ ≈ 0.0002 m
|
||
</span>{' '}
|
||
vs 도시 0.5~2.0 m). Charnock 관계식 적용:
|
||
<br />
|
||
<span
|
||
className="font-mono"
|
||
style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
|
||
>
|
||
z₀ = α<sub>c</sub> · u*² / g (α<sub>c</sub> ≈ 0.011~0.018)
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{/* SST 영향 */}
|
||
<div
|
||
className="p-2.5 bg-bg-base rounded-md"
|
||
style={{ border: '1px solid rgba(6,182,212,.15)' }}
|
||
>
|
||
<div className="flex items-center justify-between mb-1.5">
|
||
<span className="text-label-2 font-bold text-fg">해수면 온도(SST) 영향</span>
|
||
<span style={tag('var(--color-accent)')}>보조</span>
|
||
</div>
|
||
<div className="text-caption text-fg-sub leading-[1.7]">
|
||
해수면 온도가 기온보다 높으면 열적 불안정 촉진 → 수직 혼합 증가 → 지표 농도 감소.
|
||
반대로 SST < T<sub>air</sub>이면 안정층 형성으로{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>농도 체류↑</b>.
|
||
</div>
|
||
</div>
|
||
{/* MABL */}
|
||
<div
|
||
className="p-2.5 bg-bg-base rounded-md"
|
||
style={{ border: '1px solid rgba(6,182,212,.15)' }}
|
||
>
|
||
<div className="flex items-center justify-between mb-1.5">
|
||
<span className="text-label-2 font-bold text-fg">해상 대기경계층(MABL) 구조</span>
|
||
<span style={tag('var(--color-accent)')}>중요</span>
|
||
</div>
|
||
<div className="text-caption text-fg-sub leading-[1.7]">
|
||
해양 대기경계층은 육상과 구조가 상이. 혼합고{' '}
|
||
<span className="font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
300~800 m
|
||
</span>
|
||
(육상 1~2 km)으로 낮아 확산이 억제될 수 있음. Fumigation 발생 시{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>지표 농도 급상승</b>.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 보정 계수 시각화 */}
|
||
<div className="flex flex-col gap-4">
|
||
<div className={`${card} ${cardBg} p-4`}>
|
||
<div style={labelStyle('var(--color-accent)')}>
|
||
📈 확산계수 보정 비교 (σ<sub>y</sub> at 1km)
|
||
</div>
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-caption text-fg-disabled min-w-[70px]">P-G 원본</span>
|
||
<div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
|
||
<div
|
||
className="h-full rounded"
|
||
style={{
|
||
width: '60%',
|
||
background: 'var(--color-accent)',
|
||
}}
|
||
/>
|
||
</div>
|
||
<span
|
||
className="font-mono text-caption min-w-[50px] text-right"
|
||
style={{ color: 'var(--color-accent)' }}
|
||
>
|
||
68 m
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-caption text-fg-disabled min-w-[70px]">해양 보정</span>
|
||
<div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
|
||
<div
|
||
className="h-full rounded"
|
||
style={{
|
||
width: '82%',
|
||
background: 'var(--color-accent)',
|
||
}}
|
||
/>
|
||
</div>
|
||
<span
|
||
className="font-mono text-caption min-w-[50px] text-right"
|
||
style={{ color: 'var(--color-accent)' }}
|
||
>
|
||
92 m
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-caption text-fg-disabled min-w-[70px]">ALOHA</span>
|
||
<div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
|
||
<div
|
||
className="h-full rounded"
|
||
style={{
|
||
width: '72%',
|
||
background: 'var(--color-accent)',
|
||
}}
|
||
/>
|
||
</div>
|
||
<span
|
||
className="font-mono text-caption min-w-[50px] text-right"
|
||
style={{ color: 'var(--color-accent)' }}
|
||
>
|
||
78 m
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="mt-2 text-caption text-fg-disabled">
|
||
※ D등급(중립), 풍속 5 m/s, 풍하거리 1 km 기준
|
||
</div>
|
||
</div>
|
||
|
||
<div className={`${card} ${cardBg} p-4`}>
|
||
<div style={labelStyle('var(--color-accent)')}>🔬 ALOHA vs 이문진박사모델 비교</div>
|
||
<div className="grid grid-cols-2 gap-2 text-caption">
|
||
<div className="p-2 bg-bg-base rounded-md">
|
||
<div className="font-bold mb-1" style={{ color: 'var(--color-accent)' }}>
|
||
ALOHA (EPA)
|
||
</div>
|
||
<div className="text-fg-sub leading-[1.6]">
|
||
• 가우시안 플룸 기본
|
||
<br />
|
||
• 평탄 지형 가정
|
||
<br />
|
||
• 표면 거칠기 고정값
|
||
<br />
|
||
• 해양 특성 미반영
|
||
<br />• 1차원 풍향 고정
|
||
</div>
|
||
</div>
|
||
<div
|
||
className="p-2 rounded-md"
|
||
style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.1)' }}
|
||
>
|
||
<div className="font-bold mb-1" style={{ color: 'var(--color-accent)' }}>
|
||
이문진박사모델 (해양 보정)
|
||
</div>
|
||
<div className="text-fg-sub leading-[1.6]">
|
||
• 가우시안 + 해양 보정
|
||
<br />
|
||
• 해안 지형 효과 반영
|
||
<br />
|
||
• Charnock z₀ 동적 계산
|
||
<br />
|
||
• 해풍/육풍 전환 반영
|
||
<br />• MABL 혼합고 가변
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ═══ Panel 4: 모델 검증 ═══ */
|
||
function VerificationPanel() {
|
||
return (
|
||
<div className="grid gap-4 mb-4" style={{ gridTemplateColumns: '2fr 1fr' }}>
|
||
{/* 검증 결과 테이블 */}
|
||
<div className={`${card} ${cardBg} p-4`}>
|
||
<div style={labelStyle('var(--color-accent)')}>
|
||
✅ 모델 검증 결과 — 실측 데이터 대비 정확도
|
||
</div>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-caption" style={{ borderCollapse: 'collapse' }}>
|
||
<thead>
|
||
<tr style={{ background: 'rgba(6,182,212,.06)' }}>
|
||
<th
|
||
className="p-2 text-left"
|
||
style={{
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
검증 항목
|
||
</th>
|
||
<th
|
||
className="p-2 text-center"
|
||
style={{
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
ALOHA
|
||
</th>
|
||
<th
|
||
className="p-2 text-center"
|
||
style={{
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
이문진박사모델
|
||
</th>
|
||
<th
|
||
className="p-2 text-center"
|
||
style={{ borderBottom: '2px solid var(--stroke-light)', color: 'var(--fg-sub)' }}
|
||
>
|
||
실측값
|
||
</th>
|
||
<th
|
||
className="p-2 text-center"
|
||
style={{ borderBottom: '2px solid var(--stroke-light)', color: 'var(--fg-sub)' }}
|
||
>
|
||
오차율
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
|
||
<td className="p-2 text-fg">NH₃ 최대 도달거리 (AEGL-2)</td>
|
||
<td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
8.2 km
|
||
</td>
|
||
<td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
7.1 km
|
||
</td>
|
||
<td className="p-2 text-center font-mono text-fg">6.8 km</td>
|
||
<td className="p-2 text-center">
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
+20.6%
|
||
</span>
|
||
{' / '}
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
+4.4%
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
|
||
<td className="p-2 text-fg">풍하 1km 지점 농도 (ppm)</td>
|
||
<td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
245
|
||
</td>
|
||
<td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
198
|
||
</td>
|
||
<td className="p-2 text-center font-mono text-fg">187</td>
|
||
<td className="p-2 text-center">
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
+31.0%
|
||
</span>
|
||
{' / '}
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
+5.9%
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
|
||
<td className="p-2 text-fg">MeOH 증기 확산 면적 (km²)</td>
|
||
<td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
4.8
|
||
</td>
|
||
<td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
3.6
|
||
</td>
|
||
<td className="p-2 text-center font-mono text-fg">3.4</td>
|
||
<td className="p-2 text-center">
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
+41.2%
|
||
</span>
|
||
{' / '}
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
+5.9%
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
|
||
<td className="p-2 text-fg">H₂ 가연성 구름 반경 (m)</td>
|
||
<td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
280
|
||
</td>
|
||
<td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
235
|
||
</td>
|
||
<td className="p-2 text-center font-mono text-fg">220</td>
|
||
<td className="p-2 text-center">
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
+27.3%
|
||
</span>
|
||
{' / '}
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
+6.8%
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="p-2 text-fg">LNG Pool 확산 직경 (m)</td>
|
||
<td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
165
|
||
</td>
|
||
<td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
142
|
||
</td>
|
||
<td className="p-2 text-center font-mono text-fg">138</td>
|
||
<td className="p-2 text-center">
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
+19.6%
|
||
</span>
|
||
{' / '}
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
+2.9%
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div
|
||
className="mt-3 p-2.5 text-caption text-fg-sub leading-[1.7] rounded-md"
|
||
style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
|
||
>
|
||
<b style={{ color: 'var(--color-accent)' }}>결론:</b> ALOHA는 해양 환경에서{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>평균 20~40% 과대 예측</b> 경향.
|
||
이문진박사모델은 해양 보정 인자 적용으로{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>평균 오차 ±5~7%</b>로 대폭 개선. 특히 풍하 1km
|
||
이내 근거리 농도 예측 정확도가 현저히 향상됨.
|
||
</div>
|
||
</div>
|
||
|
||
{/* 참고문헌 + 시스템 적용 */}
|
||
<div className="flex flex-col gap-3">
|
||
<div className={`${card} ${cardBg} p-4`}>
|
||
<div className="text-label-1 font-bold text-fg mb-2.5">📚 참고 문헌</div>
|
||
<div className="flex flex-col gap-2 text-caption text-fg-sub leading-[1.6]">
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
이문진 외, "해양 HNS 사고 시 대기확산 예측을 위한 가우시안 모델의 해양환경 보정에 관한
|
||
연구", 한국해양환경·에너지학회지, 2014
|
||
</div>
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
이문진 외, "친환경 선박연료 해양 유출 시 대기확산 특성 연구 — 암모니아 기화율 모델링",
|
||
KIOST, 2023
|
||
</div>
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
EPA, "ALOHA User's Manual", 2024
|
||
</div>
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
Pasquill, F., "The Estimation of the Dispersion of Windborne Material", Meteorological
|
||
Magazine, 1961
|
||
</div>
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
Charnock, H., "Wind stress on a water surface", Q.J.R. Meteorol. Soc., 1955
|
||
</div>
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
유영현, "HNS 재난사고에 대한 해양경찰의 대응 방안", 한국위기관리논집, 9(11), pp.77-92,
|
||
2013
|
||
</div>
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
해양경찰청, "HNS 사고 국가 대비 대응 체제 선진화 방안 연구용역 최종보고서", 2011
|
||
</div>
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
김창겸·이문진 외, "해양산업시설 배출 위험유해물질(HNS)의 해양확산 수치모의",
|
||
한국해양환경·안전학회지, 30(s4), pp.42-51, 2024
|
||
</div>
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
장하용·이문진 외, "신속한 의사결정을 위한 HNS 사고이력관리시스템 설계 및 구현",
|
||
한국해양환경·안전학회지, 23(2), pp.168-176, 2017
|
||
</div>
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
박경애·이진호·박재진·김태성·이문진, "인공위성 원격탐사 기반 AI 활용 위험·유해물질(HNS)
|
||
탐지 기술 개발", 한국해양환경·에너지학회 추계학술대회, pp.125-126, 2025 — HNS의
|
||
열적외선 스펙트럼 수집·분석, Sentinel-2 광학위성 영상에 AI 기법을 적용하여 HNS
|
||
탐지·분류, 스펙트럼 기반 분석 방법과 비교 검증. 해양수산부 지원(RS-2023-00254781)
|
||
</div>
|
||
<div
|
||
className="p-2 bg-bg-base rounded"
|
||
style={{ borderLeft: '3px solid var(--color-accent)' }}
|
||
>
|
||
오진덕·김주영·이득재·김용명·최훈·이문진, "다항목 HNS 데이터의 실시간 취득 및 AI를
|
||
활용한 결측값 실시간 처리 기술 개발", 한국해양과학기술협의회 공동학술대회, pp.85-86,
|
||
2024 — LSTM(Long Short-Term Memory) 순환 신경망으로 HNS 시계열 데이터의 결측값을
|
||
예측·보정하는 방법 연구, 다양한 모의 자료로 성능 비교·검증. 해양수산부
|
||
지원(RS-2021-KS211535)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className="rounded-[10px] p-[14px]"
|
||
style={{
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
}}
|
||
>
|
||
<div className="text-label-2 font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
|
||
💡 시스템 적용 방안
|
||
</div>
|
||
<div className="text-caption text-fg-sub leading-[1.7]">
|
||
WING 시스템은 기본 ALOHA 엔진 위에{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>이문진박사모델 해양 보정 모듈</b>을 레이어로
|
||
적용하여 두 모델의 결과를 동시에 제공합니다. 사용자는 보수적 예측(ALOHA)과 정밀
|
||
예측(이문진박사모델)을 비교하여 의사결정할 수 있습니다.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ═══ Panel 5: 실시간 비교 ═══ */
|
||
function RealtimeComparePanel() {
|
||
return (
|
||
<div className={`${card} ${cardBg} p-4 mb-4`}>
|
||
{/* 헤더 */}
|
||
<div className="flex items-center justify-between mb-3.5">
|
||
<div className="text-label-1 font-bold text-fg">⚡ 실시간 모델 비교 시뮬레이션</div>
|
||
<div className="flex gap-1.5">
|
||
<button
|
||
className="px-4 py-1.5 rounded-md text-caption font-bold cursor-pointer text-white"
|
||
style={{
|
||
background: 'var(--color-accent)',
|
||
border: 'none',
|
||
}}
|
||
>
|
||
▶ 비교 실행
|
||
</button>
|
||
<button
|
||
className="px-3 py-1.5 rounded-md text-caption font-semibold cursor-pointer text-fg-sub bg-bg-card"
|
||
style={{ border: '1px solid var(--stroke-default)' }}
|
||
>
|
||
⚙ 파라미터
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 입력 필드 */}
|
||
<div className="grid grid-cols-6 gap-2 mb-3.5">
|
||
<div>
|
||
<label className="text-caption text-fg-disabled block mb-1">물질</label>
|
||
<select
|
||
className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none"
|
||
style={{ border: '1px solid var(--stroke-default)' }}
|
||
>
|
||
<option>암모니아</option>
|
||
<option>메탄올</option>
|
||
<option>수소</option>
|
||
<option>LNG</option>
|
||
<option>톨루엔</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-caption text-fg-disabled block mb-1">유출량 (kL)</label>
|
||
<input
|
||
type="number"
|
||
defaultValue={12.0}
|
||
readOnly
|
||
className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
|
||
style={{ border: '1px solid var(--stroke-default)' }}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="text-caption text-fg-disabled block mb-1">풍속 (m/s)</label>
|
||
<input
|
||
type="number"
|
||
defaultValue={5.2}
|
||
readOnly
|
||
className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
|
||
style={{ border: '1px solid var(--stroke-default)' }}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="text-caption text-fg-disabled block mb-1">안정도</label>
|
||
<select
|
||
className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none"
|
||
style={{ border: '1px solid var(--stroke-default)' }}
|
||
>
|
||
<option>A</option>
|
||
<option>B</option>
|
||
<option>C</option>
|
||
<option>D</option>
|
||
<option>E</option>
|
||
<option>F</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-caption text-fg-disabled block mb-1">기온 (°C)</label>
|
||
<input
|
||
type="number"
|
||
defaultValue={8.5}
|
||
readOnly
|
||
className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
|
||
style={{ border: '1px solid var(--stroke-default)' }}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="text-caption text-fg-disabled block mb-1">SST (°C)</label>
|
||
<input
|
||
type="number"
|
||
defaultValue={12.3}
|
||
readOnly
|
||
className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
|
||
style={{ border: '1px solid var(--stroke-default)' }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 결과 카드 */}
|
||
<div className="grid grid-cols-3 gap-3">
|
||
{/* ALOHA */}
|
||
<div
|
||
className="p-3.5 rounded-lg text-center"
|
||
style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
|
||
>
|
||
<div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
|
||
ALOHA (EPA)
|
||
</div>
|
||
<div
|
||
className="font-bold font-mono"
|
||
style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
|
||
>
|
||
3.8 <span style={{ fontSize: 'var(--font-size-label-1)' }}>km</span>
|
||
</div>
|
||
<div className="text-caption text-fg-disabled mt-0.5">AEGL-2 도달거리</div>
|
||
<div className="mt-2 grid grid-cols-2 gap-1 text-caption">
|
||
<div className="p-1 bg-bg-base rounded">
|
||
<span className="text-fg-disabled">면적</span>
|
||
<br />
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
12.3 km²
|
||
</span>
|
||
</div>
|
||
<div className="p-1 bg-bg-base rounded">
|
||
<span className="text-fg-disabled">최대농도</span>
|
||
<br />
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
520 ppm
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* 이문진박사모델 */}
|
||
<div
|
||
className="p-3.5 rounded-lg text-center"
|
||
style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
|
||
>
|
||
<div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
|
||
이문진박사모델 (해양보정)
|
||
</div>
|
||
<div
|
||
className="font-bold font-mono"
|
||
style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
|
||
>
|
||
2.9 <span style={{ fontSize: 'var(--font-size-label-1)' }}>km</span>
|
||
</div>
|
||
<div className="text-caption text-fg-disabled mt-0.5">AEGL-2 도달거리</div>
|
||
<div className="mt-2 grid grid-cols-2 gap-1 text-caption">
|
||
<div className="p-1 bg-bg-base rounded">
|
||
<span className="text-fg-disabled">면적</span>
|
||
<br />
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
8.4 km²
|
||
</span>
|
||
</div>
|
||
<div className="p-1 bg-bg-base rounded">
|
||
<span className="text-fg-disabled">최대농도</span>
|
||
<br />
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
410 ppm
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* 차이 분석 */}
|
||
<div
|
||
className="p-3.5 rounded-lg text-center"
|
||
style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
|
||
>
|
||
<div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
|
||
차이 분석
|
||
</div>
|
||
<div
|
||
className="font-bold font-mono"
|
||
style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
|
||
>
|
||
-23.7<span style={{ fontSize: 'var(--font-size-label-1)' }}>%</span>
|
||
</div>
|
||
<div className="text-caption text-fg-disabled mt-0.5">도달거리 감소율</div>
|
||
<div className="mt-2 grid grid-cols-2 gap-1 text-caption">
|
||
<div className="p-1 bg-bg-base rounded">
|
||
<span className="text-fg-disabled">면적차</span>
|
||
<br />
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
-31.7%
|
||
</span>
|
||
</div>
|
||
<div className="p-1 bg-bg-base rounded">
|
||
<span className="text-fg-disabled">농도차</span>
|
||
<br />
|
||
<span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
|
||
-21.2%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 결과 설명 */}
|
||
<div
|
||
className="mt-3 p-2.5 text-caption text-fg-sub leading-[1.7] rounded-md"
|
||
style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
|
||
>
|
||
⚡ <b style={{ color: 'var(--color-accent)' }}>실시간 비교 결과:</b> 해양 환경에서 ALOHA의
|
||
과대 예측 경향이 확인됩니다. 이문진박사모델은 해수면 거칠기(z₀), MABL 높이, SST-기온 차이를
|
||
반영하여 보다 현실적인 확산 범위를 산출합니다.{' '}
|
||
<b>
|
||
대피 구역 설정 시 ALOHA 결과를 보수적 기준으로, 이문진박사모델을 현실적 기준으로 병행 활용
|
||
</b>
|
||
을 권장합니다.
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ═══ 패널 6: WRF-Chem·발전 ═══ */
|
||
|
||
function WrfChemPanel() {
|
||
return (
|
||
<>
|
||
{/* WRF-Chem 모델 상세 */}
|
||
<div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
|
||
<div className="flex items-center gap-2" style={{ marginBottom: '14px' }}>
|
||
<div
|
||
style={{
|
||
width: '32px',
|
||
height: '32px',
|
||
borderRadius: '8px',
|
||
background: 'rgba(6,182,212,.15)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: 'var(--font-size-title-2)',
|
||
}}
|
||
>
|
||
🌐
|
||
</div>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-3)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
WRF-Chem 모델 상세
|
||
</div>
|
||
<div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
|
||
Weather Research and Forecasting model coupled with Chemistry
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3.5">
|
||
{/* 구성 요소 */}
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
구성 요소
|
||
</div>
|
||
<div className="flex flex-col gap-1.5">
|
||
{/* WRF */}
|
||
<div
|
||
style={{
|
||
padding: '10px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
borderRadius: '6px',
|
||
}}
|
||
>
|
||
<div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
WRF (기상)
|
||
</span>
|
||
<span
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
padding: '2px 6px',
|
||
borderRadius: '3px',
|
||
background: 'rgba(6,182,212,.1)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
v4.x
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
비정수압(non-hydrostatic) 중규모 기상 모델. 3차원 바람장, 기온, 습도, 대기경계층
|
||
구조를 역학적으로 계산. 중첩 도메인(nesting)으로 해상도 1km까지 구현 가능.
|
||
</div>
|
||
</div>
|
||
{/* Chem */}
|
||
<div
|
||
style={{
|
||
padding: '10px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
borderRadius: '6px',
|
||
}}
|
||
>
|
||
<div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
Chem (화학)
|
||
</span>
|
||
<span
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
padding: '2px 6px',
|
||
borderRadius: '3px',
|
||
background: 'rgba(6,182,212,.1)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
Online
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
기상 모델과 동일한 시간 스텝에서 화학종의 이류(advection), 난류확산(diffusion),
|
||
건·습침적(deposition), 화학반응을 동시에 계산. Offline 방식 대비 정확도 향상.
|
||
</div>
|
||
</div>
|
||
{/* 결합 효과 */}
|
||
<div
|
||
style={{
|
||
padding: '10px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
borderRadius: '6px',
|
||
}}
|
||
>
|
||
<div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
결합 효과
|
||
</span>
|
||
<span
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
padding: '2px 6px',
|
||
borderRadius: '3px',
|
||
background: 'rgba(6,182,212,.1)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
Feedback
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
화학물질의 복사 효과가 기상장에 되먹임(feedback). 예: 대량의 에어로졸 방출 시
|
||
일사량 변화 → 대기안정도 변화 → 확산 패턴 변화.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* HNS 사고 적용 시 장점 */}
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
HNS 사고 적용 시 장점
|
||
</div>
|
||
<div className="flex flex-col gap-1.5">
|
||
{[
|
||
{
|
||
num: '1',
|
||
text: (
|
||
<>
|
||
<b style={{ color: 'var(--fg-default)' }}>3D 확산 모의:</b> 연직 방향 확산까지
|
||
포함한 정밀 농도장 계산. 고층 대기로의 확산과 fumigation 효과 반영
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
num: '2',
|
||
text: (
|
||
<>
|
||
<b style={{ color: 'var(--fg-default)' }}>비정상류 대응:</b> 풍향
|
||
전환(해풍↔육풍), 돌풍, 전선 통과 등 시변 기상 조건을 실시간 반영
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
num: '3',
|
||
text: (
|
||
<>
|
||
<b style={{ color: 'var(--fg-default)' }}>복잡 지형 반영:</b> 해안 절벽, 항만
|
||
구조물, 인접 도시의 건물 효과를 지형 데이터로 반영
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
num: '4',
|
||
text: (
|
||
<>
|
||
<b style={{ color: 'var(--fg-default)' }}>장기 모의:</b> 24~72시간 예측으로
|
||
사고 수습 계획 및 장기 피해 평가 지원
|
||
</>
|
||
),
|
||
},
|
||
].map(({ num, text }) => (
|
||
<div
|
||
key={num}
|
||
className="flex gap-2"
|
||
style={{ padding: '8px', background: 'var(--bg-base)', borderRadius: '6px' }}
|
||
>
|
||
<div
|
||
className="font-mono flex items-center justify-center flex-shrink-0"
|
||
style={{
|
||
width: '24px',
|
||
height: '24px',
|
||
borderRadius: '50%',
|
||
background: 'rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 800,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
{num}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
{text}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '10px',
|
||
padding: '8px',
|
||
background: 'rgba(6,182,212,.05)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '6px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
⚠ <b style={{ color: 'var(--color-accent)' }}>계산 비용:</b> WRF-Chem은 가우시안 모델
|
||
대비 계산 시간이 <b>100~1,000배</b> 소요. 초기 대응에는 가우시안 모델, 정밀 분석에는
|
||
WRF-Chem으로 <b style={{ color: 'var(--color-accent)' }}>이중 운용</b> 전략 적용.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ROMS 해양확산 수치모의 검증 */}
|
||
<div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
|
||
<div className="flex items-center justify-between" style={{ marginBottom: '14px' }}>
|
||
<div className="flex items-center gap-2">
|
||
<div
|
||
style={{
|
||
width: '28px',
|
||
height: '28px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.15)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: 'var(--font-size-title-3)',
|
||
}}
|
||
>
|
||
🌊
|
||
</div>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
ROMS 해양확산 수치모의 검증 결과
|
||
</div>
|
||
<div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
|
||
김창겸·이문진 외 (2024), 한국해양환경·안전학회지 Vol.30
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '3px 10px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.1)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
정확도 75~96%
|
||
</span>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3.5">
|
||
{/* Nesting 격자 구성 */}
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
📐 Nesting 격자 구성
|
||
</div>
|
||
<table
|
||
style={{
|
||
width: '100%',
|
||
borderCollapse: 'collapse',
|
||
fontSize: 'var(--font-size-caption)',
|
||
}}
|
||
>
|
||
<thead>
|
||
<tr style={{ background: 'rgba(6,182,212,.06)' }}>
|
||
<th
|
||
style={{
|
||
padding: '5px 6px',
|
||
textAlign: 'left',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
영역
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '5px 6px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
격자크기
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '5px 6px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
시간간격
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '5px 6px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
수직층
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
|
||
<td style={{ padding: '4px 6px', color: 'var(--fg-default)' }}>
|
||
광역 (일본·대만 포함)
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{ textAlign: 'center', color: 'var(--color-accent)' }}
|
||
>
|
||
0.05°
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
5분
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }} rowSpan={3}>
|
||
20층
|
||
</td>
|
||
</tr>
|
||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
|
||
<td style={{ padding: '4px 6px', color: 'var(--fg-default)' }}>
|
||
중간역 (한반도 해역)
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{ textAlign: 'center', color: 'var(--color-accent)' }}
|
||
>
|
||
0.01°
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
1분
|
||
</td>
|
||
</tr>
|
||
<tr style={{ background: 'rgba(6,182,212,.03)' }}>
|
||
<td
|
||
style={{
|
||
padding: '4px 6px',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
상세역 (5개 우심지역)
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{
|
||
textAlign: 'center',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
0.002°(≈200m)
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
12초
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div
|
||
style={{
|
||
marginTop: '8px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '6px',
|
||
}}
|
||
>
|
||
🔗 입력 데이터
|
||
</div>
|
||
<div
|
||
className="grid grid-cols-2 gap-1"
|
||
style={{ fontSize: 'var(--font-size-caption)' }}
|
||
>
|
||
<div
|
||
style={{
|
||
padding: '4px 6px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '3px',
|
||
}}
|
||
>
|
||
<span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>ERA5</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>기상(기압·풍속·기온)</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 6px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '3px',
|
||
}}
|
||
>
|
||
<span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>HYCOM</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>수온·염분·유속</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 6px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '3px',
|
||
}}
|
||
>
|
||
<span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>TPXO9</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>조위 15개 분조</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '4px 6px',
|
||
background: 'var(--bg-base)',
|
||
borderRadius: '3px',
|
||
}}
|
||
>
|
||
<span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>WAMIS</span>{' '}
|
||
<span style={{ color: 'var(--fg-disabled)' }}>5대강 일별유량</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 관측-모델 비교 */}
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
✅ 페놀 관측-모델 비교 (인천·평택·대산)
|
||
</div>
|
||
<table
|
||
style={{
|
||
width: '100%',
|
||
borderCollapse: 'collapse',
|
||
fontSize: 'var(--font-size-caption)',
|
||
}}
|
||
>
|
||
<thead>
|
||
<tr style={{ background: 'rgba(6,182,212,.06)' }}>
|
||
<th
|
||
style={{
|
||
padding: '5px 6px',
|
||
textAlign: 'left',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
관측점
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '5px 6px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
관측(mg/L)
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '5px 6px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--fg-sub)',
|
||
}}
|
||
>
|
||
모델(mg/L)
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: '5px 6px',
|
||
textAlign: 'center',
|
||
borderBottom: '2px solid var(--stroke-light)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
정확도
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
|
||
<td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>IC01(인천)</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0160
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0167
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{ textAlign: 'center', color: 'var(--color-accent)', fontWeight: 600 }}
|
||
>
|
||
95.32%
|
||
</td>
|
||
</tr>
|
||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
|
||
<td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>IC03(인천)</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0240
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0256
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{ textAlign: 'center', color: 'var(--color-accent)', fontWeight: 600 }}
|
||
>
|
||
93.45%
|
||
</td>
|
||
</tr>
|
||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
|
||
<td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>PT01(평택)</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0215
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0235
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{ textAlign: 'center', color: 'var(--color-accent)' }}
|
||
>
|
||
90.55%
|
||
</td>
|
||
</tr>
|
||
<tr
|
||
style={{
|
||
borderBottom: '1px solid rgba(255,255,255,.04)',
|
||
background: 'rgba(6,182,212,.02)',
|
||
}}
|
||
>
|
||
<td style={{ padding: '3px 6px', color: 'var(--color-accent)' }}>PT02(평택)</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0200
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0249
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{ textAlign: 'center', color: 'var(--color-accent)' }}
|
||
>
|
||
75.57%
|
||
</td>
|
||
</tr>
|
||
<tr
|
||
style={{
|
||
borderBottom: '1px solid rgba(255,255,255,.04)',
|
||
background: 'rgba(6,182,212,.03)',
|
||
}}
|
||
>
|
||
<td
|
||
style={{
|
||
padding: '3px 6px',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
DS01(대산)
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0040
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0042
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{ textAlign: 'center', color: 'var(--color-accent)', fontWeight: 700 }}
|
||
>
|
||
95.88%
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>DS03(대산)</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0130
|
||
</td>
|
||
<td className="font-mono" style={{ textAlign: 'center' }}>
|
||
0.0145
|
||
</td>
|
||
<td
|
||
className="font-mono"
|
||
style={{ textAlign: 'center', color: 'var(--color-accent)' }}
|
||
>
|
||
88.60%
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div
|
||
style={{
|
||
marginTop: '6px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
>
|
||
※ 현장조사: 2023.06.27~28 / 전체 10개 관측점 모두 모델 범위 내 관측값 위치
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 페놀 거동 특성 + 최대 농도 */}
|
||
<div className="grid grid-cols-3 gap-2.5" style={{ marginTop: '14px' }}>
|
||
<div
|
||
style={{
|
||
padding: '10px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '6px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
인천 표층 최대농도
|
||
</div>
|
||
<div
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-title-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
0.1089<span style={{ fontSize: 'var(--font-size-caption)' }}> mg/L</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '10px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '6px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
인천 저층 최대농도
|
||
</div>
|
||
<div
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-title-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
0.3822<span style={{ fontSize: 'var(--font-size-caption)' }}> mg/L</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
marginTop: '2px',
|
||
}}
|
||
>
|
||
표층 대비 3.5배 ↑
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: '10px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '6px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
평택·대산 저층 최대
|
||
</div>
|
||
<div
|
||
className="font-mono"
|
||
style={{
|
||
fontSize: 'var(--font-size-title-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
0.1916<span style={{ fontSize: 'var(--font-size-caption)' }}> mg/L</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '10px',
|
||
padding: '8px 10px',
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.1)',
|
||
borderRadius: '6px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
<b style={{ color: 'var(--color-accent)' }}>핵심 발견:</b> 페놀은 Sinker 특성으로{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>저층에서 농도 축적</b>이 두드러짐 → 표층
|
||
모니터링만으로는 불충분,{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>저층까지 포함한 3D 모니터링 필수</b>. 기존
|
||
입자추적 방식의 장기 모의·농도 계산 한계를 ROMS 농도확산모델이 해결. Opendrift(노르웨이
|
||
기상청)와 Cedre(프랑스) 실험 결과로 HNS 거동특성 검증 완료.
|
||
</div>
|
||
</div>
|
||
|
||
{/* 지역별 해양산업시설 현황 */}
|
||
<div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-1)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '10px',
|
||
}}
|
||
>
|
||
🏭 지역별 해양산업시설 폐수 방류 현황 (10년 평균)
|
||
</div>
|
||
<div
|
||
className="grid gap-1 text-center"
|
||
style={{
|
||
gridTemplateColumns: 'repeat(7, 1fr)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
}}
|
||
>
|
||
{[
|
||
{
|
||
name: '울산',
|
||
vol: '414,620',
|
||
sites: '1,037개소',
|
||
volColor: 'var(--fg-default)',
|
||
sitesColor: 'var(--color-accent)',
|
||
bg: 'rgba(6,182,212,.06)',
|
||
nameColor: 'var(--color-accent)',
|
||
},
|
||
{
|
||
name: '여수',
|
||
vol: '124,890',
|
||
sites: '382개소',
|
||
volColor: 'var(--fg-default)',
|
||
sitesColor: 'var(--fg-disabled)',
|
||
bg: 'rgba(6,182,212,.04)',
|
||
nameColor: 'var(--color-accent)',
|
||
},
|
||
{
|
||
name: '인천',
|
||
vol: '91,658',
|
||
sites: '3,073개소',
|
||
volColor: 'var(--fg-default)',
|
||
sitesColor: 'var(--fg-disabled)',
|
||
bg: 'rgba(6,182,212,.04)',
|
||
nameColor: 'var(--color-accent)',
|
||
},
|
||
{
|
||
name: '광양',
|
||
vol: '86,395',
|
||
sites: '253개소',
|
||
volColor: 'var(--fg-default)',
|
||
sitesColor: 'var(--fg-disabled)',
|
||
bg: 'rgba(6,182,212,.03)',
|
||
nameColor: 'var(--fg-sub)',
|
||
},
|
||
{
|
||
name: '평택',
|
||
vol: '85,475',
|
||
sites: '781개소',
|
||
volColor: 'var(--fg-default)',
|
||
sitesColor: 'var(--fg-disabled)',
|
||
bg: 'rgba(6,182,212,.03)',
|
||
nameColor: 'var(--fg-sub)',
|
||
},
|
||
{
|
||
name: '대산',
|
||
vol: '65,101',
|
||
sites: '246개소',
|
||
volColor: 'var(--fg-default)',
|
||
sitesColor: 'var(--fg-disabled)',
|
||
bg: 'rgba(6,182,212,.03)',
|
||
nameColor: 'var(--fg-sub)',
|
||
},
|
||
{
|
||
name: '부산',
|
||
vol: '38,292',
|
||
sites: '469개소',
|
||
volColor: 'var(--fg-default)',
|
||
sitesColor: 'var(--fg-disabled)',
|
||
bg: 'rgba(6,182,212,.03)',
|
||
nameColor: 'var(--fg-sub)',
|
||
},
|
||
].map(({ name, vol, sites, volColor, sitesColor, bg, nameColor }) => (
|
||
<div key={name} style={{ padding: '6px', background: bg, borderRadius: '4px' }}>
|
||
<div style={{ fontWeight: 700, color: nameColor }}>{name}</div>
|
||
<div
|
||
className="font-mono"
|
||
style={{ color: volColor, fontSize: 'var(--font-size-caption)', marginTop: '2px' }}
|
||
>
|
||
{vol}
|
||
</div>
|
||
<div style={{ color: 'var(--fg-disabled)' }}>m³/일</div>
|
||
<div
|
||
className="font-mono"
|
||
style={{
|
||
color: sitesColor,
|
||
fontSize: 'var(--font-size-caption)',
|
||
marginTop: '1px',
|
||
}}
|
||
>
|
||
{sites}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginTop: '8px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
}}
|
||
>
|
||
※ 1종 사업장(2,000m³/일 이상) 하루 평균 페놀 배출량: 21.847 kg — 총 882개소 합계 31.851
|
||
kg/일 (KOSIS·NICS 2021)
|
||
</div>
|
||
</div>
|
||
|
||
{/* 한계 및 발전 방향 */}
|
||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||
{/* 현재 한계점 */}
|
||
<div className={`${cardBg} rounded-[10px]`} style={{ padding: '16px' }}>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '12px',
|
||
}}
|
||
>
|
||
⚠ 현재 한계점
|
||
</div>
|
||
<div className="flex flex-col gap-2">
|
||
{[
|
||
{
|
||
title: '입자 추적 방식의 한계',
|
||
body: (
|
||
<>
|
||
기존 라그랑지안 입자 추적 방식은{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>장기간 모의가 어렵고</b> 정확한 농도
|
||
계산에 한계가 있음. 입자 수가 부족하면 통계적 노이즈 발생, 과다하면 계산량 폭증.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: '대용량 데이터 전송',
|
||
body: (
|
||
<>
|
||
외부 DB(기상청, 해양예보 등) 연동 시{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>대용량 데이터의 실시간 전송</b>에
|
||
대한 신속성 확보 과제. 특히 WRF-Chem 입력 데이터는 수십 GB 규모.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: '물질 다양성',
|
||
body: (
|
||
<>
|
||
HNS 6,000+ 종 전체에 대한{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>물리화학 거동 DB 부족</b>. 많은
|
||
물질이 실험 데이터가 없어 유사 물질의 추정치를 사용하고 있음.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: '해양 환경 특수성',
|
||
body: (
|
||
<>
|
||
해수 온도에 따른 증발률 변화, 파랑에 의한 스프레이 효과, 선박 구조물에 의한 Wake
|
||
난류 등 <b style={{ color: 'var(--color-accent)' }}>해양 고유 현상 반영 미흡</b>
|
||
.
|
||
</>
|
||
),
|
||
},
|
||
].map(({ title, body }) => (
|
||
<div
|
||
key={title}
|
||
style={{
|
||
padding: '10px',
|
||
background: 'rgba(6,182,212,.03)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '6px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
{title}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
{body}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 발전 방향 */}
|
||
<div className={`${cardBg} rounded-[10px]`} style={{ padding: '16px' }}>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '12px',
|
||
}}
|
||
>
|
||
🚀 발전 방향
|
||
</div>
|
||
<div className="flex flex-col gap-2">
|
||
{[
|
||
{
|
||
title: 'ROMS 해양 수치모델 도입',
|
||
badge: {
|
||
text: '✅ 검증완료',
|
||
bg: 'rgba(6,182,212,.15)',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
body: (
|
||
<>
|
||
김창겸·이문진 외(2024) 연구에서{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>
|
||
ROMS 기반 페놀 해양확산 수치모의 검증 완료
|
||
</b>
|
||
. Nesting 기법(광역 0.05°→중간역 0.01°→상세역 0.002°/약200m)으로 5개
|
||
집중우심지역(인천·평택·대산·여수·울산) 고해상도 구축.
|
||
<br />
|
||
경계조건:{' '}
|
||
<span style={{ color: 'var(--color-accent)' }}>
|
||
ERA5(기상) + HYCOM(해양) + TPXO9(조위 15개분조)
|
||
</span>
|
||
. 한국 5대강 + 중국 황하·양쯔강 하천유입 반영.
|
||
<br />
|
||
<b style={{ color: 'var(--color-accent)' }}>
|
||
현장검증 정확도: 75.57%(PT02) ~ 95.88%(DS01)
|
||
</b>{' '}
|
||
— 10개 관측점 전체에서 모델 최대·최소값 범위 내 관측값 위치 확인.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: 'AI/ML 기반 신속 예측',
|
||
badge: {
|
||
text: '연구중',
|
||
bg: 'rgba(6,182,212,.1)',
|
||
color: 'var(--color-accent)',
|
||
},
|
||
body: (
|
||
<>
|
||
WRF-Chem 시뮬레이션 결과를 학습한{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>서로게이트 모델(Surrogate Model)</b>
|
||
로 수초 내 근사 예측. 초기 대응 시간 단축과 정확도를 동시 확보.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: '실시간 데이터 파이프라인',
|
||
badge: { text: '개발중', bg: 'rgba(6,182,212,.1)', color: 'var(--color-accent)' },
|
||
body: (
|
||
<>
|
||
<b style={{ color: 'var(--color-accent)' }}>조화상수 DB</b> 기반 빠른 예측 +
|
||
스트리밍 기상 데이터 파이프라인 구축. 외부 DB 연동 시 데이터 압축·캐싱으로 전송
|
||
병목 해소.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: 'HNS 블랙박스 시스템 고도화',
|
||
badge: { text: '목표', bg: 'rgba(6,182,212,.1)', color: 'var(--color-accent)' },
|
||
body: (
|
||
<>
|
||
사고 자동 감지 → 물질 자동 식별 → 확산 예측 → 대피 명령까지{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>전 과정 자동화</b>. 센서 네트워크 +
|
||
AI 물질 식별 + 가우시안/WRF-Chem 이중 엔진으로 구성.
|
||
</>
|
||
),
|
||
},
|
||
].map(({ title, badge, body }) => (
|
||
<div
|
||
key={title}
|
||
style={{
|
||
padding: '10px',
|
||
background: 'rgba(6,182,212,.03)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '6px',
|
||
}}
|
||
>
|
||
<div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
{title}
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
padding: '2px 6px',
|
||
borderRadius: '3px',
|
||
background: badge.bg,
|
||
color: badge.color,
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
{badge.text}
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
{body}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 관련 국내 논문 */}
|
||
<div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
|
||
<div className="flex items-center gap-2" style={{ marginBottom: '14px' }}>
|
||
<div
|
||
style={{
|
||
width: '28px',
|
||
height: '28px',
|
||
borderRadius: '6px',
|
||
background: 'rgba(6,182,212,.15)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: 'var(--font-size-title-3)',
|
||
}}
|
||
>
|
||
📚
|
||
</div>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
HNS 대기확산·위해성 평가 관련 국내 논문
|
||
</div>
|
||
<div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
|
||
위해성 관리 · 초동대응 · 사회경제 민감자원 · 플랫폼 개발 · 재난관리 체제
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-2.5">
|
||
{/* 논문 ① */}
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '8px',
|
||
borderLeft: '3px solid var(--color-accent)',
|
||
}}
|
||
>
|
||
<div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
|
||
<div className="flex items-center gap-1.5">
|
||
<span
|
||
className="font-mono flex items-center justify-center"
|
||
style={{
|
||
width: '20px',
|
||
height: '20px',
|
||
borderRadius: '50%',
|
||
background: 'rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 800,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
①
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
해상 위험·유해물질(HNS) 관리 우선순위 선정에 관한 연구
|
||
</span>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '2px 8px',
|
||
borderRadius: '4px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
KRISO
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '6px',
|
||
}}
|
||
>
|
||
김영윤·김태원·손민호·오상우·이문진 — 해양환경안전학회지 Vol.21 No.6, pp.672-678, 2015
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
EURAM/CRS-KOREA II 기반 위해성 스크리닝 시스템 개발.{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>Risk = Toxicity × Exposure</b>{' '}
|
||
프레임워크로 585종 유해액체물질 평가. 인체위해성(급성·만성·발암·기타독성)과
|
||
수생태위해성을 해상운송량·잔류성(BCF)·인화점·증기압과 결합하여 점수화.{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>상위 20종 우선관리물질</b>(Aniline,
|
||
Acrylonitrile, Phenol, Coal tar 등) 도출. GESAMP 위해도 평가 기준 적용.
|
||
</div>
|
||
<div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
위해성 우선순위
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
585종 유해액체물질
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
GESAMP 기준
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
이문진 공저
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 논문 ② */}
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '8px',
|
||
borderLeft: '3px solid var(--color-accent)',
|
||
}}
|
||
>
|
||
<div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
|
||
<div className="flex items-center gap-1.5">
|
||
<span
|
||
className="font-mono flex items-center justify-center"
|
||
style={{
|
||
width: '20px',
|
||
height: '20px',
|
||
borderRadius: '50%',
|
||
background: 'rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 800,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
②
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
해양 유류유출 오염으로 인한 사회·경제적 민감자원 선정 및 지수화 방안
|
||
</span>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '2px 8px',
|
||
borderRadius: '4px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
KEI
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '6px',
|
||
}}
|
||
>
|
||
노영희·김충기 — 환경영향평가 Vol.25 No.6, pp.402-413, 2016
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
NOAA ESI 가이드라인 기반 한국형 사회·경제적 민감자원 분류체계 구축.{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>
|
||
수산물 획득·인구·토지이용·관리지역·문화유산/관광지
|
||
</b>{' '}
|
||
5개 지표를 각 100점 환산(총 500점) 통합지수 산출. 연안 74개 시군구 단위 공간분석.
|
||
McLaughlin et al.(2002) 삼각도표, Fattal et al.(2010) SEv 공식 등 해외 지수화 기법
|
||
비교. <b style={{ color: 'var(--color-accent)' }}>HNS 사고 시 피해 평가 프레임워크</b>
|
||
로 확장 가능.
|
||
</div>
|
||
<div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
ESI 민감자원
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
통합지수 500점
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
74개 시군구
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
김충기 공저
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 논문 ③ */}
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '8px',
|
||
borderLeft: '3px solid var(--color-accent)',
|
||
}}
|
||
>
|
||
<div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
|
||
<div className="flex items-center gap-1.5">
|
||
<span
|
||
className="font-mono flex items-center justify-center"
|
||
style={{
|
||
width: '20px',
|
||
height: '20px',
|
||
borderRadius: '50%',
|
||
background: 'rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 800,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
③
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
해양 HNS 유출사고 초동대응의 시스템 다이내믹스 모형 개발 연구
|
||
</span>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '2px 8px',
|
||
borderRadius: '4px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
KAIST
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '6px',
|
||
}}
|
||
>
|
||
류제완·김남균·박희경 — 한국방재학회논문집 Vol.17 No.4, pp.307-315, 2017
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
해양경찰청 HNS 대응 매뉴얼 기반{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>시스템 다이내믹스(SD) 모형</b> 구축.
|
||
초동대응 4개 행위(HNS 탐지·의사결정·파공봉쇄·펜스전장) 인과지도 작성.{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>
|
||
안전장비 수준이 DB 수준보다 대응역량에 더 큰 영향
|
||
</b>{' '}
|
||
— 접근성(Accessibility) 상한계 결정. Two-step 전략(초동대응 기동선단 ETF) 도입 시{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>15% 대체 → 전체 대응시간 9.5% 단축</b>
|
||
(116→105분), 90분간 유출량 80.78톤 감소(약 20억원 경제효과).
|
||
</div>
|
||
<div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
SD 시뮬레이션
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
초동대응 골든타임
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
ETF Two-step
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
MARITIME MAISIE 사례
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 논문 ④ */}
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '8px',
|
||
borderLeft: '3px solid var(--color-accent)',
|
||
}}
|
||
>
|
||
<div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
|
||
<div className="flex items-center gap-1.5">
|
||
<span
|
||
className="font-mono flex items-center justify-center"
|
||
style={{
|
||
width: '20px',
|
||
height: '20px',
|
||
borderRadius: '50%',
|
||
background: 'rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 800,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
④
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
상시배출되는 HNS의 해양환경 영향평가를 위한 해외 사례 분석과 국내용 플랫폼 개발
|
||
연구
|
||
</span>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '2px 8px',
|
||
borderRadius: '4px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
KEI+KRISO
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '6px',
|
||
}}
|
||
>
|
||
여보현·김진호·김태윤·맹준호·이문진·김태성 — 해양환경안전학회지 Vol.29 특별호, pp.8-17,
|
||
2023
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
NOAA CAMEO/CAFE · EU MARINER/Bonn Agreement 플랫폼 비교 분석 후{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>국내용 HNS 해양환경 영향평가 플랫폼</b>{' '}
|
||
구축. 광역(5.4km)→중간역(1.8km)→상세역(80~110m, 여수) 3단계 격자. 유속 벡터 전처리
|
||
모듈, HNS 유출량·확산범위 동적 시각화,{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>
|
||
연안환경 영향평가 + 사회경제 영향평가 GIS 모듈
|
||
</b>{' '}
|
||
구현. SEBC 거동분류(G/E/F/D/S) 기반 물질 관리. 5대 항만(여수·부산·인천·평택/대산·울산)
|
||
대상.
|
||
</div>
|
||
<div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
국내용 플랫폼
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
CAMEO/MARINER 비교
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
SEBC 거동분류
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
이문진 공저
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 논문 ⑤ */}
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '8px',
|
||
borderLeft: '3px solid var(--color-accent)',
|
||
}}
|
||
>
|
||
<div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
|
||
<div className="flex items-center gap-1.5">
|
||
<span
|
||
className="font-mono flex items-center justify-center"
|
||
style={{
|
||
width: '20px',
|
||
height: '20px',
|
||
borderRadius: '50%',
|
||
background: 'rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 800,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
⑤
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
HNS 재난사고에 대한 해양경찰의 대응 방안
|
||
</span>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '2px 8px',
|
||
borderRadius: '4px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
군산대
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '6px',
|
||
}}
|
||
>
|
||
유영현 — 한국위기관리논집 제9권 제11호, pp.77-92, 2013
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
허베이스피리트호 사고를 계기로 외국(미국·유럽) HNS 방제시스템과 한국 체제를 비교 분석.{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>통합지휘 및 협업체제 구축</b>, HNS
|
||
방제장비 강화 및 효율적 배치,{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>
|
||
CAMEO/ALOHA/MARPLOT 기반 대응정보 지원체계
|
||
</b>{' '}
|
||
구축, 68종 중점관리대상물질의 체계적 관리를 제안. 미국 NRT/NSF 통합대응체제와 한국의
|
||
분산관리방식을 비교하여{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>ICS(통합지휘시스템) 도입</b> 필요성 강조.
|
||
2006~2010년 국내 HNS 유출사고 13건 분석, 항만별(울산·여수·대산) 화재·폭발·누출{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>위험도 매트릭스</b> 제시. OPRC-HNS
|
||
의정서(2008.4 발효) 국내 이행 현황 정리.
|
||
</div>
|
||
<div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
재난관리 체제
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
CAMEO/ALOHA
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
ICS 통합지휘
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
OPRC-HNS 의정서
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 논문 ⑥ */}
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'var(--bg-base)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '8px',
|
||
borderLeft: '3px solid var(--color-accent)',
|
||
}}
|
||
>
|
||
<div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
|
||
<div className="flex items-center gap-1.5">
|
||
<span
|
||
className="font-mono flex items-center justify-center"
|
||
style={{
|
||
width: '20px',
|
||
height: '20px',
|
||
borderRadius: '50%',
|
||
background: 'rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 800,
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
⑥
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: 'var(--font-size-label-2)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
}}
|
||
>
|
||
상시배출되는 HNS의 해양환경 영향평가를 위한 해외 사례 분석과 국내용 플랫폼 개발
|
||
연구
|
||
</span>
|
||
</div>
|
||
<span
|
||
style={{
|
||
padding: '2px 8px',
|
||
borderRadius: '4px',
|
||
background: 'rgba(6,182,212,.08)',
|
||
border: '1px solid rgba(6,182,212,.15)',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
fontWeight: 600,
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
KEI+KRISO
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
marginBottom: '6px',
|
||
}}
|
||
>
|
||
여보현·김진호·김태윤·맹준호·이문진·김태성 — 해양환경안전학회지 Vol.29 특별호, pp.8-17,
|
||
2023
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-sub)',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
NOAA{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>
|
||
CAFE(Chemical Aquatic Fate and Effects)
|
||
</b>{' '}
|
||
DB(32,377종 거동·4,498종 화학물질 데이터)와{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>CAMEO Suite</b>, EU{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>MARINER 플랫폼</b>(119건 HNS
|
||
유출사고·187종 물질 DB) 및 Bonn Agreement 체계를 비교 분석. SEBC 거동분류(G/E/F/D/S)
|
||
기반 물질 분류 체계 적용. 국내용 HNS 해양환경 영향평가 플랫폼 프로토타입 개발:
|
||
광역(5.4km)→중간역(1.8km)→상세역(80~110m, 여수){' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>3단계 Nesting 격자</b> 구성, 유속 벡터
|
||
전처리 모듈, HNS 유출량·확산범위 동적 시각화,{' '}
|
||
<b style={{ color: 'var(--color-accent)' }}>
|
||
연안환경 영향평가 + 사회경제 영향평가 GIS 모듈
|
||
</b>{' '}
|
||
구현. 5대 항만(여수·부산·인천·평택/대산·울산) 확대 적용 계획.
|
||
</div>
|
||
<div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
CAFE·CAMEO 비교
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
MARINER 플랫폼
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
SEBC 거동분류
|
||
</span>
|
||
<span
|
||
style={{
|
||
padding: '2px 6px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.12)',
|
||
borderRadius: '3px',
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--color-accent)',
|
||
}}
|
||
>
|
||
이문진 공저
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* WING HNS 모델 로드맵 */}
|
||
<div
|
||
style={{
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
borderRadius: '10px',
|
||
padding: '16px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-title-4)',
|
||
fontWeight: 700,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '14px',
|
||
}}
|
||
>
|
||
📅 WING 시스템 HNS 모델 로드맵
|
||
</div>
|
||
<div className="flex items-stretch" style={{ gap: 0 }}>
|
||
{/* Phase 1 */}
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
padding: '10px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
borderRadius: '8px 0 0 8px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
✅ Phase 1 (완료)
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 600,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
가우시안 모델
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
ALOHA + Lee 해양보정
|
||
<br />
|
||
6,000+종 HNS DB
|
||
<br />
|
||
AEGL/ERPG 기준 자동 적용
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
style={{
|
||
width: '2px',
|
||
background: 'var(--color-accent)',
|
||
}}
|
||
/>
|
||
|
||
{/* Phase 2 */}
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
padding: '10px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
🔧 Phase 2 (진행중)
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 600,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
WRF-Chem 연동
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
3D 확산 모의
|
||
<br />
|
||
비정상류 기상 반영
|
||
<br />
|
||
해양-대기 결합 모의
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
style={{
|
||
width: '2px',
|
||
background: 'var(--color-accent)',
|
||
}}
|
||
/>
|
||
|
||
{/* Phase 3 */}
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
padding: '10px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
🔬 Phase 3 (계획)
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 600,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
ROMS + AI 융합
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
해양 수치모델 결합
|
||
<br />
|
||
ML 서로게이트 모델
|
||
<br />
|
||
실시간 데이터 파이프라인
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
style={{
|
||
width: '2px',
|
||
background: 'var(--color-accent)',
|
||
}}
|
||
/>
|
||
|
||
{/* Phase 4 */}
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
padding: '10px',
|
||
background: 'rgba(6,182,212,.06)',
|
||
border: '1px solid rgba(6,182,212,.2)',
|
||
borderRadius: '0 8px 8px 0',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 700,
|
||
color: 'var(--color-accent)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
🎯 Phase 4 (목표)
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
fontWeight: 600,
|
||
color: 'var(--fg-default)',
|
||
marginBottom: '4px',
|
||
}}
|
||
>
|
||
자동 블랙박스
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 'var(--font-size-caption)',
|
||
color: 'var(--fg-disabled)',
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
사고 자동감지→예측→대응
|
||
<br />
|
||
센서+AI 물질식별
|
||
<br />전 과정 무인 자동화
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export function HNSTheoryView() {
|
||
const [activePanel, setActivePanel] = useState(0);
|
||
const contentRef = useRef<HTMLDivElement>(null);
|
||
|
||
const handleExportPDF = () => {
|
||
if (!contentRef.current) return;
|
||
const clone = contentRef.current.cloneNode(true) as HTMLElement;
|
||
clone.querySelectorAll('[data-html2pdf-ignore]').forEach((el) => el.remove());
|
||
const content = clone.innerHTML;
|
||
const styles = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
|
||
.map((el) => el.outerHTML)
|
||
.join('\n');
|
||
const fullHtml = `<!DOCTYPE html>
|
||
<html><head><meta charset="utf-8"/>
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:;">
|
||
<title>HNS 대기확산 모델 이론</title>
|
||
${styles}
|
||
<style>
|
||
:root { --t1: #ffffff !important; --t2: #d0d6e6 !important; --t3: #a8b0c8 !important; }
|
||
@media print { @page { size: A4; margin: 10mm; } body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }
|
||
body { background: var(--bg-base); color: var(--fg-default); font-family: var(--font-korean); padding: 20px 24px; }
|
||
</style>
|
||
</head><body>${content}</body></html>`;
|
||
const blob = new Blob([fullHtml], { type: 'text/html; charset=utf-8' });
|
||
const url = URL.createObjectURL(blob);
|
||
const win = window.open(url, '_blank');
|
||
if (win) {
|
||
win.addEventListener('afterprint', () => URL.revokeObjectURL(url));
|
||
setTimeout(() => {
|
||
win.document.title = 'HNS_대기확산_모델_이론';
|
||
win.print();
|
||
}, 500);
|
||
}
|
||
setTimeout(() => URL.revokeObjectURL(url), 30000);
|
||
};
|
||
|
||
return (
|
||
<div className="flex flex-col flex-1 h-full overflow-hidden bg-bg-base">
|
||
<div
|
||
className="flex-1 overflow-y-auto scrollbar-thin p-5"
|
||
style={{ scrollbarGutter: 'stable' }}
|
||
ref={contentRef}
|
||
>
|
||
{/* 헤더 */}
|
||
<div className="flex items-center justify-between mb-5">
|
||
<div className="flex items-center gap-3">
|
||
<div
|
||
className="w-[42px] h-[42px] rounded-[10px] flex items-center justify-center text-heading-3"
|
||
style={{
|
||
background: 'rgba(6,182,212,.04)',
|
||
border: '1px solid rgba(6,182,212,.3)',
|
||
}}
|
||
>
|
||
📐
|
||
</div>
|
||
<div>
|
||
<div className="text-title-2 font-bold text-fg">HNS 대기확산 모델 이론 및 검증</div>
|
||
<div className="text-label-2 text-fg-disabled mt-0.5">
|
||
WRF-Chem · Gaussian Plume/Puff · ROMS · 해양환경 보정 — Based on Lee Moon-Jin et al.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={handleExportPDF}
|
||
data-html2pdf-ignore
|
||
className="px-3.5 py-1.5 rounded-sm text-label-2 font-semibold cursor-pointer text-color-accent"
|
||
style={{
|
||
border: '1px solid rgba(6,182,212,.3)',
|
||
background: 'rgba(6,182,212,.08)',
|
||
}}
|
||
>
|
||
📤 PDF 내보내기
|
||
</button>
|
||
</div>
|
||
|
||
{/* 서브탭 */}
|
||
<div className="flex gap-0.5 rounded-lg p-1 mb-5 bg-bg-card border border-stroke">
|
||
{theoryTabs.map((tab, i) => (
|
||
<button
|
||
key={i}
|
||
onClick={() => setActivePanel(i)}
|
||
className={`flex-1 py-2 px-1 text-label-1 font-medium rounded-md transition-all duration-150 cursor-pointer border ${
|
||
activePanel === i
|
||
? 'border-stroke-light bg-bg-elevated text-fg'
|
||
: 'border-transparent bg-bg-card text-fg-disabled hover:text-fg-sub'
|
||
}`}
|
||
>
|
||
{tab.icon} {tab.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* 패널 콘텐츠 */}
|
||
{activePanel === 0 && <SystemOverviewPanel />}
|
||
{activePanel === 1 && <GaussianModelPanel />}
|
||
{activePanel === 2 && <SubstanceScenarioPanel />}
|
||
{activePanel === 3 && <OceanCorrectionPanel />}
|
||
{activePanel === 4 && <VerificationPanel />}
|
||
{activePanel === 5 && <RealtimeComparePanel />}
|
||
{activePanel === 6 && <WrfChemPanel />}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|