gc/wing-ops
8
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동

develop #58

병합
htlee develop 에서 main 로 6 commits 를 머지했습니다 2026-03-01 12:32:01 +09:00
대화 0 커밋 6 파일 변경됨 58 +211 -204
4개의 변경된 파일과 211개의 추가작업 그리고 204개의 파일을 삭제
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1dacb22487 - Show all commits

256
frontend/src/tabs/hns/components/HNSSubstanceView.tsx
파일 보기

@ -179,7 +179,7 @@ ${styles}
]
return (
<div className="flex flex-col h-full w-full flex-1 overflow-hidden" style={{ background: 'var(--bg0)' }}>
<div className="flex flex-col h-full w-full flex-1 overflow-hidden bg-bg-0">
<div ref={contentRef} className="flex-1 overflow-y-auto p-5" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--bdL) transparent' }}>
{/* 헤더 */}
@ -197,19 +197,19 @@ ${styles}
placeholder="물질명 또는 CAS 번호 검색..."
value={searchQuery}
onChange={e => setSearchQuery(e.target.value)}
className="rounded-sm border border-border text-[10px] outline-none"
style={{ padding: '6px 12px', background: 'var(--bg3)', width: 200 }}
className="rounded-sm border border-border text-[10px] outline-none bg-bg-3 px-3 py-1.5"
style={{ width: 200 }}
/>
<button
onClick={handleExportPDF}
className="rounded-sm text-[10px] font-semibold cursor-pointer text-status-orange"
style={{ padding: '6px 14px', border: '1px solid rgba(249,115,22,.3)', background: 'rgba(249,115,22,.08)' }}
className="rounded-sm text-[10px] font-semibold cursor-pointer text-status-orange px-3.5 py-1.5"
style={{ border: '1px solid rgba(249,115,22,.3)', background: 'rgba(249,115,22,.08)' }}
>📥 DB 다운로드</button>
</div>
</div>
{/* 서브탭 */}
<div className="flex rounded-md border border-border mb-5" style={{ gap: 3, background: 'var(--bg3)', padding: 4 }} data-html2pdf-ignore>
<div className="flex rounded-md border border-border mb-5 bg-bg-3 p-1" style={{ gap: 3 }} data-html2pdf-ignore>
{tabLabels.map((tab, idx) => (
<button
key={idx}
@ -230,59 +230,59 @@ ${styles}
<span className="text-[8px] font-semibold text-status-orange" style={{ padding: '2px 8px', borderRadius: 10, background: 'rgba(249,115,22,.1)' }}>Standard European Behaviour Classification</span>
</div>
<div className="text-[10px] text-text-2 leading-[1.7] mb-[14px]">
HNS 물질이 해양에 유출되었을 때의 <b style={{ color: 'var(--orange)' }}>물리·화학적 거동</b>에 따라 분류하는 국제 표준 체계입니다. 물질의 밀도, 증기압, 용해도에 따라 5개 주요 거동 유형과 혼합 유형으로 구분되며, 각 유형별로 대응 전략이 달라집니다.
HNS 물질이 해양에 유출되었을 때의 <b className="text-status-orange">물리·화학적 거동</b>에 따라 분류하는 국제 표준 체계입니다. 물질의 밀도, 증기압, 용해도에 따라 5개 주요 거동 유형과 혼합 유형으로 구분되며, 각 유형별로 대응 전략이 달라집니다.
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 8, marginBottom: 14 }}>
{/* G: Gas */}
<div className="p-3 rounded-md text-center" style={{ background: 'rgba(168,85,247,.06)', border: '1px solid rgba(168,85,247,.2)' }}>
<div className="flex items-center justify-center text-[18px] mx-auto mb-2" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(168,85,247,.15)' }}>💨</div>
<div className="text-[13px] font-mono text-primary-purple" style={{ fontWeight: 800 }}>G</div>
<div className="text-[11px] font-bold" style={{ margin: '4px 0' }}>Gas</div>
<div className="text-[13px] font-mono font-extrabold text-primary-purple">G</div>
<div className="text-[11px] font-bold my-1">Gas</div>
<div className="text-[8px] text-text-2 leading-normal">기체 상태로 대기 중 확산. 증기압이 높아 빠르게 증발</div>
<div className="mt-1.5 text-[7px] font-semibold text-primary-purple" style={{ padding: 3, background: 'rgba(168,85,247,.08)', borderRadius: 3 }}>대기확산 모델 적용</div>
<div className="mt-1.5 text-[7px] font-semibold text-primary-purple p-[3px]" style={{ background: 'rgba(168,85,247,.08)', borderRadius: 3 }}>대기확산 모델 적용</div>
</div>
{/* E: Evaporator */}
<div className="p-3 rounded-md text-center" style={{ background: 'rgba(239,68,68,.06)', border: '1px solid rgba(239,68,68,.2)' }}>
<div className="flex items-center justify-center text-[18px] mx-auto mb-2" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(239,68,68,.15)' }}>🔥</div>
<div className="text-[13px] font-mono text-status-red" style={{ fontWeight: 800 }}>E</div>
<div className="text-[11px] font-bold" style={{ margin: '4px 0' }}>Evaporator</div>
<div className="text-[13px] font-mono font-extrabold text-status-red">E</div>
<div className="text-[11px] font-bold my-1">Evaporator</div>
<div className="text-[8px] text-text-2 leading-normal">해수면에서 증발. 부유 후 기화하여 독성 가스 생성</div>
<div className="mt-1.5 text-[7px] font-semibold text-status-red" style={{ padding: 3, background: 'rgba(239,68,68,.08)', borderRadius: 3 }}>대기+해양 복합 대응</div>
<div className="mt-1.5 text-[7px] font-semibold text-status-red p-[3px]" style={{ background: 'rgba(239,68,68,.08)', borderRadius: 3 }}>대기+해양 복합 대응</div>
</div>
{/* F: Floater */}
<div className="p-3 rounded-md text-center" style={{ background: 'rgba(234,179,8,.06)', border: '1px solid rgba(234,179,8,.2)' }}>
<div className="flex items-center justify-center text-[18px] mx-auto mb-2" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(234,179,8,.15)' }}>🟡</div>
<div className="text-[13px] font-mono text-status-yellow" style={{ fontWeight: 800 }}>F</div>
<div className="text-[11px] font-bold" style={{ margin: '4px 0' }}>Floater</div>
<div className="text-[13px] font-mono font-extrabold text-status-yellow">F</div>
<div className="text-[11px] font-bold my-1">Floater</div>
<div className="text-[8px] text-text-2 leading-normal">{'해수면 위에 부유. 비중 < 1.0, 불용성 물질'}</div>
<div className="mt-1.5 text-[7px] font-semibold text-status-yellow" style={{ padding: 3, background: 'rgba(234,179,8,.08)', borderRadius: 3 }}>오일펜스 유사 봉쇄</div>
<div className="mt-1.5 text-[7px] font-semibold text-status-yellow p-[3px]" style={{ background: 'rgba(234,179,8,.08)', borderRadius: 3 }}>오일펜스 유사 봉쇄</div>
</div>
{/* D: Dissolver */}
<div className="p-3 rounded-md text-center" style={{ background: 'rgba(6,182,212,.06)', border: '1px solid rgba(6,182,212,.2)' }}>
<div className="flex items-center justify-center text-[18px] mx-auto mb-2" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(6,182,212,.15)' }}>💧</div>
<div className="text-[13px] font-mono text-primary-cyan" style={{ fontWeight: 800 }}>D</div>
<div className="text-[11px] font-bold" style={{ margin: '4px 0' }}>Dissolver</div>
<div className="text-[13px] font-mono font-extrabold text-primary-cyan">D</div>
<div className="text-[11px] font-bold my-1">Dissolver</div>
<div className="text-[8px] text-text-2 leading-normal">해수에 용해. 수중 확산하여 넓은 범위 오염</div>
<div className="mt-1.5 text-[7px] font-semibold text-primary-cyan" style={{ padding: 3, background: 'rgba(6,182,212,.08)', borderRadius: 3 }}>해양확산 모델 적용</div>
<div className="mt-1.5 text-[7px] font-semibold text-primary-cyan p-[3px]" style={{ background: 'rgba(6,182,212,.08)', borderRadius: 3 }}>해양확산 모델 적용</div>
</div>
{/* S: Sinker */}
<div className="p-3 rounded-md text-center" style={{ background: 'rgba(34,197,94,.06)', border: '1px solid rgba(34,197,94,.2)' }}>
<div className="flex items-center justify-center text-[18px] mx-auto mb-2" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(34,197,94,.15)' }}>⬇</div>
<div className="text-[13px] font-mono text-status-green" style={{ fontWeight: 800 }}>S</div>
<div className="text-[11px] font-bold" style={{ margin: '4px 0' }}>Sinker</div>
<div className="text-[13px] font-mono font-extrabold text-status-green">S</div>
<div className="text-[11px] font-bold my-1">Sinker</div>
<div className="text-[8px] text-text-2 leading-normal">{'해저로 침강. 비중 > 1.0, 저층 오염 축적'}</div>
<div className="mt-1.5 text-[7px] font-semibold text-status-green" style={{ padding: 3, background: 'rgba(34,197,94,.08)', borderRadius: 3 }}>저층 3D 모니터링 필수</div>
<div className="mt-1.5 text-[7px] font-semibold text-status-green p-[3px]" style={{ background: 'rgba(34,197,94,.08)', borderRadius: 3 }}>저층 3D 모니터링 필수</div>
</div>
</div>
{/* 복합 거동 */}
<div className="rounded-md p-3 border border-border" style={{ background: 'var(--bg3)' }}>
<div className="rounded-md p-3 border border-border bg-bg-3">
<div className="text-[10px] font-bold mb-2">🔀 복합 거동 유형</div>
<div className="text-center" style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 6, fontSize: 8 }}>
<div className="rounded" style={{ padding: 6, background: 'var(--bg0)' }}><span className="font-bold text-primary-purple">GD</span><br/><span className="text-text-3">기체+용해</span></div>
<div className="rounded" style={{ padding: 6, background: 'var(--bg0)' }}><span className="font-bold text-status-red">ED</span><br/><span className="text-text-3">증발+용해</span></div>
<div className="rounded" style={{ padding: 6, background: 'var(--bg0)' }}><span className="font-bold text-status-yellow">FE</span><br/><span className="text-text-3">부유+증발</span></div>
<div className="rounded" style={{ padding: 6, background: 'var(--bg0)' }}><span className="font-bold text-primary-cyan">FED</span><br/><span className="text-text-3">부유+증발+용해</span></div>
<div className="rounded" style={{ padding: 6, background: 'var(--bg0)' }}><span className="font-bold text-status-green">SD</span><br/><span className="text-text-3">침강+용해</span></div>
<div className="text-center text-[8px]" style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 6 }}>
<div className="rounded p-1.5 bg-bg-0"><span className="font-bold text-primary-purple">GD</span><br/><span className="text-text-3">기체+용해</span></div>
<div className="rounded p-1.5 bg-bg-0"><span className="font-bold text-status-red">ED</span><br/><span className="text-text-3">증발+용해</span></div>
<div className="rounded p-1.5 bg-bg-0"><span className="font-bold text-status-yellow">FE</span><br/><span className="text-text-3">부유+증발</span></div>
<div className="rounded p-1.5 bg-bg-0"><span className="font-bold text-primary-cyan">FED</span><br/><span className="text-text-3">부유+증발+용해</span></div>
<div className="rounded p-1.5 bg-bg-0"><span className="font-bold text-status-green">SD</span><br/><span className="text-text-3">침강+용해</span></div>
</div>
</div>
</div>
@ -312,20 +312,23 @@ ${styles}
{/* 암모니아 */}
{filtered.find(s => s.casNumber === '7664-41-7') && (
<div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--purple)' }}>
<div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--purple)' }}>
<div className="flex items-center justify-between mb-[10px]">
<div><span className="text-sm font-mono text-primary-purple" style={{ fontWeight: 800 }}>NH₃</span> <span className="text-xs font-bold">암모니아</span></div>
<div className="flex gap-1"><span className="text-[8px] font-semibold text-primary-purple" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G/GD</span><span className="text-[8px] font-semibold text-status-red" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>독성</span></div>
<div><span className="text-sm font-mono font-extrabold text-primary-purple">NH₃</span> <span className="text-xs font-bold">암모니아</span></div>
<div className="flex gap-1">
<span className="text-[8px] font-semibold text-primary-purple px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G/GD</span>
<span className="text-[8px] font-semibold text-status-red px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>독성</span>
</div>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">7664-41-7</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">17.03</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-33.4°C</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중:</span> <span className="font-mono">0.73</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">인화점:</span> <span className="font-mono">N/A (불연)</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">매우 높음</span></div>
<div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">7664-41-7</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">17.03</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-33.4°C</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중:</span> <span className="font-mono">0.73</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">인화점:</span> <span className="font-mono">N/A (불연)</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">매우 높음</span></div>
</div>
<div className="text-center" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4, fontSize: 7 }}>
<div className="text-center text-[7px]" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
<div style={{ padding: 4, background: 'rgba(34,197,94,.06)', border: '1px solid rgba(34,197,94,.12)', borderRadius: 3 }}><span className="text-status-green">AEGL-2</span><br/><b>160 ppm</b></div>
<div style={{ padding: 4, background: 'rgba(249,115,22,.06)', border: '1px solid rgba(249,115,22,.12)', borderRadius: 3 }}><span className="text-status-orange">ERPG-2</span><br/><b>150 ppm</b></div>
<div style={{ padding: 4, background: 'rgba(239,68,68,.06)', border: '1px solid rgba(239,68,68,.12)', borderRadius: 3 }}><span className="text-status-red">IDLH</span><br/><b>300 ppm</b></div>
@ -336,20 +339,23 @@ ${styles}
{/* 메탄올 */}
{filtered.find(s => s.casNumber === '67-56-1') && (
<div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--cyan)' }}>
<div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--cyan)' }}>
<div className="flex items-center justify-between mb-[10px]">
<div><span className="text-sm font-mono text-primary-cyan" style={{ fontWeight: 800 }}>CH₃OH</span> <span className="text-xs font-bold">메탄올</span></div>
<div className="flex gap-1"><span className="text-[8px] font-semibold text-primary-cyan" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(6,182,212,.1)' }}>ED</span><span className="text-[8px] font-semibold text-status-orange" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화성</span></div>
<div><span className="text-sm font-mono font-extrabold text-primary-cyan">CH₃OH</span> <span className="text-xs font-bold">메탄올</span></div>
<div className="flex gap-1">
<span className="text-[8px] font-semibold text-primary-cyan px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}>ED</span>
<span className="text-[8px] font-semibold text-status-orange px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화성</span>
</div>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">67-56-1</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">32.04</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">64.7°C</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중:</span> <span className="font-mono">0.79</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">11°C</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">완전 혼화</span></div>
<div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">67-56-1</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">32.04</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">64.7°C</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중:</span> <span className="font-mono">0.79</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">11°C</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">완전 혼화</span></div>
</div>
<div className="text-center" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4, fontSize: 7 }}>
<div className="text-center text-[7px]" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
<div style={{ padding: 4, background: 'rgba(34,197,94,.06)', border: '1px solid rgba(34,197,94,.12)', borderRadius: 3 }}><span className="text-status-green">AEGL-2</span><br/><b>2,100 ppm</b></div>
<div style={{ padding: 4, background: 'rgba(249,115,22,.06)', border: '1px solid rgba(249,115,22,.12)', borderRadius: 3 }}><span className="text-status-orange">ERPG-2</span><br/><b>1,000 ppm</b></div>
<div style={{ padding: 4, background: 'rgba(239,68,68,.06)', border: '1px solid rgba(239,68,68,.12)', borderRadius: 3 }}><span className="text-status-red">IDLH</span><br/><b>6,000 ppm</b></div>
@ -360,18 +366,21 @@ ${styles}
{/* 수소 */}
{filtered.find(s => s.casNumber === '1333-74-0') && (
<div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--red)' }}>
<div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--red)' }}>
<div className="flex items-center justify-between mb-[10px]">
<div><span className="text-sm font-mono text-status-red" style={{ fontWeight: 800 }}>H₂</span> <span className="text-xs font-bold">수소</span></div>
<div className="flex gap-1"><span className="text-[8px] font-semibold text-primary-purple" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G</span><span className="text-[8px] font-semibold text-status-red" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>폭발</span></div>
<div><span className="text-sm font-mono font-extrabold text-status-red">H₂</span> <span className="text-xs font-bold">수소</span></div>
<div className="flex gap-1">
<span className="text-[8px] font-semibold text-primary-purple px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G</span>
<span className="text-[8px] font-semibold text-status-red px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>폭발</span>
</div>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">1333-74-0</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">2.016</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-252.9°C</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중(기체):</span> <span className="font-mono">0.07</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">LFL:</span> <span className="font-mono text-status-red">4.0%</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">UFL:</span> <span className="font-mono text-status-red">75.0%</span></div>
<div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">1333-74-0</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">2.016</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-252.9°C</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중(기체):</span> <span className="font-mono">0.07</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">LFL:</span> <span className="font-mono text-status-red">4.0%</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">UFL:</span> <span className="font-mono text-status-red">75.0%</span></div>
</div>
<div className="mt-1.5 text-[8px] text-text-3 leading-normal">폭발 범위 극히 넓음(4~75%). 무색·무취로 감지 불가. 극저온 액화수소 유출 시 BLEVE 위험. 급속 상승 확산.</div>
</div>
@ -379,18 +388,21 @@ ${styles}
{/* LNG */}
{filtered.find(s => s.nameEn === 'LPG (Propane/Butane)' || s.casNumber === '74-82-8') && (
<div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--orange)' }}>
<div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--orange)' }}>
<div className="flex items-center justify-between mb-[10px]">
<div><span className="text-sm font-mono text-status-orange" style={{ fontWeight: 800 }}>CH₄</span> <span className="text-xs font-bold">LNG (메탄)</span></div>
<div className="flex gap-1"><span className="text-[8px] font-semibold text-primary-purple" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G</span><span className="text-[8px] font-semibold text-status-orange" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화/폭발</span></div>
<div><span className="text-sm font-mono font-extrabold text-status-orange">CH₄</span> <span className="text-xs font-bold">LNG (메탄)</span></div>
<div className="flex gap-1">
<span className="text-[8px] font-semibold text-primary-purple px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G</span>
<span className="text-[8px] font-semibold text-status-orange px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화/폭발</span>
</div>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">74-82-8</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">16.04</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-161.5°C</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중(액체):</span> <span className="font-mono">0.42</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">LFL:</span> <span className="font-mono text-status-orange">5.0%</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">UFL:</span> <span className="font-mono text-status-orange">15.0%</span></div>
<div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">74-82-8</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">16.04</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-161.5°C</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중(액체):</span> <span className="font-mono">0.42</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">LFL:</span> <span className="font-mono text-status-orange">5.0%</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">UFL:</span> <span className="font-mono text-status-orange">15.0%</span></div>
</div>
<div className="mt-1.5 text-[8px] text-text-3 leading-normal">극저온(-162°C) 유출 시 RPT(급속상변환폭발), Pool Fire 위험. Flash 기화 → 가연성 가스운 형성. 인천·평택항 LNG 물동량 상위.</div>
</div>
@ -398,37 +410,43 @@ ${styles}
{/* 페놀 */}
{filtered.find(s => s.casNumber === '108-95-2' || s.name === '페놀') && (
<div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--green)' }}>
<div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--green)' }}>
<div className="flex items-center justify-between mb-[10px]">
<div><span className="text-sm font-mono text-status-green" style={{ fontWeight: 800 }}>C₆H₅OH</span> <span className="text-xs font-bold">페놀</span></div>
<div className="flex gap-1"><span className="text-[8px] font-semibold text-status-green" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(34,197,94,.1)' }}>S/SD</span><span className="text-[8px] font-semibold text-status-red" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>독성</span></div>
<div><span className="text-sm font-mono font-extrabold text-status-green">C₆H₅OH</span> <span className="text-xs font-bold">페놀</span></div>
<div className="flex gap-1">
<span className="text-[8px] font-semibold text-status-green px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(34,197,94,.1)' }}>S/SD</span>
<span className="text-[8px] font-semibold text-status-red px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>독성</span>
</div>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">108-95-2</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">94.11</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono">181.7°C</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중:</span> <span className="font-mono text-status-green">1.07 (침강)</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">79°C</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">84 g/L</span></div>
<div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">108-95-2</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">94.11</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono">181.7°C</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중:</span> <span className="font-mono text-status-green">1.07 (침강)</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">79°C</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">84 g/L</span></div>
</div>
<div className="mt-1.5 text-[8px] text-text-3 leading-normal">비중 1.07 → <b style={{ color: 'var(--green)' }}>Sinker 특성</b>으로 저층 축적. ROMS 검증 결과 저층 농도가 표층의 3.5배. 해양산업시설 배출 주요 HNS (31.8kg/일).</div>
<div className="mt-1.5 text-[8px] text-text-3 leading-normal">비중 1.07 → <b className="text-status-green">Sinker 특성</b>으로 저층 축적. ROMS 검증 결과 저층 농도가 표층의 3.5배. 해양산업시설 배출 주요 HNS (31.8kg/일).</div>
</div>
)}
{/* 톨루엔 */}
{filtered.find(s => s.casNumber === '108-88-3') && (
<div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--yellow)' }}>
<div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--yellow)' }}>
<div className="flex items-center justify-between mb-[10px]">
<div><span className="text-sm font-mono text-status-yellow" style={{ fontWeight: 800 }}>C₇H₈</span> <span className="text-xs font-bold">톨루엔</span></div>
<div className="flex gap-1"><span className="text-[8px] font-semibold text-status-yellow" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(234,179,8,.1)' }}>FE</span><span className="text-[8px] font-semibold text-status-orange" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화성</span></div>
<div><span className="text-sm font-mono font-extrabold text-status-yellow">C₇H₈</span> <span className="text-xs font-bold">톨루엔</span></div>
<div className="flex gap-1">
<span className="text-[8px] font-semibold text-status-yellow px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(234,179,8,.1)' }}>FE</span>
<span className="text-[8px] font-semibold text-status-orange px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화성</span>
</div>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">108-88-3</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">92.14</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono">110.6°C</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중:</span> <span className="font-mono text-status-yellow">0.87 (부유)</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">4°C</span></div>
<div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">용해도:</span> <span className="font-mono">0.52 g/L</span></div>
<div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">108-88-3</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">92.14</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono">110.6°C</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중:</span> <span className="font-mono text-status-yellow">0.87 (부유)</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">4°C</span></div>
<div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">용해도:</span> <span className="font-mono">0.52 g/L</span></div>
</div>
<div className="mt-1.5 text-[8px] text-text-3 leading-normal">해수면 부유 → 증발. 인화점 극히 낮아(4°C) 화재 위험 상시. 석유화학 산업의 대표적 HNS. 울산항 주요 취급물질.</div>
</div>
@ -442,49 +460,49 @@ ${styles}
<div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
{/* AEGL 기준 */}
<div className="rounded-[10px] p-4 border border-border" style={{ background: 'var(--bg3)', borderTop: '3px solid var(--green)' }}>
<div className="rounded-[10px] p-4 border border-border bg-bg-3" style={{ borderTop: '3px solid var(--green)' }}>
<div className="text-[13px] font-bold text-status-green mb-[10px]">🟢 AEGL (Acute Exposure Guideline Level)</div>
<div className="text-[9px] text-text-3 mb-[10px]">미국 EPA — 일반인 급성 노출 기준 (10분, 30분, 60분, 4시간, 8시간)</div>
<div className="flex flex-col gap-1.5">
<div className="rounded-sm" style={{ padding: '8px 10px', background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)', borderLeft: '4px solid var(--green)' }}>
<div className="rounded-sm px-2.5 py-2" style={{ background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)', borderLeft: '4px solid var(--green)' }}>
<div className="text-[11px] font-bold text-status-green">AEGL-1 (불쾌감)</div>
<div className="text-[9px] text-text-2 leading-normal">눈에 띄는 불쾌감, 자극 또는 비감각적 증상. 노출 중단 시 증상 소멸.</div>
</div>
<div className="rounded-sm" style={{ padding: '8px 10px', background: 'rgba(249,115,22,.04)', border: '1px solid rgba(249,115,22,.12)', borderLeft: '4px solid var(--orange)' }}>
<div className="rounded-sm px-2.5 py-2" style={{ background: 'rgba(249,115,22,.04)', border: '1px solid rgba(249,115,22,.12)', borderLeft: '4px solid var(--orange)' }}>
<div className="text-[11px] font-bold text-status-orange">AEGL-2 (비가역적 영향)</div>
<div className="text-[9px] text-text-2 leading-normal">비가역적·장기적 건강 영향 또는 대피 능력 저하. <b style={{ color: 'var(--orange)' }}>대피 기준으로 사용</b>.</div>
<div className="text-[9px] text-text-2 leading-normal">비가역적·장기적 건강 영향 또는 대피 능력 저하. <b className="text-status-orange">대피 기준으로 사용</b>.</div>
</div>
<div className="rounded-sm" style={{ padding: '8px 10px', background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.12)', borderLeft: '4px solid var(--red)' }}>
<div className="rounded-sm px-2.5 py-2" style={{ background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.12)', borderLeft: '4px solid var(--red)' }}>
<div className="text-[11px] font-bold text-status-red">AEGL-3 (생명 위협)</div>
<div className="text-[9px] text-text-2 leading-normal">생명을 위협하는 건강 영향 또는 사망. <b style={{ color: 'var(--red)' }}>즉시 대피·격리 구역 설정</b>.</div>
<div className="text-[9px] text-text-2 leading-normal">생명을 위협하는 건강 영향 또는 사망. <b className="text-status-red">즉시 대피·격리 구역 설정</b>.</div>
</div>
</div>
</div>
{/* ERPG / IDLH */}
<div className="rounded-[10px] p-4 border border-border" style={{ background: 'var(--bg3)', borderTop: '3px solid var(--red)' }}>
<div className="rounded-[10px] p-4 border border-border bg-bg-3" style={{ borderTop: '3px solid var(--red)' }}>
<div className="text-[13px] font-bold text-status-red mb-[10px]">🔴 ERPG &amp; IDLH</div>
<div className="flex flex-col gap-2">
<div>
<div className="text-[10px] font-bold text-status-orange mb-1">ERPG (Emergency Response Planning Guideline)</div>
<div className="text-[9px] text-text-3 mb-1.5">AIHA 발행 — 1시간 노출 기준</div>
<div className="flex flex-col gap-1">
<div className="text-[8px] rounded" style={{ padding: '6px 8px', background: 'rgba(34,197,94,.03)', border: '1px solid rgba(34,197,94,.1)', borderLeft: '3px solid var(--green)' }}><b style={{ color: 'var(--green)' }}>ERPG-1</b> — 일시적 건강 영향, 냄새 감지</div>
<div className="text-[8px] rounded" style={{ padding: '6px 8px', background: 'rgba(249,115,22,.03)', border: '1px solid rgba(249,115,22,.1)', borderLeft: '3px solid var(--orange)' }}><b style={{ color: 'var(--orange)' }}>ERPG-2</b> — 비가역적 영향, 대피 판단 기준</div>
<div className="text-[8px] rounded" style={{ padding: '6px 8px', background: 'rgba(239,68,68,.03)', border: '1px solid rgba(239,68,68,.1)', borderLeft: '3px solid var(--red)' }}><b style={{ color: 'var(--red)' }}>ERPG-3</b> — 생명 위협 농도</div>
<div className="text-[8px] rounded px-2 py-1.5" style={{ background: 'rgba(34,197,94,.03)', border: '1px solid rgba(34,197,94,.1)', borderLeft: '3px solid var(--green)' }}><b className="text-status-green">ERPG-1</b> — 일시적 건강 영향, 냄새 감지</div>
<div className="text-[8px] rounded px-2 py-1.5" style={{ background: 'rgba(249,115,22,.03)', border: '1px solid rgba(249,115,22,.1)', borderLeft: '3px solid var(--orange)' }}><b className="text-status-orange">ERPG-2</b> — 비가역적 영향, 대피 판단 기준</div>
<div className="text-[8px] rounded px-2 py-1.5" style={{ background: 'rgba(239,68,68,.03)', border: '1px solid rgba(239,68,68,.1)', borderLeft: '3px solid var(--red)' }}><b className="text-status-red">ERPG-3</b> — 생명 위협 농도</div>
</div>
</div>
<div className="mt-1 rounded-sm" style={{ padding: 10, background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.15)' }}>
<div className="mt-1 rounded-sm p-2.5" style={{ background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.15)' }}>
<div className="text-[10px] font-bold text-status-red mb-1">IDLH (Immediately Dangerous to Life or Health)</div>
<div className="text-[9px] text-text-3 mb-1">NIOSH — 30분 노출 시 생명·건강에 즉각적 위험</div>
<div className="text-[9px] text-text-2 leading-normal"><b style={{ color: 'var(--red)' }}>최대 허용 노출 한계</b>로서 이 농도를 초과하면 자급식 호흡장치(SCBA) 없이는 진입 불가. WING 시스템에서 위험구역 자동 설정의 기준값으로 사용.</div>
<div className="text-[9px] text-text-2 leading-normal"><b className="text-status-red">최대 허용 노출 한계</b>로서 이 농도를 초과하면 자급식 호흡장치(SCBA) 없이는 진입 불가. WING 시스템에서 위험구역 자동 설정의 기준값으로 사용.</div>
</div>
</div>
</div>
</div>
{/* 물질별 위험도 비교표 */}
<div className="rounded-[10px] p-4 border border-border" style={{ background: 'var(--bg3)' }}>
<div className="rounded-[10px] p-4 border border-border bg-bg-3">
<div className="text-xs font-bold mb-3">📊 주요 HNS 물질별 위험도 기준 비교 (ppm)</div>
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 9 }}>
<thead>
@ -571,18 +589,18 @@ ${styles}
{activeTab === 3 && (
<div>
{/* ── 검색창 ── */}
<div className="rounded-[10px] p-4 mb-4 border border-border" style={{ background: 'var(--bg3)' }}>
<div className="rounded-[10px] p-4 mb-4 border border-border bg-bg-3">
<div className="flex items-center justify-between mb-[14px]">
<div className="text-[13px] font-bold">🔍 HNS 물질 통합 검색 <span className="text-[9px] font-normal text-text-3">(화물약어·제품명·동의어·CAS·UN번호 통합)</span></div>
<div className="flex gap-1">
<button className="text-[9px] font-semibold cursor-pointer text-status-orange rounded" style={{ padding: '5px 10px', border: '1px solid rgba(249,115,22,.25)', background: 'rgba(249,115,22,.08)' }}>📥 DB 다운로드</button>
<button className="text-[9px] font-semibold cursor-pointer text-primary-cyan rounded" style={{ padding: '5px 10px', border: '1px solid rgba(6,182,212,.25)', background: 'rgba(6,182,212,.08)' }}>🔗 Port-MIS 연동</button>
<button className="text-[9px] font-semibold cursor-pointer text-status-orange rounded px-2.5 py-[5px]" style={{ border: '1px solid rgba(249,115,22,.25)', background: 'rgba(249,115,22,.08)' }}>📥 DB 다운로드</button>
<button className="text-[9px] font-semibold cursor-pointer text-primary-cyan rounded px-2.5 py-[5px]" style={{ border: '1px solid rgba(6,182,212,.25)', background: 'rgba(6,182,212,.08)' }}>🔗 Port-MIS 연동</button>
</div>
</div>
<div className="flex gap-2 mb-[10px] items-center">
<div className="shrink-0 flex items-center gap-1">
<span className="text-[9px] font-semibold text-text-3">구분:</span>
<select value={hmsSearchType} onChange={e => { setHmsSearchType(e.target.value as typeof hmsSearchType); setHmsPage(1) }} className="rounded-sm border border-border text-[10px] outline-none" style={{ padding: '6px 10px', background: 'var(--bg0)', minWidth: 130 }}>
<select value={hmsSearchType} onChange={e => { setHmsSearchType(e.target.value as typeof hmsSearchType); setHmsPage(1) }} className="rounded-sm border border-border text-[10px] outline-none bg-bg-0 px-2.5 py-1.5" style={{ minWidth: 130 }}>
<option value="abbr">❶ 약자/제품명</option>
<option value="korName">❷ 국문명 (동의어)</option>
<option value="engName">❸ 영문명 (동의어)</option>
@ -590,19 +608,19 @@ ${styles}
<option value="un">❺ UN번호</option>
</select>
</div>
<input type="text" value={hmsSearchInput} onChange={e => { setHmsSearchInput(e.target.value); setHmsPage(1) }} placeholder={hmsSearchType === 'abbr' ? '검색어 입력 (부호·띄어쓰기 제외)' : hmsSearchType === 'cas' ? 'CAS번호 입력 (예: 71-43-2)' : hmsSearchType === 'un' ? 'UN번호 입력 (예: 1114)' : '검색어 입력 (* 동의어 검색)'} className="flex-1 rounded-sm border border-border text-[11px] outline-none" style={{ padding: '8px 12px', background: 'var(--bg0)' }} />
<button onClick={() => setHmsPage(1)} className="text-[11px] font-bold cursor-pointer shrink-0 rounded-sm" style={{ padding: '8px 20px', border: 'none', background: 'linear-gradient(135deg,var(--orange),var(--red))', color: '#fff' }}>🔎 검색</button>
<input type="text" value={hmsSearchInput} onChange={e => { setHmsSearchInput(e.target.value); setHmsPage(1) }} placeholder={hmsSearchType === 'abbr' ? '검색어 입력 (부호·띄어쓰기 제외)' : hmsSearchType === 'cas' ? 'CAS번호 입력 (예: 71-43-2)' : hmsSearchType === 'un' ? 'UN번호 입력 (예: 1114)' : '검색어 입력 (* 동의어 검색)'} className="flex-1 rounded-sm border border-border text-[11px] outline-none bg-bg-0 px-3 py-2" />
<button onClick={() => setHmsPage(1)} className="text-[11px] font-bold cursor-pointer shrink-0 rounded-sm text-white px-5 py-2" style={{ border: 'none', background: 'linear-gradient(135deg,var(--orange),var(--red))' }}>🔎 검색</button>
</div>
<div className="text-[8px] text-text-3" style={{ lineHeight: 1.6 }}>
※ 국문명·영문명 검색 시 <b style={{ color: 'var(--orange)' }}>동의어까지 검색</b> &nbsp;|&nbsp; 약자/제품명 검색 시 <b style={{ color: 'var(--orange)' }}>부호, 띄어쓰기 제외</b> 후 검색 &nbsp;|&nbsp; 총 <b style={{ color: 'var(--cyan)' }}>1,316종</b> 등록 (화물적부도 277종 / 해양시설 56종 / 용선자 화물코드 983종)
<div className="text-[8px] text-text-3 leading-[1.6]">
※ 국문명·영문명 검색 시 <b className="text-status-orange">동의어까지 검색</b> &nbsp;|&nbsp; 약자/제품명 검색 시 <b className="text-status-orange">부호, 띄어쓰기 제외</b> 후 검색 &nbsp;|&nbsp; 총 <b className="text-primary-cyan">1,316종</b> 등록 (화물적부도 277종 / 해양시설 56종 / 용선자 화물코드 983종)
</div>
</div>
{/* ── 검색 결과 테이블 ── */}
<div className="rounded-[10px] p-4 mb-4 border border-border" style={{ background: 'var(--bg3)' }}>
<div className="rounded-[10px] p-4 mb-4 border border-border bg-bg-3">
<div className="flex items-center justify-between mb-[10px]">
<div className="text-[11px] font-bold">📋 검색 결과 <span className="text-[9px] font-normal text-text-3">— {hmsTotal}건 조회</span></div>
<select value={hmsFilterSebc} onChange={e => { setHmsFilterSebc(e.target.value); setHmsPage(1) }} className="rounded border border-border text-[9px] text-text-2 outline-none" style={{ padding: '3px 8px', background: 'var(--bg0)' }}>
<select value={hmsFilterSebc} onChange={e => { setHmsFilterSebc(e.target.value); setHmsPage(1) }} className="rounded border border-border text-[9px] text-text-2 outline-none bg-bg-0 px-2 py-[3px]">
<option>전체 거동분류</option><option>G (Gas)</option><option>E (Evaporator)</option><option>F (Floater)</option><option>D (Dissolver)</option><option>S (Sinker)</option>
</select>
</div>
@ -648,13 +666,13 @@ ${styles}
</table>
</div>
<div className="mt-[10px] flex items-center justify-between text-[9px] text-text-3">
<span>총 <b style={{ color: 'var(--orange)' }}>{hmsTotal.toLocaleString()}</b>종 등록 · Port-MIS 화물적부도 연동 · 해경청 물질정보집 · IBC CODE 692종</span>
<span>총 <b className="text-status-orange">{hmsTotal.toLocaleString()}</b>종 등록 · Port-MIS 화물적부도 연동 · 해경청 물질정보집 · IBC CODE 692종</span>
<div className="flex gap-1">
<button onClick={() => setHmsPage(p => Math.max(1, p - 1))} disabled={hmsPage <= 1} className="rounded cursor-pointer border border-border text-[9px] text-text-2" style={{ padding: '4px 10px', background: 'var(--bg0)', opacity: hmsPage <= 1 ? 0.4 : 1 }}>◀</button>
<button onClick={() => setHmsPage(p => Math.max(1, p - 1))} disabled={hmsPage <= 1} className="rounded cursor-pointer border border-border text-[9px] text-text-2 bg-bg-0 px-2.5 py-1" style={{ opacity: hmsPage <= 1 ? 0.4 : 1 }}>◀</button>
{Array.from({ length: Math.min(hmsTotalPages, 5) }, (_, i) => i + 1).map(p => (
<button key={p} onClick={() => setHmsPage(p)} className="rounded cursor-pointer border border-border text-[9px]" style={{ padding: '4px 10px', background: p === hmsPage ? 'rgba(249,115,22,.08)' : 'var(--bg0)', color: p === hmsPage ? 'var(--orange)' : 'var(--t2)', fontWeight: p === hmsPage ? 600 : 400 }}>{p}</button>
<button key={p} onClick={() => setHmsPage(p)} className="rounded cursor-pointer border border-border text-[9px] px-2.5 py-1" style={{ background: p === hmsPage ? 'rgba(249,115,22,.08)' : 'var(--bg0)', color: p === hmsPage ? 'var(--orange)' : 'var(--t2)', fontWeight: p === hmsPage ? 600 : 400 }}>{p}</button>
))}
<button onClick={() => setHmsPage(p => Math.min(hmsTotalPages, p + 1))} disabled={hmsPage >= hmsTotalPages} className="rounded cursor-pointer border border-border text-[9px] text-text-2" style={{ padding: '4px 10px', background: 'var(--bg0)', opacity: hmsPage >= hmsTotalPages ? 0.4 : 1 }}>▶</button>
<button onClick={() => setHmsPage(p => Math.min(hmsTotalPages, p + 1))} disabled={hmsPage >= hmsTotalPages} className="rounded cursor-pointer border border-border text-[9px] text-text-2 bg-bg-0 px-2.5 py-1" style={{ opacity: hmsPage >= hmsTotalPages ? 0.4 : 1 }}>▶</button>
</div>
</div>
</div>

86
frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx
파일 보기

@ -169,7 +169,7 @@ export function IncidentsLeftPanel({
}
return (
<div className="flex flex-col bg-bg-1 border-r border-border overflow-hidden" style={{ width: '360px', flexShrink: 0 }}>
<div className="flex flex-col bg-bg-1 border-r border-border overflow-hidden shrink-0" style={{ width: '360px' }}>
{/* Search */}
<div className="px-4 py-3 border-b border-border shrink-0">
<div className="relative">
@ -261,12 +261,12 @@ export function IncidentsLeftPanel({
</div>
{/* Count */}
<div className="px-4 py-1.5 text-[11px] text-text-3 shrink-0" style={{ borderBottom: '1px solid rgba(30,42,74,0.3)' }}>
<div className="px-4 py-1.5 text-[11px] text-text-3 shrink-0 border-b border-border">
총 {filteredIncidents.length}건
</div>
{/* Incident List */}
<div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--bdL) transparent' }}>
<div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin' as const, scrollbarColor: 'var(--bdL) transparent' }}>
{pagedIncidents.length === 0 ? (
<div className="px-4 py-10 text-center text-text-3 text-[11px]">
검색 결과가 없습니다.
@ -300,7 +300,7 @@ export function IncidentsLeftPanel({
onMouseLeave={(e) => { if (!isSel) e.currentTarget.style.background = '' }}
>
{/* Row 1: name + status */}
<div className="flex items-center justify-between" style={{ marginBottom: '5px' }}>
<div className="flex items-center justify-between mb-[5px]">
<div className="flex items-center gap-1.5 text-xs font-bold">
<span className="shrink-0" style={{ width: '8px', height: '8px', borderRadius: '50%', background: dotStyle[inc.status], boxShadow: dotShadow[inc.status] }} />
{inc.name}
@ -310,7 +310,7 @@ export function IncidentsLeftPanel({
</span>
</div>
{/* Row 2: meta */}
<div className="flex items-center gap-2 text-[10px] text-text-3" style={{ marginBottom: '5px' }}>
<div className="flex items-center gap-2 text-[10px] text-text-3 mb-[5px]">
<span>📅 {inc.date} {inc.time}</span>
<span>🏛 {inc.office}</span>
</div>
@ -371,11 +371,11 @@ export function IncidentsLeftPanel({
)}
{/* Pagination */}
<div className="flex items-center justify-between bg-bg-1 shrink-0 border-t border-border" style={{ padding: '8px 12px' }}>
<div className="flex items-center justify-between bg-bg-1 shrink-0 border-t border-border px-3 py-2">
<div className="text-[9px] text-text-3">
총 <b>{filteredIncidents.length}</b>건 중 {(safePage - 1) * pageSize + 1}-{Math.min(safePage * pageSize, filteredIncidents.length)}
</div>
<div className="flex items-center" style={{ gap: '3px' }}>
<div className="flex items-center gap-[3px]">
<PgBtn label="⏮" disabled={safePage <= 1} onClick={() => setCurrentPage(1)} />
<PgBtn label="◀" disabled={safePage <= 1} onClick={() => setCurrentPage(Math.max(1, safePage - 1))} />
{Array.from({ length: totalPages }, (_, i) => i + 1).filter(p => Math.abs(p - safePage) <= 2).map(p => (
@ -385,8 +385,7 @@ export function IncidentsLeftPanel({
<PgBtn label="⏭" disabled={safePage >= totalPages} onClick={() => setCurrentPage(totalPages)} />
</div>
<select onChange={(e) => { /* page size change placeholder */ void e }}
className="bg-bg-0 border border-border text-text-2 text-[9px] outline-none"
style={{ padding: '3px 6px', borderRadius: '4px' }}>
className="bg-bg-0 border border-border text-text-2 text-[9px] outline-none rounded px-1.5 py-[3px]">
<option>6건</option><option>10건</option><option>20건</option>
</select>
</div>
@ -418,41 +417,38 @@ const WeatherPopup = forwardRef<HTMLDivElement, {
onClose: () => void
}>(({ data, position, onClose }, ref) => {
return (
<div ref={ref} className="fixed overflow-hidden" style={{
<div ref={ref} className="fixed overflow-hidden rounded-xl border border-border bg-bg-1" style={{
zIndex: 9990, width: 280,
top: position.top, left: position.left,
background: 'var(--bg1)', border: '1px solid rgba(59,130,246,0.3)', borderRadius: 12,
borderColor: 'rgba(59,130,246,0.3)',
boxShadow: '0 12px 40px rgba(0,0,0,0.5)', backdropFilter: 'blur(12px)',
}}>
{/* Header */}
<div className="flex items-center justify-between border-b border-border"
style={{
padding: '10px 14px',
background: 'linear-gradient(135deg, rgba(59,130,246,0.08), rgba(6,182,212,0.04))',
}}>
<div className="flex items-center" style={{ gap: 6 }}>
<span style={{ fontSize: 14 }}>🌤</span>
<div className="flex items-center justify-between border-b border-border px-3.5 py-2.5"
style={{ background: 'linear-gradient(135deg, rgba(59,130,246,0.08), rgba(6,182,212,0.04))' }}>
<div className="flex items-center gap-1.5">
<span className="text-sm">🌤</span>
<div>
<div style={{ fontSize: 11, fontWeight: 700 }}>{data.locNm}</div>
<div className="text-text-3 font-mono" style={{ fontSize: 8 }}>{data.obsDtm}</div>
<div className="text-[11px] font-bold">{data.locNm}</div>
<div className="text-text-3 font-mono text-[8px]">{data.obsDtm}</div>
</div>
</div>
<span onClick={onClose} className="cursor-pointer text-text-3" style={{ fontSize: 14, padding: 2 }}>✕</span>
<span onClick={onClose} className="cursor-pointer text-text-3 text-sm p-0.5">✕</span>
</div>
{/* Body */}
<div style={{ padding: '12px 14px' }}>
<div className="px-3.5 py-3">
{/* Main weather */}
<div className="flex items-center" style={{ gap: 12, marginBottom: 10 }}>
<div style={{ fontSize: 28 }}>{data.icon}</div>
<div className="flex items-center gap-3 mb-2.5">
<div className="text-[28px]">{data.icon}</div>
<div>
<div className="font-bold font-mono" style={{ fontSize: 20 }}>{data.temp}</div>
<div className="text-text-3" style={{ fontSize: 9 }}>{data.weatherDc}</div>
<div className="font-bold font-mono text-[20px]">{data.temp}</div>
<div className="text-text-3 text-[9px]">{data.weatherDc}</div>
</div>
</div>
{/* Detail grid */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, fontSize: 9 }}>
<div className="grid grid-cols-2 gap-1.5 text-[9px]">
<WxCell icon="💨" label="풍향/풍속" value={data.wind} />
<WxCell icon="🌊" label="파고" value={data.wave} />
<WxCell icon="💧" label="습도" value={data.humid} />
@ -462,39 +458,33 @@ const WeatherPopup = forwardRef<HTMLDivElement, {
</div>
{/* Tide info */}
<div className="flex" style={{ marginTop: 8, gap: 6 }}>
<div className="flex-1 flex items-center"
style={{
padding: '6px 8px', background: 'rgba(59,130,246,0.06)',
border: '1px solid rgba(59,130,246,0.1)', borderRadius: 6, gap: 6,
}}>
<span style={{ fontSize: 12 }}>⬆</span>
<div className="flex gap-1.5 mt-2">
<div className="flex-1 flex items-center gap-1.5 px-2 py-1.5 rounded-md"
style={{ background: 'rgba(59,130,246,0.06)', border: '1px solid rgba(59,130,246,0.1)' }}>
<span className="text-xs">⬆</span>
<div>
<div className="text-text-3" style={{ fontSize: 7 }}>고조 (만조)</div>
<div className="font-bold font-mono" style={{ color: '#60a5fa', fontSize: 10 }}>{data.highTide}</div>
<div className="text-text-3 text-[7px]">고조 (만조)</div>
<div className="font-bold font-mono text-[10px]" style={{ color: '#60a5fa' }}>{data.highTide}</div>
</div>
</div>
<div className="flex-1 flex items-center"
style={{
padding: '6px 8px', background: 'rgba(6,182,212,0.06)',
border: '1px solid rgba(6,182,212,0.1)', borderRadius: 6, gap: 6,
}}>
<span style={{ fontSize: 12 }}>⬇</span>
<div className="flex-1 flex items-center gap-1.5 px-2 py-1.5 rounded-md"
style={{ background: 'rgba(6,182,212,0.06)', border: '1px solid rgba(6,182,212,0.1)' }}>
<span className="text-xs">⬇</span>
<div>
<div className="text-text-3" style={{ fontSize: 7 }}>저조 (간조)</div>
<div className="text-primary-cyan font-bold font-mono" style={{ fontSize: 10 }}>{data.lowTide}</div>
<div className="text-text-3 text-[7px]">저조 (간조)</div>
<div className="text-primary-cyan font-bold font-mono text-[10px]">{data.lowTide}</div>
</div>
</div>
</div>
{/* 24h Forecast */}
<div className="bg-bg-0" style={{ marginTop: 10, padding: '8px 10px', borderRadius: 6 }}>
<div className="font-bold text-text-3" style={{ fontSize: 8, marginBottom: 6 }}>24h 예보</div>
<div className="flex justify-between font-mono text-text-2" style={{ fontSize: 8 }}>
<div className="bg-bg-0 mt-2.5 px-2.5 py-2 rounded-md">
<div className="font-bold text-text-3 text-[8px] mb-1.5">24h 예보</div>
<div className="flex justify-between font-mono text-text-2 text-[8px]">
{data.forecast.map((f, i) => (
<div key={i} className="text-center">
<div>{f.hour}</div>
<div style={{ fontSize: 12, margin: '2px 0' }}>{f.icon}</div>
<div className="text-xs my-0.5">{f.icon}</div>
<div className="font-semibold">{f.temp}</div>
</div>
))}

37
frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx
파일 보기

@ -79,7 +79,7 @@ ${styles}
<span className="text-[11px] font-semibold">🔴 <span style={{ color: '#ef4444' }}>POSEIDON</span></span>
<span className="text-[11px] font-semibold">🔵 <span style={{ color: '#3b82f6' }}>OpenDrift</span></span>
<span className="text-[11px] font-semibold">⚡ <span style={{ color: '#a855f7' }}>앙상블</span></span>
<span className="text-[10px]" style={{ color: 'var(--t3)' }}>라그랑지안 입자추적 이론 기반</span>
<span className="text-[10px] text-text-3">라그랑지안 입자추적 이론 기반</span>
</div>
</div>
</div>
@ -92,8 +92,7 @@ ${styles}
</div>
{/* 내부 네비게이션 탭 */}
<div className="flex gap-0.5 rounded-lg p-1 mb-5"
style={{ background: 'var(--bg3)', border: '1px solid var(--bd)' }}>
<div className="flex gap-0.5 rounded-lg p-1 mb-5 bg-bg-3 border border-border">
{theoryTabs.map(tab => (
<button key={tab.id} onClick={() => setActivePanel(tab.id)}
className="flex-1 py-2 px-1 text-[12px] font-semibold rounded-md transition-all duration-150 cursor-pointer"
@ -220,7 +219,7 @@ function SystemOverviewPanel() {
<div className={`${card} ${cardBg}`}>
<div className="flex items-center justify-between mb-3.5">
<div style={labelStyle('var(--t1)')}>🤖 WING 탑재 유출유 확산 모델 비교</div>
<span className="text-[10px]" style={{ color: 'var(--t3)' }}>3종 앙상블 운용 · 불확실성 정량화</span>
<span className="text-[10px] text-text-3">3종 앙상블 운용 · 불확실성 정량화</span>
</div>
<div className="grid grid-cols-3 gap-2.5 mb-3.5">
{[
@ -233,7 +232,7 @@ function SystemOverviewPanel() {
<div className="w-7 h-7 rounded-md flex items-center justify-center text-sm" style={{ background: `${m.color}25` }}>{m.icon}</div>
<div>
<div className="text-xs font-bold" style={{ color: m.color }}>{m.name}</div>
<div className="text-[10px]" style={{ color: 'var(--t3)' }}>{m.sub}</div>
<div className="text-[10px] text-text-3">{m.sub}</div>
</div>
</div>
<div className="text-[10px] mb-2" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>{m.desc}</div>
@ -315,7 +314,7 @@ function KospsPanel() {
<div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl" style={{ background: 'rgba(6,182,212,.15)', border: '1px solid rgba(6,182,212,.3)' }}>🔷</div>
<div>
<div className="text-[15px] font-bold" style={{ color: 'var(--cyan)' }}>KOSPS (Korea Oil Spill Prediction System)</div>
<div className="text-[11px] mt-0.5" style={{ color: 'var(--t3)' }}>한국해양연구원(KORDI) 개발 · 한국 해역 특화 유출유 확산 예측 상시 운용 시스템</div>
<div className="text-[11px] mt-0.5 text-text-3">한국해양연구원(KORDI) 개발 · 한국 해역 특화 유출유 확산 예측 상시 운용 시스템</div>
</div>
</div>
<div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
@ -339,7 +338,7 @@ function KospsPanel() {
{/* 특허 1 */}
<div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(6,182,212,.2)', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '12px' }}>
<div className="px-2.5 py-1.5 rounded-md text-center whitespace-nowrap" style={{ background: 'rgba(6,182,212,.12)', border: '1px solid rgba(6,182,212,.25)', fontFamily: 'var(--fM)' }}>
<div className="text-[10px]" style={{ color: 'var(--t3)' }}>등록번호</div>
<div className="text-[10px] text-text-3">등록번호</div>
<div className="text-[11px] font-bold" style={{ color: 'var(--cyan)' }}>10-1567431</div>
<div className="text-[10px] mt-0.5" style={{ color: 'var(--t3)' }}>2015.11.03</div>
</div>
@ -402,7 +401,7 @@ function KospsPanel() {
].map(d => (
<div key={d.label} className="px-2.5 py-1.5 rounded-md flex justify-between items-center" style={{ background: d.bg, border: `1px solid ${d.bd}` }}>
<span className="font-semibold">{d.icon} {d.label}</span>
<span className="text-[10px]" style={{ color: 'var(--t3)' }}>{d.detail}</span>
<span className="text-[10px] text-text-3">{d.detail}</span>
</div>
))}
</div>
@ -467,7 +466,7 @@ function KospsPanel() {
border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
}}>
<div className="font-bold" style={{ color: node.color }}>{node.label}</div>
<div className="text-[10px]" style={{ color: 'var(--t3)' }}>{node.sub}</div>
<div className="text-[10px] text-text-3">{node.sub}</div>
</div>
{i < 5 && <div className="w-[30px] h-px" style={{ background: 'var(--bdL)' }} />}
</div>
@ -587,7 +586,7 @@ function KospsPanel() {
전자해도(ENC) 무작위 수심자료를 계산격자로 보간할 때 <b style={{ color: 'var(--green)' }}>Akima(1978) 2차원 5차다항식</b>(Bivariate Quintic Polynomial)을 사용합니다. 삼각망(TIN)을 구성하여 각 꼭지점의 편미분 연속성 조건으로 21개 계수를 결정합니다.
</div>
<div className="mt-1.5 p-1.5 rounded" style={{ ...codeBox, padding: '6px' }}>
z(x,y) = Σ Σ qᵢⱼ xⁱ yʲ <span className="text-[10px]" style={{ color: 'var(--t3)' }}>(i≤5, i+j≤5)</span>
z(x,y) = Σ Σ qᵢⱼ xⁱ yʲ <span className="text-[10px] text-text-3">(i≤5, i+j≤5)</span>
</div>
</div>
<div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(6,182,212,.2)' }}>
@ -644,7 +643,7 @@ function KospsPanel() {
<div className="flex items-center gap-1.5">
{paper.tags.map(t => <span key={t.label} style={{ padding: '2px 7px', background: `${t.color}1A`, border: `1px solid ${t.color}38`, borderRadius: '4px', fontSize: '10px', fontWeight: 700, color: t.color }}>{t.label}</span>)}
</div>
<span className="text-[10px]" style={{ color: 'var(--t3)' }}>{paper.year}</span>
<span className="text-[10px] text-text-3">{paper.year}</span>
</div>
<div className="text-[11px] font-bold mb-1">{paper.title}</div>
<div className="text-[11px] mb-1.5" style={{ color: 'var(--t3)' }}>{paper.authors}</div>
@ -733,7 +732,7 @@ function PoseidonPanel() {
<div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl" style={{ background: 'rgba(59,130,246,.15)', border: '1px solid rgba(59,130,246,.3)' }}>🔵</div>
<div>
<div className="text-[15px] font-bold" style={{ color: 'var(--blue)' }}>POSEIDON (입자추적 최적화 예측 시스템)</div>
<div className="text-[11px] mt-0.5" style={{ color: 'var(--t3)' }}>한국환경연구원 · (주)아라종합기술 · 한국해양기상기술 공동개발 · MOHID 해양순환모델 기반 · 뜰개 관측 매개변수 자동 최적화</div>
<div className="text-[11px] mt-0.5 text-text-3">한국환경연구원 · (주)아라종합기술 · 한국해양기상기술 공동개발 · MOHID 해양순환모델 기반 · 뜰개 관측 매개변수 자동 최적화</div>
</div>
</div>
<div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
@ -752,7 +751,7 @@ function PoseidonPanel() {
</div>
<div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(59,130,246,.2)', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '12px' }}>
<div className="px-2.5 py-1.5 rounded-md text-center whitespace-nowrap" style={{ background: 'rgba(59,130,246,.12)', border: '1px solid rgba(59,130,246,.25)', fontFamily: 'var(--fM)' }}>
<div className="text-[10px]" style={{ color: 'var(--t3)' }}>등록번호</div>
<div className="text-[10px] text-text-3">등록번호</div>
<div className="text-[11px] font-bold" style={{ color: 'var(--blue)' }}>10-1868791</div>
<div className="text-[10px] mt-0.5" style={{ color: 'var(--t3)' }}>2018 등록</div>
</div>
@ -891,7 +890,7 @@ function PoseidonPanel() {
border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
}}>
<div className="font-bold" style={{ color: node.color }}>{node.label}</div>
<div className="text-[10px]" style={{ color: 'var(--t3)' }}>{node.sub}</div>
<div className="text-[10px] text-text-3">{node.sub}</div>
</div>
{i < 2 && <div className="w-[30px] h-px" style={{ background: 'var(--bdL)' }} />}
</div>
@ -934,7 +933,7 @@ function PoseidonPanel() {
<div className="flex items-center gap-1.5">
{paper.tags.map(t => <span key={t.label} style={{ padding: '2px 7px', background: `${t.color}1A`, border: `1px solid ${t.color}38`, borderRadius: '4px', fontSize: '10px', fontWeight: 700, color: t.color }}>{t.label}</span>)}
</div>
<span className="text-[10px]" style={{ color: 'var(--t3)' }}>{paper.year}</span>
<span className="text-[10px] text-text-3">{paper.year}</span>
</div>
<div className="text-[11px] font-bold mb-1">{paper.title}</div>
<div className="text-[11px] mb-1.5" style={{ color: 'var(--t3)' }}>{paper.authors}</div>
@ -958,7 +957,7 @@ function OpenDriftPanel() {
<div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl" style={{ background: 'rgba(34,197,94,.15)', border: '1px solid rgba(34,197,94,.3)' }}>🟢</div>
<div>
<div className="text-[15px] font-bold" style={{ color: 'var(--blue)' }}>OpenDrift (오픈소스 라그랑지안 확산 프레임워크)</div>
<div className="text-[11px] mt-0.5" style={{ color: 'var(--t3)' }}>노르웨이 MET Norway · OpenOil 공개 프레임워크 · Python 기반 · IMO/IPIECA 검증</div>
<div className="text-[11px] mt-0.5 text-text-3">노르웨이 MET Norway · OpenOil 공개 프레임워크 · Python 기반 · IMO/IPIECA 검증</div>
</div>
</div>
<div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
@ -1037,7 +1036,7 @@ function OpenDriftPanel() {
border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
}}>
<div className="font-bold" style={{ color: node.color }}>{node.label}</div>
<div className="text-[10px]" style={{ color: 'var(--t3)' }}>{node.sub}</div>
<div className="text-[10px] text-text-3">{node.sub}</div>
</div>
{i < 6 && <div className="w-[24px] h-px" style={{ background: 'var(--bdL)' }} />}
</div>
@ -1378,7 +1377,7 @@ function VerificationPanel() {
].map(s => (
<div key={s.label} className="text-center p-2 rounded-md" style={{ background: 'var(--bg0)' }}>
<div className="font-bold" style={{ fontSize: '14px', color: s.color, fontFamily: 'var(--fM)' }}>{s.value}</div>
<div className="text-[10px]" style={{ color: 'var(--t3)' }}>{s.label}</div>
<div className="text-[10px] text-text-3">{s.label}</div>
</div>
))}
</div>
@ -1483,7 +1482,7 @@ function RoadmapPanel() {
].map(r => (
<div key={r.title} className="rounded-md" style={{ padding: '8px 10px', background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)' }}>
<div className="font-semibold mb-0.5">{r.title}</div>
<div className="text-[10px]" style={{ color: 'var(--t3)' }}>{r.desc}</div>
<div className="text-[10px] text-text-3">{r.desc}</div>
</div>
))}
</div>

36
frontend/src/tabs/rescue/components/RescueView.tsx
파일 보기

@ -146,7 +146,7 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
const at = accidentTypes.find(t => t.id === activeType)!
return (
<div className="flex-1 relative overflow-hidden" style={{ background: '#0a1628' }}>
<div className="flex-1 relative overflow-hidden bg-[#0a1628]">
{/* 해양 배경 그라데이션 */}
<div className="absolute inset-0" style={{
background: 'radial-gradient(ellipse at 30% 40%, rgba(6,90,130,.25) 0%, transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(8,60,100,.2) 0%, transparent 50%), linear-gradient(180deg, #0a1628, #0d1f35 50%, #091520)'
@ -183,7 +183,7 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
}}>
<div className="absolute" style={{ top: '-3px', left: '60%', width: '2px', height: '7px', background: '#888', borderRadius: '1px' }} />
</div>
<div className="text-[7px] text-center mt-0.5 font-mono" style={{ color: 'rgba(255,200,150,.5)' }}>M/V SEA GUARDIAN</div>
<div className="text-[7px] text-center mt-0.5 font-mono text-[rgba(255,200,150,0.5)]">M/V SEA GUARDIAN</div>
</div>
{/* 예측 구역 원 */}
@ -193,25 +193,24 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
border: '1.5px dashed rgba(6,182,212,.2)'
}} />
{/* 구역 라벨 */}
<div className="absolute z-[6] text-[8px] font-korean font-semibold tracking-wider uppercase" style={{
top: '50%', left: '36%', color: 'rgba(6,182,212,.45)', whiteSpace: 'pre-line'
<div className="absolute z-[6] text-[8px] font-korean font-semibold tracking-wider uppercase whitespace-pre-line text-[rgba(6,182,212,0.45)]" style={{
top: '50%', left: '36%',
}}>
{d.zone.replace('\\n', '\n')}
</div>
{/* SAR 자산 */}
<div className="absolute z-10 text-[7px] font-mono" style={{ top: '10%', left: '42%', color: 'rgba(200,220,255,.35)' }}>ETA 5 MIN ─</div>
<div className="absolute z-10 text-[7px] font-mono" style={{ top: '14%', left: '56%', color: 'rgba(200,220,255,.35)' }}>ETA 15 MIN ─</div>
<div className="absolute z-[12] text-sm" style={{ top: '7%', left: '52%', opacity: 0.6, transform: 'rotate(-30deg)' }}>🚁</div>
<div className="absolute z-[12] text-[8px] font-mono" style={{ top: '20%', left: '60%', color: 'rgba(200,220,255,.45)' }}>6M</div>
<div className="absolute z-[12] text-[11px]" style={{ top: '28%', left: '54%', opacity: 0.45 }}>🚢</div>
<div className="absolute z-10 text-[7px] font-mono text-[rgba(200,220,255,0.35)]" style={{ top: '10%', left: '42%' }}>ETA 5 MIN ─</div>
<div className="absolute z-10 text-[7px] font-mono text-[rgba(200,220,255,0.35)]" style={{ top: '14%', left: '56%' }}>ETA 15 MIN ─</div>
<div className="absolute z-[12] text-sm opacity-60" style={{ top: '7%', left: '52%', transform: 'rotate(-30deg)' }}>🚁</div>
<div className="absolute z-[12] text-[8px] font-mono text-[rgba(200,220,255,0.45)]" style={{ top: '20%', left: '60%' }}>6M</div>
<div className="absolute z-[12] text-[11px] opacity-45" style={{ top: '28%', left: '54%' }}>🚢</div>
{/* 환경 민감 구역 */}
<div className="absolute z-10 px-3.5 py-2 rounded" style={{
<div className="absolute z-10 px-3.5 py-2 rounded bg-[rgba(34,197,94,0.06)] border border-[rgba(34,197,94,0.2)]" style={{
bottom: '6%', right: '6%',
background: 'rgba(34,197,94,.06)', border: '1px solid rgba(34,197,94,.2)'
}}>
<div className="text-[9px] font-bold font-serif uppercase tracking-wider leading-snug" style={{ color: 'rgba(34,197,94,.55)' }}>
<div className="text-[9px] font-bold font-serif uppercase tracking-wider leading-snug text-[rgba(34,197,94,0.55)]">
ENVIRONMENTALLY SENSITIVE<br />AREA: AQUACULTURE FARM
</div>
</div>
@ -226,13 +225,14 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
{/* 스케일 바 */}
<div className="absolute bottom-2.5 left-2.5 z-20 bg-[rgba(13,17,23,0.8)] border border-border rounded px-2.5 py-1 text-[8px] text-text-3 font-mono">
<div className="w-[70px] h-0.5 mb-0.5" style={{ background: 'linear-gradient(90deg, #e4e8f1 50%, var(--bd) 50%)' }} />
5 km · Zoom: 100%
</div>
{/* 사고 유형 표시 */}
<div className="absolute bottom-2.5 right-2.5 z-20 bg-[rgba(13,17,23,0.85)] border border-border rounded px-3 py-1.5">
<div className="text-[8px] text-text-3 font-korean">현재 사고 유형</div>
<div className="text-[11px] font-bold font-korean" style={{ color: 'var(--cyan)' }}>{at.icon} {at.label} ({at.eng})</div>
<div className="text-[11px] font-bold font-korean text-primary-cyan">{at.icon} {at.label} ({at.eng})</div>
</div>
</div>
)
@ -687,14 +687,14 @@ function LongStrengthPanel(_props: { activeType: AccidentType }) {
<div className="text-[8px] text-text-3 font-korean">SF 최대/허용 비율</div>
<div className="text-lg font-bold text-status-yellow font-mono">88<span className="text-[9px]">%</span></div>
<div className="h-[5px] bg-bg-hover rounded-sm mt-0.5">
<div className="h-full rounded-sm" style={{ width: '88%', background: 'var(--yellow)' }} />
<div className="h-full rounded-sm w-[88%] bg-status-yellow" />
</div>
</div>
<div className="bg-bg-3 border border-border rounded-md p-2">
<div className="text-[8px] text-text-3 font-korean">BM 최대/허용 비율</div>
<div className="text-lg font-bold text-status-orange font-mono">92<span className="text-[9px]">%</span></div>
<div className="h-[5px] bg-bg-hover rounded-sm mt-0.5">
<div className="h-full rounded-sm" style={{ width: '92%', background: 'var(--orange)' }} />
<div className="h-full rounded-sm w-[92%] bg-status-orange" />
</div>
</div>
</div>
@ -779,9 +779,9 @@ function BottomBar() {
<span>[+24H]</span>
</div>
<div className="relative h-1.5 bg-bg-hover rounded-sm mx-1">
<div className="absolute rounded-full border-2 border-bg-0" style={{
<div className="absolute rounded-full border-2 border-bg-0 bg-primary-cyan" style={{
left: '35%', top: '-3px', width: '12px', height: '12px',
background: 'var(--cyan)', boxShadow: '0 0 8px rgba(6,182,212,.4)'
boxShadow: '0 0 8px rgba(6,182,212,.4)'
}} />
</div>
<div className="flex items-center justify-center gap-2 mt-0.5">
@ -790,7 +790,7 @@ function BottomBar() {
<button className="w-7 h-7 bg-bg-3 border border-border rounded-full text-text-3 text-[11px] flex items-center justify-center cursor-pointer hover:text-text-1">⏭</button>
</div>
<div className="text-center text-[8px] text-text-3 font-mono">
현재 시간: <b style={{ color: 'var(--cyan)' }}>10:45 KST</b>
현재 시간: <b className="text-primary-cyan">10:45 KST</b>
</div>
</div>
</div>