// 이 파일이 하는 일: "AI 도구와 함께 코딩하기" 코스 — 자동완성·챗 어시스턴트 같은
// AI 코딩 도구를 '똑똑한 후배'처럼 부리는 법을 7개 섹션으로 안내하는 정적 학습 페이지.
// (AI 도구의 시대 → 잘 시키는 법 → 검증 습관 → 학습 활용 → 회사 보안 규칙 → 잘하는 것/못하는 것 → 프롬프트 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip, warn 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 프롬프트 예시·비교표는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 프롬프트 예시 · 비교표 상수들 ──

const CODE_TOOL_KINDS = `AI 코딩 도구, 크게 두 갈래

① 자동완성형 — 에디터 안에서 다음 코드를 '이어 써 주는' 도구
   예) GitHub Copilot, Cursor의 탭 자동완성
   느낌: 옆에서 내 타자를 지켜보다가 "이거 치려던 거지?" 하고
        회색 글씨로 미리 보여주는 짝꿍

② 챗 어시스턴트형 — 대화창에 질문하면 코드·설명으로 답하는 도구
   예) ChatGPT, Claude, Gemini
   느낌: "이 에러 뭐야?", "이 함수 설명해 줘" 하고
        말을 걸 수 있는 24시간 대기 선배

→ 공통점: 둘 다 '그럴듯한 답'을 만드는 기계이지,
  '항상 맞는 답'을 보장하는 기계가 아니에요. (섹션 3에서 자세히!)`;

const CODE_BAD_GOOD_PROMPT = `같은 문제, 다른 질문 — 답의 품질이 하늘과 땅

나쁜 질문 ✗
────────────────────────────────
"로그인이 안 돼요. 고쳐 주세요."

→ AI: "음... 코드를 보여주시면..." (추측만 잔뜩)

좋은 질문 ✓
────────────────────────────────
[맥락] React 프론트에서 Spring Boot 백엔드로 로그인 요청을 보내는데,
[증상] 브라우저 콘솔에 CORS 에러가 뜨고 응답이 안 와요.
[코드] fetch('http://localhost:8080/api/login', {...}) ← 이 부분
[시도] 백엔드 컨트롤러에 @CrossOrigin은 붙여 봤어요.
[제약] Spring Boot 3 기준으로, 설정 파일로 해결하고 싶어요.

→ AI: 원인 후보를 좁혀서 바로 쓸 수 있는 답을 줌`;

const CODE_PROMPT_TEMPLATE = `좋은 질문 3요소 — 어디서 많이 본 구조죠?

1) 맥락  — 뭘 만들다가, 어떤 환경에서 (React? Spring Boot? Docker?)
2) 제약  — 어떤 조건으로 답해야 하는지 (버전, 라이브러리, 우리 규칙)
3) 예시  — 실제 코드·에러 메시지·기대한 결과 vs 실제 결과

이거, 30분 룰에서 배운 "멘토에게 질문하는 법"과 완전히 같아요!
  "○○을 하려고 △△를 해봤는데 □□가 됩니다. 제 생각엔..."

사람에게 잘 묻는 사람이 AI에게도 잘 묻습니다.
질문 실력은 하나예요 — 상대가 사람이냐 AI냐만 다를 뿐.`;

const CODE_VERIFY_CHECKLIST = `AI 답변 검증 4단계 — 복붙 전에 반드시!

□ 1. 읽고 설명할 수 있는가?
     한 줄 한 줄 "이 줄은 ~하는 코드"라고 말할 수 있어야 통과.
     설명 못 하는 줄이 있으면 → AI에게 "이 줄 뭐 하는 거야?" 되묻기.

□ 2. 우리 프로젝트에 맞는가?
     AI는 우리 코드베이스를 몰라요. 변수명·폴더 구조·버전이
     우리 것과 맞는지 눈으로 대조.

□ 3. 실제로 돌아가는가?
     로컬에서 실행 → 정상 케이스 1개 + 이상한 입력 1개는 꼭 테스트.

□ 4. 근거를 교차 확인했는가?
     낯선 API·설정이면 공식 문서를 한 번 열어보기.
     AI는 존재하지 않는 함수도 아주 자신 있게 지어냅니다(할루시네이션).`;

const CODE_LEARNING_PROMPTS = `AI를 '선생님 모드'로 쓰는 프롬프트 모음

설명 요청 — 답 대신 이해를 달라고 하기
────────────────────────────────
"이 코드를 고쳐 주지 말고, 왜 에러가 나는지
 원리부터 차근차근 설명해 줘. 나는 고등학생 개발 수습이야."

"useEffect가 뭔지 택배 배송에 비유해서 설명해 줘."

퀴즈 요청 — 배운 걸 시험 문제로 돌려받기
────────────────────────────────
"방금 배운 React 상태 관리에 대해 5문제 퀴즈를 내 줘.
 내가 답하면 채점하고, 틀린 것만 해설해 줘."

"이 함수에 버그를 하나 심어서 보여줘.
 내가 찾아볼게. 못 찾으면 힌트를 하나씩 줘."

핵심: "정답 줘"가 아니라 "내가 풀게 도와줘"라고 시키면
AI는 세상에서 제일 참을성 있는 과외 선생님이 됩니다.`;

const CODE_SECURITY_RULES = `AWESOMEDEV AI 사용 보안 수칙 — 넣기 전에 3초만 생각!

절대 AI 입력창에 넣으면 안 되는 것
────────────────────────────────
✗ 고객사 프로젝트의 소스 코드 (계약으로 금지된 경우가 많아요)
✗ 비밀번호, API 키, 토큰, .env 파일 내용
✗ DB 접속 정보, 서버 IP + 계정 조합
✗ 고객·회원의 개인정보 (이름, 전화번호, 이메일...)
✗ 회사 내부 문서, 계약서, 단가표

넣어도 되는 것
────────────────────────────────
○ 교재용 학습 플랫폼(mirim-app)처럼 공개 가능한 학습 코드
○ 문법 질문, 일반적인 에러 메시지 (경로·키 값은 지우고!)
○ 내가 연습용으로 직접 짠 코드

애매하면? → 넣지 말고 멘토에게 먼저 물어보기. 이것도 30분 룰!`;

const CODE_GOOD_BAD_AT = `AI가 잘하는 것 vs 못하는 것 — 역할 분담표

잘하는 것 (믿고 맡기기)          못하는 것 (내가 챙기기)
────────────────────────    ────────────────────────
반복적인 보일러플레이트 코드      우리 프로젝트 전체 구조 파악
문법 에러·오타 찾기              "이 기능이 정말 필요한가?" 판단
낯선 개념을 눈높이 설명           최신 버전·어제 나온 변경사항
코드에 주석·이름 다듬기           보안·개인정보 판단 (책임은 사람!)
"이런 방법도 있어" 선택지 제시     팀 컨벤션·고객사와의 약속
테스트 케이스 아이디어            없는 함수를 지어내지 않기(가끔 지어냄)

비유하면: AI는 힘 좋고 지식 많은 신입 알바생.
시키면 빨리 하는데, 가게 사정은 모르고 가끔 자신만만하게 틀려요.
→ 일을 시키는 것도, 결과를 검수하는 것도, 책임지는 것도 '사장'인 나.`;

const CODE_ERROR_PRACTICE = `실습: 이 에러, AI에게 어떻게 물어볼까?

상황 — React 개발 서버를 켰더니 콘솔에:
────────────────────────────────
TypeError: Cannot read properties of undefined (reading 'map')
    at CourseList (CourseList.jsx:12)
────────────────────────────────

1단계(나쁜 예): "에러 났어요 고쳐줘" → 이러면 AI도 점쟁이가 됩니다.

2단계(직접 써 보기): 아래 빈칸을 채워 프롬프트를 완성하세요.

  [맥락] 저는 React로 ______를 만들고 있어요.
  [증상] 화면이 하얗게 나오고 콘솔에 이 에러가 떠요: (에러 전문 붙여넣기)
  [코드] CourseList.jsx 12번째 줄 근처 코드: (해당 부분 붙여넣기)
  [시도] 저는 ______를 해봤는데 ______였어요.
  [질문] 왜 undefined에서 map을 못 읽는다는 건지 원리도 설명해 주세요.

3단계(검증): AI 답을 받으면 섹션 3의 체크리스트 4단계로 검증!
   힌트: 이 에러의 단골 원인은 "데이터가 도착하기 전에 화면을 그려서"예요.
   AI의 답이 이 방향인지 확인해 보세요.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'AI 코딩 도구의 시대' },
  { n: 2, label: '잘 시키는 법 = 좋은 질문' },
  { n: 3, label: '검증하는 습관' },
  { n: 4, label: '학습에 쓰는 법' },
  { n: 5, label: '회사 보안 규칙' },
  { n: 6, label: '잘하는 것·못하는 것' },
  { n: 7, label: '실습: 에러 질문하기' },
];

export default function AiToolsPage() {
  return (
    <div>
      {/* 히어로: AI는 대신 커주는 지팡이가 아니라, 잘 부려야 하는 도구 */}
      <div className="hero">
        <div className="eyebrow">Course · 소프트웨어</div>
        <h1>AI 도구와 함께 코딩하기<br />— 똑똑한 후배를 부리는 법</h1>
        <p>
          요즘 개발자 옆에는 코드를 대신 써 주겠다는 AI가 늘 대기 중이에요. 이 코스에서는
          AI에게 <strong>잘 시키고, 답을 의심하고, 나의 공부로 바꾸는</strong> 세 가지 기술을
          배웁니다 — 도구는 도구일 뿐, 실력과 책임은 언제나 내 것이니까요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 2개</span>
          <span className="chip">준비물: AI 챗 하나 + 우리 플랫폼</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="AI 코딩 도구의 시대" sub="자동완성과 챗 어시스턴트, 두 명의 조수">
        <p>
          몇 년 사이 개발 풍경이 확 바뀌었어요. 에디터가 다음 줄을 <strong>미리 써 주고</strong>,
          모르는 에러는 검색 대신 <strong>AI에게 물어보는</strong> 게 일상이 됐죠.
          여러분이 취업할 즈음엔 "AI 없이 코딩"이 "내비 없이 초행길 운전"만큼 드문 일이 될 거예요.
        </p>
        <Code>{CODE_TOOL_KINDS}</Code>
        <p>
          그런데 여기서 착각하면 안 되는 게 하나 있어요. AI는 <strong>운전대를 잡은 내비게이션</strong>이
          아니라 <strong>조수석의 내비게이션</strong>입니다. 길을 제안하지만, 핸들을 꺾고 사고의 책임을
          지는 건 운전자 — 즉 <strong>나</strong>예요. 이 코스 전체가 이 한 문장의 각론입니다.
        </p>
        <div className="tip">
          <b>미리 보기</b> 이 코스의 실습은 두 개예요. 섹션 5에서 우리 플랫폼 코드로
          "넣어도 되는 것" 판별 연습, 섹션 7에서 에러 메시지 프롬프트 작성 연습.
          둘 다 지금 쓰는 PC에서 바로 해볼 수 있습니다.
        </div>
      </Section>

      <Section n={2} title="잘 시키는 법 = 좋은 질문" sub="맥락·제약·예시 — 30분 룰의 질문법 그대로">
        <p>
          AI에게 시키는 일의 품질은 <strong>내 질문의 품질</strong>을 절대 못 넘어요.
          "알아서 잘 해줘"라고 하면 알아서 대충 해 옵니다. 처음 온 알바생에게 일을 시킨다고
          생각해 보세요 — 가게 사정(맥락), 하면 안 되는 것(제약), 완성 예시(예시)를
          말해 줘야 원하는 결과가 나오죠.
        </p>
        <Code>{CODE_BAD_GOOD_PROMPT}</Code>
        <p>정리하면 좋은 질문의 3요소는 이렇습니다.</p>
        <Code>{CODE_PROMPT_TEMPLATE}</Code>
        <svg className="diagram" viewBox="0 0 640 280" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="좋은 프롬프트 구조 흐름도: 맥락, 제약, 예시 3요소가 모여 좋은 프롬프트가 되고, AI의 답변은 검증 4단계를 거쳐야 내 코드가 된다">
          <rect x="16" y="20" width="150" height="56" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="91" y="44" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">① 맥락</text>
          <text x="91" y="62" textAnchor="middle" fontSize="12" fill="var(--muted)">환경 · 상황</text>
          <rect x="16" y="104" width="150" height="56" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="91" y="128" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">② 제약</text>
          <text x="91" y="146" textAnchor="middle" fontSize="12" fill="var(--muted)">버전 · 규칙 · 조건</text>
          <rect x="16" y="188" width="150" height="56" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="91" y="212" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">③ 예시</text>
          <text x="91" y="230" textAnchor="middle" fontSize="12" fill="var(--muted)">코드 · 에러 메시지</text>
          <line x1="166" y1="48" x2="220" y2="118" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="166" y1="132" x2="220" y2="132" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="166" y1="216" x2="220" y2="146" stroke="var(--line)" strokeWidth="1.5" />
          <rect x="220" y="102" width="120" height="60" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="280" y="127" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">좋은 프롬프트</text>
          <text x="280" y="147" textAnchor="middle" fontSize="12" fill="var(--muted)">= 좋은 질문</text>
          <line x1="340" y1="132" x2="362" y2="132" stroke="var(--muted)" strokeWidth="1.5" />
          <polyline points="354,127 362,132 354,137" fill="none" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round" />
          <circle cx="396" cy="132" r="28" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="396" y="137" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">AI</text>
          <line x1="424" y1="132" x2="454" y2="132" stroke="var(--muted)" strokeWidth="1.5" />
          <polyline points="446,127 454,132 446,137" fill="none" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round" />
          <rect x="462" y="104" width="160" height="56" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="542" y="127" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">AI의 답변</text>
          <text x="542" y="145" textAnchor="middle" fontSize="12" fill="var(--muted)">= 검토 대기 초안</text>
          <line x1="542" y1="160" x2="542" y2="196" stroke="var(--muted)" strokeWidth="1.5" />
          <polyline points="537,188 542,196 547,188" fill="none" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round" />
          <rect x="462" y="204" width="160" height="56" rx="8" fill="var(--card)" stroke="var(--rose)" strokeWidth="1.5" />
          <text x="542" y="227" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">검증 4단계</text>
          <text x="542" y="245" textAnchor="middle" fontSize="12" fill="var(--muted)">복붙 전 체크리스트</text>
          <line x1="462" y1="232" x2="222" y2="232" stroke="var(--muted)" strokeWidth="1.5" />
          <polyline points="230,227 222,232 230,237" fill="none" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="340" y="222" textAnchor="middle" fontSize="12" fill="var(--muted)">통과하면</text>
          <rect x="48" y="204" width="160" height="56" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="128" y="227" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">내 코드</text>
          <text x="128" y="245" textAnchor="middle" fontSize="12" fill="var(--muted)">이해하고 책임지는 코드</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 좋은 프롬프트의 흐름 — 3요소로 묻고, 답은 4단계 검증을 거쳐야 내 코드가 된다</p>
        <div className="tip">
          <b>연습 요령</b> 프롬프트를 보내기 전에 스스로 물어보세요 —
          <strong>"이 질문을 멘토님께 슬랙으로 보낸다면 부끄럽지 않은가?"</strong>
          멘토에게 보내도 될 수준의 질문이면 AI도 좋은 답을 줍니다.
        </div>
      </Section>

      <Section n={3} title="AI 답을 검증하는 습관" sub="이해 못한 코드는 내 코드가 아니다">
        <p>
          AI의 가장 무서운 점은 <strong>틀릴 때도 자신만만하다</strong>는 거예요.
          말투만 보면 정답 같은데, 존재하지 않는 함수를 지어내거나(이걸
          <strong> 할루시네이션</strong>이라고 해요) 3년 전 버전 기준으로 답하기도 합니다.
          그래서 AI의 답은 '정답'이 아니라 <strong>'검토 대기 중인 초안'</strong>으로 받아야 해요.
        </p>
        <div className="warn">
          <b>그대로 복붙 금지!</b> 이해 못한 코드는 <strong>내 코드가 아닙니다.</strong>
          돌아가더라도 왜 돌아가는지 모르면, 고장 났을 때 왜 고장 났는지도 몰라요.
          면접에서 "이 코드 왜 이렇게 짰어요?"에 "AI가 줬는데요..."라고 답할 순 없잖아요.
          한 줄이라도 설명 못 하는 코드는 붙여넣기 전에 반드시 물어보고 이해하기.
        </div>
        <Code>{CODE_VERIFY_CHECKLIST}</Code>
        <p>
          귀찮아 보이지만, 이 4단계가 몸에 붙으면 오히려 <strong>속도가 빨라져요.</strong>
          검증 없이 복붙한 코드가 터뜨리는 버그를 찾는 시간이, 처음부터 이해하고 쓰는
          시간보다 몇 배 더 걸리거든요. 소화 안 된 음식이 결국 배탈로 돌아오는 것과 같아요.
        </p>
      </Section>

      <Section n={4} title="학습 도구로 쓰는 법" sub="답을 받는 기계가 아니라, 과외 선생님으로">
        <p>
          AI를 "숙제 대신 해 주는 친구"로 쓰면 실력이 늘지 않아요. 하지만
          <strong> "설명해 주는 선생님"</strong>으로 쓰면 이야기가 달라집니다.
          부끄러운 질문을 몇 번을 반복해도 짜증 내지 않고, 새벽 2시에도 대답해 주고,
          내 수준에 맞춰 비유를 바꿔 주는 선생님은 세상에 AI뿐이에요.
        </p>
        <Code>{CODE_LEARNING_PROMPTS}</Code>
        <p>
          포인트는 <strong>주도권</strong>이에요. "답 줘"는 주도권을 AI에게 넘기는 것,
          "설명해 줘 / 퀴즈 내 줘 / 힌트만 줘"는 주도권을 내가 쥐는 것.
          운동을 트레이너가 대신 해 주면 근육은 트레이너에게만 붙죠 —
          코딩 근육도 똑같습니다.
        </p>
        <div className="tip">
          <b>추천 루틴</b> 이 학습 센터에서 코스 하나를 끝낼 때마다 AI에게
          "방금 배운 ○○에 대해 퀴즈 5문제 내 줘"라고 시켜 보세요.
          배운 직후의 셀프 테스트가 기억을 가장 오래 남깁니다.
        </div>
      </Section>

      <Section n={5} title="회사 규칙: AI에 넣으면 안 되는 것" sub="한 번 나간 데이터는 되돌릴 수 없다">
        <div className="warn">
          <b>가장 중요한 섹션입니다 — 보안 수칙</b><br />
          AI 입력창에 넣은 내용은 <strong>회사 밖 서버로 전송</strong>됩니다.
          한 번 나간 데이터는 삭제 버튼이 없어요. 특히 <strong>고객사 프로젝트의 코드와
          비밀 정보는 절대 AI에 넣지 않습니다.</strong> 고객사와의 계약에는 "코드를 외부에
          제공하려면 사전 서면 승인이 필요하다"는 조항이 들어 있는 경우가 많고, 이를 어기면
          수습인 나 한 명의 실수가 <strong>회사 전체의 계약 위반</strong>이 됩니다.
          친구 비밀을 내 마음대로 SNS에 올리면 안 되는 것과 같아요 — 남의 것은 남의 것.
        </div>
        <Code>{CODE_SECURITY_RULES}</Code>
        <p>
          "이 정도는 괜찮겠지?"가 제일 위험한 순간이에요. 에러 메시지 하나를 붙여넣을 때도
          그 안에 서버 경로, DB 이름, 토큰 값이 딸려 들어가지 않는지 <strong>지우고 나서</strong>
          붙여넣는 습관을 들이세요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ①</b> 우리 Gitea(<span className="icode">edu.awesomedevapp.com:3000</span>)에서
          여러분의 실습 저장소를 열고, 아무 파일이나 골라 스스로 판별해 보세요 —
          "이 파일, AI에 넣어도 되는가?" 학습용 코드(○), 그런데 만약 그 안에
          <span className="icode">.env</span> 값이나 DB 비밀번호가 적혀 있다면(✗)!
          판단 근거를 소리 내어 말할 수 있으면 통과. 애매한 파일이 하나라도 있었다면
          멘토에게 물어보는 것까지가 실습입니다.
        </div>
      </Section>

      <Section n={6} title="AI가 잘하는 것, 못하는 것" sub="어디까지 맡기고 어디부터 내가 할까">
        <p>
          도구를 잘 쓴다는 건 <strong>도구의 한계를 안다</strong>는 뜻이에요.
          망치는 못 박기엔 최고지만 나사를 조이라고 주면 망하죠.
          AI도 잘하는 일과 못하는 일의 경계가 뚜렷합니다.
        </p>
        <Code>{CODE_GOOD_BAD_AT}</Code>
        <p>
          특히 오른쪽 열의 <strong>"판단"이 들어가는 일</strong>은 전부 사람 몫이에요.
          우리 스택(React·Spring Boot·PostgreSQL·Docker)에서 어떤 코드가 "돌아가는가"는
          AI가 도와줄 수 있지만, 그 코드가 우리 프로젝트에 "<strong>맞는가</strong>",
          고객과의 약속을 지키는가는 코드 밖의 사정을 아는 사람만 판단할 수 있습니다.
        </p>
        <div className="tip">
          <b>실무 감각</b> 선배 개발자들이 AI를 쓰는 비율을 보면, 코드를 '생성'시키는 것
          못지않게 <strong>코드 리뷰·이름 짓기·설명 요청</strong>에 많이 씁니다.
          "이 함수 이름 더 좋은 거 없을까?", "이 코드의 문제점을 지적해 줘" —
          이런 질문은 위험 부담 없이 AI의 장점만 뽑아 쓰는 사용법이에요.
        </div>
      </Section>

      <Section n={7} title="실습: 에러 메시지를 AI에게 잘 물어보기" sub="배운 것 총동원 — 프롬프트 직접 쓰기">
        <p>
          이제 실전이에요. 개발하다 만나는 가장 흔한 상황 — <strong>빨간 에러 메시지</strong> —
          를 놓고, 섹션 2의 3요소(맥락·제약·예시)로 프롬프트를 직접 써 봅니다.
        </p>
        <Code>{CODE_ERROR_PRACTICE}</Code>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> 지금 이 플랫폼에서 <span className="kbd">F12</span>를 눌러
          개발자 도구의 <span className="kbd">Console</span> 탭을 열어 두고 페이지를 돌아다니다가,
          경고든 에러든 메시지가 하나라도 보이면 그걸 재료로 위 2단계 빈칸 프롬프트를
          완성해 AI에게 보내 보세요. 없다면 위의 <span className="icode">TypeError</span> 예시
          그대로 연습해도 좋아요. 받은 답은 <strong>반드시 섹션 3의 체크리스트로 검증</strong>하고,
          완성한 프롬프트와 AI의 답을 멘토에게 공유해서 피드백을 받으면 실습 완료!
        </div>
        <p>
          잘 쓴 프롬프트 하나는 재산이에요. 마음에 드는 질문 패턴이 생기면 메모장에
          모아 두세요 — 선배들도 다들 자기만의 <strong>프롬프트 서랍</strong>을 갖고 있답니다.
        </p>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🤖 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분은 AI에게 <strong>맥락·제약·예시로 시키고</strong>, 답을
            <strong> 4단계로 검증하고</strong>, 고객사의 것은 <strong>절대 넣지 않는</strong>
            개발자예요. AI가 대신 써 준 코드도 결국 Git으로 관리되고 서버에 배포되니,{' '}
            <Link to="/learn/git-deep"><strong>Git과 협업</strong></Link> 코스로 코드를 안전하게
            나누는 법을, <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스로
            그 코드가 달리는 길을 이어서 배워 보세요. 그리고 오늘 배운 프롬프트 3요소로
            실습 과제 하나를 골라 AI와 함께(하지만 주도권은 내가!) 풀어 보는 것, 그게 진짜 복습입니다.
          </p>
        </div>
      </div>
    </div>
  );
}
