144 lines
5.7 KiB
TypeScript
144 lines
5.7 KiB
TypeScript
import { useState, useRef } from 'react';
|
|
import { SystemOverviewPanel } from './contents/SystemOverviewPanel';
|
|
import { GaussianModelPanel } from './contents/GaussianModelPanel';
|
|
import { SubstanceScenarioPanel } from './contents/SubstanceScenarioPanel';
|
|
import { OceanCorrectionPanel } from './contents/OceanCorrectionPanel';
|
|
import { VerificationPanel } from './contents/VerificationPanel';
|
|
import { RealtimeComparePanel } from './contents/RealtimeComparePanel';
|
|
import { WrfChemPanel } from './contents/WrfChemPanel';
|
|
/* eslint-disable react-refresh/only-export-components */
|
|
|
|
const theoryTabs = [
|
|
{ icon: '🔬', name: '시스템 개요' },
|
|
{ icon: '🌀', name: '가우시안 모델' },
|
|
{ icon: '🧪', name: '물질별 시나리오' },
|
|
{ icon: '🌊', name: '해양환경 보정' },
|
|
{ icon: '✅', name: '모델 검증' },
|
|
{ icon: '⚡', name: '실시간 비교' },
|
|
{ icon: '🚀', name: 'WRF-Chem·발전' },
|
|
];
|
|
|
|
/* ═══ 공통 스타일 유틸 ═══ */
|
|
export const card = 'rounded-[10px] p-[14px] mb-4';
|
|
export const cardBg = 'bg-bg-card border border-stroke';
|
|
export const labelStyle = (color: string) =>
|
|
({ fontSize: 'var(--font-size-title-3)', fontWeight: 700, color, marginBottom: '10px' }) as const;
|
|
export 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;
|
|
export const bodyText = 'text-label-1 text-fg-sub leading-[1.8]';
|
|
|
|
/* ═══ 패널 0: 시스템 개요 ═══ */
|
|
|
|
|
|
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>
|
|
);
|
|
}
|