function PositionBar({ processIndex, process, stage, previous, next }) {
const progress = ((processIndex + 1) / PCB_PROCESSES.length) * 100;
return (
현재 {String(processIndex + 1).padStart(2, "0")} / 12
›
{process.phase}
›
{process.title}
{stage !== process && (
<>
›
{stage.step} {stage.title}
)}
이전 {previous.title}
다음 {next.title}
);
}
function ProcessRail({ processIndex, setProcessIndex }) {
return (
);
}
function SubProcessRail({ subStages, subIndex, setSubIndex }) {
return (
);
}
function LaminationCrossSection({ defectMode }) {
const layerRows = [104, 139, 174, 209, 244, 279];
return (
LAY-UP → VACUUM → HEAT → PRESSURE → CURE
{layerRows.map((y, index) => (
{index < layerRows.length - 1 && (
)}
))}
{defectMode && (
보이드
AIR / CONTAMINATION
국부 박리
)}
{!defectMode && (
프리프레그
FLOW + INSULATE
내층 회로
FIXED POSITION
)}
낱장들이 되돌리기 어려운 하나의 다층판으로 고정
CORE + PREPREG + COPPER FOIL
);
}
function BoardBase({ holeX, showHole }) {
const layers = [112, 149, 186, 223, 260, 297];
return (
{layers.map((y) => )}
{showHole && }
L1
L3
L5
);
}
function DrillCrossSection({ defectMode }) {
const holeX = defectMode ? 505 : 412;
return (
MECHANICAL HOLE — NOT YET CONDUCTIVE
{defectMode ? "패드 중심 이탈" : "홀 벽 스미어"}
{defectMode ? (
브레이크아웃
REGISTRATION ERROR
) : (
빈 통로만 생성
NO COPPER BARREL YET
)}
);
}
function DesmearCrossSection({ defectMode }) {
const holeX = 412;
return (
REMOVE RESIN SMEAR — EXPOSE INNER-LAYER COPPER
{!defectMode && (
내층 구리 노출
CLEAN CONTACT
)}
{defectMode && (
스미어 잔류
CONTACT BLOCKED
)}
청소의 목적은 ‘예쁘게’가 아니라 기존 구리 접점을 다시 드러내는 것
);
}
function ElectrolessCrossSection({ defectMode }) {
const x = 412;
return (
CHEMICAL DEPOSITION — THIN CONTINUOUS SEED LAYER
{defectMode ? (
씨앗층 단절
SKIP PLATING
) : (
얇고 연속적인 씨앗층
CONDUCTIVE PATH
)}
전기 없이 화학 반응
SEED, NOT FINAL THICKNESS
);
}
function ElectrolyticCrossSection({ defectMode }) {
const x = 412;
return (
CURRENT-DRIVEN COPPER GROWTH — FUNCTIONAL BARREL
{defectMode ? (
홀 중앙 박막
THIN CENTER BARREL
) : (
기능 두께로 성장
CHECK THE HOLE CENTER
)}
층간 전기 통로 완성
표면 두께 ≠ 홀 중앙 두께
HIGH ASPECT RATIO RISK
);
}
function HPLCrossSection({ defectMode }) {
const x = 412;
return (
FILL → PLANARIZE → BUILD LAND / PAD ABOVE
{defectMode && (
충진 보이드
VOID + DIMPLE
)}
{!defectMode && (
상부 랜드/패드
USE THE SPACE ABOVE VIA
충진 + 평탄화
ROUTE VARIES BY PRODUCT
)}
HPL = Hole Plugging Land · 적층 프레스가 아님
);
}
function CrossSection({ processIndex, platingSubIndex, defectMode }) {
const process = PCB_PROCESSES[processIndex];
const platingViews = [
,
,
,
];
const processViews = {
cutting: ,
inner: ,
aoi: ,
lamination: ,
drill: ,
plating: platingViews[platingSubIndex],
outer: ,
mask: ,
finish: ,
routing: ,
etest: ,
shipping:
};
return (
);
}
function StageHeader({ stage }) {
return (
{stage.step}
{stage.tag}
{stage.title}{stage.verb}
{stage.change}
);
}
function ExplanationPanel({ stage, defectMode, onDefectMode, depthMode, onDepthMode }) {
return (
);
}
function Playback({ processIndex, setProcessIndex, autoPlay, setAutoPlay }) {
const previousIndex = (processIndex - 1 + PCB_PROCESSES.length) % PCB_PROCESSES.length;
const nextIndex = (processIndex + 1) % PCB_PROCESSES.length;
const previous = () => setProcessIndex(previousIndex);
const next = () => setProcessIndex(nextIndex);
return (
);
}
function FlowTab({ stage }) {
return (
{stage.flow.map((item, index) => (
0{index + 1}
{item}
))}
{stage.controls.map(([title, body], index) => (
CONTROL 0{index + 1}
{title}
{body}
))}
| 원인 | | 지금 보이는 이상 | | 뒤에서 커지는 문제 |
|---|
{stage.defects.map(([cause, now, later]) => (
| {cause} | → | {now} | → | {later} |
))}
);
}
function CeoTab({ stage }) {
return (
{stage.ceo.map((question, index) => (
CEO QUESTION 0{index + 1}
?
숫자와 사실로 답받을 질문
{question}
))}
10-SECOND RECALL
{stage.quiz.q}
{stage.quiz.options.map((option, index) => {
const judged = selected !== null;
const state = judged && index === stage.quiz.answer ? "correct" : judged && index === selected ? "wrong" : "";
return ;
})}
{selected !== null && {selected === stage.quiz.answer ? "정답. " : "다시 연결해 보면: "}{stage.quiz.explain}
}
);
}
function KnowledgeDock({ stage, activeTab, setActiveTab }) {
const tabs = [["flow", "작업 흐름"], ["controls", "관리 포인트"], ["defects", "불량 전파"], ["ceo", "CEO 질문"], ["quiz", "기억 확인"]];
return (
{tabs.map(([id, label]) => )}
{activeTab === "flow" && }
{activeTab === "controls" && }
{activeTab === "defects" && }
{activeTab === "ceo" && }
{activeTab === "quiz" && }
);
}
Object.assign(window, {
PositionBar,
ProcessRail,
SubProcessRail,
CrossSection,
StageHeader,
ExplanationPanel,
Playback,
KnowledgeDock
});