// 이 파일이 하는 일: "VPN과 프록시" 코스 — 암호화된 터널(VPN)과 대리인(프록시)이라는
// 두 가지 '중간 통로'를 7개 섹션으로 안내하는 정적 학습 페이지.
// (VPN=터널 → 회사가 VPN을 쓰는 이유 → 프록시=대리인 → 정방향 vs 리버스 →
//  공용 와이파이와 VPN → 무료 VPN의 함정 → 실습: 우리 Caddy 흐름 복습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip, warn 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

import { Link } from 'react-router-dom';

// ── 텍스트 다이어그램 · 표 상수들 ──

const CODE_VPN_TUNNEL = `VPN 없이 보낼 때 vs VPN 터널로 보낼 때

일반 인터넷 (엽서):
[내 PC] ──"안녕! 비번은 1234야"── [중간 장비들이 다 읽을 수 있음] ── [목적지]

VPN (밀봉된 강철 파이프):
[내 PC] ═══▓▓▓암호화된 터널▓▓▓═══ [VPN 서버] ── [목적지]
          ↑ 중간에서 훔쳐봐도 ▓▓▓(암호문)만 보임

핵심 세 가지:
1) 암호화   — 내용물을 아무도 못 읽게 잠금
2) 터널링   — 원래 패킷을 통째로 봉투에 한 번 더 넣어 배송
3) 출구 변경 — 목적지 입장에선 'VPN 서버'가 보낸 것처럼 보임`;

const CODE_COMPANY_VPN = `회사 VPN의 그림 — "회사 건물로 순간이동하는 문"

     (집·카페 어디서든)                    (회사 내부망)
[재택근무자 노트북] ═══VPN 터널═══ [회사 VPN 게이트웨이]
                                        │
                          ┌─────────────┼─────────────┐
                     [사내 Gitea]   [내부 DB]     [관리자 페이지]
                      외부 차단      외부 차단       외부 차단

→ 내부망 서비스들은 바깥 인터넷에서 아예 접속이 안 되게 막아두고,
  VPN 터널을 통과한 사람에게만 문을 열어줍니다.
  "회사 출입증을 찍고 들어온 사람"만 사무실 자료를 볼 수 있는 것과 같아요.`;

const CODE_PROXY_AGENT = `프록시(Proxy) = 대리인, 심부름꾼

나 대신 요청을 전달하고, 답장도 대신 받아다 주는 중간 서버예요.

[클라이언트] ──"이거 부탁해"──> [프록시] ──"(내가 대신) 주세요"──> [서버]
[클라이언트] <──"여기 받아"──── [프록시] <──"여기요"──────────── [서버]

서버 입장에서 상대는 '프록시'예요. 진짜 요청자가 누군지는
프록시가 알려주지 않는 한 모릅니다. 연예인의 매니저처럼,
모든 연락이 매니저(프록시)를 거쳐 가는 구조죠.`;

const CODE_FWD_VS_REV = `정방향(Forward) 프록시 vs 리버스(Reverse) 프록시
— 똑같은 '대리인'인데, 누구 편에 서 있느냐가 달라요.

정방향 프록시: 클라이언트 편의 대리인 (예: 학교 인터넷 필터)
[학생 PC들] ──> [학교 프록시] ──> 인터넷
                    ↑ "이 사이트는 차단!" / 자주 가는 페이지 캐시
  서버는 '학교 프록시'만 보임 → 클라이언트가 숨겨짐

리버스 프록시: 서버 편의 대리인 (예: 우리 Caddy!)
인터넷 ──> [Caddy] ──> [Spring Boot 백엔드]
              ↑ HTTPS 처리 / 요청을 알맞은 서비스로 분배
  클라이언트는 'Caddy'만 보임 → 서버 내부가 숨겨짐

한 줄 정리: 정방향은 "요청 보내는 쪽"을 대신하고,
           리버스는 "요청 받는 쪽"을 대신합니다.`;

const CODE_PUBLIC_WIFI = `공용 와이파이에서 무슨 일이 생길 수 있나

[내 폰] ~~무선 전파~~ [카페 공유기?] ── 인터넷
            ↑
   전파는 공중에 뿌려집니다. 같은 와이파이에 붙은
   누군가가 '수신'할 수 있어요. 심지어 이름만 그럴듯한
   가짜 AP("Free_Cafe_WiFi")를 세워두는 경우도 있고요.

그나마 다행: 요즘 웹은 대부분 HTTPS라 내용은 암호화돼요.
그래도 새는 것: 어떤 사이트에 접속하는지(도메인), HTTPS가 아닌
              앱·사이트의 통신, DNS 질문 내용 등.

VPN을 켜면: 폰에서 나가는 모든 통신이 터널 안으로 들어가
           같은 와이파이의 누구도 내용은 물론 행선지조차 못 봅니다.`;

const CODE_OUR_FLOW = `우리 학습 플랫폼의 요청 여행 — 리버스 프록시 실물 관찰

① 브라우저: https://edu.awesomedevapp.com/api/... 요청
      │  (DNS로 IP를 찾고, 443 포트로 접속 — 네트워크 코스 복습!)
      ▼
② AWS EC2 서버 도착 — 제일 먼저 맞이하는 건 Caddy
      │  Caddy가 하는 일:
      │  - HTTPS 인증서 처리 (자물쇠 아이콘의 주인공)
      │  - 경로를 보고 교통정리: /api/* → 백엔드로
      ▼
③ Spring Boot 백엔드 (Docker 컨테이너)
      │  로직 처리, 필요하면 ↓
      ▼
④ PostgreSQL 에서 데이터 조회
      │
      ▼ 응답이 같은 길을 거꾸로: 백엔드 → Caddy → 브라우저

여러분이 이 페이지를 여는 순간에도 이 여행이 벌어졌어요.
브라우저는 끝까지 Caddy하고만 대화했고, 백엔드와 DB는
바깥에서 보이지 않는 무대 뒤(backstage)에 있습니다.`;

const CODE_DEVTOOLS_CHECK = `# 실습 A — 개발자 도구로 '대리인' 흔적 찾기
1) 이 페이지에서 F12 → Network 탭 → F5 새로고침
2) 아무 요청이나 클릭 → Headers 확인
   - Remote Address: 서버IP:443  ← 여러분이 실제로 접속한 곳 = Caddy!
   - Response Headers에서 Server: Caddy 를 찾아보세요.
     (응답을 '누가' 돌려줬는지 서버가 스스로 밝히는 칸이에요)
3) 백엔드(Spring Boot)의 IP나 포트는 어디에도 안 보이죠?
   그게 바로 리버스 프록시가 서버 내부를 숨긴다는 증거입니다.

# 실습 B — 우리 Gitea도 같은 구조인지 확인
1) edu.awesomedevapp.com:3000 (Gitea) 접속 → F12 → Network → 새로고침
2) 요청의 Remote Address와 응답 헤더를 위와 비교해 보세요.
3) 관찰한 내용을 정리해 멘토에게 설명해 보기:
   "우리 서비스에서 프록시를 거치는 것과 안 거치는 것은?"`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'VPN = 터널' },
  { n: 2, label: '회사와 VPN' },
  { n: 3, label: '프록시 = 대리인' },
  { n: 4, label: '정방향 vs 리버스' },
  { n: 5, label: '공용 와이파이' },
  { n: 6, label: '무료 VPN의 함정' },
  { n: 7, label: '실습: Caddy 흐름' },
];

export default function VpnProxyPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 다루는 두 가지 '중간 통로' */}
      <div className="hero">
        <div className="eyebrow">Course · 네트워크</div>
        <h1>VPN과 프록시<br />— 터널과 대리인, 두 가지 중간 통로</h1>
        <p>
          내 데이터가 목적지까지 <strong>어떤 통로로, 누구를 거쳐</strong> 가는지가 이번 코스의
          주제예요. 멀리 갈 필요 없이 우리 플랫폼의 <strong>Caddy</strong>가 살아 있는 교재입니다 —
          여러분은 이미 매일 리버스 프록시를 통과하고 있었거든요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 2개</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>

      <Section n={1} title="VPN = 암호화된 전용 터널" sub="엽서로 보내던 편지를 강철 파이프로 보내기">
        <p>
          일반 인터넷 통신은 <strong>엽서</strong>와 비슷해요. 내용이 겉에 다 적혀 있어서,
          배달 경로에 있는 우체국(중간 네트워크 장비)마다 마음만 먹으면 읽을 수 있죠.
          <strong> VPN</strong>(Virtual Private Network, 가상 사설망)은 그 엽서를
          <strong> 아무도 못 여는 밀봉 상자에 넣고, 나와 VPN 서버 사이에 전용 파이프</strong>를
          뚫어 보내는 기술이에요. 그래서 항상 <strong>"터널"</strong>이라고 부릅니다.
        </p>
        <Code>{CODE_VPN_TUNNEL}</Code>
        <p>
          이름을 뜯어 보면 정체가 보여요. 진짜 전용선(Private Network)을 까는 대신,
          모두가 쓰는 인터넷 위에 <strong>가상(Virtual)</strong>의 전용 통로를 만든 거예요.
          지하철 노선을 새로 파는 대신, 기존 도로 위에 <strong>버스 전용차로</strong>를
          그어 놓은 것과 비슷하죠.
        </p>
        <svg className="diagram" viewBox="0 0 640 240" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="VPN 없이 보낼 때는 중간에서 평문이 노출되고, VPN 터널로 보낼 때는 암호문만 보이는 비교 도해">
          <text x="30" y="24" fontSize="13" fontWeight="700" fill="var(--ink)">VPN 없이 — 엽서</text>
          <rect x="30" y="40" width="88" height="40" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="74" y="65" textAnchor="middle" fontSize="13" fill="var(--ink)">내 PC</text>
          <line x1="118" y1="60" x2="510" y2="60" stroke="var(--line)" strokeWidth="2" />
          <polyline points="502,54 510,60 502,66" fill="none" stroke="var(--line)" strokeWidth="2" />
          <text x="315" y="50" textAnchor="middle" fontSize="12" fill="var(--rose)">"비번은 1234" — 평문 그대로</text>
          <text x="315" y="82" textAnchor="middle" fontSize="12" fill="var(--muted)">중간 장비 누구나 읽을 수 있음</text>
          <rect x="512" y="40" width="88" height="40" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="556" y="65" textAnchor="middle" fontSize="13" fill="var(--ink)">목적지</text>
          <text x="30" y="126" fontSize="13" fontWeight="700" fill="var(--ink)">VPN — 밀봉된 강철 파이프</text>
          <rect x="30" y="146" width="88" height="40" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="74" y="171" textAnchor="middle" fontSize="13" fill="var(--ink)">내 PC</text>
          <rect x="122" y="138" width="264" height="56" rx="14" fill="none" stroke="var(--primary)" strokeWidth="2" />
          <text x="254" y="161" textAnchor="middle" fontSize="12.5" fontWeight="600" fill="var(--primary)">암호화된 터널</text>
          <text x="254" y="180" textAnchor="middle" fontSize="12" fill="var(--muted)">▓▓▓ 암호문 ▓▓▓</text>
          <rect x="390" y="146" width="92" height="40" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="436" y="171" textAnchor="middle" fontSize="13" fill="var(--ink)">VPN 서버</text>
          <line x1="482" y1="166" x2="510" y2="166" stroke="var(--line)" strokeWidth="2" />
          <polyline points="502,160 510,166 502,172" fill="none" stroke="var(--line)" strokeWidth="2" />
          <rect x="512" y="146" width="88" height="40" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="556" y="171" textAnchor="middle" fontSize="13" fill="var(--ink)">목적지</text>
          <text x="254" y="220" textAnchor="middle" fontSize="12" fill="var(--teal)">훔쳐봐도 암호문만 보임</text>
          <text x="493" y="220" textAnchor="middle" fontSize="12" fill="var(--muted)">목적지 눈엔 VPN 서버만 보임</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 같은 요청도 VPN 터널을 지나면 중간에선 암호문만, 목적지에선 VPN 서버만 보인다</p>
        <div className="tip">
          <b>미리 감 잡기</b> VPN을 켜면 "내 위치가 바뀐 것처럼 보인다"는 얘기 들어봤죠?
          위 그림의 <strong>출구 변경</strong> 때문이에요 — 목적지 서버는 터널의 출구인
          <strong> VPN 서버의 IP</strong>만 봅니다. 내 IP는 터널 입구 뒤에 숨어 있고요.
        </div>
      </Section>

      <Section n={2} title="회사가 VPN을 쓰는 이유" sub="원격근무자를 위한 '순간이동 출입문'">
        <p>
          회사에는 바깥에 절대 공개하면 안 되는 것들이 있어요. 소스 코드 저장소, 내부 DB,
          관리자 페이지 같은 것들이죠. 가장 안전한 방법은 <strong>아예 인터넷에서 접속
          못 하게 막아버리는 것</strong>인데, 그러면 재택근무자나 출장 간 직원은 일을 못 해요.
          이 딜레마를 푸는 열쇠가 회사 VPN입니다.
        </p>
        <Code>{CODE_COMPANY_VPN}</Code>
        <p>정리하면, 회사 VPN이 해 주는 일은 이렇습니다.</p>
        <ol className="olist">
          <li>
            <strong>내부망 접근</strong> — 터널을 통과하면 내 노트북이 <strong>회사 건물 안에
            앉아 있는 것처럼</strong> 내부 서비스에 접속할 수 있어요. 몸은 집인데 네트워크는 출근한 상태죠.
          </li>
          <li>
            <strong>출입 통제</strong> — 터널에 들어오려면 인증(계정·인증서)이 필요해요.
            "누가 내부망에 들어왔는지"를 회사가 정확히 알고 관리할 수 있습니다.
          </li>
          <li>
            <strong>구간 암호화</strong> — 집과 회사 사이 구간이 통째로 암호화돼서,
            카페에서 접속해도 회사 데이터가 새지 않아요.
          </li>
        </ol>
        <div className="tip">
          <b>우리 회사 맥락</b> AWESOMEDEV의 서버들도 같은 철학으로 운영돼요 —
          <strong> 바깥에 열어둘 문은 최소한으로(웹은 Caddy 하나), 나머지는 잠근다.</strong>
          예를 들어 PostgreSQL은 인터넷에 직접 노출하지 않고 서버 내부에서만 접속하게 합니다.
          "DB 포트를 전 세계에 열어둔 서버"는 실제 해킹 사고의 단골 원인이에요.
        </div>
      </Section>

      <Section n={3} title="프록시 = 대리인" sub="그리고 우리 Caddy가 바로 그 실물이에요">
        <p>
          <strong>프록시(Proxy)</strong>는 영어로 <strong>"대리인"</strong>이라는 뜻이에요.
          내가 서버와 직접 대화하는 대신, <strong>중간에서 요청과 응답을 대신 전달해 주는
          서버</strong>를 말합니다. 연예인에게 직접 연락할 수 없고 모든 연락이 매니저를
          거치는 것처럼요.
        </p>
        <Code>{CODE_PROXY_AGENT}</Code>
        <p>대리인을 중간에 세우면 좋은 점이 생겨요.</p>
        <ol className="olist">
          <li><strong>숨기기</strong> — 한쪽의 정체(IP, 내부 구조)를 상대에게 감출 수 있어요.</li>
          <li><strong>거르기</strong> — 이상한 요청을 대리인 선에서 차단할 수 있어요.</li>
          <li><strong>기억하기(캐시)</strong> — 자주 오가는 답을 대리인이 외워 뒀다가 바로 답해줄 수 있어요.</li>
          <li><strong>나눠주기</strong> — 요청을 여러 서버에 분배(로드 밸런싱)할 수 있어요.</li>
        </ol>
        <p>
          그리고 이건 교과서 속 개념이 아니에요. 여러분이 지금 보고 있는 이 페이지도
          <strong> Caddy라는 프록시</strong>를 거쳐서 왔습니다. 어느 방향의 대리인인지는
          다음 섹션에서 갈라 볼게요.
        </p>
      </Section>

      <Section n={4} title="정방향 vs 리버스 프록시" sub="같은 대리인, 다른 소속">
        <p>
          프록시는 <strong>"누구 편에 서 있느냐"</strong>로 두 종류로 나뉘어요.
          클라이언트(요청 보내는 쪽)의 대리인이면 <strong>정방향(forward)</strong>,
          서버(요청 받는 쪽)의 대리인이면 <strong>리버스(reverse)</strong>입니다.
          그림으로 보면 화살표 구조는 똑같은데, <strong>숨겨지는 쪽이 반대</strong>예요.
        </p>
        <Code>{CODE_FWD_VS_REV}</Code>
        <p>
          정방향 프록시의 대표 예가 <strong>학교·회사의 인터넷 필터</strong>예요. 학생 PC들의
          모든 요청이 프록시를 거치니까, 거기서 유해 사이트를 차단하거나 트래픽을 기록할 수
          있죠. 리버스 프록시의 대표 예가 바로 <strong>우리 Caddy</strong>고요 — 인터넷에서 온
          요청을 현관에서 받아 HTTPS를 처리하고, Spring Boot 백엔드로 안내합니다.
          백엔드와 DB는 손님 눈에 안 보이는 주방인 셈이에요.
        </p>
        <svg className="diagram" viewBox="0 0 640 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="정방향 프록시는 클라이언트를 숨기고, 리버스 프록시인 Caddy는 백엔드와 DB를 숨기는 구조 비교 도해">
          <text x="30" y="24" fontSize="13" fontWeight="700" fill="var(--ink)">정방향 프록시 — 클라이언트 편 대리인</text>
          <rect x="30" y="40" width="130" height="112" rx="10" fill="none" stroke="var(--amber)" strokeWidth="1.5" strokeDasharray="5 4" />
          <rect x="44" y="50" width="102" height="22" rx="6" fill="var(--card)" stroke="var(--line)" />
          <text x="95" y="65" textAnchor="middle" fontSize="12" fill="var(--ink)">학생 PC</text>
          <rect x="44" y="78" width="102" height="22" rx="6" fill="var(--card)" stroke="var(--line)" />
          <text x="95" y="93" textAnchor="middle" fontSize="12" fill="var(--ink)">학생 PC</text>
          <rect x="44" y="106" width="102" height="22" rx="6" fill="var(--card)" stroke="var(--line)" />
          <text x="95" y="121" textAnchor="middle" fontSize="12" fill="var(--ink)">학생 PC</text>
          <text x="95" y="146" textAnchor="middle" fontSize="11.5" fill="var(--amber)">숨겨지는 쪽</text>
          <line x1="160" y1="92" x2="242" y2="92" stroke="var(--line)" strokeWidth="2" />
          <polyline points="234,86 242,92 234,98" fill="none" stroke="var(--line)" strokeWidth="2" />
          <rect x="250" y="72" width="110" height="40" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="305" y="97" textAnchor="middle" fontSize="13" fill="var(--ink)">학교 프록시</text>
          <line x1="360" y1="92" x2="462" y2="92" stroke="var(--line)" strokeWidth="2" />
          <polyline points="454,86 462,92 454,98" fill="none" stroke="var(--line)" strokeWidth="2" />
          <rect x="470" y="72" width="110" height="40" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="525" y="97" textAnchor="middle" fontSize="13" fill="var(--ink)">인터넷 서버</text>
          <text x="330" y="140" textAnchor="middle" fontSize="12" fill="var(--muted)">서버 눈엔 '학교 프록시'만 보임 → 학생 PC가 숨음</text>
          <text x="30" y="196" fontSize="13" fontWeight="700" fill="var(--ink)">리버스 프록시 — 서버 편 대리인 (우리 Caddy)</text>
          <rect x="30" y="215" width="110" height="40" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="85" y="240" textAnchor="middle" fontSize="13" fill="var(--ink)">브라우저</text>
          <line x1="140" y1="235" x2="242" y2="235" stroke="var(--line)" strokeWidth="2" />
          <polyline points="234,229 242,235 234,241" fill="none" stroke="var(--line)" strokeWidth="2" />
          <rect x="250" y="213" width="110" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="305" y="231" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--primary)">Caddy</text>
          <text x="305" y="248" textAnchor="middle" fontSize="11" fill="var(--muted)">HTTPS · 교통정리</text>
          <line x1="360" y1="231" x2="438" y2="231" stroke="var(--line)" strokeWidth="2" />
          <polyline points="430,225 438,231 430,237" fill="none" stroke="var(--line)" strokeWidth="2" />
          <rect x="440" y="200" width="172" height="104" rx="10" fill="none" stroke="var(--teal)" strokeWidth="1.5" strokeDasharray="5 4" />
          <rect x="456" y="216" width="140" height="30" rx="6" fill="var(--card)" stroke="var(--line)" />
          <text x="526" y="235" textAnchor="middle" fontSize="12" fill="var(--ink)">Spring Boot 백엔드</text>
          <line x1="526" y1="246" x2="526" y2="258" stroke="var(--line)" strokeWidth="2" />
          <rect x="456" y="258" width="140" height="30" rx="6" fill="var(--card)" stroke="var(--line)" />
          <text x="526" y="277" textAnchor="middle" fontSize="12" fill="var(--ink)">PostgreSQL</text>
          <text x="526" y="299" textAnchor="middle" fontSize="11.5" fill="var(--teal)">숨겨지는 쪽 (무대 뒤)</text>
          <text x="320" y="330" textAnchor="middle" fontSize="12" fill="var(--muted)">브라우저는 끝까지 Caddy하고만 대화 — 백엔드·DB는 보이지 않음</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 같은 대리인이라도 소속이 다르다 — 정방향은 클라이언트를, 리버스(Caddy)는 서버 내부를 숨긴다</p>
        <div className="warn">
          <b>헷갈림 주의</b> 참고로 VPN과 프록시는 사촌이지 쌍둥이가 아니에요.
          프록시는 보통 <strong>특정 프로그램의 요청만</strong> 대신 전달하고 암호화를 보장하지
          않지만, VPN은 <strong>기기에서 나가는 통신 전체</strong>를 암호화 터널에 넣습니다.
          "IP를 숨겨준다"는 점이 닮아서 자주 섞여 불리는 것뿐이에요.
        </div>
      </Section>

      <Section n={5} title="공용 와이파이에서 VPN의 가치" sub="전파는 공중에 뿌려진다는 사실">
        <p>
          카페·지하철의 공용 와이파이는 편하지만, 무선 전파는 <strong>공중에 방송</strong>되는
          거라 같은 와이파이에 붙은 다른 사람이 엿들을 여지가 있어요. 교실에서 쪽지를 돌리는 게
          아니라 <strong>칠판에 써서 보여주는 것</strong>에 가깝달까요.
        </p>
        <Code>{CODE_PUBLIC_WIFI}</Code>
        <p>
          다행히 요즘 웹은 대부분 HTTPS라서 <strong>내용</strong>은 암호화돼요. 하지만
          "어느 사이트에 접속하는지" 같은 <strong>행적</strong>은 여전히 보일 수 있고,
          이름만 그럴듯한 <strong>가짜 와이파이</strong>에 속아 붙는 위험도 있죠.
          VPN을 켜면 기기에서 나가는 통신 전체가 터널로 들어가서, 같은 와이파이의 누구도
          내용은 물론 행선지조차 볼 수 없게 됩니다.
        </p>
        <div className="tip">
          <b>실무 습관</b> 공용 와이파이에서 회사 일(코드 푸시, 관리자 페이지 접속)을 해야
          한다면 VPN을 먼저 켜는 게 기본기예요. 회사 자료는 "내 것"이 아니라 "맡은 것"이니까,
          한 단계 더 조심하는 습관을 들여 두세요.
        </div>
      </Section>

      <Section n={6} title="무료 VPN의 함정" sub="공짜라면… 내가 상품일 수 있어요">
        <p>
          "VPN이 좋다니 무료 VPN 앱을 깔아야지!" — 잠깐만요. VPN의 구조를 다시 떠올려 보세요.
          <strong> 내 모든 통신이 VPN 서버를 통과</strong>합니다. 즉 VPN 업체는 마음만 먹으면
          내 인터넷 사용 전체를 들여다볼 수 있는 자리에 앉아 있어요. 그래서
          <strong> "그 터널의 주인을 믿을 수 있는가"</strong>가 VPN 선택의 전부입니다.
        </p>
        <div className="warn">
          <b>무료 VPN이 위험할 수 있는 이유</b> 서버 운영엔 돈이 드는데 사용자에게 안 받는다면,
          돈은 어디서 나올까요? 실제로 문제가 된 사례들이 있어요 —
          이용 기록을 수집해 광고 업체에 파는 경우, 통신에 광고를 끼워 넣는 경우,
          심하면 사용자의 회선을 다른 고객에게 <strong>출구로 되파는</strong> 경우까지요.
          도청을 피하려고 들어간 터널의 주인이 도청자라면 최악의 교환이죠.
        </div>
        <p>
          그래서 판단 기준은 이렇게 잡으면 돼요: <strong>돈의 흐름이 투명한가</strong>(유료
          구독, 신뢰할 만한 운영사), <strong>기록을 남기지 않는다는 정책(no-log)을 외부 감사로
          증명했는가</strong>, 그리고 회사 일이라면 <strong>회사가 지정한 VPN만</strong> 쓸 것.
          참고로 회사 VPN은 이 함정과 무관해요 — 터널의 주인이 우리 회사 자신이니까요.
        </p>
      </Section>

      <Section n={7} title="실습 — 우리 플랫폼의 프록시 흐름 복습" sub="매일 지나던 길을 눈으로 확인하기">
        <p>
          이제 우리 플랫폼에서 리버스 프록시를 <strong>실물로</strong> 관찰해 볼 시간이에요.
          여러분의 요청 하나가 AWS EC2 서버에 도착해서 응답이 되어 돌아오기까지,
          등장인물은 이렇습니다.
        </p>
        <Code>{CODE_OUR_FLOW}</Code>
        <div className="tip">
          <b>직접 확인해 보기 ①</b> 지금 이 페이지에서 <span className="kbd">F12</span> →
          <span className="kbd">Network</span> 탭 → <span className="kbd">F5</span> 새로고침.
          아무 요청이나 눌러 응답 헤더에서 <span className="icode">Server: Caddy</span>를
          찾아보세요. "이 응답, 대리인이 전달했습니다"라는 서명이에요. 그리고 백엔드의
          주소가 <strong>어디에도 안 보인다</strong>는 것까지 확인하면 완벽!
        </div>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> 우리 Gitea(<span className="icode">edu.awesomedevapp.com:3000</span>)에도
          같은 방법을 적용해 비교해 보세요. Remote Address와 응답 헤더가 학습 플랫폼과
          어떻게 다른가요? 관찰 결과를 바탕으로 "우리 인프라에서 프록시를 거치는 경로와
          아닌 경로"를 그림 한 장으로 그려 멘토에게 설명해 보면 최고의 복습이 됩니다.
        </div>
        <Code>{CODE_DEVTOOLS_CHECK}</Code>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🛡️ 여기까지 왔다면</h3>
          <p className="muted">
            이제 <strong>터널(VPN)</strong>과 <strong>대리인(프록시)</strong>, 두 가지 중간
            통로를 구분할 수 있고, 우리 Caddy가 리버스 프록시라는 것도 눈으로 확인했어요.
            데이터가 다니는 길 자체가 궁금해졌다면{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스로 기초를
            다지고, "터널 속에서 오가는 암호화는 어떻게 동작할까?"가 궁금해졌다면 다음
            보안 코스에서 HTTPS와 인증서를 이어서 배워 보세요. 실습 ②에서 그린 그림은
            꼭 멘토 리뷰를 받아 과제로 제출하는 것, 잊지 말고요!
          </p>
        </div>
      </div>
    </div>
  );
}
