feat: 학습 센터 개편 — 컴퓨터 구성·데스크탑 조립·네트워크 코스 추가

- 메뉴 구조 변경: 코딩 기초/설치 가이드 → '학습 센터' 허브로 통합
- 신규 코스 3종: 컴퓨터의 구성(부품별 특징·스펙 읽기), 데스크탑 조립(9단계·실수 모음),
  네트워크의 이해(랜선 UTP 구조→인터넷 구조→DNS·TCP/IP, 실습 포함)
- 라우팅 /learn 하위로 코스 정리, 허브는 데이터 기반 카드 목록

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -6,7 +6,11 @@ import LoginPage from './pages/LoginPage';
 import SignupPage from './pages/SignupPage';
 import FindAccountPage from './pages/FindAccountPage';
 import DashboardPage from './pages/DashboardPage';
+import LearnHubPage from './pages/LearnHubPage';
 import CodingBasicsPage from './pages/CodingBasicsPage';
+import HardwarePage from './pages/HardwarePage';
+import AssemblyPage from './pages/AssemblyPage';
+import NetworkPage from './pages/NetworkPage';
 import DocsPage from './pages/DocsPage';
 import DocViewerPage from './pages/DocViewerPage';
 import AssignmentsPage from './pages/AssignmentsPage';
@@ -54,11 +58,9 @@ function Layout() {
             <NavLink to="/" end className={({ isActive }) => (isActive ? 'active' : '')}>
               대시보드
             </NavLink>
+            {/* 학습 포인트: end 없이 쓰면 /learn/hardware 같은 하위 경로에서도 메뉴가 활성 표시된다. */}
             <NavLink to="/learn" className={({ isActive }) => (isActive ? 'active' : '')}>
-              코딩 기초
-            </NavLink>
-            <NavLink to="/setup" className={({ isActive }) => (isActive ? 'active' : '')}>
-              설치 가이드
+              학습 센터
             </NavLink>
             <NavLink to="/docs" className={({ isActive }) => (isActive ? 'active' : '')}>
               학습 문서
@@ -103,7 +105,12 @@ export default function App() {
       <Route element={<RequireAuth />}>
         <Route element={<Layout />}>
           <Route path="/" element={<DashboardPage />} />
-          <Route path="/learn" element={<CodingBasicsPage />} />
+          {/* 학습 센터: 허브 + 코스들. /learn 아래로 모아 메뉴 하나로 정리했다. */}
+          <Route path="/learn" element={<LearnHubPage />} />
+          <Route path="/learn/coding" element={<CodingBasicsPage />} />
+          <Route path="/learn/hardware" element={<HardwarePage />} />
+          <Route path="/learn/assembly" element={<AssemblyPage />} />
+          <Route path="/learn/network" element={<NetworkPage />} />
           <Route path="/setup" element={<SetupGuidePage />} />
           <Route path="/docs" element={<DocsPage />} />
           <Route path="/docs/:slug" element={<DocViewerPage />} />

frontend/src/pages/AssemblyPage.jsx

@@ -0,0 +1,328 @@
+// 이 파일이 하는 일: "데스크탑 조립하기" 코스 — 부품 고르기부터 첫 부팅, OS 설치까지
+// 조립 전 과정을 초보자 눈높이로 안내하는 정적 페이지.
+// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
+// 가이드 전용 클래스(step-card, code-block, tip, warn 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
+
+import { Link } from 'react-router-dom';
+
+// 텍스트 다이어그램·표 — JSX 안에서 중괄호/백틱이 깨지지 않게 문자열로 먼저 만들어 둔다.
+const CODE_COMPAT = `호환성 3대 체크 — 이것만 맞으면 큰 사고는 없어요
+
+① CPU 소켓 ↔ 메인보드 소켓
+   인텔 예)  LGA1700 CPU  ↔  LGA1700 보드   ✅
+             LGA1700 CPU  ↔  AM5 보드       ❌ (아예 안 꽂혀요)
+   → CPU와 보드는 "같은 소켓 이름"끼리만 결혼할 수 있어요.
+
+② RAM 규격
+   DDR5 보드에는 DDR5만, DDR4 보드에는 DDR4만.
+   (홈 파인 위치가 달라서 물리적으로도 안 들어가요)
+
+③ 파워(PSU) 용량
+   부품 전체 소비전력 합계 × 1.5배 정도 여유를 두는 게 국룰.
+   예) CPU 125W + GPU 220W + 기타 100W ≈ 445W → 700W 파워 추천`;
+
+const CODE_BUDGET = `용도별 예산 배분 감각 (총 예산을 어디에 몰아줄까?)
+
+              CPU   RAM   GPU        비고
+개발용 PC     ★★★  ★★★  ★          컴파일·IDE·도커가 CPU·RAM을 먹어요
+게임용 PC     ★★    ★★    ★★★      화면을 그리는 건 GPU의 일
+영상편집 PC   ★★★  ★★★  ★★        CPU+RAM+GPU 골고루, SSD도 크게
+사무용 PC     ★      ★      내장     인터넷·문서엔 내장그래픽으로 충분
+
+→ "비싼 부품 = 좋은 PC"가 아니라, 용도에 맞는 배분이 좋은 PC예요.`;
+
+const CODE_BOOT_CHECK = `화면이 안 나올 때 점검 순서 (위에서부터 하나씩!)
+
+1) 전원 확인
+   - 파워 뒷면 스위치가 I 인가? (O는 꺼짐!)
+   - 콘센트·케이블 꽂혔나? 케이스 전원 버튼 눌렀을 때 팬이 도나?
+
+2) 팬은 도는데 화면이 안 나온다?
+   - RAM을 뽑았다가 "딸깍" 소리 나게 다시 장착 (원인 1위!)
+   - RAM이 2개면 하나만 꽂고 부팅 시도
+
+3) 그래도 안 나온다?
+   - 모니터 케이블이 그래픽카드 포트에 꽂혔는지 확인
+   - 다른 케이블(HDMI ↔ DP)로 바꿔서 시도
+   - CPU 보조전원(8핀), 그래픽카드 보조전원 꽂혔나 재확인`;
+
+const CODE_OS_FLOW = `OS 설치 큰 흐름 (자세한 건 다음 기회에 — 감만 잡아요)
+
+① 다른 PC에서 "부팅 USB" 만들기
+   Microsoft 홈페이지 → "미디어 생성 도구" 다운로드 → USB(8GB+)에 굽기
+
+② 새 PC에 USB 꽂고 켜기 → BIOS에서 부팅 순서를 USB 먼저로
+
+③ 윈도우 설치 화면 따라가기
+   설치할 디스크 선택(새 SSD) → 20~30분 대기 → 재부팅
+
+④ 드라이버 설치
+   요즘 윈도우는 대부분 자동으로 잡아줘요.
+   그래픽카드 드라이버(NVIDIA/AMD 홈페이지)만 직접 설치하면 체감이 확 달라져요.
+
+⑤ 윈도우 업데이트 한 바퀴 돌리면 끝!`;
+
+const CODE_UPGRADE = `가상 업그레이드 계획 예시 (이런 식으로 정리해 보세요)
+
+내 PC 사양:  i5-9400 / RAM 8GB / SSD 256GB / 내장그래픽
+주 용도:     개발 공부 (IntelliJ + Docker + 크롬 탭 20개)
+
+증상:        IntelliJ 켜고 도커 띄우면 버벅임
+
+1순위: RAM 8GB → 32GB    이유) 개발 도구는 메모리 대식가.
+                              가장 싸고 체감 큰 업그레이드.
+2순위: SSD 256GB → 1TB   이유) 프로젝트·도커 이미지가 금방 참.
+3순위: CPU               이유) 보드 소켓 확인 필수 — 소켓이 다르면
+                              보드까지 갈아야 해서 사실상 새 PC.`;
+
+// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
+// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
+function Sec({ n, title, sub, children }) {
+  return (
+    <section className="step-card" id={`sec-${n}`}>
+      <div className="step-head">
+        <span className="step-num">{n}</span>
+        <div>
+          <h3>{title}</h3>
+          {sub && <span className="step-sub">{sub}</span>}
+        </div>
+      </div>
+      <div className="step-body">{children}</div>
+    </section>
+  );
+}
+
+function Code({ children }) {
+  return <pre className="code-block"><code>{children}</code></pre>;
+}
+
+const SECTIONS = [
+  { n: 1, label: '부품 고르기' },
+  { n: 2, label: '준비물과 안전' },
+  { n: 3, label: '조립 순서' },
+  { n: 4, label: '자주 하는 실수' },
+  { n: 5, label: '첫 부팅' },
+  { n: 6, label: 'OS 설치' },
+  { n: 7, label: '직접 해보기' },
+];
+
+export default function AssemblyPage() {
+  return (
+    <div>
+      {/* 히어로: 이 코스가 뭘 다루는지 한눈에 */}
+      <div className="hero">
+        <div className="eyebrow">Course · 컴퓨터 기초</div>
+        <h1>데스크탑 조립하기<br />— 두려움이 사라지는 순간</h1>
+        <p>
+          조립을 한 번이라도 해보면 컴퓨터는 더 이상 <strong>블랙박스</strong>가 아니에요.
+          "느려졌는데 뭘 바꾸지?", "부팅이 안 되는데 어디부터 보지?" 같은 질문에
+          스스로 답할 수 있게 됩니다. 사실 조립은 <strong>어른용 레고</strong>예요 —
+          들어갈 곳에만 들어가게 만들어져 있어서, 순서만 알면 누구나 할 수 있어요.
+        </p>
+        <div className="chip-row">
+          <span className="chip">소요 50분</span>
+          <span className="chip">선수: 컴퓨터의 구성</span>
+        </div>
+      </div>
+
+      {/* 섹션 바로가기 */}
+      <nav className="pill-nav">
+        {SECTIONS.map((s) => (
+          <a key={s.n} href={`#sec-${s.n}`}>
+            <b>{s.n}</b>
+            {s.label}
+          </a>
+        ))}
+      </nav>
+
+      <Sec n={1} title="부품 고르기 — 호환성이 전부다" sub="비싼 부품보다 '맞는' 부품">
+        <p>
+          부품 선택에서 실수하면 조립 자체가 불가능해요. 다행히 체크할 건 딱 세 가지입니다.
+          퍼즐 조각처럼, 모양이 맞아야 끼울 수 있어요.
+        </p>
+        <Code>{CODE_COMPAT}</Code>
+        <p>
+          그다음은 <strong>예산 배분</strong>이에요. 같은 100만 원이라도 용도에 따라
+          어디에 돈을 쓸지가 달라집니다.
+        </p>
+        <Code>{CODE_BUDGET}</Code>
+        <div className="tip">
+          <b>견적 사이트를 활용하세요</b> — 다나와 등 견적 사이트에서 부품을 담으면
+          <strong> 호환성 경고</strong>를 자동으로 띄워줘요. 최종 주문 전에 견적 사이트에
+          한 번 담아보는 습관만 들여도 "안 꽂히는 부품" 사고는 거의 막을 수 있어요.
+        </div>
+        <div className="tip">
+          <b>직접 확인해 보기</b> — 견적 사이트에서 "개발 공부용 100만 원 PC"를 가상으로
+          견적 내 보세요. CPU 소켓과 보드 소켓이 같은지, 파워 용량이 넉넉한지 스스로 체크!
+        </div>
+      </Sec>
+
+      <Sec n={2} title="준비물과 안전" sub="드라이버 하나면 충분, 대신 정전기 조심">
+        <ol className="olist">
+          <li><strong>십자 드라이버 1개</strong> — 자성(자석) 있는 게 편해요. 나사를 케이스 틈에 떨어뜨려도 건질 수 있거든요. 이게 준비물의 거의 전부입니다.</li>
+          <li><strong>밝고 넓은 곳</strong> — 책상 위를 싹 치우고 시작하세요. 나사와 케이블 종류가 많아서, 어두우면 뭐가 뭔지 안 보여요.</li>
+          <li><strong>부품 상자는 버리지 말기</strong> — 초기 불량 교환 때 필요해요.</li>
+        </ol>
+        <div className="warn">
+          <b>정전기가 왜 위험한가요?</b> 겨울에 문고리 잡을 때 "찌릿" 하죠? 그 순간
+          수천 볼트가 흘러요. 사람은 따끔하고 말지만, CPU나 메인보드의 미세 회로엔
+          <strong> 벼락</strong>이나 마찬가지예요. 부품을 만지기 전에 <strong>케이스의 금속 부분이나
+          철제 책상 다리를 한 번 만져서</strong> 몸의 정전기를 흘려보내세요. 카펫 위에서
+          양말 신고 조립하는 건 금지!
+        </div>
+        <div className="tip">
+          <b>직접 확인해 보기</b> — 지금 주변에서 정전기를 방전할 수 있는 금속 물체를
+          찾아보세요. 조립 전 "금속 터치"를 습관으로 만들면 평생 안전해요.
+        </div>
+      </Sec>
+
+      <Sec n={3} title="조립 순서 — 표준 9단계" sub="이 코스의 핵심! 순서에는 이유가 있어요">
+        <p>
+          왜 순서가 중요하냐면, <strong>케이스에 넣기 전이 훨씬 작업하기 편하기 때문</strong>이에요.
+          메인보드를 책상 위(보드 상자 위가 딱 좋아요)에 두고 ①~④를 먼저 끝냅니다.
+        </p>
+        <ol className="olist">
+          <li>
+            <strong>메인보드에 CPU 장착</strong> — 소켓 레버를 열고, CPU 모서리의
+            <strong> 삼각형 표시</strong>를 소켓의 삼각형과 맞춰 살포시 올려놓기.
+            <strong> 절대 힘주지 마세요</strong> — 방향이 맞으면 그냥 안착돼요.
+          </li>
+          <li>
+            <strong>쿨러 + 서멀구리스</strong> — CPU 위에 구리스를 콩알만큼(쌀 한 톨~완두콩 사이).
+            쿨러를 눌러 고정하면 알아서 퍼져요. 너무 많이 바르면 옆으로 새요.
+          </li>
+          <li>
+            <strong>RAM 장착</strong> — 홈 위치를 맞추고 양쪽 끝을 <strong>"딸깍" 소리가 날 때까지</strong> 꾹.
+            생각보다 힘이 들어가요. 딸깍 안 났으면 안 꽂힌 거예요.
+          </li>
+          <li>
+            <strong>M.2 SSD</strong> — 껌 같이 생긴 SSD를 슬롯에 비스듬히 꽂고, 반대쪽을 눌러 작은 나사 하나로 고정. 끝.
+          </li>
+          <li>
+            <strong>케이스에 메인보드 고정</strong> — 케이스에 스탠드오프(받침 나사)가 제 위치에 있는지 확인하고,
+            뒷면 I/O 패널 방향을 맞춰 나사로 고정해요.
+          </li>
+          <li>
+            <strong>파워 장착 + 케이블</strong> — 파워를 케이스에 고정하고, 24핀(보드 메인)과
+            <strong> CPU 보조전원 8핀</strong>(보드 왼쪽 위)을 꽂아요. 8핀을 빼먹는 사람이 정말 많아요!
+          </li>
+          <li>
+            <strong>(외장) 그래픽카드</strong> — PCIe 슬롯에 딸깍 소리 나게 장착하고, 카드에 보조전원
+            단자가 있으면 파워 케이블(PCIe 6+2핀)도 꽂아요.
+          </li>
+          <li>
+            <strong>전면 패널 커넥터</strong> — 케이스의 전원 버튼·LED에서 나온 아주 작은 핀들
+            (<span className="icode">PWR_SW</span>, <span className="icode">RESET_SW</span>,
+            <span className="icode">HDD_LED</span>...)을 보드 오른쪽 아래 구석에 하나하나 꽂아요.
+          </li>
+          <li>
+            <strong>선정리</strong> — 케이블을 케이스 뒷면 공간으로 넘기고 케이블타이로 묶기.
+            예쁘라고 하는 게 아니라 <strong>공기 흐름(=냉각)</strong>을 위해서예요.
+          </li>
+        </ol>
+        <div className="tip">
+          <b>⑧이 제일 짜증나는 게 정상이에요</b> — 전면 패널 커넥터는 조립 전체에서
+          가장 작고, 가장 글씨가 안 보이고, 가장 손이 안 들어가는 부분이에요.
+          <strong> 메인보드 설명서의 핀 배치도</strong>를 펴놓고, 휴대폰 손전등 켜고 천천히.
+          전문가도 여기서 설명서 봐요.
+        </div>
+        <div className="tip">
+          <b>직접 확인해 보기</b> — 유튜브에서 "PC 조립" 영상을 하나 골라, 위 9단계 순서와
+          같은지 비교하며 보세요. 순서가 조금 다르다면 왜 다른지 생각해 보는 것도 좋은 공부예요.
+        </div>
+      </Sec>
+
+      <Sec n={4} title="초보가 자주 하는 실수" sub="미리 알면 100% 피할 수 있어요">
+        <div className="warn">
+          <b>CPU 핀 휨</b> — CPU 장착 때 방향이 안 맞는데 힘으로 누르면 소켓 핀이 휘어요.
+          핀 하나에 몇십만 원이 날아갑니다. <strong>삼각형 표시 확인 → 살포시</strong>, 이 두 가지만 기억하세요.
+        </div>
+        <div className="warn">
+          <b>쿨러 전원(팬 케이블) 안 꽂음</b> — 쿨러를 물리적으로 달아놓고 팬 케이블을
+          보드의 <span className="icode">CPU_FAN</span>에 안 꽂는 실수. 부팅은 되는데
+          몇 분 뒤 CPU가 과열로 꺼져요.
+        </div>
+        <div className="warn">
+          <b>RAM 덜 꽂힘 — 부팅 안 되는 원인 1위!</b> 겉보기엔 꽂힌 것 같은데 한쪽이 덜 들어간 상태.
+          화면이 안 나오면 일단 RAM부터 뽑았다가 "딸깍"까지 다시 꽂아보세요. 이걸로 해결되는 경우가 절반이에요.
+        </div>
+        <div className="warn">
+          <b>파워 뒷면 스위치 O/I</b> — 파워 뒷면 스위치에서 <strong>I가 켜짐, O가 꺼짐</strong>이에요
+          (이진수의 1과 0!). "전원 버튼 눌러도 반응이 없어요"의 단골 범인.
+        </div>
+        <div className="warn">
+          <b>모니터를 내장 포트에 꽂는 실수</b> — 외장 그래픽카드가 있으면 화면은
+          <strong> 그래픽카드의 포트</strong>(케이스 아래쪽 가로 방향)에서 나와요.
+          메인보드의 포트(위쪽)에 꽂으면 검은 화면만 나옵니다.
+        </div>
+      </Sec>
+
+      <Sec n={5} title="첫 부팅과 확인" sub="화면에 뭐라도 나오면 90% 성공">
+        <p>
+          전원 버튼을 누르는 순간이 제일 떨려요. 화면이 안 나와도 당황하지 마세요 —
+          대부분 아래 순서로 점검하면 해결됩니다.
+        </p>
+        <Code>{CODE_BOOT_CHECK}</Code>
+        <p>
+          화면이 나오면 <strong>BIOS</strong>에 들어가 부품이 제대로 인식됐는지 확인해요.
+          부팅 직후 <span className="kbd">Del</span> 키(보드에 따라 <span className="kbd">F2</span>)를
+          연타하면 들어갈 수 있어요.
+        </p>
+        <ol className="olist">
+          <li><strong>CPU</strong> — 내가 산 모델명이 맞는지</li>
+          <li><strong>RAM</strong> — 용량이 전부 잡혔는지 (16GB 꽂았는데 8GB만 보이면 하나가 덜 꽂힌 것!)</li>
+          <li><strong>SSD</strong> — 저장 장치 목록에 보이는지</li>
+        </ol>
+        <div className="tip">
+          <b>직접 확인해 보기</b> — 조립 안 해도 할 수 있어요! 지금 쓰는 PC를 재부팅하면서
+          BIOS에 들어가 보세요. 내 PC의 CPU·RAM이 어떻게 표시되는지 구경만 하고,
+          <strong> 설정은 바꾸지 말고</strong> 저장 없이 나오기(<span className="kbd">Esc</span> →
+          Discard)를 해보는 것까지가 미션이에요.
+        </div>
+      </Sec>
+
+      <Sec n={6} title="조립 후: OS 설치 개요" sub="하드웨어에 영혼 불어넣기">
+        <p>
+          조립이 끝난 PC는 아직 <strong>몸만 있고 영혼이 없는 상태</strong>예요.
+          운영체제(OS)를 설치해야 비로소 "컴퓨터"가 됩니다. 여기선 큰 흐름만 잡아둘게요.
+        </p>
+        <Code>{CODE_OS_FLOW}</Code>
+        <div className="tip">
+          <b>부팅 USB는 미리 만들어 두세요</b> — 새 PC는 아직 인터넷도 브라우저도 없어요.
+          부팅 USB는 반드시 <strong>지금 쓰는 다른 PC에서</strong> 미리 만들어야 합니다.
+        </div>
+      </Sec>
+
+      <Sec n={7} title="직접 확인해 보기 — 가상 업그레이드 계획" sub="이 코스의 졸업 과제">
+        <p>
+          진짜 조립은 부품이 있어야 하지만, <strong>업그레이드 계획</strong>은 지금 바로 세울 수 있어요.
+          회사나 집 PC의 사양을 확인하고(<span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">Esc</span> →
+          작업 관리자 → <span className="kbd">성능</span> 탭), 아래처럼 정리해 보세요.
+        </p>
+        <Code>{CODE_UPGRADE}</Code>
+        <ol className="olist">
+          <li>내 PC의 CPU·RAM·저장장치·그래픽 사양을 적는다</li>
+          <li>내 주 용도에서 <strong>가장 병목인 부품</strong>이 뭔지 추측한다 (작업 관리자에서 뭐가 늘 100%인가?)</li>
+          <li>바꿀 부품의 <strong>우선순위와 이유</strong>를 1~3순위로 적는다</li>
+          <li>1순위 부품의 호환성(소켓·규격·파워 용량)을 견적 사이트에서 확인한다</li>
+        </ol>
+        <div className="tip">
+          <b>멘토와 이야기해 보세요</b> — 완성한 업그레이드 계획을 멘토에게 보여주고
+          "왜 이 순서로 골랐는지" 설명해 보세요. 정답을 맞히는 것보다
+          <strong> 이유를 설명하는 과정</strong>이 진짜 공부예요.
+        </div>
+      </Sec>
+
+      <div className="step-card">
+        <div className="step-body">
+          <h3 style={{ marginBottom: 6 }}>🖥️ 이제 컴퓨터가 블랙박스가 아니죠?</h3>
+          <p className="muted">
+            부품이 어떻게 연결되는지 알았으니, 다음은 <strong>컴퓨터끼리</strong> 어떻게 연결되는지 차례예요.
+            방금 조립한 PC가 어떻게 다른 컴퓨터와 대화하는지 —{' '}
+            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서 이어집니다.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/HardwarePage.jsx

@@ -0,0 +1,312 @@
+// 이 파일이 하는 일: "컴퓨터의 구성" 코스 — 본체 안 부품(CPU·RAM·저장장치·메인보드·파워·GPU)이
+// 각각 무슨 일을 하는지, 스펙표를 어떻게 읽는지 배우는 정적 페이지.
+// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
+// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
+// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단에 문자열 상수로 먼저 만들어 둔다.
+
+import { Link } from 'react-router-dom';
+
+// ── 텍스트 다이어그램·표 상수들 ──
+const DIAGRAM_FIVE_JOBS = `컴퓨터가 하는 5가지 일과 담당 부품
+
+  [입력]          [기억]           [계산]          [저장]          [출력]
+ 키보드·마우스 →  RAM(메모리)  ↔  CPU(두뇌)   ↔  SSD/HDD     →  모니터·스피커
+ "명령을 받고"    "펼쳐 놓고"     "생각하고"      "보관하고"      "결과를 보여준다"
+
+ 이 모든 부품이 꽂히는 판 = 메인보드,  전기를 나눠 주는 것 = 파워(PSU)`;
+
+const CODE_CPU_SPEC = `CPU 스펙표 읽기 예시
+
+  인텔 코어 i5-14400F
+  ├─ i5        : 등급 (i3 < i5 < i7 < i9 — 숫자가 클수록 상급)
+  ├─ 14        : 세대 (14세대 — 앞자리가 클수록 최신)
+  ├─ 400       : 같은 세대 안에서의 세부 모델
+  └─ F         : 내장그래픽 없음 (외장 그래픽카드 필수!)
+
+  AMD 라이젠 5 7600
+  ├─ 라이젠 5  : 등급 (3 < 5 < 7 < 9 — 인텔 i3/i5/i7/i9와 짝이 맞아요)
+  └─ 7600      : 7000번대 = 세대, 뒤 숫자 = 세부 모델
+
+  공통으로 보는 숫자
+  ├─ 코어 10개 / 스레드 16개  : 요리사 수 / 동시에 잡을 수 있는 주문 수
+  └─ 최대 4.7GHz              : 요리사 한 명의 손 빠르기 (1초에 47억 번!)`;
+
+const CODE_RAM_SWAP = `RAM이 부족하면 왜 느려질까? — "스왑(swap)"
+
+  RAM(책상)이 꽉 참
+    → 컴퓨터가 덜 쓰는 자료를 SSD/HDD(책장)로 잠시 치워 둠
+    → 다시 필요하면 책장에서 꺼내 옴
+    → 책상 위에서 바로 집는 것보다 수백~수천 배 느림!
+
+  크롬 탭 30개 + 게임 + 디스코드 켰을 때 뚝뚝 끊기는 이유가 이거예요.
+
+  용량 감각
+  ├─  8GB : 문서·인터넷은 OK, 개발 도구 여러 개는 빠듯
+  ├─ 16GB : 개발 입문 표준 — IntelliJ + 브라우저 + Docker 무난
+  └─ 32GB : 가상머신·영상편집·대형 프로젝트까지 여유`;
+
+const CODE_STORAGE = `HDD vs SSD — 자료 찾는 속도 비교
+
+  HDD (하드디스크)     : 사서가 사다리 타고 올라가 책을 '손으로' 찾음
+                         물리적으로 도는 원판 + 움직이는 바늘 → 느림, 대신 저렴
+  SSD (SATA)           : 전자 도서관 — 검색하면 바로 나옴 (HDD의 4~5배)
+  SSD (NVMe, M.2 슬롯) : 전자 도서관 + 전용 고속도로 (SATA의 5~10배 이상)
+
+  부팅 시간 체감: HDD 1~2분 → NVMe SSD 10~20초
+
+  용량 단위
+  1TB = 1,000GB  /  요즘 표준: NVMe SSD 500GB~1TB (+ 자료용 HDD 선택)`;
+
+const CODE_ESTIMATE = `── PC 견적서 예시 (실제 견적 사이트 스타일) ──
+
+  CPU        AMD 라이젠 5 7600 (6코어 12스레드, 최대 5.1GHz)
+  메인보드   ASUS B650M (AM5 소켓, DDR5, M-ATX)
+  메모리     DDR5 16GB (8GB x 2)
+  저장장치   NVMe SSD 1TB (M.2)
+  그래픽     CPU 내장그래픽 사용 (Radeon Graphics)
+  파워       650W 80PLUS 브론즈
+  케이스     미들타워 M-ATX
+
+  ── 한 줄씩 해석 ──
+  CPU      : 라이젠 중급(5), 7000번대 세대. 요리사 6명이 주문 12개를 돌림
+  메인보드 : AM5 소켓 = 라이젠 7000번대가 꽂히는 자리. DDR5 지원 확인!
+  메모리   : 16GB인데 8GB 두 개 — 두 줄로 꽂으면 더 빠름(듀얼 채널)
+  저장장치 : NVMe라 부팅·프로그램 실행이 쾌속. 1TB면 개발용으로 넉넉
+  그래픽   : 외장 카드 없이 CPU 내장으로 해결 → 개발용이면 충분, 비용 절약
+  파워     : 650W = 전체 부품이 쓰는 전기(약 300~400W)보다 여유 있게
+  케이스   : 메인보드 규격(M-ATX)과 케이스 크기가 맞아야 들어가요`;
+
+const CODE_TASKMGR = `직접 확인해 보기 — 내 PC 스펙 조사서
+
+  1) Ctrl + Shift + Esc  →  작업 관리자 열기
+  2) 왼쪽(또는 위쪽) [성능] 탭 클릭
+
+  ┌ 적어 보세요 ─────────────────────────────┐
+  │ CPU   : 이름? 코어 수? 논리 프로세서(스레드) 수? │
+  │ 메모리 : 몇 GB? 지금 몇 % 사용 중?              │
+  │ 디스크 : SSD인가 HDD인가? (이름 옆에 표시돼요)   │
+  │ GPU   : 내장(Intel/Radeon Graphics)? 외장(RTX 등)? │
+  └──────────────────────────────────────────┘`;
+
+// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
+// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props(n, title...)만 바꿔 재사용.
+function Sec({ n, title, sub, children }) {
+  return (
+    <section className="step-card" id={`sec-${n}`}>
+      <div className="step-head">
+        <span className="step-num">{n}</span>
+        <div>
+          <h3>{title}</h3>
+          {sub && <span className="step-sub">{sub}</span>}
+        </div>
+      </div>
+      <div className="step-body">{children}</div>
+    </section>
+  );
+}
+
+function Code({ children }) {
+  return <pre className="code-block"><code>{children}</code></pre>;
+}
+
+const SECTIONS = [
+  { n: 1, label: '큰 그림' },
+  { n: 2, label: 'CPU' },
+  { n: 3, label: 'RAM' },
+  { n: 4, label: '저장장치' },
+  { n: 5, label: '메인보드·파워' },
+  { n: 6, label: '그래픽카드' },
+  { n: 7, label: '스펙표 실전' },
+];
+
+export default function HardwarePage() {
+  return (
+    <div>
+      {/* 히어로: 이 코스가 뭘 다루는지 한눈에 */}
+      <div className="hero">
+        <div className="eyebrow">Course · 컴퓨터 기초</div>
+        <h1>컴퓨터의 구성 —<br />본체 안에는 무엇이 있나</h1>
+        <p>
+          매일 쓰는 PC, 본체 뚜껑을 열면 뭐가 나올까요? 부품 하나하나가{' '}
+          <strong>무슨 일을 하는지</strong> 알고 나면, 견적서도 읽을 수 있고
+          "내 컴퓨터가 왜 느리지?"의 답도 스스로 찾을 수 있어요.
+        </p>
+        <div className="chip-row">
+          <span className="chip">예상 소요 40분</span>
+          <span className="chip">준비물: 내 PC</span>
+        </div>
+      </div>
+
+      {/* 섹션 바로가기 */}
+      <nav className="pill-nav">
+        {SECTIONS.map((s) => (
+          <a key={s.n} href={`#sec-${s.n}`}>
+            <b>{s.n}</b>
+            {s.label}
+          </a>
+        ))}
+      </nav>
+
+      <Sec n={1} title="큰 그림 — 컴퓨터는 5가지 일을 한다" sub="입력 → 기억 → 계산 → 저장 → 출력">
+        <p>
+          복잡해 보여도 컴퓨터가 하는 일은 딱 다섯 가지예요. <strong>받고(입력), 펼쳐 놓고(기억),
+          생각하고(계산), 보관하고(저장), 보여준다(출력)</strong>. 부품마다 담당이 정해져 있죠.
+        </p>
+        <Code>{DIAGRAM_FIVE_JOBS}</Code>
+        <div className="tip">
+          <b>비유 하나로 끝까지 갑니다.</b> 이 코스에서는 컴퓨터를 <strong>식당 주방</strong>에
+          비유할 거예요. CPU는 요리사, RAM은 조리대(작업 책상), 저장장치는 냉장고 겸 책장,
+          메인보드는 주방 바닥, 파워는 가스·전기 배관이에요.
+        </div>
+        <p>
+          <strong>직접 확인해 보기</strong> — 지금 이 페이지를 보는 데도 5가지가 다 쓰이고 있어요.
+          마우스 스크롤(입력) → RAM에 페이지 로드(기억) → CPU가 렌더링(계산) → 캐시 저장(저장) →
+          모니터 표시(출력). 스크롤 한 번 하면서 머릿속으로 따라가 보세요.
+        </p>
+      </Sec>
+
+      <Sec n={2} title="CPU — 컴퓨터의 두뇌" sub="코어 · 스레드 · 클럭(GHz) 읽는 법">
+        <p>
+          CPU는 모든 계산을 하는 <strong>두뇌</strong>이자, 주방으로 치면 <strong>요리사</strong>예요.
+          스펙표에 나오는 세 가지 숫자만 알면 됩니다.
+        </p>
+        <ol className="olist">
+          <li><strong>코어(Core)</strong> = 요리사 수. 6코어면 요리사 6명이 각자 다른 요리를 동시에 해요.</li>
+          <li><strong>스레드(Thread)</strong> = 동시에 잡을 수 있는 주문 수. 요리사 한 명이 양손으로 주문 2개를 번갈아 처리하면 6코어 12스레드.</li>
+          <li><strong>클럭(GHz)</strong> = 요리사 한 명의 손 빠르기. 4GHz면 1초에 약 40억 번의 기본 동작을 해요.</li>
+        </ol>
+        <Code>{CODE_CPU_SPEC}</Code>
+        <div className="warn">
+          <b>숫자가 크다고 무조건 좋은 건 아니에요.</b> 12세대 i7이 14세대 i3보다 빠를 수 있어요.
+          <strong>등급보다 세대, 세대보다 실제 벤치마크</strong> 순으로 확인하는 습관을 들이세요.
+        </div>
+        <p>
+          <strong>직접 확인해 보기</strong> — <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">Esc</span>로
+          작업 관리자를 열고 <span className="kbd">성능</span> 탭 → <span className="kbd">CPU</span>를 클릭해 보세요.
+          내 CPU의 이름·코어 수·기본 속도(GHz)가 다 나와요. 이름을 검색해서 몇 세대인지도 찾아보세요.
+        </p>
+      </Sec>
+
+      <Sec n={3} title="RAM(메모리) — 작업 책상" sub="용량이 좌우하는 것, 부족하면 느려지는 이유">
+        <p>
+          RAM은 <strong>지금 하는 일을 펼쳐 놓는 작업 책상</strong>이에요. 책상이 넓으면(용량이 크면)
+          교과서·노트·태블릿을 한꺼번에 펼쳐 놓고 일할 수 있죠. 프로그램을 켤 때마다
+          책상 위 공간을 조금씩 차지한다고 생각하면 돼요.
+        </p>
+        <p>
+          중요한 특징: <strong>전원을 끄면 싹 비워져요.</strong> 책상은 퇴근할 때 치우는 곳이지
+          보관하는 곳이 아니거든요. 보관은 다음 섹션의 저장장치 담당입니다.
+        </p>
+        <Code>{CODE_RAM_SWAP}</Code>
+        <div className="tip">
+          <b>DDR4 vs DDR5 한 줄 정리</b> — RAM의 세대예요. DDR5가 더 빠른 신형이지만,
+          <strong>메인보드가 지원하는 쪽으로만 꽂을 수 있어요</strong> (모양 자체가 달라서 호환 불가).
+        </div>
+        <p>
+          <strong>직접 확인해 보기</strong> — 작업 관리자 <span className="kbd">성능</span> →{' '}
+          <span className="kbd">메모리</span>에서 내 RAM 용량과 지금 사용률(%)을 확인하세요.
+          크롬 탭을 10개쯤 더 열고 사용률이 얼마나 올라가는지 지켜보면 "탭이 메모리를 먹는다"는 말이 실감 나요.
+        </p>
+      </Sec>
+
+      <Sec n={4} title="저장장치 — 책장 겸 냉장고" sub="HDD vs SSD, SATA vs NVMe">
+        <p>
+          저장장치는 <strong>전원을 꺼도 남는 보관 창고</strong>예요. 윈도우, 프로그램, 과제 파일,
+          사진이 전부 여기 살아요. 책상(RAM)과 달리 넓지만, 꺼내는 데 시간이 걸리죠.
+          그리고 그 "꺼내는 속도"가 종류에 따라 하늘과 땅 차이예요.
+        </p>
+        <Code>{CODE_STORAGE}</Code>
+        <div className="tip">
+          <b>가성비 조합의 정석</b> — 윈도우와 프로그램은 <strong>빠른 NVMe SSD</strong>에,
+          영상·사진 같은 큰 자료는 <strong>싸고 넉넉한 HDD</strong>에. 도서관도 자주 보는 책은
+          앞쪽 서가에, 창고 자료는 뒤쪽에 두잖아요.
+        </div>
+        <p>
+          <strong>직접 확인해 보기</strong> — 작업 관리자 <span className="kbd">성능</span> 탭에서
+          디스크 항목을 보면 이름 옆에 <span className="icode">SSD</span>인지 <span className="icode">HDD</span>인지
+          표시돼요. 내 PC 부팅에 몇 초 걸리는지 스톱워치로 재 보고, 위 표와 비교해 보세요.
+        </p>
+      </Sec>
+
+      <Sec n={5} title="메인보드 & 파워 — 판과 전기" sub="모든 부품이 만나는 곳, 규격이 맞아야 하는 이유">
+        <p>
+          <strong>메인보드</strong>는 모든 부품이 꽂히는 <strong>큰 판</strong>이에요. CPU 자리(소켓),
+          RAM 자리(슬롯), SSD 자리(M.2), 그래픽카드 자리(PCIe)가 다 여기 있고, 부품들끼리
+          대화하는 길(회로)도 이 판 위에 그려져 있어요.
+        </p>
+        <ol className="olist">
+          <li><strong>소켓이 맞아야 CPU가 꽂혀요.</strong> 인텔용(LGA1700)과 AMD용(AM5)은 핀 배치가 달라서 물리적으로 안 들어가요 — 콘센트에 110V 플러그가 안 꽂히는 것과 같아요.</li>
+          <li><strong>RAM 규격(DDR4/DDR5)도 보드가 정해요.</strong> 견적 짤 때 "CPU ↔ 보드 소켓 ↔ RAM 세대" 세 개가 한 세트로 맞아야 합니다.</li>
+          <li><strong>보드 크기(ATX / M-ATX / ITX)</strong>는 케이스와 맞아야 하고요.</li>
+        </ol>
+        <p>
+          <strong>파워(PSU)</strong>는 콘센트의 전기를 부품들이 먹을 수 있는 형태로 바꿔 나눠 주는{' '}
+          <strong>배전반</strong>이에요. <span className="icode">650W</span> 같은 숫자는{' '}
+          <strong>정격 출력</strong> — "안정적으로 계속 낼 수 있는 최대 전력"이라는 뜻이에요.
+        </p>
+        <div className="warn">
+          <b>파워는 아끼는 부품이 아니에요.</b> 전체 부품 소비 전력보다 <strong>1.5배쯤 여유 있게</strong> 잡고,
+          <span className="icode">80PLUS</span> 인증(효율 보증)이 있는 제품을 골라요. 싸구려 파워가 죽으면
+          다른 부품까지 데리고 가는 경우가 있거든요.
+        </div>
+        <p>
+          <strong>직접 확인해 보기</strong> — <span className="kbd">⊞ 시작</span>에서{' '}
+          <span className="icode">msinfo32</span>를 검색해 실행하면 "베이스보드 제조업체/제품" 항목에서
+          내 메인보드 모델을 볼 수 있어요. 모델명을 검색해 소켓과 지원 RAM 세대를 찾아보세요.
+        </p>
+      </Sec>
+
+      <Sec n={6} title="그래픽카드(GPU) — 화면 그리기 전담" sub="내장 vs 외장, 개발자에겐 언제 필요한가">
+        <p>
+          GPU는 <strong>화면에 보이는 모든 것을 그리는 전담 화가</strong>예요. CPU가 "생각"을 잘한다면,
+          GPU는 <strong>단순한 그리기 작업을 수천 명이 동시에</strong> 하는 데 특화돼 있어요.
+          요리사 6명(CPU) 대 김밥 마는 알바 수천 명(GPU)의 차이랄까요.
+        </p>
+        <ol className="olist">
+          <li><strong>내장 그래픽</strong> — CPU 안에 같이 들어 있는 작은 GPU. 문서, 웹, 유튜브, 코딩까지 전부 문제없어요.</li>
+          <li><strong>외장 그래픽카드</strong> — 따로 꽂는 큰 카드(RTX 4060 같은 것). 비싸고 전기도 많이 먹지만 그리기 성능이 압도적이에요.</li>
+        </ol>
+        <div className="tip">
+          <b>개발자는 언제 외장이 필요할까?</b> 웹·앱·백엔드 개발은 <strong>대부분 내장으로 충분</strong>해요
+          (우리가 하는 Spring·React 개발이 딱 그래요). 외장이 필요해지는 건 <strong>게임 개발,
+          영상 편집, AI 모델 학습</strong>처럼 그리기·병렬 계산이 폭발하는 분야예요.
+        </div>
+        <p>
+          <strong>직접 확인해 보기</strong> — 작업 관리자 <span className="kbd">성능</span> →{' '}
+          <span className="kbd">GPU</span>에서 내 GPU 이름을 확인하세요. 이름에{' '}
+          <span className="icode">Intel UHD/Iris</span>나 <span className="icode">Radeon Graphics</span>가 있으면 내장,{' '}
+          <span className="icode">RTX/GTX</span>·<span className="icode">RX</span>가 있으면 외장이에요.
+          유튜브 영상을 틀고 GPU 사용률이 올라가는 것도 구경해 보세요.
+        </p>
+      </Sec>
+
+      <Sec n={7} title="스펙표 읽기 실전 — 견적서를 해석해 보자" sub="지금까지 배운 걸 한 장에">
+        <p>
+          견적 사이트에서 흔히 보는 형식이에요. 이제 한 줄 한 줄이 <strong>전부 읽히는지</strong> 확인해 보세요.
+        </p>
+        <Code>{CODE_ESTIMATE}</Code>
+        <p>
+          마지막 미션! 이번엔 남의 견적이 아니라 <strong>내 PC</strong>를 조사할 차례예요.
+        </p>
+        <Code>{CODE_TASKMGR}</Code>
+        <div className="tip">
+          <b>적은 내용은 버리지 마세요.</b> 다음 코스(조립)에서 "내 PC와 비교하며" 진행하면
+          훨씬 잘 붙어요. 멘토에게 조사서를 보여주고 "내 PC의 병목이 어디일까?"를 물어보는 것도 좋은 질문이에요.
+        </div>
+      </Sec>
+
+      <div className="step-card">
+        <div className="step-body">
+          <h3 style={{ marginBottom: 6 }}>🎉 여기까지 됐다면</h3>
+          <p className="muted">
+            이제 본체 안 부품들의 역할과 스펙표 읽는 법을 알게 됐어요. 아침 수업{' '}
+            <strong>CS 커리큘럼 1주차(컴퓨터 구조)</strong>에서 이 부품들이 <em>어떻게 서로 대화하는지</em>를
+            더 깊게 배우니, 오늘 적어 둔 내 PC 조사서를 꼭 들고 가세요. 준비됐다면 다음 코스{' '}
+            <Link to="/learn/assembly"><strong>데스크탑 조립하기</strong></Link>에서 이 부품들을
+            직접 손으로 꽂아 봅니다!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/LearnHubPage.jsx

@@ -0,0 +1,107 @@
+// 이 파일이 하는 일: "학습 센터" 허브 — 코스들을 카테고리별 카드로 보여주고
+// 클릭하면 각 코스 페이지로 이동한다.
+// 학습 포인트: 코스 목록을 JSX에 일일이 쓰지 않고 데이터(배열)로 만들어 .map으로 그린다.
+// 나중에 코스가 늘면 배열에 한 줄만 추가하면 된다 — "데이터와 화면의 분리".
+import { Link } from 'react-router-dom';
+
+const COURSES = [
+  {
+    category: '컴퓨터 기초',
+    desc: '소프트웨어 이전에, 기계 그 자체를 이해해요.',
+    items: [
+      {
+        to: '/learn/hardware',
+        icon: '💻',
+        title: '컴퓨터의 구성',
+        desc: 'CPU·RAM·스토리지·메인보드·파워·그래픽카드 — 각 부품이 무슨 일을 하고, 스펙표를 어떻게 읽는지.',
+        level: '입문',
+      },
+      {
+        to: '/learn/assembly',
+        icon: '🔧',
+        title: '데스크탑 조립하기',
+        desc: '부품 고르는 기준부터 조립 순서, 초보가 자주 하는 실수까지. 조립을 알면 컴퓨터가 두렵지 않아요.',
+        level: '입문',
+      },
+    ],
+  },
+  {
+    category: '네트워크',
+    desc: '랜선 한 가닥에서 인터넷 전체까지.',
+    items: [
+      {
+        to: '/learn/network',
+        icon: '🌐',
+        title: '네트워크의 이해',
+        desc: '랜선(UTP)의 8가닥 구조 → 공유기와 IP → 인터넷의 구조 → TCP/IP와 DNS까지 한 흐름으로.',
+        level: '입문',
+      },
+    ],
+  },
+  {
+    category: '소프트웨어',
+    desc: '이제 코드를 읽고 쓰는 세계로.',
+    items: [
+      {
+        to: '/learn/coding',
+        icon: '⌨️',
+        title: '코딩 기초',
+        desc: '변수·함수·조건·반복을 이 플랫폼의 실제 코드로 배워요. 여러분이 누른 로그인 버튼도 코드예요.',
+        level: '입문',
+      },
+      {
+        to: '/setup',
+        icon: '🛠️',
+        title: '개발 환경 설치 가이드',
+        desc: 'JDK·PATH·Node·Git·IntelliJ까지, 내 PC를 개발자의 PC로 만드는 9단계.',
+        level: '실습',
+      },
+    ],
+  },
+];
+
+export default function LearnHubPage() {
+  return (
+    <div>
+      <div className="hero">
+        <div className="eyebrow">Learning Center</div>
+        <h1>어썸데브 학습 센터</h1>
+        <p>
+          하드웨어에서 네트워크, 그리고 코드까지 — 아래에서 위로 쌓는 순서 그대로 배워요.
+          아침 수업(CS 커리큘럼)과 짝을 이루는 자율 학습 코너입니다.
+        </p>
+        <div className="chip-row">
+          <span className="chip">추천 순서: 컴퓨터 → 네트워크 → 코딩</span>
+          <span className="chip">각 코스 30~60분</span>
+        </div>
+      </div>
+
+      {COURSES.map((group) => (
+        <div key={group.category}>
+          <div className="day-head">
+            <span className="day-badge">{group.category}</span>
+            <span className="day-count">{group.desc}</span>
+          </div>
+          <div className="grid-cards">
+            {group.items.map((course) => (
+              // 학습 포인트: <Link>는 <a>와 달리 페이지 전체를 새로 안 불러오고
+              // React 라우터가 화면만 갈아끼운다. 그래서 앱이 빠르게 느껴진다.
+              <Link key={course.to} to={course.to} style={{ color: 'inherit' }}>
+                <div className="card card-clickable" style={{ height: '100%' }}>
+                  <div style={{ fontSize: 26, marginBottom: 8 }}>{course.icon}</div>
+                  <div className="assign-title-row">
+                    <span className="assign-title">{course.title}</span>
+                    <span className="badge badge-primary">{course.level}</span>
+                  </div>
+                  <p className="muted" style={{ fontSize: 13.5, marginTop: 6 }}>
+                    {course.desc}
+                  </p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/pages/NetworkPage.jsx

@@ -0,0 +1,412 @@
+// 이 파일이 하는 일: "네트워크의 이해" 코스 — 랜선 한 가닥의 구조에서 시작해
+// 인터넷 전체가 어떻게 연결되는지까지 8개 섹션으로 안내하는 정적 학습 페이지.
+// (UTP 케이블 → 공유기 → IP/포트 → 인터넷 구조 → DNS → TCP/IP → HTTP → 정리 퀴즈)
+// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
+// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
+// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.
+
+import { Link } from 'react-router-dom';
+
+// ── 텍스트 다이어그램 · 표 상수들 ──
+
+const CODE_CABLE_CATEGORY = `랜선 카테고리별 속도 (겉에 인쇄된 글씨로 확인 가능!)
+
+카테고리   최대 속도      비고
+─────────────────────────────────────────────
+Cat5e     1 Gbps        지금도 가장 흔함, 가정용 충분
+Cat6      1~10 Gbps     10G는 55m 이내에서만
+Cat6a     10 Gbps       차폐 강화, 사무실·서버실용
+
+→ 겉모습은 거의 똑같아요. 케이블 피복에 적힌
+  "CAT5E", "CAT6" 글씨를 읽어야 구분됩니다.`;
+
+const CODE_T568B = `T568B 배열 — 커넥터(RJ45)를 클립이 아래로 가게 잡았을 때, 왼쪽부터:
+
+ 1    2    3    4    5    6    7    8
+┌──┬──┬──┬──┬──┬──┬──┬──┐
+│주│주│녹│파│파│녹│갈│갈│
+│띠│  │띠│  │띠│  │띠│  │
+└──┴──┴──┴──┴──┴──┴──┴──┘
+주띠 = 주황/흰 줄무늬, 주 = 주황 단색 ... 이런 식이에요.
+
+암기법: "주띠-주-녹띠-파-파띠-녹-갈띠-갈"
+(녹색 한 쌍만 3번·6번으로 떨어져 있는 게 함정 포인트!)`;
+
+const CODE_MY_ROOM = `내 방에서 인터넷까지 — 데이터가 지나가는 길
+
+[내 PC]──랜선──[공유기]──[모뎀]──[벽의 통신 단자]──> 바깥세상
+  │                │
+[노트북]···WiFi····┘   ← 무선도 결국 공유기로 모여요
+
+공유기가 하는 두 가지 큰 일:
+1) DHCP — 접속한 기기마다 "너는 192.168.0.5 써" 하고 IP를 나눠줌
+2) NAT  — 집 안의 사설 IP 여러 개 ↔ 공인 IP 하나를 번갈아 변환`;
+
+const CODE_IP_PORT = `IP 주소 = 건물 주소, 포트 = 방 번호
+
+IPv4:  a.b.c.d  (각 칸은 0~255)   예) 121.134.55.7
+
+한 서버(한 건물)에 여러 서비스(여러 방)가 살아요:
+
+  서버 121.134.55.7 (건물)
+  ├── :443   HTTPS 웹 서비스   ← 우리 학습 플랫폼
+  ├── :3000  Gitea (Git 서버)
+  ├── :5432  PostgreSQL (DB)
+  └── :22    SSH (서버 원격 접속)
+
+"어느 건물(IP)의 몇 호(포트)로 가라" — 이 둘이 합쳐져야
+데이터가 정확한 프로그램에 도착합니다.`;
+
+const CODE_IPCONFIG = `# Windows 터미널(cmd/PowerShell)에서:
+ipconfig
+
+# 이런 게 보이면 성공:
+이더넷 어댑터 이더넷:  (또는 Wi-Fi)
+   IPv4 주소 . . . : 192.168.0.5   ← 내 사설 IP
+   기본 게이트웨이  : 192.168.0.1   ← 공유기의 주소!
+
+# 내 공인 IP가 궁금하면 브라우저에서 "내 아이피" 검색 —
+# 사설 IP와 다른 주소가 나오는 걸 직접 비교해 보세요.`;
+
+const CODE_INTERNET = `인터넷 = '네트워크들의 네트워크'
+
+[내 공유기]                                    [상대 서버]
+    │                                              │
+[우리 동네 통신사 장비] ── [통신사(ISP) 백본망] ── [상대편 ISP]
+                              │
+                     [해저 케이블 / 국제 회선]
+                              │
+                        (미국·일본·유럽...)
+
+핵심: 인터넷을 소유한 회사는 없어요. 수많은 통신사와 기관의
+네트워크가 서로 "연결해 줄게" 약속하고 이어 붙인 거대한 그물망이에요.`;
+
+const CODE_TRACERT = `# 목적지까지 거쳐 가는 중간 지점(라우터)들을 보여주는 명령:
+tracert google.com
+
+  1  <1ms  192.168.0.1      ← 첫 번째: 내 공유기!
+  2   3ms  10.x.x.x         ← 통신사 동네 장비
+  3   5ms  ...              ← 통신사 백본
+  ...
+ 10  30ms  142.250.x.x      ← 구글 서버 도착
+
+# 홉(hop) 하나하나가 "환승역"이에요.
+# 해외 서버일수록 홉 수와 시간(ms)이 늘어나는 걸 관찰해 보세요.`;
+
+const CODE_DNS_FLOW = `주소창에 edu.awesomedevapp.com 을 치면 벌어지는 일:
+
+1) 브라우저: "이 이름, 최근에 물어본 적 있나?" → 캐시 확인
+2) 없으면 PC가 DNS 서버에 질문: "edu.awesomedevapp.com의 IP는?"
+3) DNS 서버가 답장: "x.x.x.x 입니다"
+4) 브라우저가 그 IP로 진짜 접속 시작!
+
+DNS = 인터넷의 전화번호부.
+사람은 이름(도메인)을 외우고, 컴퓨터는 번호(IP)로 통화합니다.`;
+
+const CODE_NSLOOKUP = `# 우리 도메인의 IP를 DNS 서버에 직접 물어보기:
+nslookup edu.awesomedevapp.com
+
+서버:   ...          ← 질문을 받아준 DNS 서버
+Name:   edu.awesomedevapp.com
+Address: x.x.x.x     ← 이게 우리 서버의 실제 IP!
+
+# 다른 사이트도 해보세요: nslookup naver.com
+# 큰 서비스는 IP가 여러 개 나와요 — 왜일까요? (힌트: 트래픽 분산)`;
+
+const CODE_TCP_UDP = `데이터는 통째로 가지 않아요 — 패킷(작은 택배 상자)으로 쪼개져 갑니다.
+
+TCP — 등기 택배                    UDP — 일반 투척(?) 배송
+────────────────────────       ────────────────────────
+보내기 전에 "받을 준비 됐어?"       인사 없이 바로 던짐
+확인하고 연결부터 맺음(3-way)
+상자마다 번호 → 순서대로 조립       순서·도착 보장 없음
+분실되면 다시 보냄                 분실돼도 그냥 넘어감
+느리지만 확실함                    빠르지만 대충함
+
+언제 뭘 쓰나?
+TCP: 웹페이지, 파일 다운로드, 카톡 메시지 — 한 글자도 빠지면 안 될 때
+UDP: 게임, 실시간 방송, 영상통화 — 좀 깨져도 빠른 게 중요할 때`;
+
+const CODE_FULL_TRIP = `브라우저가 우리 플랫폼에 접속하는 전체 여행 (1~7섹션 총출동!)
+
+① DNS 조회 (섹션 5)
+   edu.awesomedevapp.com → "IP는 x.x.x.x"
+
+② TCP 연결 (섹션 6)
+   내 PC ↔ 서버 :443 (섹션 3의 포트!) 3-way 악수로 연결 수립
+
+③ HTTPS 암호화 협상
+   "지금부터 아무도 못 엿보게 암호로 얘기하자" 열쇠 교환
+
+④ HTTP 요청 출발 (섹션 1~2·4의 길을 따라)
+   GET /learn/network
+   랜선 → 공유기 → ISP → 백본 → 서버 도착
+
+⑤ 서버 내부
+   Caddy(현관 안내데스크, HTTPS 처리)
+     → Spring Boot(백엔드, 데이터 준비)
+       → 응답 조립
+
+⑥ HTTP 응답 귀환
+   200 OK + HTML/JSON → 같은 길을 거꾸로 → 브라우저가 화면을 그림
+
+이 모든 게 보통 1초 안에 끝나요. 지금 이 페이지도 이렇게 왔습니다!`;
+
+const CODE_QUIZ = `셀프 체크 5문항 — 답을 소리 내어 설명할 수 있으면 통과!
+
+Q1. 랜선 속 8가닥은 왜 두 가닥씩 꼬여 있을까요?
+    힌트: 전기 신호끼리 서로 방해하는 걸 뭐라고 했죠? (섹션 1)
+
+Q2. 192.168.0.5 같은 주소로는 왜 바깥 인터넷에서
+    우리 집 PC를 직접 못 찾아올까요?
+    힌트: 아파트 '호수'만 알고 '도로명 주소'를 모르는 상황 (섹션 2)
+
+Q3. IP만 있으면 되지, 포트는 왜 필요할까요?
+    힌트: 한 건물에 여러 방 (섹션 3)
+
+Q4. DNS 서버가 전부 멈추면 인터넷은 끊긴 걸까요?
+    힌트: IP를 직접 안다면...? (섹션 5)
+
+Q5. 실시간 게임이 TCP 대신 UDP를 쓰는 이유는?
+    힌트: 0.1초 전 위치 정보를 재전송받으면 쓸모가 있을까요? (섹션 6)
+
+→ 내가 쓴 답이 맞는지 멘토와 함께 확인해 보세요.
+  "말로 설명하다 막히는 지점"이 진짜 복습 포인트입니다.`;
+
+// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
+// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
+function Section({ n, title, sub, children }) {
+  return (
+    <section className="step-card" id={`sec-${n}`}>
+      <div className="step-head">
+        <span className="step-num">{n}</span>
+        <div>
+          <h3>{title}</h3>
+          {sub && <span className="step-sub">{sub}</span>}
+        </div>
+      </div>
+      <div className="step-body">{children}</div>
+    </section>
+  );
+}
+
+function Code({ children }) {
+  return <pre className="code-block"><code>{children}</code></pre>;
+}
+
+const SECTIONS = [
+  { n: 1, label: '랜선의 구조' },
+  { n: 2, label: '내 방의 네트워크' },
+  { n: 3, label: 'IP와 포트' },
+  { n: 4, label: '인터넷의 구조' },
+  { n: 5, label: 'DNS' },
+  { n: 6, label: 'TCP/IP 한 입' },
+  { n: 7, label: 'HTTP와 우리 서비스' },
+  { n: 8, label: '정리 퀴즈' },
+];
+
+export default function NetworkPage() {
+  return (
+    <div>
+      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
+      <div className="hero">
+        <div className="eyebrow">Course · 네트워크</div>
+        <h1>네트워크의 이해<br />— 랜선 한 가닥에서 인터넷까지</h1>
+        <p>
+          책상 밑 랜선 한 가닥에서 출발해서, 지구 반대편 서버까지 데이터가 어떻게
+          도착하는지 따라가 봅니다. 각 섹션의 <strong>"직접 확인해 보기"</strong>는
+          꼭 내 PC에서 손으로 해보세요 — 눈으로 본 개념은 잊혀도, 손으로 친 명령어는 남아요.
+        </p>
+        <div className="chip-row">
+          <span className="chip">예상 소요 60분</span>
+          <span className="chip">실습 명령어 4개</span>
+          <span className="chip">준비물: 내 PC 하나</span>
+        </div>
+      </div>
+
+      {/* 섹션 바로가기 */}
+      <nav className="pill-nav">
+        {SECTIONS.map((s) => (
+          <a key={s.n} href={`#sec-${s.n}`}>
+            <b>{s.n}</b>
+            {s.label}
+          </a>
+        ))}
+      </nav>
+
+      <Section n={1} title="랜선(UTP 케이블)의 구조" sub="8가닥의 구리선, 그런데 왜 꼬여 있을까?">
+        <p>
+          랜선 피복을 벗겨 보면 <strong>가는 구리선 8가닥이 2가닥씩 4쌍</strong>으로 꼬여
+          들어 있어요. 그래서 이름이 <strong>트위스티드 페어</strong>(Twisted Pair, 꼬인 쌍)입니다.
+        </p>
+        <p>
+          왜 꼬았을까요? 전기 신호가 흐르는 선은 주변에 <strong>전자파 간섭</strong>을 일으키고,
+          옆 선의 간섭도 받아요. 그런데 두 선을 꼬아 놓으면 간섭이 두 선에 <strong>거의 똑같이</strong>
+          들어와서 서로 <strong>상쇄</strong>됩니다. 시끄러운 교실에서 두 사람이 똑같은 소음을 듣고
+          있으면, 그 소음을 빼고 서로의 목소리만 골라 들을 수 있는 것과 같아요.
+        </p>
+        <Code>{CODE_CABLE_CATEGORY}</Code>
+        <p>
+          커넥터(RJ45)에 선을 물릴 때는 색 순서가 정해져 있어요. 실무에서 가장 많이 쓰는
+          표준이 <strong>T568B</strong>입니다.
+        </p>
+        <Code>{CODE_T568B}</Code>
+        <p>
+          <strong>다이렉트 vs 크로스</strong> — 양쪽 끝을 같은 배열(B-B)로 만들면 다이렉트
+          (PC↔공유기처럼 서로 다른 장비 연결), 한쪽만 다르게 꼬면 크로스(같은 장비끼리) —
+          요즘 장비는 알아서 뒤집어 주므로(Auto MDI-X) 거의 다이렉트만 씁니다.
+        </p>
+        <div className="tip">
+          <b>직접 확인해 보기</b> 집이나 학교의 랜선 피복에 인쇄된 글씨를 읽어 보세요.
+          <span className="icode">CAT5E</span>? <span className="icode">CAT6</span>?
+          그리고 투명한 RJ45 커넥터를 불빛에 비춰 8가닥 색 순서가 정말 T568B인지 맞춰 보세요.
+        </div>
+      </Section>
+
+      <Section n={2} title="내 방의 네트워크" sub="PC → 공유기 → 모뎀 → 벽, 그리고 공유기의 두 가지 마법">
+        <Code>{CODE_MY_ROOM}</Code>
+        <p>
+          <strong>DHCP</strong>는 새 기기가 접속하면 공유기가 자동으로 IP를 배정해 주는
+          기능이에요. 새 학기에 담임 선생님이 자리 배치표대로 "너는 5번 자리" 하고 정해 주는
+          것과 같죠. 덕분에 우리는 IP를 손으로 입력할 일이 없습니다.
+        </p>
+        <p>
+          <strong>사설 IP vs 공인 IP</strong>는 아파트 비유가 딱이에요.
+          <span className="icode">192.168.x.x</span> 같은 사설 IP는 <strong>"302호"</strong> —
+          우리 아파트(집 네트워크) 안에서만 통하는 호수예요. 옆 아파트에도 302호는 있죠.
+          공인 IP는 <strong>도로명 주소</strong> — 전 세계에서 유일하고, 바깥에서 택배(데이터)를
+          보낼 때 쓰는 주소입니다. <strong>NAT</strong>는 아파트 경비실이에요. 밖으로 나가는
+          택배엔 도로명 주소(공인 IP)를 붙여 주고, 들어온 택배는 "이건 302호 거"라고
+          호수(사설 IP)로 배달해 줍니다.
+        </p>
+        <div className="tip">
+          <b>직접 확인해 보기</b> 브라우저 주소창에 <span className="icode">192.168.0.1</span>
+          (안 되면 <span className="icode">192.168.1.1</span>)을 쳐 보세요 — 공유기 관리 화면이 뜨면,
+          지금까지 배운 DHCP·연결된 기기 목록을 눈으로 볼 수 있어요. (설정은 건드리지 말고 구경만!)
+        </div>
+      </Section>
+
+      <Section n={3} title="IP 주소와 포트" sub="건물 주소와 방 번호">
+        <Code>{CODE_IP_PORT}</Code>
+        <p>
+          우리가 브라우저에 <span className="icode">https://...</span>를 치면 자동으로
+          <strong> 443번 포트</strong>로 갑니다(<span className="icode">http</span>는 80번).
+          우리 회사 서비스도 마찬가지 — 학습 플랫폼은 443, Gitea는 3000처럼
+          <strong> 프로그램마다 자기 방 번호</strong>가 있어요. 로컬 개발할 때
+          <span className="icode">localhost:5173</span>을 치는 것도 "내 PC라는 건물의
+          5173호(Vite 개발 서버)로 가라"는 뜻입니다.
+        </p>
+        <div className="tip">
+          <b>직접 확인해 보기</b> 터미널을 열고 아래를 실행해 보세요.
+          내 사설 IP와 공유기(게이트웨이) 주소가 진짜로 <span className="icode">192.168.x.x</span>인지 확인!
+        </div>
+        <Code>{CODE_IPCONFIG}</Code>
+      </Section>
+
+      <Section n={4} title="인터넷의 구조" sub="'네트워크들의 네트워크'라는 이름의 그물망">
+        <p>
+          내 공유기 밖은 어떻게 생겼을까요? 내 집 네트워크는 <strong>통신사(ISP)</strong>의
+          거대한 네트워크에 연결되고, 통신사들은 <strong>백본</strong>이라는 초고속 간선망과
+          <strong> 해저 케이블</strong>로 서로, 그리고 다른 나라와 연결돼요.
+          인터넷(Inter-net)이라는 이름 자체가 "네트워크 <strong>사이(inter)</strong>를 이었다"는 뜻이죠.
+        </p>
+        <Code>{CODE_INTERNET}</Code>
+        <p>
+          그래서 미국 서버에 접속하면 내 데이터는 진짜로 <strong>태평양 바닥의 광케이블</strong>을
+          지나갑니다. 버스로 치면 마을버스(내 공유기) → 시내버스(동네 통신사 장비) →
+          고속버스(백본) → 국제선(해저 케이블)으로 환승하는 여행이에요.
+        </p>
+        <div className="tip">
+          <b>직접 확인해 보기</b> 그 환승역들을 직접 눈으로 볼 수 있어요.
+          첫 번째 홉이 내 공유기 주소(섹션 3에서 본 게이트웨이!)와 같은지 꼭 확인해 보세요.
+        </div>
+        <Code>{CODE_TRACERT}</Code>
+      </Section>
+
+      <Section n={5} title="DNS — 인터넷의 전화번호부" sub="이름을 치면 번호를 찾아주는 시스템">
+        <p>
+          컴퓨터는 IP 숫자로만 서로를 찾는데, 사람은 <span className="icode">x.x.x.x</span>를
+          못 외워요. 그래서 <strong>이름(도메인) → 번호(IP)</strong>를 찾아 주는 전화번호부,
+          <strong> DNS</strong>가 있습니다. 친구 이름을 누르면 폰이 알아서 번호로 전화를 걸어 주듯이요.
+        </p>
+        <Code>{CODE_DNS_FLOW}</Code>
+        <div className="warn">
+          <b>"인터넷은 되는데 사이트가 안 열려요"의 단골 범인</b> — DNS가 고장 나면
+          이름을 번호로 못 바꿔서, 회선이 멀쩡해도 사이트에 못 들어갑니다.
+          전화기는 되는데 전화번호부를 잃어버린 상태예요.
+        </div>
+        <div className="tip">
+          <b>직접 확인해 보기</b> DNS 서버에 직접 질문을 던져 보는 명령이 있어요.
+          우리 플랫폼 도메인의 실제 IP를 알아내 보세요.
+        </div>
+        <Code>{CODE_NSLOOKUP}</Code>
+      </Section>
+
+      <Section n={6} title="TCP/IP 한 입" sub="택배 상자(패킷)와 두 가지 배송 방식">
+        <p>
+          큰 데이터는 한 덩어리로 가지 않아요. <strong>패킷</strong>이라는 작은 조각으로 쪼개져
+          각자 길을 찾아가고, 도착지에서 다시 조립됩니다. 이삿짐을 트럭 한 대에 다 싣는 게 아니라
+          택배 상자 수백 개에 번호 붙여 나눠 보내는 것과 같아요. 상자 몇 개가 다른 길로 와도,
+          번호 순서대로 다시 쌓으면 되니까요.
+        </p>
+        <p>이 배송에 두 가지 방식이 있습니다.</p>
+        <Code>{CODE_TCP_UDP}</Code>
+        <p>
+          웹은 대부분 <strong>TCP</strong> 위에서 돌아요. 웹페이지 HTML이 한 조각이라도 빠지면
+          화면이 깨지니까요. 반대로 게임에서 0.1초 전 캐릭터 위치는 지금 다시 받아 봐야 이미
+          과거 — 버리고 최신 것을 받는 게 낫죠. 그래서 <strong>UDP</strong>입니다.
+        </p>
+        <div className="tip">
+          <b>직접 확인해 보기</b> 유튜브 영상을 보다가 잠깐 와이파이를 끊었다 켜 보세요.
+          화면이 뭉개지거나 건너뛰죠? 반면 파일 다운로드는 끊겼다 이어도 파일이 깨지지 않아요.
+          앞은 "빠름 우선", 뒤는 "정확함 우선(TCP)" — 방금 배운 차이를 몸으로 느낀 겁니다.
+        </div>
+      </Section>
+
+      <Section n={7} title="HTTP와 우리 서비스" sub="지금까지 배운 전부를 한 번의 접속에 담기">
+        <p>
+          <strong>HTTP</strong>는 브라우저와 서버가 주고받는 대화 규칙이에요.
+          브라우저가 "이 페이지 주세요"(<strong>요청</strong>) 하면 서버가
+          "여기요, 200 OK"(<strong>응답</strong>) 하는 식이죠. 여기에 암호화를 입힌 게
+          <strong> HTTPS</strong>고요. 이제 1~6섹션에서 배운 걸 전부 이어 붙여 볼 시간입니다 —
+          여러분이 우리 학습 플랫폼에 접속하는 순간, 실제로 벌어지는 여행 전체예요.
+        </p>
+        <Code>{CODE_FULL_TRIP}</Code>
+        <p>
+          ⑤번의 <strong>Caddy</strong>는 우리 서버의 현관 안내데스크예요. HTTPS 암호를 풀고,
+          요청을 알맞은 백엔드(<strong>Spring Boot</strong>)로 안내합니다. 백엔드는 데이터를
+          준비해 응답을 만들고, 그 응답이 왔던 길을 거꾸로 달려 여러분의 화면이 됩니다.
+        </p>
+        <div className="tip">
+          <b>직접 확인해 보기</b> 지금 이 페이지에서 <span className="kbd">F12</span>를 눌러
+          개발자 도구를 열고 <span className="kbd">Network</span> 탭 선택 →
+          <span className="kbd">F5</span>로 새로고침해 보세요. 브라우저가 보낸 요청들이
+          주르륵 나타나요. 아무거나 클릭해서 <strong>Status(200)</strong>,
+          <strong> Remote Address(서버 IP:포트!)</strong>, 걸린 시간(ms)을 찾아보세요.
+          방금 배운 여행의 영수증이 전부 거기 있습니다.
+        </div>
+      </Section>
+
+      <Section n={8} title="정리 퀴즈 — 셀프 체크 5문항" sub="설명할 수 있어야 아는 것">
+        <Code>{CODE_QUIZ}</Code>
+        <div className="tip">
+          <b>공부 팁</b> 답을 종이에 쓰지 말고 <strong>옆 사람에게 말로 설명</strong>해 보세요.
+          비유를 들어 설명할 수 있으면 진짜 이해한 거예요. 막히는 문항은 해당 섹션으로 돌아가
+          "직접 확인해 보기"를 한 번 더!
+        </div>
+      </Section>
+
+      <div className="step-card">
+        <div className="step-body">
+          <h3 style={{ marginBottom: 6 }}>🌐 여기까지 왔다면</h3>
+          <p className="muted">
+            이제 랜선 속 구리선부터 해저 케이블까지, 데이터가 달리는 <strong>길</strong>을
+            전부 알게 됐어요. 다음은 그 길 위를 달리는 <strong>코드</strong>를 배울 차례 —{' '}
+            <Link to="/learn/coding"><strong>코딩 기초</strong></Link> 코스에서 브라우저가 받은
+            응답(HTML·JS)이 어떻게 만들어지는지 이어서 배워 보세요.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}