// 이 파일이 하는 일: "클라우드와 AWS 입문" 코스 — "남의 컴퓨터를 빌린다"는 발상이
// 왜 혁명이었는지에서 출발해, IaaS/PaaS/SaaS 구분, EC2 인스턴스 읽는 법, 요금 개념,
// S3·RDS 맛보기, 그리고 어썸데브 실제 인프라 구성까지 7개 섹션으로 안내하는 정적 학습 페이지.
// (클라우드의 탄생 → 서비스 3계층 → EC2 해부 → 요금 → S3·RDS → 우리 인프라 → 콘솔 견학)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_BEFORE_AFTER = `서버가 필요할 때 — 옛날 방식 vs 클라우드 방식

옛날(온프레미스)                       클라우드
─────────────────────────       ─────────────────────────
서버 컴퓨터를 직접 구매               웹 화면에서 클릭 몇 번
(수백만 원, 배송 몇 주)              (몇 분 뒤 서버 켜짐)
둘 곳 마련: 서버실·에어컨·전기        아마존 데이터센터가 대신 관리
고장 나면 내가 고침                   고장 난 하드웨어는 AWS가 교체
사용자가 줄어도 서버는 그대로          필요 없으면 끄고, 끈 만큼 안 냄

핵심 발상의 전환:
"컴퓨터를 소유"하는 시대 → "컴퓨팅 파워를 구독"하는 시대`;

const CODE_IAAS_PAAS_SAAS = `피자로 이해하는 IaaS / PaaS / SaaS — "어디까지 내가 하나?"

              집에서 만들기   IaaS          PaaS          SaaS
              (온프레미스)   (재료 배달)    (배달 피자)    (피자집 가서 먹기)
─────────────────────────────────────────────────────────────
도우·토핑      내가           내가           가게가         가게가
오븐·굽기      내가           가게가         가게가         가게가
접시·테이블    내가           내가           내가           가게가

IT로 번역하면:
IaaS  = 가상 서버(컴퓨터)만 빌림. OS 설치부터 앱 배포까지 내가.  예) EC2
PaaS  = 코드만 올리면 실행 환경은 알아서.                       예) Elastic Beanstalk
SaaS  = 완성된 소프트웨어를 그냥 씀.                            예) Gmail, 노션

우리 어썸데브는? → IaaS(EC2)를 빌려서 그 위에 Docker로 직접 다 올려요.
배우는 입장에선 가장 좋은 선택 — 전 과정이 손에 잡히니까!`;

const CODE_T3_MEDIUM = `t3.medium — 인스턴스 이름 해부하기 (자동차 모델명 읽기와 같아요)

  t        3        .        medium
  │        │                 │
  패밀리    세대               크기
  (차종)   (연식)             (배기량)

t  = 범용·버스트 가능(가끔 바쁜 워크로드용, 가성비형)
3  = 3세대 (숫자가 클수록 최신 — 보통 더 빠르고 저렴)
medium = 크기. nano < micro < small < medium < large < xlarge ...

t3.medium의 실제 사양: vCPU 2개, 메모리 4GB

다른 패밀리 맛보기:
t = 범용 가성비    m = 범용 균형    c = 컴퓨팅(CPU) 강화
r = 메모리 강화    g = GPU 탑재(AI 학습 등)

→ "t3.medium"이 이제 암호가 아니라
  "가성비형 3세대, 중간 크기(2코어 4GB)"로 읽히면 성공!`;

const CODE_PRICING = `요금의 대원칙: "쓴 시간만큼" — 그런데 뭐가 '쓴 것'일까?

EC2 인스턴스를 껐을 때(중지, Stop):
─────────────────────────────────────────
멈추는 요금  ✋  인스턴스 사용료 (시간당 과금이 멈춤)
계속 나가는 요금 💸
  · EBS(붙어 있는 디스크) — 서버가 꺼져도 데이터는 보관 중이니까
  · 탄력적 IP — 서버에 '연결 안 된' 고정 IP는 오히려 과금!
    (주차장 자리를 잡아두고 차를 안 대면 자릿세를 내는 셈)

프리 티어(Free Tier) 맛보기:
  새 계정 가입 후 일정 기간, 작은 인스턴스(t계열 micro 등)와
  일정량의 S3·RDS를 무료로 체험 가능. 단, 한도를 넘으면 바로 과금!

신입이 기억할 한 줄:
"실험 끝나면 끄기 + 안 쓰는 디스크·IP는 정리하기"
— 클라우드 요금 사고의 90%는 '켜 놓고 잊어버림'에서 나옵니다.`;

const CODE_S3_RDS = `EC2 말고도 자주 만나는 두 친구 — 한 줄씩만

S3  (Simple Storage Service)
    = 용량 무제한 파일 창고. 이미지·백업·로그를 던져 넣는 곳.
    서버 디스크와 달리 "파일 단위"로 넣고 꺼내는 웹 창고예요.

RDS (Relational Database Service)
    = DB(예: PostgreSQL)를 AWS가 대신 설치·백업·관리해 주는 서비스.
    "DB 서버 돌보기"라는 집안일을 외주 주는 것.

우리는 어떻게 쓰나?
  파일   → 아직은 EC2 디스크에 직접 (규모가 커지면 S3 후보)
  DB     → EC2 위 Docker 컨테이너로 PostgreSQL 직접 운영 (RDS 아님)
  → 직접 운영은 공부가 되고, 관리형(RDS)은 손이 덜 가요. 트레이드오프!`;

const CODE_OUR_INFRA = `어썸데브 실제 인프라 — 여러분이 지금 보는 이 페이지가 사는 곳

        인터넷 (여러분의 브라우저)
             │
   ┌─────────▼─────────┐
   │  탄력적 IP (고정 주소)  │ ← 서버를 재시작해도 주소가 안 바뀌게
   ├───────────────────┤
   │  보안 그룹 (방화벽)     │ ← 443(HTTPS)·22(SSH) 등
   │                        │    허락된 문만 열어 둠
   ├───────────────────┤
   │  EC2 인스턴스 (서울 리전) │
   │  ┌─────────────────┐ │
   │  │ Caddy (HTTPS 현관)   │ │
   │  │   ├→ React 프론트     │ │  ← 지금 이 화면!
   │  │   └→ Spring Boot 백엔드│ │
   │  │ PostgreSQL (Docker)  │ │
   │  │ Gitea (Docker)       │ │  ← edu.awesomedevapp.com 코드 저장소
   │  └─────────────────┘ │
   └───────────────────────┘

세 가지 부품의 역할:
· EC2       = 건물 (컴퓨터 본체)
· 탄력적 IP  = 건물의 영구 도로명 주소
· 보안 그룹  = 경비실 — "443호 손님만 통과, 나머지는 돌아가세요"`;

const CODE_CONSOLE_TOUR = `멘토와 함께하는 AWS 콘솔 견학 코스 (읽기 전용으로 구경!)

준비: 멘토가 화면을 공유하거나, 읽기 전용(ReadOnly) 권한 계정으로 접속
      — 수습 계정으로 생성·삭제 버튼은 누르지 않아요. 보는 것만!

견학 순서:
1) 우측 상단 리전 확인 → "아시아 태평양(서울)"인지 보기
   (리전이 다르면 우리 서버가 '안 보여요' — 다른 도시 지도를 보는 셈)
2) EC2 → 인스턴스 목록 → 우리 서버 찾기
   · 인스턴스 유형 읽어 보기 (섹션 3에서 배운 해부법으로!)
   · 상태가 '실행 중(running)'인지
3) 같은 화면에서 퍼블릭 IP 확인 → 탄력적 IP 메뉴와 대조
4) 보안 그룹 → 인바운드 규칙 → 열려 있는 포트 확인
   (443은 전체 공개, 22(SSH)는 왜 특정 IP만 허용일까? 멘토에게 질문!)
5) 결제 대시보드는 멘토 화면으로만 — 이번 달 요금 항목 구경

견학 후 미션: 오늘 본 것을 섹션 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: 'IaaS·PaaS·SaaS' },
  { n: 3, label: 'EC2 해부' },
  { n: 4, label: '요금의 원리' },
  { n: 5, label: 'S3와 RDS' },
  { n: 6, label: '우리 인프라' },
  { n: 7, label: '콘솔 견학' },
];

export default function AwsIntroPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 서버와 데이터</div>
        <h1>클라우드와 AWS 입문</h1>
        <p>
          "남의 컴퓨터를 시간 단위로 빌린다"는 단순한 발상이 어떻게 IT 세상을
          뒤집었는지부터, 여러분이 지금 보고 있는 이 페이지가 실제로 살고 있는
          어썸데브의 AWS 서버 구성까지 따라가 봅니다. 개념마다 우리 인프라가
          그대로 교재예요 — 배운 것을 바로 우리 서버에서 확인합니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">직접 확인 실습 3개</span>
          <span className="chip">준비물: 내 PC + (섹션 7은 멘토)</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={'"남의 컴퓨터를 빌린다"는 혁명'} sub="발전기를 버리고 전기를 사 쓰게 된 날">
        <p>
          100년 전 공장들은 <strong>자기 발전기</strong>를 돌려 전기를 만들었어요. 발전기를
          사고, 기술자를 고용하고, 고장 나면 공장이 멈췄죠. 그러다 <strong>발전소</strong>가
          생기자 모두 발전기를 버리고 <strong>전기를 쓴 만큼만 사서 쓰기</strong> 시작했습니다.
          아무도 "우리 전기는 직접 만들어야 안심"이라고 하지 않게 됐어요.
        </p>
        <p>
          서버에서 똑같은 일이 벌어졌습니다. 예전엔 서비스를 만들려면 <strong>서버 컴퓨터를
          직접 사서</strong> 서버실에 두고, 에어컨을 틀고, 새벽에 고장 나면 달려가야 했어요.
          AWS(Amazon Web Services) 같은 <strong>클라우드</strong>는 거대한 데이터센터의
          컴퓨팅 파워를 <strong>수도·전기처럼 쓴 만큼 내고 빌려 쓰게</strong> 해 줬습니다.
        </p>
        <Code>{CODE_BEFORE_AFTER}</Code>
        <div className="tip">
          <b>왜 혁명일까?</b> 학생 몇 명도 카드 한 장으로 대기업급 인프라를 몇 분 만에
          빌릴 수 있게 됐다는 뜻이에요. 어썸데브 같은 회사가 서버실 없이 서비스를 운영하는
          것도, 여러분이 이 플랫폼에 접속하고 있는 것도 전부 이 혁명 덕분입니다.
        </div>
      </Section>

      <Section n={2} title="IaaS · PaaS · SaaS" sub="어디까지 내가 하고, 어디부터 맡길까?">
        <p>
          클라우드라고 다 같은 게 아니에요. <strong>"어디까지 내가 직접 하느냐"</strong>에
          따라 3단계로 나눕니다. 피자로 비유하면 딱 감이 와요.
        </p>
        <Code>{CODE_IAAS_PAAS_SAAS}</Code>
        <p>
          위로 갈수록(IaaS 쪽) <strong>자유롭지만 손이 많이 가고</strong>, 아래로 갈수록(SaaS 쪽)
          <strong> 편하지만 정해진 대로만</strong> 써야 해요. 어썸데브가 IaaS(EC2)를 고른 건
          비용 때문이기도 하지만, 여러분이 <strong>OS부터 배포까지 전 과정을 눈으로 볼 수
          있는 교재</strong>가 되기 때문이기도 합니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 330" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="온프레미스, IaaS, PaaS, SaaS에서 계층별로 내가 관리하는지 AWS가 관리하는지 비교한 도해">
          <text x="197.5" y="32" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">온프레미스</text>
          <text x="320.5" y="32" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">IaaS</text>
          <text x="443.5" y="32" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">PaaS</text>
          <text x="566.5" y="32" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">SaaS</text>
          <text x="130" y="75" textAnchor="end" fontSize="12" fill="var(--muted)">앱 · 코드</text>
          <text x="130" y="133" textAnchor="end" fontSize="12" fill="var(--muted)">OS · 실행 환경</text>
          <text x="130" y="191" textAnchor="end" fontSize="12" fill="var(--muted)">가상 서버</text>
          <text x="130" y="249" textAnchor="end" fontSize="12" fill="var(--muted)">하드웨어 · 건물</text>
          <rect x="140" y="45" width="115" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="197.5" y="75" textAnchor="middle" fontSize="12" fill="var(--ink)">내가</text>
          <rect x="140" y="103" width="115" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="197.5" y="133" textAnchor="middle" fontSize="12" fill="var(--ink)">내가</text>
          <rect x="140" y="161" width="115" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="197.5" y="191" textAnchor="middle" fontSize="12" fill="var(--ink)">내가</text>
          <rect x="140" y="219" width="115" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="197.5" y="249" textAnchor="middle" fontSize="12" fill="var(--ink)">내가</text>
          <rect x="263" y="45" width="115" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="320.5" y="75" textAnchor="middle" fontSize="12" fill="var(--ink)">내가</text>
          <rect x="263" y="103" width="115" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="320.5" y="133" textAnchor="middle" fontSize="12" fill="var(--ink)">내가</text>
          <rect x="263" y="161" width="115" height="52" rx="8" fill="var(--primary)" fillOpacity="0.15" stroke="var(--primary)" />
          <text x="320.5" y="191" textAnchor="middle" fontSize="12" fill="var(--ink)">AWS가</text>
          <rect x="263" y="219" width="115" height="52" rx="8" fill="var(--primary)" fillOpacity="0.15" stroke="var(--primary)" />
          <text x="320.5" y="249" textAnchor="middle" fontSize="12" fill="var(--ink)">AWS가</text>
          <rect x="386" y="45" width="115" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="443.5" y="75" textAnchor="middle" fontSize="12" fill="var(--ink)">내가</text>
          <rect x="386" y="103" width="115" height="52" rx="8" fill="var(--primary)" fillOpacity="0.15" stroke="var(--primary)" />
          <text x="443.5" y="133" textAnchor="middle" fontSize="12" fill="var(--ink)">AWS가</text>
          <rect x="386" y="161" width="115" height="52" rx="8" fill="var(--primary)" fillOpacity="0.15" stroke="var(--primary)" />
          <text x="443.5" y="191" textAnchor="middle" fontSize="12" fill="var(--ink)">AWS가</text>
          <rect x="386" y="219" width="115" height="52" rx="8" fill="var(--primary)" fillOpacity="0.15" stroke="var(--primary)" />
          <text x="443.5" y="249" textAnchor="middle" fontSize="12" fill="var(--ink)">AWS가</text>
          <rect x="509" y="45" width="115" height="52" rx="8" fill="var(--primary)" fillOpacity="0.15" stroke="var(--primary)" />
          <text x="566.5" y="75" textAnchor="middle" fontSize="12" fill="var(--ink)">AWS가</text>
          <rect x="509" y="103" width="115" height="52" rx="8" fill="var(--primary)" fillOpacity="0.15" stroke="var(--primary)" />
          <text x="566.5" y="133" textAnchor="middle" fontSize="12" fill="var(--ink)">AWS가</text>
          <rect x="509" y="161" width="115" height="52" rx="8" fill="var(--primary)" fillOpacity="0.15" stroke="var(--primary)" />
          <text x="566.5" y="191" textAnchor="middle" fontSize="12" fill="var(--ink)">AWS가</text>
          <rect x="509" y="219" width="115" height="52" rx="8" fill="var(--primary)" fillOpacity="0.15" stroke="var(--primary)" />
          <text x="566.5" y="249" textAnchor="middle" fontSize="12" fill="var(--ink)">AWS가</text>
          <text x="197.5" y="289" textAnchor="middle" fontSize="12" fill="var(--muted)">(직접 다 함)</text>
          <text x="320.5" y="289" textAnchor="middle" fontSize="12" fill="var(--muted)">예: EC2 — 어썸데브</text>
          <text x="443.5" y="289" textAnchor="middle" fontSize="12" fill="var(--muted)">예: Beanstalk</text>
          <text x="566.5" y="289" textAnchor="middle" fontSize="12" fill="var(--muted)">예: Gmail · 노션</text>
          <rect x="140" y="305" width="14" height="14" rx="3" fill="var(--card)" stroke="var(--line)" />
          <text x="161" y="316" fontSize="12" fill="var(--muted)">내가 관리</text>
          <rect x="250" y="305" width="14" height="14" rx="3" fill="var(--primary)" fillOpacity="0.15" stroke="var(--primary)" />
          <text x="271" y="316" fontSize="12" fill="var(--muted)">AWS가 관리</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 어디까지 내가 관리하나 — 온프레미스 · IaaS · PaaS · SaaS 비교</p>
        <div className="tip">
          <b>직접 확인해 보기</b> 오늘 하루 내가 쓴 서비스를 세 칸에 분류해 보세요.
          학교 구글 메일은? (SaaS) 우리 Gitea(<span className="icode">edu.awesomedevapp.com</span>)는?
          (IaaS 위에 우리가 직접 올린 것!) 헷갈리는 게 나오면 그게 좋은 질문거리예요 —
          멘토 채널에 올려 보세요.
        </div>
      </Section>

      <Section n={3} title="EC2 — 클릭으로 만드는 가상 서버" sub="t3.medium이라는 암호 해독하기">
        <p>
          <strong>EC2</strong>(Elastic Compute Cloud)는 AWS의 <strong>가상 서버</strong> 서비스예요.
          "가상"인 이유는, 진짜 물리 컴퓨터 한 대를 통째로 받는 게 아니라 아마존 데이터센터의
          초대형 컴퓨터를 <strong>여러 칸으로 나눈 것 중 한 칸</strong>을 빌리기 때문이에요.
          한 층을 여러 사무실로 쪼개 임대하는 것과 같죠. 빌린 서버 한 대를
          <strong> 인스턴스</strong>라고 부릅니다.
        </p>
        <p>
          인스턴스는 사양별로 종류가 수백 가지인데, 이름만 읽을 줄 알면 사양이 보여요.
          자동차 모델명(아반떼 1.6이면 차종과 배기량이 보이듯)과 똑같습니다.
        </p>
        <Code>{CODE_T3_MEDIUM}</Code>
        <div className="warn">
          <b>t 패밀리의 "버스트"란?</b> 평소엔 CPU를 조금만 쓰다가, 바쁠 때 잠깐
          <strong> 전력 질주</strong>할 수 있는 방식이에요. 대신 질주할 수 있는 "크레딧"이
          쌓여 있어야 해요 — 계속 전력 질주만 시키면 크레딧이 바닥나서 느려집니다.
          평소 한산하고 가끔 바쁜 우리 학습 플랫폼 같은 서비스에 딱 맞는 가성비형이에요.
        </div>
      </Section>

      <Section n={4} title="요금 — 끄면 안 나가는 것, 꺼도 나가는 것" sub="시간당 과금과 프리 티어, 그리고 함정 하나">
        <p>
          EC2 요금의 기본은 <strong>시간당 과금</strong>이에요. 인스턴스가 켜져 있는 시간만큼
          냅니다. 그래서 "실험이 끝나면 끈다"가 클라우드의 절약 제1원칙이죠. 그런데
          여기에 초보가 꼭 밟는 함정이 하나 있어요 — <strong>꺼도 나가는 요금</strong>이
          있다는 것.
        </p>
        <Code>{CODE_PRICING}</Code>
        <p>
          서버(EC2)는 <strong>전기</strong>처럼 쓴 시간만큼, 디스크(EBS)는 <strong>창고</strong>처럼
          물건을 보관하는 동안 계속 요금이 나간다고 기억하면 헷갈리지 않아요. 전등은 끄면
          전기세가 멈추지만, 창고에 짐을 둔 채로는 보관료가 계속 나가잖아요.
        </p>
        <div className="warn">
          <b>회사 계정에서는 절대 혼자 실험 금지!</b> 프리 티어 체험은 <strong>본인 개인
          계정</strong>에서, 그것도 멘토와 한도를 확인한 뒤에 하세요. 회사 AWS 계정의
          리소스를 만들거나 끄는 건 수습 권한 밖의 일이에요 — 섹션 7의 견학은 그래서
          "읽기 전용"입니다.
        </div>
      </Section>

      <Section n={5} title="S3와 RDS — 한 줄씩만 미리 인사" sub="파일 창고와 관리형 DB, 이름만 알아 두기">
        <p>
          AWS에는 서비스가 200개가 넘지만, 신입이 이름을 알아 둘 것은 몇 개 안 돼요.
          EC2 다음으로 자주 듣게 될 두 가지만 한 줄씩 인사해 둡시다.
        </p>
        <Code>{CODE_S3_RDS}</Code>
        <p>
          눈여겨볼 점은 마지막 줄이에요. 어썸데브는 PostgreSQL을 RDS로 맡기지 않고
          <strong> EC2 위 Docker 컨테이너</strong>로 직접 돌립니다. 관리형 서비스는 편하지만
          비용이 더 들고 내부가 안 보여요. 지금 우리 규모에서는 직접 운영이 더 싸고,
          여러분에게는 <strong>DB가 어떻게 뜨고 백업되는지 눈으로 보는 교재</strong>가 되죠.
          규모가 커지면 그때 RDS를 검토하는 것 — 이런 판단이 바로 인프라 설계입니다.
        </p>
      </Section>

      <Section n={6} title="어썸데브 인프라 실례" sub="EC2 + 탄력적 IP + 보안 그룹 — 이 페이지가 사는 집">
        <p>
          이제 배운 조각을 전부 모아 <strong>실물</strong>을 봅시다. 여러분이 지금 보고 있는
          이 페이지는 <strong>서울 리전의 EC2 인스턴스</strong> 안에서 살고 있어요.
          리전(region)은 AWS 데이터센터가 모여 있는 지역 — 사용자와 가까울수록 빠르기
          때문에 한국 서비스는 서울 리전을 씁니다.
        </p>
        <Code>{CODE_OUR_INFRA}</Code>
        <p>
          <strong>탄력적 IP</strong>가 왜 필요할까요? EC2는 재시작하면 IP가 <strong>바뀔 수
          있어요</strong>. 이사 갈 때마다 주소가 바뀌면 아무도 못 찾아오죠. 탄력적 IP는
          "영구 도로명 주소"를 하나 받아 서버에 붙여 두는 것 — 그래서 도메인(DNS)이
          늘 같은 곳을 가리킬 수 있습니다. <strong>보안 그룹</strong>은 경비실이에요.
          허락한 포트로 오는 손님만 통과시키고 나머지는 전부 돌려보냅니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="브라우저에서 탄력적 IP와 보안 그룹을 거쳐 서울 리전 안 EC2 인스턴스에 도달하는 구조를 포함 관계로 그린 도해">
          <rect x="230" y="8" width="180" height="34" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="320" y="29" textAnchor="middle" fontSize="12" fill="var(--ink)">인터넷 (여러분의 브라우저)</text>
          <line x1="320" y1="42" x2="320" y2="66" stroke="var(--muted)" />
          <rect x="235" y="66" width="170" height="32" rx="8" fill="var(--card)" stroke="var(--amber)" />
          <text x="320" y="86" textAnchor="middle" fontSize="12" fill="var(--ink)">탄력적 IP (영구 주소)</text>
          <line x1="320" y1="98" x2="320" y2="224" stroke="var(--muted)" />
          <polyline points="314,216 320,224 326,216" fill="none" stroke="var(--muted)" />
          <rect x="36" y="118" width="568" height="268" rx="8" fill="none" stroke="var(--line)" strokeDasharray="6 4" />
          <text x="50" y="140" fontSize="12" fill="var(--muted)">AWS 클라우드</text>
          <rect x="64" y="152" width="512" height="218" rx="8" fill="none" stroke="var(--teal)" />
          <text x="78" y="174" fontSize="12" fontWeight="600" fill="var(--teal)">서울 리전</text>
          <text x="562" y="174" textAnchor="end" fontSize="12" fill="var(--muted)">데이터센터가 모인 지역</text>
          <rect x="94" y="188" width="452" height="166" rx="8" fill="none" stroke="var(--rose)" strokeDasharray="4 3" />
          <text x="108" y="210" fontSize="12" fontWeight="600" fill="var(--rose)">보안 그룹 (방화벽)</text>
          <text x="532" y="210" textAnchor="end" fontSize="12" fill="var(--muted)">443 · 22만 통과</text>
          <rect x="124" y="224" width="392" height="114" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="320" y="246" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">EC2 인스턴스 (가상 서버)</text>
          <rect x="131" y="258" width="118" height="64" rx="8" fill="none" stroke="var(--line)" />
          <text x="190" y="284" textAnchor="middle" fontSize="12" fill="var(--ink)">Caddy</text>
          <text x="190" y="304" textAnchor="middle" fontSize="12" fill="var(--muted)">HTTPS 현관</text>
          <rect x="261" y="258" width="118" height="64" rx="8" fill="none" stroke="var(--line)" />
          <text x="320" y="284" textAnchor="middle" fontSize="12" fill="var(--ink)">React 프론트</text>
          <text x="320" y="304" textAnchor="middle" fontSize="12" fill="var(--ink)">Spring Boot 백엔드</text>
          <rect x="391" y="258" width="118" height="64" rx="8" fill="none" stroke="var(--line)" />
          <text x="450" y="284" textAnchor="middle" fontSize="12" fill="var(--ink)">PostgreSQL</text>
          <text x="450" y="304" textAnchor="middle" fontSize="12" fill="var(--ink)">Gitea (Docker)</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 브라우저에서 EC2까지 — 탄력적 IP · 보안 그룹 · 서울 리전의 포함 관계</p>
        <div className="tip">
          <b>직접 확인해 보기</b> 네트워크 코스에서 배운 명령으로 우리 서버의 "도로명
          주소"를 알아내 보세요. 터미널에서{' '}
          <span className="icode">nslookup edu.awesomedevapp.com</span> — 나온 IP가 바로
          그림 맨 위의 <strong>탄력적 IP</strong>예요. 그리고 브라우저 주소창에서 이 플랫폼
          주소의 자물쇠 아이콘을 눌러 보세요. 그 HTTPS를 처리하는 게 그림 속{' '}
          <strong>Caddy</strong>입니다.
        </div>
      </Section>

      <Section n={7} title="콘솔 구경은 멘토와 함께" sub="읽기 전용 견학 — 보는 건 자유, 누르는 건 금지">
        <p>
          AWS <strong>콘솔</strong>은 인스턴스를 만들고 끄고 지우는 관제탑이에요. 그만큼
          클릭 한 번이 <strong>서비스 중단이나 과금</strong>으로 이어질 수 있어서, 수습 기간의
          콘솔 접근은 <strong>멘토 동행 + 읽기 전용</strong>이 원칙입니다. 운전면허 따기 전에
          조수석에서 도로를 익히는 단계라고 생각하세요.
        </p>
        <Code>{CODE_CONSOLE_TOUR}</Code>
        <div className="tip">
          <b>직접 확인해 보기(멘토와)</b> 위 견학 코스를 멘토와 함께 돌면서, 섹션 3에서 배운
          해부법으로 <strong>우리 인스턴스의 유형을 소리 내어 읽어 보세요.</strong> 패밀리는
          뭐고, 몇 세대고, 크기는? 그리고 보안 그룹 인바운드 규칙에서{' '}
          <span className="icode">22</span>번 포트가 왜 특정 IP에만 열려 있는지 멘토에게
          설명을 들어 보세요 — 보안 코스의 예고편입니다.
        </div>
        <div className="warn">
          <b>권한 안내</b> 수습 계정으로는 리소스 생성·수정·삭제가 막혀 있어요(막혀 있어야
          정상이에요!). "권한이 없습니다" 메시지는 오류가 아니라 <strong>안전벨트</strong>입니다.
          더 보고 싶은 화면이 있으면 멘토에게 요청하세요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>☁️ 여기까지 왔다면</h3>
          <p className="muted">
            이제 "클라우드"가 마법의 단어가 아니라 <strong>시간 단위로 빌리는 남의
            컴퓨터</strong>로, <span className="icode">t3.medium</span>이 암호가 아니라
            <strong> 읽을 수 있는 사양표</strong>로 보일 거예요. 우리 서비스가 EC2 + 탄력적 IP +
            보안 그룹 위에서 어떻게 사는지도 그릴 수 있고요. 다음은 그 서버 안에서 앱을
            포장해 나르는 기술 — <Link to="/learn/docker-intro"><strong>Docker 입문</strong></Link>{' '}
            코스로 이어 가세요. 데이터가 서버까지 오는 길이 궁금하다면{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link>를 먼저 복습해도
            좋습니다.
          </p>
        </div>
      </div>
    </div>
  );
}
