// 이 파일이 하는 일: "네트워크의 이해" 코스 — 랜선 한 가닥의 구조에서 시작해
// 인터넷 전체가 어떻게 연결되는지까지 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>
        <svg className="diagram" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="UTP 케이블 단면도(4쌍 8가닥)와 꼬임에 의한 간섭 상쇄 원리">
          <text x="150" y="24" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">단면도 — 4쌍 × 2가닥 = 8가닥</text>
          <circle cx="150" cy="160" r="100" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <text x="150" y="286" textAnchor="middle" fontSize="12" fill="var(--muted)">바깥 피복(재킷)</text>
          <circle cx="102" cy="112" r="14" fill="var(--amber)" />
          <circle cx="124" cy="134" r="14" fill="var(--card)" stroke="var(--amber)" strokeWidth="3" />
          <line x1="118" y1="128" x2="130" y2="140" stroke="var(--amber)" strokeWidth="3" strokeLinecap="round" />
          <text x="62" y="78" textAnchor="middle" fontSize="12" fill="var(--muted)">주황 쌍</text>
          <circle cx="198" cy="112" r="14" fill="var(--teal)" />
          <circle cx="176" cy="134" r="14" fill="var(--card)" stroke="var(--teal)" strokeWidth="3" />
          <line x1="170" y1="128" x2="182" y2="140" stroke="var(--teal)" strokeWidth="3" strokeLinecap="round" />
          <text x="238" y="78" textAnchor="middle" fontSize="12" fill="var(--muted)">녹색 쌍</text>
          <circle cx="102" cy="208" r="14" fill="var(--primary)" />
          <circle cx="124" cy="186" r="14" fill="var(--card)" stroke="var(--primary)" strokeWidth="3" />
          <line x1="118" y1="180" x2="130" y2="192" stroke="var(--primary)" strokeWidth="3" strokeLinecap="round" />
          <text x="62" y="252" textAnchor="middle" fontSize="12" fill="var(--muted)">파랑 쌍</text>
          <circle cx="198" cy="208" r="14" fill="var(--rose)" />
          <circle cx="176" cy="186" r="14" fill="var(--card)" stroke="var(--rose)" strokeWidth="3" />
          <line x1="170" y1="180" x2="182" y2="192" stroke="var(--rose)" strokeWidth="3" strokeLinecap="round" />
          <text x="238" y="252" textAnchor="middle" fontSize="12" fill="var(--muted)">갈색 쌍</text>
          <text x="470" y="24" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">왜 꼬여 있을까? — 간섭 상쇄</text>
          <text x="470" y="62" textAnchor="middle" fontSize="12" fill="var(--rose)">전자파 간섭(노이즈)</text>
          <line x1="410" y1="70" x2="410" y2="112" stroke="var(--rose)" strokeWidth="2" strokeDasharray="4 3" />
          <polyline points="404,106 410,116 416,106" fill="none" stroke="var(--rose)" strokeWidth="2" />
          <line x1="470" y1="70" x2="470" y2="112" stroke="var(--rose)" strokeWidth="2" strokeDasharray="4 3" />
          <polyline points="464,106 470,116 476,106" fill="none" stroke="var(--rose)" strokeWidth="2" />
          <line x1="530" y1="70" x2="530" y2="112" stroke="var(--rose)" strokeWidth="2" strokeDasharray="4 3" />
          <polyline points="524,106 530,116 536,106" fill="none" stroke="var(--rose)" strokeWidth="2" />
          <polyline points="336,125 372,150 404,125 436,150 468,125 500,150 532,125 564,150 600,125" fill="none" stroke="var(--amber)" strokeWidth="3" />
          <polyline points="336,150 372,125 404,150 436,125 468,150 500,125 532,150 564,125 600,150" fill="none" stroke="var(--amber)" strokeWidth="3" strokeDasharray="7 4" />
          <text x="606" y="129" fontSize="12" fill="var(--muted)">주</text>
          <text x="606" y="154" fontSize="12" fill="var(--muted)">주띠</text>
          <text x="470" y="192" textAnchor="middle" fontSize="13" fill="var(--ink)">꼬여 있으면 간섭이 두 가닥에 거의 똑같이 실리고,</text>
          <text x="470" y="212" textAnchor="middle" fontSize="13" fill="var(--ink)">받는 쪽에서 서로 상쇄되어 사라져요</text>
          <text x="470" y="240" textAnchor="middle" fontSize="12" fill="var(--muted)">쌍마다 꼬는 간격을 다르게 해 쌍끼리의 간섭도 줄입니다</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: UTP 케이블 단면(4쌍 8가닥)과 꼬임이 간섭을 상쇄하는 원리</p>
        <Code>{CODE_CABLE_CATEGORY}</Code>
        <p>
          커넥터(RJ45)에 선을 물릴 때는 색 순서가 정해져 있어요. 실무에서 가장 많이 쓰는
          표준이 <strong>T568B</strong>입니다.
        </p>
        <Code>{CODE_T568B}</Code>
        <svg className="diagram" viewBox="0 0 640 280" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="T568B 배열 — RJ45 커넥터를 클립이 아래로 가게 잡았을 때 왼쪽부터 여덟 가닥의 색 순서">
          <text x="320" y="22" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">T568B — 클립이 아래로 가게 잡았을 때</text>
          <rect x="80" y="38" width="480" height="142" rx="10" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <text x="124" y="58" textAnchor="middle" fontSize="12" fill="var(--muted)">1</text>
          <rect x="104" y="68" width="40" height="74" rx="4" fill="var(--card)" stroke="var(--amber)" strokeWidth="2.5" />
          <line x1="110" y1="86" x2="138" y2="86" stroke="var(--amber)" strokeWidth="5" />
          <line x1="110" y1="105" x2="138" y2="105" stroke="var(--amber)" strokeWidth="5" />
          <line x1="110" y1="124" x2="138" y2="124" stroke="var(--amber)" strokeWidth="5" />
          <text x="124" y="162" textAnchor="middle" fontSize="13" fill="var(--ink)">주띠</text>
          <text x="180" y="58" textAnchor="middle" fontSize="12" fill="var(--muted)">2</text>
          <rect x="160" y="68" width="40" height="74" rx="4" fill="var(--amber)" />
          <text x="180" y="162" textAnchor="middle" fontSize="13" fill="var(--ink)">주</text>
          <text x="236" y="58" textAnchor="middle" fontSize="12" fill="var(--muted)">3</text>
          <rect x="216" y="68" width="40" height="74" rx="4" fill="var(--card)" stroke="var(--teal)" strokeWidth="2.5" />
          <line x1="222" y1="86" x2="250" y2="86" stroke="var(--teal)" strokeWidth="5" />
          <line x1="222" y1="105" x2="250" y2="105" stroke="var(--teal)" strokeWidth="5" />
          <line x1="222" y1="124" x2="250" y2="124" stroke="var(--teal)" strokeWidth="5" />
          <text x="236" y="162" textAnchor="middle" fontSize="13" fill="var(--ink)">녹띠</text>
          <text x="292" y="58" textAnchor="middle" fontSize="12" fill="var(--muted)">4</text>
          <rect x="272" y="68" width="40" height="74" rx="4" fill="var(--primary)" />
          <text x="292" y="162" textAnchor="middle" fontSize="13" fill="var(--ink)">파</text>
          <text x="348" y="58" textAnchor="middle" fontSize="12" fill="var(--muted)">5</text>
          <rect x="328" y="68" width="40" height="74" rx="4" fill="var(--card)" stroke="var(--primary)" strokeWidth="2.5" />
          <line x1="334" y1="86" x2="362" y2="86" stroke="var(--primary)" strokeWidth="5" />
          <line x1="334" y1="105" x2="362" y2="105" stroke="var(--primary)" strokeWidth="5" />
          <line x1="334" y1="124" x2="362" y2="124" stroke="var(--primary)" strokeWidth="5" />
          <text x="348" y="162" textAnchor="middle" fontSize="13" fill="var(--ink)">파띠</text>
          <text x="404" y="58" textAnchor="middle" fontSize="12" fill="var(--muted)">6</text>
          <rect x="384" y="68" width="40" height="74" rx="4" fill="var(--teal)" />
          <text x="404" y="162" textAnchor="middle" fontSize="13" fill="var(--ink)">녹</text>
          <text x="460" y="58" textAnchor="middle" fontSize="12" fill="var(--muted)">7</text>
          <rect x="440" y="68" width="40" height="74" rx="4" fill="var(--card)" stroke="var(--rose)" strokeWidth="2.5" />
          <line x1="446" y1="86" x2="474" y2="86" stroke="var(--rose)" strokeWidth="5" />
          <line x1="446" y1="105" x2="474" y2="105" stroke="var(--rose)" strokeWidth="5" />
          <line x1="446" y1="124" x2="474" y2="124" stroke="var(--rose)" strokeWidth="5" />
          <text x="460" y="162" textAnchor="middle" fontSize="13" fill="var(--ink)">갈띠</text>
          <text x="516" y="58" textAnchor="middle" fontSize="12" fill="var(--muted)">8</text>
          <rect x="496" y="68" width="40" height="74" rx="4" fill="var(--rose)" />
          <text x="516" y="162" textAnchor="middle" fontSize="13" fill="var(--ink)">갈</text>
          <polyline points="236,168 236,174 404,174 404,168" fill="none" stroke="var(--teal)" strokeWidth="2" />
          <rect x="260" y="180" width="120" height="24" rx="6" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <text x="320" y="197" textAnchor="middle" fontSize="12" fill="var(--muted)">클립 (아래쪽)</text>
          <text x="320" y="232" textAnchor="middle" fontSize="13" fill="var(--ink)">암기: 주띠-주-녹띠-파-파띠-녹-갈띠-갈</text>
          <text x="320" y="254" textAnchor="middle" fontSize="12" fill="var(--muted)">녹색 쌍만 3번·6번으로 떨어져 있어요 (함정 포인트!) · 화면 색은 근사 표현</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: T568B 색 배열 — 화면 색상은 실제 피복색의 근사 표현</p>
        <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>
  );
}
