// 이 파일이 하는 일: "캡처와 화면 녹화" 코스 — 스크린샷 한 장이 왜 개발자의
// 소통 무기인지에서 출발해, 윈도우 기본 캡처 → 창/스크롤 캡처 → GIF/녹화 →
// 주석 달기 → 개인정보 가리기 → 실전 버그 리포트 과제까지 7개 섹션으로 안내하는 정적 학습 페이지.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip, warn 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_WORDS_VS_SHOT = `말로 하는 버그 리포트 vs 캡처 한 장

[말로만]                          [캡처 한 장]
"버튼 누르면 뭔가 이상해요"        에러 화면 + 빨간 화살표가
"어제는 됐는데 오늘 안 돼요"        정확히 그 버튼을 가리킴
"에러가 떴다 사라졌어요"           F12 콘솔의 에러 메시지까지 박제

→ 읽는 사람(멘토·팀원)이 되물을 게 없어야 좋은 리포트예요.
  "천 마디 말보다 캡처 한 장" — 개발팀의 진리입니다.`;

const CODE_WIN_SHIFT_S = `Win + Shift + S — 누르는 순간 화면이 어두워지며 4가지 모드가 떠요

┌────────┬────────┬────────┬────────┐
│ 사각형  │ 자유형  │  창    │ 전체   │
│ 드래그로│ 마우스로│ 클릭한 │ 모니터 │
│ 영역선택│ 그린모양│ 창 통째│ 통째로 │
└────────┴────────┴────────┴────────┘
        (실무에서 90%는 '사각형' 모드!)

캡처하면 → 클립보드에 복사됨 (파일로 자동 저장 X)
  · 바로 붙여넣기: Ctrl + V  (PR 코멘트·채팅·문서 어디든)
  · 파일로 저장/편집: 우하단 알림 클릭 → 캡처 도구에서 저장

친구들: PrtScn(전체 화면), Alt + PrtScn(현재 창만) → 둘 다 클립보드행`;

const CODE_WINDOW_TIPS = `상황별 캡처 요령 치트시트

상황                      방법
──────────────────────────────────────────────────
창 하나만 깔끔하게        Alt + PrtScn (활성 창만, 배경 안 섞임)
                          또는 Win+Shift+S의 '창' 모드
길게 스크롤되는 페이지     F12 → Ctrl+Shift+P → "screenshot" 입력
                          → "Capture full size screenshot" 선택
                          (브라우저가 페이지 전체를 한 장으로 저장!)
드롭다운·툴팁이 열린 순간  Win+Shift+S는 누르는 순간 메뉴가 닫힘
                          → PrtScn으로 전체를 찍고 나중에 잘라내기
캡처를 5초 뒤에           캡처 도구(Snipping Tool) 앱 → 지연 타이머`;

const CODE_RECORD_TOOLS = `화면 녹화 도구 3종 비교 — "가끔만 일어나는 버그"의 결정적 증거

도구                 결과물       특징
──────────────────────────────────────────────────────
Win + G (게임 바)    MP4 영상     윈도우 내장, 설치 불필요.
                                  Win+Alt+R로 녹화 시작/정지
ScreenToGif          GIF          가볍고 무료. 프레임 단위 편집 가능,
                                  채팅·PR에 바로 재생돼서 개발자 최애
캡처 도구(Win11)     MP4 영상     캡처 도구 앱의 '녹화' 탭 —
                                  영역 지정 녹화 지원

언제 뭘 쓰나?
· 3~10초짜리 "누르면 이렇게 돼요" → GIF (받는 사람이 클릭 없이 봄)
· 30초 넘는 재현 절차, 소리 필요  → MP4`;

const CODE_ANNOTATE = `주석의 3종 세트 — 이것만 있으면 충분해요

① 화살표  →  "여기!" 시선을 한 점으로 모음
② 박스    □  문제 영역을 테두리로 강조
③ 텍스트  Aa "기대: 저장됨 / 실제: 500 에러" 한 줄 설명

어디서 다나?
· 그림판: 캡처 붙여넣기(Ctrl+V) → 도형·텍스트 도구 (설치 불필요)
· 캡처 도구: 캡처 직후 알림 클릭 → 펜·형광펜
· ScreenToGif: 프레임 위에 직접 그리기

색은 빨강 하나로 통일하세요 — 주석이 알록달록하면
어디를 보라는 건지 오히려 헷갈립니다.`;

const CODE_MASK_CHECKLIST = `공유 전 3초 점검 체크리스트 — 캡처에 이런 게 찍혀 있진 않나요?

□ 주소창·설정 화면의 토큰, API 키, 비밀번호
□ F12 Network 탭의 Authorization 헤더, 쿠키 값
□ 이메일 주소, 전화번호, 실명 (내 것도, 남의 것도)
□ .env 파일, DB 접속 문자열이 열려 있는 에디터 탭
□ 배경의 다른 창 — 채팅, 메일 미리보기

가리는 법: 그림판에서 '완전 불투명한' 단색 박스로 덮기.
모자이크·흐림은 복원되는 사례가 있어요 — 덮을 땐 확실하게!`;

const CODE_ASSIGNMENT = `과제: 우리 학습 플랫폼 버그 리포트 캡처 1장 만들기

① 대상 찾기 — 우리 플랫폼에서 "고치고 싶은 것" 하나를 고르세요.
   진짜 버그가 없다면 개선하고 싶은 UI(정렬이 어긋난 버튼,
   좁은 여백, 어색한 문구)도 OK!
② Win+Shift+S 사각형 모드로 문제 부분이 잘 보이게 캡처
③ 그림판에서 주석 3종 세트:
   · 빨간 박스로 문제 영역 표시
   · 화살표로 정확한 지점 지시
   · 텍스트로 "기대한 동작 / 실제 동작" 한 줄씩
④ 3초 점검(섹션 6 체크리스트) 후 PNG로 저장
⑤ Gitea(edu.awesomedevapp.com:3000)의 과제 저장소 이슈에
   이미지 첨부해서 제출 — 이슈 본문에 재현 절차도 번호로!

멘토는 "캡처만 보고 되묻지 않고 이해되는가"를 기준으로 봅니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'Win+Shift+S' },
  { n: 3, label: '창·스크롤 캡처' },
  { n: 4, label: 'GIF·화면 녹화' },
  { n: 5, label: '주석 달기' },
  { n: 6, label: '개인정보 가리기' },
  { n: 7, label: '실습 과제' },
];

export default function ToolCapturePage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 부록 · 도구</div>
        <h1>캡처와 화면 녹화<br />— 천 마디 말보다 스크린샷 한 장</h1>
        <p>
          개발자의 하루는 "이거 보세요"의 연속이에요 — PR 리뷰, 버그 리포트, 질문 채팅
          전부 캡처 한 장이 있고 없고에 따라 전달력이 하늘과 땅 차이입니다.
          이 코스에서는 윈도우 기본 도구만으로 <strong>찍고, 녹화하고, 주석 달고,
          안전하게 공유하는</strong> 전 과정을 손에 익혀요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 40분</span>
          <span className="chip">실습 2개 + 제출 과제 1개</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="PR·버그 리포트의 공용어">
        <p>
          여러분이 앞으로 어썸데브에서 코드를 올리면(<strong>PR</strong>), 리뷰하는 사람이
          가장 먼저 궁금해하는 건 "그래서 화면이 어떻게 바뀌었는데?"예요. 말로 세 줄 쓰는
          것보다 <strong>변경 전/후 캡처 두 장</strong>을 붙이는 쪽이 백 배 빠르게 전달됩니다.
          버그 리포트도 마찬가지 — 에러는 목격자의 증언보다 <strong>현장 사진</strong>이
          제일 확실한 증거거든요.
        </p>
        <Code>{CODE_WORDS_VS_SHOT}</Code>
        <p>
          캡처는 "잘하면 좋은 기술"이 아니라 <strong>협업의 기본 예의</strong>에 가까워요.
          받는 사람이 내 화면을 상상하게 만들지 말고, 그냥 보여 주세요. 이 코스의 목표는
          단순합니다 — <strong>생각과 동시에 손이 캡처 단축키를 누르는 상태</strong>가 되는 것.
        </p>
        <div className="tip">
          <b>미리 보기</b> Gitea(<span className="icode">edu.awesomedevapp.com:3000</span>)의
          아무 저장소나 열어 이슈·PR에 이미지가 첨부된 걸 구경해 보세요. 잘 쓴 리포트가
          어떻게 생겼는지 눈에 담아 두면, 섹션 7 과제가 훨씬 쉬워져요.
        </div>
      </Section>

      <Section n={2} title="윈도우 기본 캡처 마스터" sub="Win+Shift+S — 손이 외울 때까지">
        <p>
          별도 프로그램 설치 없이, 윈도우에 이미 최고의 캡처 도구가 들어 있어요.
          <span className="kbd">Win</span> + <span className="kbd">Shift</span> +{' '}
          <span className="kbd">S</span> — 이 세 키가 여러분의 카메라 셔터입니다.
        </p>
        <Code>{CODE_WIN_SHIFT_S}</Code>
        <p>
          핵심은 <strong>캡처 결과가 클립보드로 간다</strong>는 점이에요. 복사(Ctrl+C)한
          텍스트처럼, 캡처한 이미지도 <span className="kbd">Ctrl</span> +{' '}
          <span className="kbd">V</span>로 채팅창·이슈·문서에 바로 붙습니다.
          "찍기 → 붙이기"까지 3초 — 이 속도가 캡처를 습관으로 만들어 줘요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ①</b> 지금 바로 <span className="kbd">Win+Shift+S</span>를 눌러
          이 코스의 히어로 영역(맨 위 제목 부분)을 사각형 모드로 캡처하고, 그림판을 열어{' '}
          <span className="kbd">Ctrl+V</span>로 붙여 보세요. 10초 안에 되면 합격!
          이어서 <span className="kbd">Alt+PrtScn</span>도 눌러 보고 결과가 어떻게 다른지 비교해 보세요.
        </div>
      </Section>

      <Section n={3} title="특정 창·스크롤 캡처 요령" sub="사각형 드래그만으로는 부족한 순간들">
        <p>
          기본 사각형 캡처로 90%는 해결되지만, 실무에선 까다로운 상황이 꼭 나와요.
          "브라우저 창만 깔끔하게", "화면보다 긴 페이지를 통째로", "마우스를 올려야만
          보이는 메뉴를" — 이럴 때 쓰는 요령들입니다.
        </p>
        <Code>{CODE_WINDOW_TIPS}</Code>
        <p>
          특히 <strong>스크롤 전체 캡처</strong>는 프론트엔드 작업에서 자주 필요해요.
          우리 React 페이지처럼 세로로 긴 화면을 리뷰받을 때, 조각 캡처 다섯 장보다
          전체 한 장이 훨씬 보기 좋거든요. 브라우저 개발자 도구(<span className="kbd">F12</span>)에
          숨어 있는 기능이라 아는 사람만 씁니다 — 이제 여러분도 아는 사람이에요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> 이 페이지에서 <span className="kbd">F12</span> →{' '}
          <span className="kbd">Ctrl+Shift+P</span> → <span className="icode">screenshot</span>이라고
          입력 → <strong>Capture full size screenshot</strong>을 선택해 보세요.
          지금 보고 있는 이 긴 코스 페이지 전체가 PNG 한 장으로 다운로드됩니다.
          히어로부터 마무리 카드까지 다 들어갔는지 열어서 확인!
        </div>
      </Section>

      <Section n={4} title="GIF와 화면 녹화" sub="'가끔만 일어나는 버그'의 결정적 증거">
        <p>
          정지 화면으로는 설명이 안 되는 버그가 있어요. "버튼을 <strong>빠르게 두 번</strong>{' '}
          누르면 목록이 사라져요" 같은 것들 — 사진으로는 범행 순간을 못 잡죠.
          이럴 땐 <strong>동영상(또는 GIF)</strong>이 CCTV 역할을 합니다.
          재현 절차를 글로 열 줄 쓰는 대신, 재현하는 손을 그대로 녹화해서 보여 주는 거예요.
        </p>
        <Code>{CODE_RECORD_TOOLS}</Code>
        <p>
          개발자들이 GIF를 유독 좋아하는 이유가 있어요. 채팅이나 Gitea 이슈에 올리면{' '}
          <strong>클릭 없이 자동 재생</strong>되거든요. 받는 사람이 플레이어를 열 필요도,
          소리를 켤 필요도 없이 스크롤하다가 바로 봅니다. 짧은 버그 재현엔 GIF,
          긴 시연이나 설명이 필요하면 MP4 — 이 기준 하나만 기억하세요.
        </p>
        <div className="tip">
          <b>녹화 전 10초 준비</b> 브라우저 탭을 정리하고, 재현 절차를 머릿속으로 한 번
          리허설한 뒤 녹화 버튼을 누르세요. 30초짜리 깔끔한 영상이
          헤매는 3분짜리 영상보다 훨씬 좋은 리포트입니다.
        </div>
      </Section>

      <Section n={5} title="캡처에 주석 달기" sub="화살표와 박스는 캡처의 자막이다">
        <p>
          캡처를 받아 본 사람의 첫 반응은 의외로 이거예요 — <strong>"그래서 어딜 보라는
          거죠?"</strong> 화면엔 버튼이 스무 개인데 문제는 하나거든요. 주석은 캡처에
          자막을 다는 일입니다. 시선을 문제 지점으로 데려다주는 내비게이션이에요.
        </p>
        <svg
          className="diagram"
          viewBox="0 0 640 360"
          xmlns="http://www.w3.org/2000/svg"
          role="img"
          aria-label="주석이 달린 버그 리포트 캡처 예시 — 문제 영역을 두른 빨간 박스, 정확한 지점을 가리키는 화살표, 기대와 실제를 적은 텍스트 주석"
        >
          <rect x="24" y="46" width="360" height="270" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="24" y1="78" x2="384" y2="78" stroke="var(--line)" strokeWidth="1.5" />
          <circle cx="42" cy="62" r="4" fill="var(--muted)" />
          <circle cx="56" cy="62" r="4" fill="var(--muted)" />
          <circle cx="70" cy="62" r="4" fill="var(--muted)" />
          <text x="90" y="66" fontSize="12" fill="var(--muted)">캡처한 화면</text>

          <text x="44" y="104" fontSize="13" fill="var(--ink)">주문서 작성</text>
          <rect x="44" y="118" width="320" height="26" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="56" y="136" fontSize="12" fill="var(--muted)">수량 입력</text>
          <rect x="44" y="154" width="320" height="26" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="56" y="172" fontSize="12" fill="var(--muted)">배송지 입력</text>

          <rect x="44" y="200" width="150" height="34" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="60" y="222" fontSize="12" fill="var(--muted)">취소</text>
          <rect x="214" y="200" width="150" height="34" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="230" y="222" fontSize="12" fill="var(--ink)">저장하기</text>

          <rect x="204" y="190" width="170" height="54" rx="8" fill="none" stroke="var(--rose)" strokeWidth="2.5" />
          <text x="44" y="268" fontSize="12" fill="var(--rose)">500 Internal Server Error</text>
          <text x="44" y="290" fontSize="12" fill="var(--muted)">저장 결과가 화면에 반영되지 않음</text>

          <text x="404" y="66" fontSize="13" fontWeight="600" fill="var(--ink)">주석 3종 세트</text>

          <line x1="470" y1="120" x2="380" y2="205" stroke="var(--rose)" strokeWidth="2.5" strokeLinecap="round" />
          <polyline points="380,205 396,203 388,190" fill="none" stroke="var(--rose)" strokeWidth="2.5" strokeLinecap="round" />

          <circle cx="416" cy="112" r="9" fill="none" stroke="var(--rose)" strokeWidth="1.5" />
          <text x="412" y="117" fontSize="12" fill="var(--rose)">1</text>
          <text x="434" y="117" fontSize="13" fill="var(--ink)">화살표 — 정확한 지점 지시</text>

          <circle cx="416" cy="150" r="9" fill="none" stroke="var(--rose)" strokeWidth="1.5" />
          <text x="412" y="155" fontSize="12" fill="var(--rose)">2</text>
          <text x="434" y="155" fontSize="13" fill="var(--ink)">빨간 박스 — 문제 영역 강조</text>

          <circle cx="416" cy="188" r="9" fill="none" stroke="var(--rose)" strokeWidth="1.5" />
          <text x="412" y="193" fontSize="12" fill="var(--rose)">3</text>
          <text x="434" y="193" fontSize="13" fill="var(--ink)">텍스트 — 기대 / 실제 한 줄</text>

          <rect x="404" y="212" width="212" height="86" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="5 4" />
          <text x="418" y="236" fontSize="12" fill="var(--muted)">여백에 적는 한 줄</text>
          <text x="418" y="258" fontSize="12.5" fill="var(--ink)">기대: 저장 후 목록으로 이동</text>
          <text x="418" y="280" fontSize="12.5" fill="var(--ink)">실제: 500 에러, 화면 그대로</text>

          <text x="24" y="336" fontSize="12" fill="var(--muted)">색은 빨강 하나로 통일 · PNG로 저장</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>
          그림: 빨간 박스 · 화살표 · 기대/실제 한 줄 — 되묻지 않아도 되는 캡처
        </p>
        <Code>{CODE_ANNOTATE}</Code>
        <p>주석 달기의 순서는 늘 같아요.</p>
        <ol className="olist">
          <li>캡처를 그림판에 붙여넣는다 (<span className="kbd">Ctrl+V</span>)</li>
          <li>문제 영역에 <strong>빨간 박스</strong>를 두른다</li>
          <li>헷갈릴 여지가 있으면 <strong>화살표</strong>로 정확한 지점을 찍는다</li>
          <li>여백에 <strong>"기대: ○○ / 실제: ××"</strong> 한 줄을 적는다</li>
          <li>PNG로 저장한다 (JPG는 글자가 뭉개질 수 있어요)</li>
        </ol>
        <p>
          이 네 가지가 들어간 캡처는 그 자체로 완결된 버그 리포트예요. 받는 사람이
          "어디서요? 원래는 어떻게 돼야 하는데요?"라고 되물을 일이 없으니까요.
        </p>
      </Section>

      <Section n={6} title="개인정보 가리기 습관" sub="공유 버튼 누르기 전, 3초만 멈추기">
        <div className="warn">
          <b>실제로 일어나는 사고</b> — 개발자가 무심코 올린 캡처 한 장에{' '}
          <strong>API 토큰</strong>이 찍혀 있어 서비스 전체 키를 재발급한 사례,
          F12 Network 탭 캡처에 <strong>로그인 쿠키</strong>가 노출돼 계정이 도용된 사례,
          배경 채팅창에 고객 <strong>이메일 목록</strong>이 보여 개인정보 사고로 번진 사례 —
          전부 "설마 이런 것까지 찍혔겠어?" 하는 방심에서 시작됐어요.
          캡처는 내 화면의 <strong>모든 것</strong>을 담습니다. 내가 보라고 한 곳만 담는 게 아니라요.
        </div>
        <Code>{CODE_MASK_CHECKLIST}</Code>
        <p>
          특히 우리처럼 <strong>Gitea 이슈</strong>에 캡처를 올리는 환경에서는, 한 번 올라간
          이미지가 팀원 전체에게 보이고 기록으로 남아요. 습관을 만드는 게 답입니다 —
          <strong> 붙여넣기 전에 무조건 3초 훑어보기.</strong> 셔터를 누르는 손보다
          점검하는 눈이 반 박자 늦게 따라오면 사고는 안 납니다.
        </p>
        <div className="tip">
          <b>가릴 땐 확실하게</b> 흐림(블러)·모자이크 처리는 도구로 복원된 사례가 있어요.
          토큰이나 비밀번호는 그림판의 <strong>완전 불투명한 단색 박스</strong>로 덮으세요.
          제일 안전한 건 애초에 민감한 창을 닫고 다시 찍는 것!
        </div>
      </Section>

      <Section n={7} title="실습 — 버그 리포트 캡처 제출" sub="이 코스의 기술을 전부 한 장에 담기">
        <p>
          이제 배운 걸 전부 꺼낼 시간이에요. 우리 학습 플랫폼(지금 보고 있는 이 서비스!)을
          돌아다니면서 <strong>버그 리포트용 캡처 1장</strong>을 완성해 과제로 제출합니다.
          섹션 1의 "되묻지 않아도 되는 리포트"가 목표예요.
        </p>
        <Code>{CODE_ASSIGNMENT}</Code>
        <p>
          "버그를 못 찾으면 어떡하죠?"라는 걱정은 접어 두세요 — 이 과제의 채점 기준은
          버그의 심각도가 아니라 <strong>전달력</strong>이에요. 사소한 여백 문제라도
          박스·화살표·기대/실제 한 줄이 제대로 들어가 있으면 만점입니다.
          반대로 진짜 버그를 찾았어도 어딜 보라는 건지 모르겠는 캡처라면 다시!
        </p>
        <div className="tip">
          <b>한 단계 더</b> 여유가 있다면 같은 문제를 <strong>ScreenToGif로 3~5초 GIF</strong>로도
          만들어 이슈에 함께 첨부해 보세요. 정지 화면 + 움직이는 재현 영상 조합은
          실무 버그 리포트의 정석입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📸 여기까지 왔다면</h3>
          <p className="muted">
            이제 <strong>찍고(Win+Shift+S) → 담고(스크롤·창 캡처) → 움직이고(GIF·녹화) →
            가리키고(주석) → 지키는(개인정보 점검)</strong> 다섯 동작이 손에 들어왔어요.
            이 기술은 앞으로 모든 코스의 과제 제출에서 계속 쓰입니다.
            다음은 캡처를 첨부할 무대 — <Link to="/learn/git-deep"><strong>Git과 Gitea</strong></Link> 코스에서
            이슈·PR에 리포트를 올리는 협업 흐름을 이어서 배워 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
