// 이 파일이 하는 일: "컴퓨터 문제 해결" 코스 — 컴퓨터가 느려질 때 점검 순서부터
// 블루스크린 읽기, 백업 3-2-1 원칙, 재설치, 그리고 "왜 재부팅이 만능인가"까지
// 7개 섹션으로 안내하는 정적 학습 페이지. 마지막엔 개발자의 디버깅 사고와 연결한다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_SLOW_CHECKLIST = `"컴퓨터가 느려요" — 병원 문진표처럼 순서대로 점검하기

순서   용의자        증상                     확인 방법
──────────────────────────────────────────────────────────────
 1    시작 프로그램   부팅이 유독 오래 걸림       작업 관리자 → 시작 앱
 2    램(RAM) 부족   창 여러 개 켜면 버벅임       작업 관리자 → 성능 → 메모리
 3    디스크        뭘 해도 전반적으로 굼뜸       성능 → 디스크 100% 지속?
 4    발열          한참 쓰다 보면 느려짐        팬 소리·바닥 온도, 먼지 확인

포인트: 위에서부터 하나씩 지워 나가요.
의사가 "어디가 아프세요?"부터 묻듯, 증상 → 용의자 순서로 좁힙니다.`;

const CODE_TASKMGR = `작업 관리자 여는 법 3가지 (하나만 외워도 OK)

1) Ctrl + Shift + Esc          ← 가장 빠른 지름길!
2) Ctrl + Alt + Delete → 작업 관리자
3) 작업 표시줄 우클릭 → 작업 관리자

범인 찾기 루틴:
[프로세스 탭] 열 머리글 "CPU" 클릭 → 사용량 높은 순 정렬
             "메모리" 클릭 → 램 먹는 순 정렬
→ 맨 위에 있는 프로그램이 지금 컴퓨터를 무겁게 만드는 1순위 용의자.

[성능 탭] CPU·메모리·디스크 그래프가 계속 90~100%에 붙어 있다면
          그 부품이 병목(가장 좁은 길목)이라는 뜻이에요.`;

const CODE_BSOD = `블루스크린(BSOD)이 떴을 때 — 당황하지 말고 '단서 두 개'만 챙기기

┌────────────────────────────────────────────┐
│  :(  Your PC ran into a problem ...        │
│                                            │
│  중지 코드: MEMORY_MANAGEMENT      ← 단서 ①  │
│  실패한 항목: xxxxxx.sys           ← 단서 ②  │
└────────────────────────────────────────────┘

단서 ① 중지 코드 = 사망 원인명. 대략적인 방향을 알려줘요.
   MEMORY_MANAGEMENT          → 램 쪽 문제일 가능성
   CRITICAL_PROCESS_DIED      → 윈도우 핵심 프로세스가 죽음
   DRIVER_IRQL_NOT_LESS_...   → 드라이버(장치 제어 프로그램) 충돌

단서 ② .sys 파일명 = 용의자 실명. 어떤 드라이버가 넘어졌는지 알려줘요.

→ 이 둘을 메모(폰 카메라로 찰칵!)해서 그대로 검색하는 게
  섹션 7에서 배울 "문제 검색 요령"의 출발점입니다.`;

const CODE_321 = `백업의 3-2-1 원칙 — 소중한 데이터의 안전벨트

3 — 데이터 복사본을 총 3개 유지 (원본 1 + 백업 2)
2 — 서로 다른 2가지 저장 매체에 (예: 내 PC + 외장하드)
1 — 그중 1개는 다른 장소에 (예: 클라우드, 회사 밖)

예) 수습 과제 코드라면:
  ① 내 노트북 작업 폴더            (원본)
  ② Gitea(edu.awesomedevapp.com)  (다른 매체 + 다른 장소, 1석 2조!)
  ③ 외장하드 or 학교 PC            (하나 더)

왜 '다른 장소'까지? 노트북과 외장하드를 같은 가방에 넣고 다니면
가방을 잃어버리는 순간 둘 다 사라져요. 달걀을 한 바구니에 담지 말 것!`;

const CODE_REINSTALL = `포맷·윈도우 재설치 = 컴퓨터의 '이사'

이사 절차와 똑같이 생각하면 실수가 없어요:

① 짐 싸기(백업)     문서·사진·바탕화면·브라우저 북마크·
                    개발 환경 설정, 그리고 Git에 안 올린 코드!
② 집 비우기(포맷)   디스크의 기존 내용을 싹 지움 — 되돌릴 수 없음
③ 새 집 입주(설치)  윈도우를 새로 깔면 '공장 초기 상태'
④ 짐 풀기(복원)     백업해 둔 파일 복사 + 프로그램 재설치

순서 중 가장 중요한 건 ①. 포맷 버튼은 ①이 100% 끝난 뒤에만!
"재설치했더니 빨라졌어요"의 정체: 몇 년간 쌓인 프로그램 찌꺼기·
시작 프로그램·임시 파일이 전부 사라졌기 때문이에요.`;

const CODE_REBOOT = `"껐다 켜 보셨어요?"가 만능인 진짜 이유 — 상태(state) 초기화

컴퓨터가 오래 켜져 있으면 이런 '보이지 않는 상태'가 쌓여요:

  램에 쌓인 것들:  종료 안 된 프로그램 찌꺼기, 반납 안 된 메모리(누수),
                  꼬여 버린 프로그램끼리의 대기 상태(교착)
  ─────────────────────────────────────────────
  재부팅하면?     램은 전원이 꺼지면 내용이 전부 사라지는 메모리!
                  → 쌓인 찌꺼기·꼬임이 통째로 리셋
                  → 모든 프로그램이 '방금 설치한 것 같은' 깨끗한 상태로 재시작

개발자 버전으로 번역하면:
  프로그램이 이상하다 → 프로세스 재시작
  서버가 이상하다     → docker compose restart
  전부 다 이상하다    → EC2 인스턴스 재부팅
전부 같은 원리 — "꼬인 상태를 버리고 깨끗한 초기 상태에서 다시".
단, 재부팅은 증상을 지울 뿐 원인은 못 고쳐요. 매일 꼬인다면 원인 추적!`;

const CODE_SEARCH = `문제 검색의 기술 — 에러 메시지는 '번역하지 말고 그대로'

나쁜 검색:  컴퓨터 파란 화면 뜨면서 꺼짐 ㅠㅠ
좋은 검색:  "CRITICAL_PROCESS_DIED" 윈도우11

나쁜 검색:  리액트 하다가 에러남
좋은 검색:  "Objects are not valid as a React child"

요령 3가지:
1) 에러 메시지를 복사해서 그대로 붙여넣기 (요약·의역 금지)
2) 핵심 문구는 "따옴표"로 감싸기 → 그 문장이 통째로 들어간 글만 검색됨
3) 내 상황 키워드 1~2개 추가 (윈도우11, react, spring boot, docker ...)

단, 내 파일 경로나 프로젝트 이름처럼 '나만의 부분'은 빼고 검색하세요.
C:\\Users\\kim\\... 이 들어간 에러를 그대로 검색하면 아무도 못 겪은
에러가 되니까요 — 공통 부분만 남기는 게 포인트!`;

const CODE_DEBUG_MINDSET = `오늘 배운 것 = 사실 개발자의 디버깅 사고방식

컴퓨터 문제 해결                개발자의 디버깅
────────────────────────────────────────────────────
증상부터 관찰 (느림? 언제부터?)   버그 재현 조건 확인
용의자를 순서대로 지워 나감        원인 후보를 하나씩 배제
작업 관리자로 데이터 확인          로그·모니터링 확인
블루스크린 코드 = 단서 수집        에러 메시지·스택트레이스 읽기
에러 그대로 + 따옴표 검색          에러 그대로 + 따옴표 검색 (똑같음!)
재부팅 = 상태 초기화              프로세스/컨테이너 재시작
백업 먼저, 포맷은 마지막           되돌릴 수 없는 조치는 마지막

→ 여러분은 이미 디버깅의 절반을 배웠습니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '백업 3-2-1' },
  { n: 5, label: '포맷과 재설치' },
  { n: 6, label: '재부팅의 원리' },
  { n: 7, label: '검색의 기술' },
];

export default function TroubleshootingPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 컴퓨터 기초</div>
        <h1>컴퓨터 문제 해결<br />— 당황하지 않고 범인을 찾는 법</h1>
        <p>
          "컴퓨터가 느려요", "파란 화면이 떴어요" — 누구나 겪지만 아무나 침착하게 대응하진
          못하는 상황들을 순서대로 정복해 봅니다. 그리고 마지막에 깨닫게 될 거예요 —
          이 과정이 사실 <strong>개발자가 버그를 잡는 사고방식 그 자체</strong>라는 걸요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 3개</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="컴퓨터가 느려질 때 점검 순서" sub="증상 → 용의자, 의사처럼 문진하기">
        <p>
          컴퓨터가 느려지는 원인은 대부분 <strong>네 가지 용의자</strong> 중 하나예요.
          시작 프로그램, 램 부족, 디스크, 발열. 아무거나 찔러 보는 게 아니라,
          의사가 문진표를 채우듯 <strong>증상에 맞춰 순서대로</strong> 지워 나갑니다.
        </p>
        <Code>{CODE_SLOW_CHECKLIST}</Code>
        <ol className="olist">
          <li>
            <strong>시작 프로그램</strong> — 부팅할 때 자동으로 켜지는 프로그램들이에요.
            등교 시간에 친구 열 명이 문 앞에서 한꺼번에 말을 거는 상황과 같죠.
            설치한 프로그램들이 슬쩍 등록해 둔 게 몇 년 쌓이면 부팅이 몇 분씩 걸립니다.
          </li>
          <li>
            <strong>램(RAM) 부족</strong> — 램은 <strong>책상 넓이</strong>예요.
            책상이 좁은데 교과서를 열 권 펼치면(창을 많이 열면), 책을 바닥(디스크)에
            내려놨다 다시 올렸다 하느라 느려집니다.
          </li>
          <li>
            <strong>디스크</strong> — 오래된 HDD(회전 원판 방식)라면 SSD로 바꾸는 것만으로
            딴 컴퓨터가 돼요. 도서관 사서가 서가를 걸어다니며 책을 찾는 것(HDD)과
            책 위치를 전부 외우고 있는 것(SSD)의 차이거든요.
          </li>
          <li>
            <strong>발열</strong> — CPU는 너무 뜨거워지면 고장 나지 않으려고
            <strong> 스스로 속도를 줄여요</strong>(스로틀링). 한여름 체육 시간에 전력 질주를
            계속 못 하는 것과 같아요. 팬 소리가 유독 크거나 노트북 바닥이 뜨겁다면,
            내부 먼지 청소가 답일 수 있습니다.
          </li>
        </ol>
        <svg className="diagram" viewBox="0 0 640 380" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="컴퓨터가 느려질 때 네 용의자를 순서대로 확인하는 진단 순서도">
          <rect x="60" y="14" width="240" height="36" rx="18" fill="var(--card)" stroke="var(--line)" />
          <text x="180" y="37" textAnchor="middle" fontSize="13.5" fontWeight="600" fill="var(--ink)">증상: 컴퓨터가 느려요</text>
          <line x1="180" y1="50" x2="180" y2="61" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M180,66 l-4.5,-7 h9 z" fill="var(--muted)" />
          <rect x="40" y="66" width="280" height="44" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="180" y="93" textAnchor="middle" fontSize="13" fill="var(--ink)">① 부팅이 유독 오래 걸리나요?</text>
          <line x1="320" y1="88" x2="369" y2="88" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M376,88 l-7,-4.5 v9 z" fill="var(--muted)" />
          <text x="348" y="81" textAnchor="middle" fontSize="12" fill="var(--muted)">예</text>
          <rect x="376" y="66" width="224" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" />
          <text x="488" y="85" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">시작 프로그램 정리</text>
          <text x="488" y="102" textAnchor="middle" fontSize="12" fill="var(--muted)">작업 관리자 → 시작 앱</text>
          <line x1="180" y1="110" x2="180" y2="123" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M180,128 l-4.5,-7 h9 z" fill="var(--muted)" />
          <text x="190" y="122" fontSize="12" fill="var(--muted)">아니오</text>
          <rect x="40" y="128" width="280" height="44" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="180" y="155" textAnchor="middle" fontSize="13" fill="var(--ink)">② 창을 여러 개 열면 버벅이나요?</text>
          <line x1="320" y1="150" x2="369" y2="150" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M376,150 l-7,-4.5 v9 z" fill="var(--muted)" />
          <text x="348" y="143" textAnchor="middle" fontSize="12" fill="var(--muted)">예</text>
          <rect x="376" y="128" width="224" height="44" rx="8" fill="var(--card)" stroke="var(--teal)" />
          <text x="488" y="147" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">램(RAM) 부족</text>
          <text x="488" y="164" textAnchor="middle" fontSize="12" fill="var(--muted)">성능 탭 → 메모리 확인</text>
          <line x1="180" y1="172" x2="180" y2="185" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M180,190 l-4.5,-7 h9 z" fill="var(--muted)" />
          <text x="190" y="184" fontSize="12" fill="var(--muted)">아니오</text>
          <rect x="40" y="190" width="280" height="44" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="180" y="217" textAnchor="middle" fontSize="13" fill="var(--ink)">③ 뭘 해도 전반적으로 굼뜬가요?</text>
          <line x1="320" y1="212" x2="369" y2="212" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M376,212 l-7,-4.5 v9 z" fill="var(--muted)" />
          <text x="348" y="205" textAnchor="middle" fontSize="12" fill="var(--muted)">예</text>
          <rect x="376" y="190" width="224" height="44" rx="8" fill="var(--card)" stroke="var(--amber)" />
          <text x="488" y="209" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">디스크 병목</text>
          <text x="488" y="226" textAnchor="middle" fontSize="12" fill="var(--muted)">디스크 100% 지속? SSD 고려</text>
          <line x1="180" y1="234" x2="180" y2="247" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M180,252 l-4.5,-7 h9 z" fill="var(--muted)" />
          <text x="190" y="246" fontSize="12" fill="var(--muted)">아니오</text>
          <rect x="40" y="252" width="280" height="44" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="180" y="279" textAnchor="middle" fontSize="13" fill="var(--ink)">④ 한참 쓰다 보면 느려지나요?</text>
          <line x1="320" y1="274" x2="369" y2="274" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M376,274 l-7,-4.5 v9 z" fill="var(--muted)" />
          <text x="348" y="267" textAnchor="middle" fontSize="12" fill="var(--muted)">예</text>
          <rect x="376" y="252" width="224" height="44" rx="8" fill="var(--card)" stroke="var(--rose)" />
          <text x="488" y="271" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">발열(스로틀링)</text>
          <text x="488" y="288" textAnchor="middle" fontSize="12" fill="var(--muted)">팬 소리·바닥 온도·먼지 확인</text>
          <line x1="180" y1="296" x2="180" y2="309" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M180,314 l-4.5,-7 h9 z" fill="var(--muted)" />
          <text x="190" y="308" fontSize="12" fill="var(--muted)">아니오</text>
          <rect x="40" y="314" width="280" height="42" rx="8" fill="var(--card)" stroke="var(--line)" strokeDasharray="4 3" />
          <text x="180" y="334" textAnchor="middle" fontSize="12.5" fill="var(--ink)">네 가지 다 아니라면?</text>
          <text x="180" y="350" textAnchor="middle" fontSize="12" fill="var(--muted)">증상 그대로 검색 — 섹션 7의 요령으로</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: "컴퓨터가 느려요" 진단 순서도 — 위에서부터 하나씩 지워 나가기</p>
        <div className="tip">
          <b>순서가 곧 실력</b> "느리다"는 막연한 증상을 "부팅만 느린가? 켜 두면 점점
          느려지나? 항상 느린가?"로 쪼개는 순간, 용의자가 절반으로 줄어요.
          질문을 잘게 쪼개는 것 — 이게 문제 해결의 첫 기술입니다.
        </div>
      </Section>

      <Section n={2} title="작업 관리자로 범인 찾기" sub="추측 말고 데이터로 — 내 PC의 실시간 CCTV">
        <p>
          섹션 1의 용의자들을 <strong>감으로 찍지 않고 데이터로 확인</strong>하는 도구가
          바로 <strong>작업 관리자</strong>예요. 지금 어떤 프로그램이 CPU와 램을 얼마나
          쓰는지 실시간으로 보여 주는, 내 PC의 CCTV 관제실이죠.
        </p>
        <Code>{CODE_TASKMGR}</Code>
        <p>
          <strong>시작 앱 탭</strong>도 꼭 보세요. 부팅 때 자동 실행되는 프로그램 목록과
          "시작 시 영향"이 나오는데, 여기서 안 쓰는 프로그램을 <strong>사용 안 함</strong>으로
          바꾸는 것만으로 부팅이 눈에 띄게 빨라집니다. (프로그램 삭제가 아니라
          자동 실행만 끄는 거라 안전해요.)
        </p>
        <div className="warn">
          <b>프로세스 끝내기는 신중하게</b> 이름을 모르는 프로세스를 함부로 "작업 끝내기"
          하지 마세요. 윈도우 핵심 프로세스를 끊으면 시스템이 불안정해질 수 있어요.
          모르는 이름은 먼저 검색(섹션 7의 요령으로!)해서 정체를 확인한 다음 판단합니다.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 바로 <span className="kbd">Ctrl</span> +{' '}
          <span className="kbd">Shift</span> + <span className="kbd">Esc</span>를 눌러 보세요.
          프로세스 탭에서 <strong>메모리</strong> 열을 클릭해 정렬하면, 지금 이 학습 플랫폼을
          띄우고 있는 브라우저가 램을 얼마나 쓰는지 보여요. 탭을 몇 개 더 열고 닫으면서
          숫자가 변하는 걸 관찰해 보세요 — "탭 = 램"이 몸으로 느껴집니다.
        </div>
      </Section>

      <Section n={3} title="블루스크린 읽는 법 한 입" sub="파란 화면은 사고가 아니라 '사고 보고서'">
        <p>
          블루스크린(BSOD)은 윈도우가 <strong>"이대로 계속 돌면 데이터가 망가질 수 있어서
          내가 먼저 멈췄어"</strong>라고 알려 주는 화면이에요. 사고 현장이 아니라
          <strong> 사고 보고서</strong>인 셈이죠. 그러니 읽을 줄만 알면 무섭지 않습니다.
        </p>
        <Code>{CODE_BSOD}</Code>
        <p>
          한 번 뜨고 마는 블루스크린은 우연일 수 있어요. 하지만 <strong>같은 중지 코드로
          반복해서</strong> 뜬다면 패턴이 있는 거예요 — 특정 프로그램을 켤 때만? 게임 중에만?
          이 "언제"가 원인을 찾는 가장 큰 단서가 됩니다.
        </p>
        <div className="warn">
          <b>화면이 금방 꺼져서 못 읽었다면</b> 당황해서 코드를 못 적었어도 괜찮아요.
          블루스크린 기록은 윈도우 안에 남아 있어서 나중에 찾아볼 수 있고, 다음에 또 뜨면
          <strong> 폰 카메라로 찍는 것</strong>이 가장 확실합니다. 중지 코드와{' '}
          <span className="icode">.sys</span> 파일명, 딱 두 줄이면 충분해요.
        </div>
      </Section>

      <Section n={4} title="백업의 3-2-1 원칙" sub="문제 해결의 최종 보험 — 고치기 전에 지켜라">
        <p>
          지금까지는 "고치는 법"이었다면, 이번엔 <strong>"잃지 않는 법"</strong>이에요.
          아무리 잘 고쳐도 디스크가 갑자기 죽으면 몇 달치 과제가 통째로 사라질 수 있거든요.
          그래서 전 세계 엔지니어들이 약속처럼 쓰는 규칙이 <strong>3-2-1</strong>입니다.
        </p>
        <Code>{CODE_321}</Code>
        <p>
          눈치챘나요? 우리가 매일 쓰는 <strong>Gitea에 코드를 push하는 것</strong>이
          그 자체로 3-2-1의 큰 조각이에요. 내 노트북(원본)과 다른 매체·다른 장소(회사 서버)에
          복사본이 생기니까요. "커밋을 자주, push를 자주"가 괜히 개발자의 습관이 아닙니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 240" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="백업 3-2-1 원칙: 복사본 3개, 서로 다른 매체 2가지, 다른 장소 1곳">
          <text x="320" y="26" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">3 · 복사본은 총 3개 — 원본 1 + 백업 2</text>
          <polyline points="40,52 40,42 600,42 600,52" fill="none" stroke="var(--line)" strokeWidth="1.5" />
          <rect x="40" y="66" width="170" height="68" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="125" y="94" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">① 내 노트북</text>
          <text x="125" y="114" textAnchor="middle" fontSize="12" fill="var(--muted)">원본 · 작업 폴더</text>
          <rect x="235" y="66" width="170" height="68" rx="8" fill="var(--card)" stroke="var(--primary)" />
          <text x="320" y="94" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">② Gitea 서버</text>
          <text x="320" y="114" textAnchor="middle" fontSize="12" fill="var(--muted)">push한 내 코드</text>
          <rect x="430" y="66" width="170" height="68" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="515" y="94" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">③ 외장하드</text>
          <text x="515" y="114" textAnchor="middle" fontSize="12" fill="var(--muted)">복사본 하나 더</text>
          <rect x="40" y="158" width="12" height="12" rx="3" fill="var(--teal)" />
          <text x="60" y="168" fontSize="12.5" fill="var(--ink)">2 · 저장 매체는 서로 다른 2가지로 — 내 PC 디스크 + 서버·외장하드</text>
          <rect x="40" y="188" width="12" height="12" rx="3" fill="var(--amber)" />
          <text x="60" y="198" fontSize="12.5" fill="var(--ink)">1 · 그중 1개는 다른 장소에 — Gitea(회사 서버)가 매체·장소 1석 2조</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 3-2-1 백업 원칙 — 수습 과제 코드에 적용한 예</p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 진행 중인 수습 과제 폴더에서{' '}
          <span className="icode">git status</span>를 쳐 보세요. 커밋 안 된 변경이나
          push 안 된 커밋이 있다면, 그 코드는 아직 <strong>복사본 1개(내 노트북)</strong>짜리
          상태예요. 정리해서 push하는 순간 3-2-1에 한 걸음 다가갑니다 —
          오늘부터 퇴근 전 push를 습관으로!
        </div>
      </Section>

      <Section n={5} title="포맷과 윈도우 재설치 개요" sub="마지막 수단 = 컴퓨터의 이사">
        <p>
          점검해도 원인을 못 찾겠고 시스템이 전반적으로 엉망이라면, 마지막 카드가
          <strong> 포맷 후 재설치</strong>예요. 집이 너무 어질러져서 청소로는 답이 없을 때
          아예 이사를 가는 것과 같죠. 단, <strong>이사는 짐부터 싸는 게 순서</strong>입니다.
        </p>
        <Code>{CODE_REINSTALL}</Code>
        <div className="warn">
          <b>포맷은 되돌릴 수 없어요</b> 포맷 버튼을 누르는 순간 그 디스크의 파일은
          사라집니다. 그래서 순서가 생명이에요 — <strong>백업 확인(섹션 4) → 목록으로
          이중 체크 → 그다음에 포맷</strong>. "바탕화면에 뒀던 파일"과 "다운로드 폴더",
          그리고 <strong>Git에 push 안 한 코드</strong>가 단골 실종자이니 꼭 챙기세요.
        </div>
        <p>
          개발자에게도 익숙한 그림이에요. 우리가 쓰는 <strong>Docker</strong>가 바로
          "언제든 컨테이너를 지우고 이미지에서 새로 깔끔하게 시작"하는 도구거든요.
          재설치의 고통을 아는 사람들이 "처음부터 다시 만들기 쉬운 환경"을 발명한 겁니다.
        </p>
      </Section>

      <Section n={6} title="재부팅이 만능인 이유" sub="'껐다 켜기'의 과학 — 상태 초기화">
        <p>
          전 세계 IT 상담원의 첫마디, "껐다 켜 보셨어요?"에는 진짜 과학이 있어요.
          핵심 단어는 <strong>상태(state)</strong>입니다. 컴퓨터가 오래 켜져 있으면 램 위에
          프로그램들의 찌꺼기와 꼬임이 조금씩 쌓이는데, 재부팅은 이걸 한 방에 비워요.
        </p>
        <Code>{CODE_REBOOT}</Code>
        <p>
          칠판에 필기가 몇 겹씩 덧쓰여 알아볼 수 없게 됐을 때, 지우개로 부분 부분 지우는
          것보다 <strong>물걸레로 싹 밀고 새로 쓰는 게</strong> 빠른 것과 같아요.
          램은 전원이 꺼지면 저절로 비워지는 칠판이라, 재부팅이 곧 물걸레질입니다.
        </p>
        <div className="tip">
          <b>단, 재부팅은 진통제</b> 아픈 원인을 없애는 게 아니라 증상을 지우는 거예요.
          한 달에 한 번이면 그러려니 해도, <strong>매일 재부팅해야 버틴다면</strong> 원인이
          따로 있다는 신호 — 섹션 1~2로 돌아가 범인을 추적할 때입니다. 서버도 똑같아요.
          매일 재시작해야 하는 서비스는 어딘가 메모리가 새고 있다는 뜻이거든요.
        </div>
      </Section>

      <Section n={7} title="문제를 검색하는 요령" sub="에러 메시지 그대로 + 따옴표 — 개발자의 검색법">
        <p>
          여기까지 왔는데도 모르겠다면? 괜찮아요. <strong>세상 어딘가에 같은 문제를 먼저
          겪은 사람이 거의 반드시 있습니다.</strong> 문제는 그 사람의 글을 찾아내는 검색
          실력이고, 요령은 딱 하나예요 — <strong>에러 메시지를 내 말로 번역하지 말 것</strong>.
        </p>
        <Code>{CODE_SEARCH}</Code>
        <p>
          왜 따옴표일까요? 따옴표 없이 검색하면 단어들이 뿔뿔이 흩어진 글도 다 걸리지만,
          <strong> "따옴표로 감싼 문장"은 그 문장이 통째로 들어간 글만</strong> 찾아 줍니다.
          같은 에러를 겪고 같은 메시지를 붙여넣은 사람의 글 — 즉 정답 후보만 남는 거죠.
        </p>
        <p>
          그리고 이건 그대로 <strong>개발자의 디버깅 습관</strong>이에요. React 콘솔의
          빨간 에러도, Spring Boot의 스택트레이스도, PostgreSQL의 에러 코드도
          전부 "그대로 복사 + 따옴표 + 상황 키워드"로 검색합니다. 신입과 고수의 차이는
          에러를 안 만나는 게 아니라, <strong>에러 메시지를 끝까지 읽고 그대로 검색하는
          습관</strong>에 있어요.
        </p>
        <Code>{CODE_DEBUG_MINDSET}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 이 페이지에서 <span className="kbd">F12</span>를 눌러
          개발자 도구의 <span className="kbd">Console</span> 탭을 열어 두고, 우리 플랫폼을
          이리저리 돌아다녀 보세요. 노란 경고나 빨간 에러가 보이면 한 줄을 복사해서
          따옴표로 감싸 검색해 보는 거예요. 남의 컴퓨터가 아닌 <strong>우리가 매일 쓰는
          플랫폼의 메시지</strong>로 하는 첫 디버깅 검색 — 이보다 좋은 연습이 없습니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🔧 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분은 느려진 컴퓨터 앞에서 <strong>증상을 쪼개고 → 데이터(작업 관리자)로
            확인하고 → 단서(에러 코드)를 모아 → 그대로 검색</strong>하는 사람이 됐어요.
            그리고 이 순서는 개발자가 버그를 잡는 순서와 정확히 같습니다. 다음은{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서
            "인터넷이 안 될 때"를 진단하는 눈을 키우고, 배운 검색 요령은 이번 주{' '}
            <Link to="/assignments"><strong>수습 과제</strong></Link>의 에러를 만났을 때
            바로 써먹어 보세요 — 진통제(재부팅)보다 원인 추적이 먼저라는 것, 잊지 말고요!
          </p>
        </div>
      </div>
    </div>
  );
}
