// 이 파일이 하는 일: "자료구조 맛보기" 코스 — 데이터를 담는 그릇(배열·스택·큐·해시맵·트리)이
// 왜 여러 종류인지, 언제 뭘 꺼내 쓰는지 7개 섹션으로 안내하는 정적 학습 페이지.
// (왜 그릇이 여러 개인가 → 배열 → 스택·큐 → 해시맵 → 트리 → 시간복잡도 감각 → 속도 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 코드 예제는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 코드 예제 · 텍스트 다이어그램 상수들 ──

const CODE_KITCHEN = `부엌의 그릇들 = 자료구조

컵      → 하나만 담아서 바로 마심          (변수)
쟁반    → 순서대로 나란히 놓음             (배열)
접시 탑 → 맨 위에 쌓고, 맨 위부터 꺼냄     (스택)
급식 줄 → 먼저 선 사람이 먼저 받음         (큐)
사물함  → 번호(열쇠)만 알면 바로 열음      (해시맵)
폴더    → 폴더 안에 폴더, 그 안에 파일     (트리)

→ 국을 쟁반에 담으면 흐르고, 밥을 컵에 담으면 좁죠.
  데이터도 똑같아요 — "무엇을 자주 하느냐"에 맞는 그릇이 따로 있습니다.`;

const CODE_ARRAY = `// 배열 = 번호표 붙은 쟁반. 순서가 생명!
const interns = ['지민', '서연', '하준', '유나'];

interns[0];              // '지민' — 0번부터 시작! (첫 칸이 0인 게 국룰)
interns.length;          // 4
interns.push('도윤');    // 맨 뒤에 추가 → ['지민','서연','하준','유나','도윤']

// 순서대로 전부 돌기 — 배열이 제일 잘하는 일
for (const name of interns) {
  console.log(name + ' 출석!');
}

// 그런데 '서연'이 몇 번째인지 모르면?
interns.indexOf('서연'); // 앞에서부터 한 칸씩 다 뒤져봄 → 데이터가 많으면 느려요
// 이 약점을 해시맵(섹션 4)이 해결합니다.`;

const CODE_STACK = `// 스택(Stack) = 접시 탑. LIFO — 나중에 쌓은 게 먼저 나감
// 브라우저 '뒤로가기'가 정확히 이 구조예요.
const history = [];                    // JS 배열로 스택 흉내내기

history.push('/learn');               // 학습 센터 방문
history.push('/learn/network');       // 네트워크 코스 방문
history.push('/learn/data-structures'); // 지금 이 페이지!

// [뒤로가기] 버튼 클릭 = pop (맨 위 접시를 꺼냄)
history.pop();  // '/learn/data-structures' 가 빠지고
history.at(-1); // '/learn/network' ← 지금 보이는 페이지

// 코드 에디터의 Ctrl+Z(실행 취소)도, 함수가 함수를 부르는
// '콜 스택'도 전부 스택 — 최근 것부터 되감을 때 쓰는 그릇입니다.`;

const CODE_QUEUE = `// 큐(Queue) = 급식 줄. FIFO — 먼저 온 사람이 먼저 받음
const lunchLine = [];

lunchLine.push('지민');   // 줄 맨 뒤에 섬 (enqueue)
lunchLine.push('서연');
lunchLine.push('하준');

lunchLine.shift();        // '지민' — 맨 앞사람부터 배식! (dequeue)
lunchLine.shift();        // '서연'
// 남은 줄: ['하준']

// 스택과 큐는 push는 같고 꺼내는 쪽만 달라요:
//   스택: push + pop   (뒤로 넣고 뒤에서 꺼냄)  → 되감기
//   큐:   push + shift (뒤로 넣고 앞에서 꺼냄)  → 순서 지키기
// 프린터 인쇄 대기열, 서버의 요청 처리 줄이 전부 큐입니다.`;

const CODE_HASHMAP = `// 해시맵(Map) = 열쇠(key)로 한 번에 여는 사물함
const lockers = new Map();

lockers.set('지민', '17번 사물함');
lockers.set('서연', '42번 사물함');
lockers.set('하준', '8번 사물함');

lockers.get('서연');   // '42번 사물함' — 한. 번. 에.
lockers.has('유나');   // false — 없는 것도 한 번에 알아요

// 배열이었다면? 앞에서부터 "지민이야? 아니. 서연이야? 맞다!" 하나씩 확인.
// 해시맵은 열쇠('서연')를 해시 함수라는 기계에 넣으면
// "42번 칸으로 가!" 하고 위치가 바로 계산돼서 나와요.
// 학번 뒷자리로 사물함 번호가 정해지는 규칙이 있다면,
// 전교생 명단을 안 뒤져도 내 사물함을 바로 찾는 것과 같죠.

// 우리 스택에서도 어디에나 있어요:
// PostgreSQL의 인덱스, 자바스크립트 객체 {}, HTTP 헤더... 전부 key → value.`;

const CODE_TREE = `트리 = 폴더 안에 폴더. 여러분이 매일 보는 구조예요.

우리 프론트엔드 프로젝트 폴더:            이 페이지의 DOM도 트리:
frontend/                                <div>
├── src/                                 ├── <div class="hero">
│   ├── pages/                           │   ├── <h1>
│   │   ├── NetworkPage.jsx              │   └── <p>
│   │   └── courses/                     ├── <nav class="pill-nav">
│   │       └── DataStructuresPage.jsx   └── <section class="step-card">
│   └── App.jsx                              └── ...
└── package.json

JSON 응답도 트리예요:
{ "course": {                     ← 부모
    "title": "자료구조 맛보기",    ← 자식
    "sections": [ ... ]           ← 자식 (그 안에 또 자식들)
} }

공통점: 맨 위 뿌리(root) 하나 → 가지가 갈라짐 → 끝에 잎(leaf).
"부모-자식 관계가 있는 데이터"는 전부 트리에 담깁니다.
React가 화면을 그리는 것도 결국 컴포넌트 트리를 따라 내려가는 일이에요.`;

const CODE_BIGO = `시간복잡도 = "데이터가 10배 늘면 일도 몇 배 느나?"의 감각

O(1)  — 데이터가 아무리 많아도 한 번에 끝
        사물함: 전교생이 100명이든 10만 명이든 내 열쇠로 한 번에 염
        예) map.get(key), arr[3]

O(n)  — 데이터가 10배면 일도 10배
        출석부: 100명 부르면 100번, 10만 명이면 10만 번
        예) 배열 전체 순회, arr.indexOf(x)

O(n²) — 데이터가 10배면 일은 100배!
        반 전체 악수: 30명이 서로 다 악수하면 약 450번,
        300명이면 약 45,000번 — 사람 10배에 악수는 100배
        예) 반복문 안의 반복문 (모든 쌍 비교)

n = 100,000일 때 대략:
O(1)  = 1번        ← 눈 깜빡할 새
O(n)  = 100,000번  ← 그래도 순식간
O(n²) = 100억 번   ← 브라우저가 멈춰요

→ "이 코드, 데이터가 10만 개여도 괜찮을까?"라고
  스스로 묻는 습관이 시간복잡도 감각의 시작입니다.`;

const CODE_RACE = `// ── 배열 vs Map 검색 속도 대결 ──
// 브라우저 아무 페이지에서 F12 → Console 탭에 통째로 붙여넣고 Enter!

// 1) 선수 입장: 가짜 수강생 10만 명 등록
const N = 100000;
const arr = [];
const map = new Map();
for (let i = 0; i < N; i++) {
  const id = 'student-' + i;
  arr.push(id);
  map.set(id, i);
}

// 2) 각자 1,000명씩 찾아보기 — 일부러 '뒤쪽' 학생을 찾아요 (배열에 최악)
const targets = [];
for (let i = 0; i < 1000; i++) {
  targets.push('student-' + (N - 1 - i));
}

// 3) 배열 선수 (O(n) — 앞에서부터 하나씩 확인)
console.time('배열 includes x1000');
for (const t of targets) arr.includes(t);
console.timeEnd('배열 includes x1000');

// 4) Map 선수 (O(1) — 열쇠로 한 번에)
console.time('Map has x1000');
for (const t of targets) map.has(t);
console.timeEnd('Map has x1000');

// 결과 예시 (PC마다 다르지만 차이의 '규모'를 보세요):
// 배열 includes x1000: 300ms 안팎  ← 1,000번 × 최대 10만 칸 확인
// Map has x1000: 0.5ms 안팎        ← 1,000번 × 한 번에
// 같은 질문 1,000개인데 수백 배 차이 — 이게 자료구조를 배우는 이유입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '스택과 큐' },
  { n: 4, label: '해시맵' },
  { n: 5, label: '트리' },
  { n: 6, label: '시간복잡도 감각' },
  { n: 7, label: '속도 대결 실습' },
];

export default function DataStructuresPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 소프트웨어</div>
        <h1>자료구조 맛보기<br />— 데이터를 담는 그릇 고르는 법</h1>
        <p>
          국은 국그릇에, 밥은 밥공기에 — 데이터에도 쓰임새마다 어울리는 그릇이 따로 있어요.
          배열·스택·큐·해시맵·트리를 <strong>직접 콘솔에 쳐 보면서</strong> 맛보고,
          마지막엔 10만 개 데이터로 배열과 Map의 속도 대결까지 시켜 봅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 60분</span>
          <span className="chip">콘솔 실습 3개</span>
          <span className="chip">준비물: 브라우저 F12</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>
          <strong>자료구조</strong>는 어렵게 들리지만 정체는 단순해요 —
          <strong> 데이터를 담아 두는 그릇의 종류</strong>입니다. 부엌에 컵·쟁반·접시·냄비가
          따로 있는 이유는 담는 내용물과 <strong>"자주 하는 동작"</strong>이 다르기 때문이죠.
          데이터도 똑같아요. "순서대로 훑는 일"이 많은지, "최근 것부터 되감는 일"이 많은지,
          "이름으로 바로 찾는 일"이 많은지에 따라 최적의 그릇이 달라집니다.
        </p>
        <Code>{CODE_KITCHEN}</Code>
        <p>
          이 코스에서는 이 그릇들을 하나씩 손에 들어 봅니다. 외울 필요 없어요 —
          각 그릇이 <strong>어떤 동작을 제일 잘하는지</strong>(그리고 뭘 못하는지)만
          몸에 남기면 성공입니다. 그 감각이 있어야 나중에 "여기엔 뭘 쓰지?"를
          스스로 결정할 수 있거든요.
        </p>
        <div className="tip">
          <b>아침수업과 연결</b> 이번 <strong>아침수업 자료구조 주간</strong>이 바로 이 코스의
          심화판이에요. 여기서 그릇들 얼굴을 미리 익혀 두면, 아침수업에서 구현 원리를
          파고들 때 "아, 그 접시 탑!" 하고 바로 따라갈 수 있습니다.
        </div>
      </Section>

      <Section n={2} title="배열 — 번호표 붙은 쟁반" sub="순서가 있는 데이터의 기본 그릇">
        <p>
          <strong>배열</strong>(Array)은 칸마다 번호표(인덱스)가 붙은 쟁반이에요.
          가장 큰 특징은 <strong>순서가 유지된다</strong>는 것. 출석부처럼 "1번부터 차례대로"가
          중요한 데이터는 전부 배열에 담습니다. 우리 플랫폼에서도 코스 목록, 공지 목록처럼
          <strong> 화면에 순서대로 나열되는 것</strong>은 거의 다 배열이에요.
        </p>
        <Code>{CODE_ARRAY}</Code>
        <p>
          배열의 강점은 <strong>순서대로 전부 돌기</strong>와 <strong>몇 번째 칸인지 알 때
          바로 꺼내기</strong>(<span className="icode">interns[0]</span>은 한 번에!)예요.
          약점은 <strong>"값으로 찾기"</strong> — 번호표가 아니라 내용물로 찾으려면
          앞에서부터 한 칸씩 다 열어 봐야 합니다. 이 약점은 섹션 4의 해시맵이,
          그 차이의 크기는 섹션 7의 속도 대결이 보여 줄 거예요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 <span className="kbd">F12</span> →
          <span className="kbd">Console</span> 탭을 열고 위 코드를 그대로 붙여넣어 보세요.
          그리고 <span className="icode">interns[10]</span>처럼 없는 칸을 꺼내면 뭐가 나오는지도
          실험해 보세요. (에러가 아니라 <span className="icode">undefined</span>가 나와요 —
          "빈 칸"이라는 뜻입니다.)
        </div>
      </Section>

      <Section n={3} title="스택과 큐 — 접시 탑과 급식 줄" sub="넣는 건 같은데 꺼내는 방향이 다르다">
        <p>
          이번엔 <strong>꺼내는 순서에 규칙이 있는</strong> 두 그릇이에요.
          <strong> 스택</strong>(Stack)은 접시 탑 — 맨 위에 쌓고 맨 위부터 꺼냅니다.
          나중에 넣은 게 먼저 나와서 <strong>LIFO</strong>(Last In, First Out)라고 불러요.
          여러분이 하루에도 수십 번 누르는 <strong>브라우저 뒤로가기</strong>가 정확히 스택입니다.
        </p>
        <Code>{CODE_STACK}</Code>
        <p>
          <strong>큐</strong>(Queue)는 급식 줄 — 뒤로 줄 서고 앞에서부터 빠집니다.
          먼저 온 게 먼저 나가는 <strong>FIFO</strong>(First In, First Out)예요.
          새치기가 없는 그릇이라, <strong>순서를 공정하게 지켜야 하는 곳</strong>에 씁니다.
          우리 백엔드(Spring Boot)가 동시에 들어온 요청들을 처리하는 것도 기본은 줄 세우기예요.
        </p>
        <Code>{CODE_QUEUE}</Code>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="스택과 큐 비교 도해. 스택은 접시 탑처럼 위로 쌓고 맨 위에서 꺼내는 LIFO, 큐는 급식 줄처럼 뒤로 서고 앞에서 나가는 FIFO">
          <text x="160" y="30" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">스택 Stack — LIFO</text>
          <text x="160" y="52" textAnchor="middle" fontSize="12" fill="var(--muted)">접시 탑: 나중에 쌓은 게 먼저 나감</text>
          <text x="70" y="118" textAnchor="middle" fontSize="12" fill="var(--teal)">push (넣기)</text>
          <line x1="70" y1="128" x2="70" y2="170" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="63,161 70,170 77,161" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <text x="250" y="118" textAnchor="middle" fontSize="12" fill="var(--rose)">pop (꺼내기)</text>
          <line x1="250" y1="170" x2="250" y2="128" stroke="var(--rose)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="243,137 250,128 257,137" fill="none" stroke="var(--rose)" strokeWidth="2" strokeLinecap="round" />
          <rect x="100" y="182" width="120" height="36" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="160" y="205" textAnchor="middle" fontSize="13" fill="var(--ink)">③ 하준</text>
          <rect x="100" y="222" width="120" height="36" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="160" y="245" textAnchor="middle" fontSize="13" fill="var(--ink)">② 서연</text>
          <rect x="100" y="262" width="120" height="36" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="160" y="285" textAnchor="middle" fontSize="13" fill="var(--ink)">① 지민</text>
          <line x1="84" y1="306" x2="236" y2="306" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <text x="160" y="335" textAnchor="middle" fontSize="12" fill="var(--muted)">출입구는 맨 위 하나 — 하준부터 나감</text>
          <line x1="320" y1="70" x2="320" y2="315" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 4" />
          <text x="480" y="30" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">큐 Queue — FIFO</text>
          <text x="480" y="52" textAnchor="middle" fontSize="12" fill="var(--muted)">급식 줄: 먼저 선 사람이 먼저 받음</text>
          <text x="403" y="160" textAnchor="middle" fontSize="11" fill="var(--muted)">앞 (front)</text>
          <text x="555" y="160" textAnchor="middle" fontSize="11" fill="var(--muted)">뒤 (back)</text>
          <rect x="368" y="170" width="70" height="40" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="403" y="195" textAnchor="middle" fontSize="13" fill="var(--ink)">① 지민</text>
          <rect x="444" y="170" width="70" height="40" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="479" y="195" textAnchor="middle" fontSize="13" fill="var(--ink)">② 서연</text>
          <rect x="520" y="170" width="70" height="40" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="555" y="195" textAnchor="middle" fontSize="13" fill="var(--ink)">③ 하준</text>
          <line x1="360" y1="190" x2="338" y2="190" stroke="var(--rose)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="346,183 338,190 346,197" fill="none" stroke="var(--rose)" strokeWidth="2" strokeLinecap="round" />
          <line x1="618" y1="190" x2="600" y2="190" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="608,183 600,190 608,197" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <text x="403" y="238" textAnchor="middle" fontSize="12" fill="var(--rose)">shift — 먼저 나감</text>
          <text x="555" y="238" textAnchor="middle" fontSize="12" fill="var(--teal)">push — 새로 줄섬</text>
          <text x="480" y="335" textAnchor="middle" fontSize="12" fill="var(--muted)">입구는 뒤, 출구는 앞 — 지민부터 나감</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 같은 순서(지민→서연→하준)로 넣어도 스택은 하준부터(LIFO), 큐는 지민부터(FIFO) 나갑니다</p>
        <div className="warn">
          <b>헷갈림 주의</b> 스택과 큐는 별도의 신기한 물건이 아니라
          <strong> "배열을 쓰는 규칙"</strong>에 가까워요. 위 코드처럼 JS에서는 배열의
          <span className="icode">push</span>/<span className="icode">pop</span>만 쓰면 스택,
          <span className="icode">push</span>/<span className="icode">shift</span>만 쓰면 큐가
          됩니다. 중간에 다른 메서드를 섞는 순간 규칙이 깨져요.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 위 <span className="icode">history</span> 코드를 콘솔에
          붙여넣고, 실제 브라우저에서 학습 센터 → 이 코스 순서로 이동했다가
          <strong> 뒤로가기</strong>를 눌러 보세요. 내 코드의 <span className="icode">pop()</span>과
          브라우저의 동작이 똑같이 움직이는 걸 비교하면, LIFO가 머리가 아니라 손에 남아요.
        </div>
      </Section>

      <Section n={4} title="해시맵 — 열쇠로 한 번에 여는 사물함" sub="'찾기'가 O(1)이 되는 마법의 원리">
        <p>
          배열에서 값으로 찾으려면 앞에서부터 다 뒤져야 했죠. <strong>해시맵</strong>(JS에서는
          <span className="icode">Map</span>, 그냥 객체 <span className="icode">{'{}'}</span>도
          비슷한 역할)은 <strong>열쇠(key)만 있으면 한 번에</strong> 찾아 줍니다.
        </p>
        <Code>{CODE_HASHMAP}</Code>
        <p>
          왜 한 번에 될까요? 비밀은 <strong>해시 함수</strong>예요. 열쇠(예:
          <span className="icode">'서연'</span>)를 넣으면 <strong>보관 위치가 계산되어
          나오는 기계</strong>죠. 저장할 때 그 계산대로 넣어 두고, 찾을 때도 같은 계산을 하면
          같은 위치가 나오니까 — 뒤질 필요 없이 <strong>바로 그 칸으로 직행</strong>합니다.
          "이름 순서대로 찾기"가 아니라 "이름이 곧 위치"인 거예요.
        </p>
        <p>
          이 원리는 우리 스택 전체에 깔려 있어요. <strong>PostgreSQL</strong>이 수백만 행에서
          한 명을 순식간에 찾는 인덱스, HTTP 헤더의 <span className="icode">이름: 값</span> 쌍,
          React의 <span className="icode">key</span> prop까지 — 전부
          <strong> "열쇠 → 값"</strong> 구조입니다.
        </p>
      </Section>

      <Section n={5} title="트리 — 폴더 안에 폴더" sub="여러분이 이미 매일 쓰고 있는 구조">
        <p>
          <strong>트리</strong>(Tree)는 부모-자식 관계로 가지를 뻗는 그릇이에요.
          이름은 나무인데 보통 <strong>뿌리(root)를 위에 두고 거꾸로</strong> 그립니다.
          새로 배울 것도 없이, 여러분은 이미 매일 트리를 쓰고 있어요 —
          PC의 <strong>폴더 구조</strong>가 트리니까요.
        </p>
        <Code>{CODE_TREE}</Code>
        <p>
          웹 개발자에게 트리는 특히 중요해요. 지금 보고 있는 이 화면의
          <strong> DOM</strong>도 트리, 백엔드가 보내 주는 <strong>JSON</strong>도 트리,
          <strong> React 컴포넌트</strong>가 겹겹이 포개진 것도 트리입니다.
          "태그 안에 태그", "폴더 안에 폴더", "객체 안에 객체" — 이 <strong>포함 관계</strong>가
          보이면 전부 트리라고 생각하면 돼요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> <span className="kbd">F12</span> →
          <span className="kbd">Elements</span> 탭을 열어 보세요. 이 페이지의 DOM 트리가
          펼쳐집니다. 화살표를 눌러 <span className="icode">div.hero</span> 가지를 접었다 펴 보고,
          지금 읽고 있는 이 문장이 트리의 몇 단계 깊이(뿌리에서 몇 번 내려온 잎)인지 세어 보세요.
        </div>
      </Section>

      <Section n={6} title="시간복잡도 감각 — O(1), O(n), O(n²)" sub="데이터가 10배 늘면 내 코드는 몇 배 느려질까?">
        <p>
          그릇을 골랐으면 이제 <strong>"이 그릇, 데이터가 많아져도 버틸까?"</strong>를 묻는
          감각이 필요해요. 그 감각의 언어가 <strong>시간복잡도</strong>, 표기법이
          <strong> O(빅오)</strong>입니다. 수학처럼 보이지만, 핵심 질문은 딱 하나예요 —
          <strong> 데이터가 10배 늘면 일은 몇 배 느나?</strong>
        </p>
        <Code>{CODE_BIGO}</Code>
        <p>
          이제 앞 섹션들이 하나로 이어져요. 배열의 <span className="icode">indexOf</span>가
          느린 이유 = <strong>O(n)</strong>, 해시맵의 <span className="icode">get</span>이
          빠른 이유 = <strong>O(1)</strong>. 개발하다 화면이 버벅이면 십중팔구 어딘가에
          숨어 있는 <strong>O(n²)</strong>(반복문 속 반복문) 때문입니다.
          정확한 계산은 아침수업에서 다듬고, 지금은 이 <strong>세 단계의 체감 차이</strong>만
          가져가면 충분해요.
        </p>
        <svg className="diagram" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="시간복잡도 성장 곡선 도해. 데이터가 늘어날 때 O(1)은 그대로, O(n)은 비례해서, O(n제곱)은 훨씬 가파르게 작업 횟수가 늘어난다">
          <text x="84" y="28" textAnchor="start" fontSize="12" fill="var(--muted)">↑ 작업 횟수</text>
          <line x1="80" y1="40" x2="80" y2="240" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="80" y1="240" x2="560" y2="240" stroke="var(--line)" strokeWidth="1.5" />
          <text x="320" y="268" textAnchor="middle" fontSize="12" fill="var(--muted)">데이터 개수 → (10개 … 10만 개)</text>
          <path d="M 80 236 Q 250 226 340 44" fill="none" stroke="var(--rose)" strokeWidth="2.5" strokeLinecap="round" />
          <text x="352" y="54" textAnchor="start" fontSize="12" fill="var(--rose)">O(n²) — 10배면 100배 (반복문 속 반복문)</text>
          <line x1="80" y1="236" x2="545" y2="112" stroke="var(--amber)" strokeWidth="2.5" strokeLinecap="round" />
          <text x="404" y="136" textAnchor="start" fontSize="12" fill="var(--amber)">O(n) — 10배면 10배 (출석부)</text>
          <line x1="80" y1="226" x2="545" y2="226" stroke="var(--teal)" strokeWidth="2.5" strokeLinecap="round" />
          <text x="404" y="212" textAnchor="start" fontSize="12" fill="var(--teal)">O(1) — 그대로 (사물함)</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 데이터가 늘어날 때 작업 횟수가 느는 속도 — O(1)·O(n)·O(n²)의 체감 차이</p>
        <div className="warn">
          <b>흔한 오해</b> "O(n)은 나쁘다"가 아니에요. 데이터가 100개뿐이면 O(n²)도
          멀쩡히 돌아갑니다. 문제는 <strong>데이터가 커질 때</strong> — 그래서 진짜 질문은
          "지금 빠른가?"가 아니라 <strong>"10만 개여도 빠를까?"</strong>입니다.
          바로 다음 섹션에서 그 10만 개를 직접 만들어 봅니다.
        </div>
      </Section>

      <Section n={7} title="실습 — 배열 vs Map, 10만 개 속도 대결" sub="O(n)과 O(1)의 차이를 숫자로 목격하기">
        <p>
          말로만 듣던 차이를 <strong>직접 측정</strong>해 볼 시간이에요. 수강생 10만 명을
          가짜로 등록해 놓고, 배열과 Map에게 <strong>같은 학생 1,000명을 찾아보라</strong>고
          시킵니다. <span className="icode">console.time</span>이 스톱워치 역할을 해요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 (메인 실습)</b> 아무 페이지에서나 <span className="kbd">F12</span> →
          <span className="kbd">Console</span> 탭을 열고, 아래 코드를 <strong>통째로</strong> 붙여넣고
          <span className="kbd">Enter</span>. 두 줄의 시간이 몇 배 차이 나는지 확인하세요.
        </div>
        <Code>{CODE_RACE}</Code>
        <p>
          결과를 봤나요? 같은 질문 1,000개에 배열은 수백 ms, Map은 1ms 미만 —
          <strong> 수백 배 차이</strong>가 흔하게 나옵니다. 코드 몇 줄 차이가 아니라
          <strong> 그릇 선택</strong>의 차이예요. 사용자 눈에는 "버벅이는 사이트"와
          "쾌적한 사이트"의 차이로 보이고요.
        </p>
        <p>
          한 발 더: <span className="icode">N</span>을 <span className="icode">100000</span>에서
          <span className="icode">1000000</span>(100만)으로 바꿔 다시 돌려 보세요.
          배열의 시간은 대략 10배로 뛰는데(O(n)이니까), Map은 거의 그대로(O(1))인 걸
          직접 확인할 수 있어요 — 섹션 6의 표가 눈앞에서 재현됩니다.
        </p>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🧺 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분의 부엌에는 그릇 다섯 개가 생겼어요 — 순서의 <strong>배열</strong>,
            되감기의 <strong>스택</strong>, 줄 세우기의 <strong>큐</strong>,
            한 번에 찾는 <strong>해시맵</strong>, 포함 관계의 <strong>트리</strong>.
            그리고 "10만 개여도 괜찮을까?"라고 묻는 <strong>시간복잡도 감각</strong>까지.
            이번 주 <strong>아침수업 자료구조 주간</strong>에서 각 그릇의 내부 구현을 파고들 때,
            오늘 콘솔에서 잰 숫자들을 꼭 다시 꺼내 보세요. 이어서{' '}
            <Link to="/learn/coding"><strong>코딩 기초</strong></Link> 코스에서 이 그릇들을
            실제 기능 만들기에 써 보면, 오늘 배운 게 진짜 도구가 됩니다.
          </p>
        </div>
      </div>
    </div>
  );
}
