// 이 파일이 하는 일: "IntelliJ 꿀팁 모음" 코스 — 어썸데브 백엔드(Spring Boot) 개발의
// 주력 도구인 IntelliJ를 '그냥 에디터'에서 '내 손의 연장'으로 만드는 7개 섹션 학습 페이지.
// (필수 단축키 → 자동완성 200% → Git·로컬 히스토리 → 디버거 → Spring 실행 구성 → DB 도구 → 실습 여행)
// 학습 포인트: API 호출이 없는 '내용 고정' 정적 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 단축키 표·예시 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 텍스트 표 · 예시 코드 상수들 ──

const CODE_SHORTCUTS = `외우면 개발 속도가 달라지는 핵심 단축키 (Windows 기준)

단축키              하는 일                     비유하자면
──────────────────────────────────────────────────────────────
Shift Shift        뭐든지 검색 (Search Everywhere)   만능 검색창
Alt + Enter        퀵픽스 — 빨간 줄 해결 제안        "선생님, 정답 알려주세요"
Ctrl + 클릭        정의로 이동 (선언부로 점프)        "이 메서드 어디서 왔어?"
Ctrl + Alt + ←     점프하기 전 위치로 돌아가기        뒤로 가기 버튼
Shift + F6         이름 바꾸기 (Rename 리팩터)       사용처까지 전부 개명
Ctrl + Alt + L     코드 정렬 (Reformat)              방 청소 버튼
Ctrl + /           한 줄 주석 토글                   포스트잇 붙이기
Ctrl + D           현재 줄 복제                      복사+붙여넣기 한 방에
Ctrl + Shift + F   프로젝트 전체에서 텍스트 검색      건물 전체 수색

→ 전부 외우려 하지 마세요. 위에서 4개(Shift Shift, Alt+Enter,
  Ctrl+클릭, Shift+F6)만 손에 익어도 상위 10% 사용자입니다.`;

const CODE_LIVE_TEMPLATE = `자주 쓰는 코드를 몇 글자로 소환하는 라이브 템플릿

입력       Tab 누르면 펼쳐지는 코드
─────────────────────────────────────────────
psvm   →   public static void main(String[] args) { }
sout   →   System.out.println();
fori   →   for (int i = 0; i < ; i++) { }
iter   →   for (String item : items) { }   ← 컬렉션 보고 알아서!

# 자동완성 자체의 꿀팁:
#  - Ctrl + Space : 기본 자동완성 (안 뜨면 강제 소환)
#  - Tab으로 확정하면 뒤에 있던 단어를 '덮어쓰기' — Enter는 '끼워넣기'
#  - 대문자만 쳐도 찾아줘요: "UDS" → UserDetailsService`;

const CODE_LOCAL_HISTORY = `커밋을 깜빡했어도 살릴 수 있다 — 로컬 히스토리(Local History)

IntelliJ는 파일을 저장할 때마다 몰래 스냅샷을 남겨요.
Git 커밋과 별개로, IDE가 자동으로 적어 두는 '비밀 일기장'입니다.

사용법:
  파일에서 우클릭 → Local History → Show History
  → 시간대별 변경 내역이 좌우 비교(diff)로 쫙 —
  → 되돌리고 싶은 시점에서 Revert 클릭. 끝.

언제 목숨을 구해 주나:
  - 실수로 메서드를 통째로 지우고 저장까지 해버렸을 때
  - "아까 오전엔 됐는데..." 커밋은 안 해놨을 때
  - git reset을 잘못 쳐서 작업물이 증발한 것 같을 때

단, 보관 기간이 며칠 수준이에요. 일기장은 임시 보험일 뿐 —
진짜 저장은 언제나 Git 커밋입니다. 자주 커밋하는 습관이 우선!`;

const CODE_GIT_PANEL = `IntelliJ 안에서 끝내는 Git 일과

Alt + 9        Git 도구창 — 커밋 이력(Log)을 그래프로 구경
Ctrl + K       커밋 창 — 바뀐 파일 체크하고 메시지 쓰고 커밋
Ctrl + Shift + K   푸시 — Gitea(edu.awesomedevapp.com:3000)로 올리기

편집기 왼쪽 여백(거터)의 색 막대도 Git 정보예요:
  초록 = 새로 추가된 줄   파랑 = 수정된 줄   회색 화살표 = 삭제된 줄
색 막대 클릭 → 원래 코드와 비교 + 그 자리에서 되돌리기(Rollback)까지!`;

const CODE_DEBUGGER = `System.out.println 지옥에서 탈출하는 디버거 3단계

1) 브레이크포인트 찍기
   의심 가는 줄의 줄 번호 옆(거터) 클릭 → 빨간 점
   = "여기서 일시정지!" 표시

2) 벌레 아이콘(Debug)으로 실행 (Shift + F9)
   빨간 점에 도착하면 프로그램이 얼음! 하고 멈춰요

3) 멈춘 세상 구경하기
   - Variables 창: 이 순간 모든 변수의 실제 값
   - F8 (Step Over): 한 줄씩 전진
   - F7 (Step Into): 호출된 메서드 안으로 잠입
   - F9 (Resume): 다음 빨간 점까지 다시 달리기
   - 변수 우클릭 → Add to Watches: 특정 값만 계속 감시

비유: println은 여행지에서 사진 몇 장 받아보는 것이고,
디버거는 시간을 멈추고 현장을 직접 걸어다니는 겁니다.`;

const CODE_RUN_CONFIG = `Spring Boot 실행 구성(Run Configuration) 읽는 법

우측 상단 [BackendApplication ▾] [▶] [🐞] 이 한 줄이 실행 조종석:

BackendApplication ▾   ← 무엇을 실행할지 (실행 구성 선택)
▶  Run                 ← 그냥 실행
🐞 Debug               ← 브레이크포인트가 작동하는 실행

구성 편집(Edit Configurations...)에서 자주 만지는 것:
  - Active profiles: local     ← application-local.yml을 쓰겠다
  - Environment variables:     ← DB 비밀번호 같은 값 주입
      DB_PASSWORD=...;JWT_SECRET=...

콘솔에 이 로그가 보이면 성공적으로 떠 있는 거예요:
  Tomcat started on port 8080
  Started BackendApplication in 3.2 seconds`;

const CODE_DB_TOOL = `IntelliJ 안에서 DB 구경하기 (Database 도구창)

1) 우측 사이드바 [Database] → [+] → Data Source → PostgreSQL
2) Host/Port/User/Password 입력 (로컬 개발 DB 기준: localhost:5432)
3) [Test Connection] 초록불 확인 → OK

이제 할 수 있는 것:
  - 테이블 더블클릭 → 데이터가 표(스프레드시트)처럼 좌르륵
  - 콘솔(Ctrl+Shift+F10 or New Query Console)에서 SQL 직접 실행:
      SELECT * FROM users ORDER BY created_at DESC LIMIT 10;
  - 테이블 우클릭 → Diagram → 테이블 관계도를 그림으로!

주의: 운영(AWS EC2) DB에는 함부로 연결하지 않아요.
멘토와 함께, 읽기 전용 계정으로만. 로컬 Docker DB로 연습합시다.`;

const CODE_LOGIN_TOUR = `실습 코스: Ctrl+클릭으로 떠나는 '로그인 요청 한 바퀴' 여행

출발지: 우리 backend 프로젝트를 IntelliJ로 열기

① Shift Shift → "AuthController" (또는 "login") 검색 → Enter
   → 로그인 API의 입구(컨트롤러)에 도착

② @PostMapping이 붙은 login 메서드에서
   호출하는 서비스 메서드를 Ctrl + 클릭
   → 실제 로그인 검증 로직(서비스 계층)으로 순간이동

③ 그 안에서 리포지토리 메서드(findBy...)를 또 Ctrl + 클릭
   → DB에게 물어보는 계층까지 도착. 컨트롤러 → 서비스 → 리포지토리,
     3층 구조를 발로 밟아본 셈!

④ 길을 잃었다면 Ctrl + Alt + ← 로 왔던 길 되돌아가기

⑤ 보너스: 서비스 메서드에 브레이크포인트를 찍고 Debug로 서버 실행
   → 프론트에서 로그인 시도 → 요청이 빨간 점에서 얼음!
   → Variables 창에서 방금 내가 입력한 아이디가 보이면 성공 🎉`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '자동완성 200%' },
  { n: 3, label: 'Git + 로컬 히스토리' },
  { n: 4, label: '디버거 실전' },
  { n: 5, label: 'Spring 실행 구성' },
  { n: 6, label: 'DB 도구 맛보기' },
  { n: 7, label: '실습: 로그인 흐름 여행' },
];

export default function ToolIntellijPage() {
  return (
    <div>
      {/* 히어로: 이 코스로 무엇이 달라지는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 부록 · 도구</div>
        <h1>IntelliJ 꿀팁 모음</h1>
        <p>
          어썸데브 백엔드(Spring Boot) 개발의 주력 도구인 IntelliJ를 "코드 치는 메모장"에서
          <strong> "내 손의 연장"</strong>으로 업그레이드하는 코스예요. 단축키 몇 개, 습관 몇 개가
          쌓이면 같은 일을 절반의 시간에 하게 됩니다 — 특히 마지막 실습은 꼭 직접 해보세요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 2개 포함</span>
          <span className="chip">준비물: IntelliJ + backend 프로젝트</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="이 표에서 4개만 외워도 상위 10%">
        <p>
          IntelliJ 고수와 초보의 차이는 아는 기능의 수가 아니라 <strong>마우스에 손이 가는
          횟수</strong>예요. 메뉴를 뒤지는 3초가 하루에 수백 번 쌓이면 몇십 분이 됩니다.
          아래 표에서 <strong>위쪽 4개</strong>부터 몸에 붙이세요.
        </p>
        <Code>{CODE_SHORTCUTS}</Code>
        <p>
          특히 <span className="kbd">Shift</span> 두 번(Search Everywhere)은 만능 열쇠예요.
          클래스·파일·설정·액션 이름 뭐든 쳐 보세요 — "어디서 하더라?" 싶은 기능도 이름만 치면
          바로 실행됩니다. 그리고 <span className="kbd">Alt</span>+<span className="kbd">Enter</span>는
          빨간 줄(에러) 위에서 누르면 IntelliJ가 <strong>고치는 방법을 제안</strong>해 줘요 —
          import 추가, 메서드 자동 생성, 오타 수정까지. 막히면 일단 Alt+Enter, 습관으로 만드세요.
        </p>
        <div className="tip">
          <b>이름 바꾸기는 무조건 Shift+F6</b> 변수·메서드·클래스 이름을 손으로 하나하나
          찾아 바꾸면 반드시 하나를 놓쳐요. <span className="kbd">Shift</span>+<span className="kbd">F6</span>은
          그 이름을 쓰는 <strong>모든 곳</strong>을 IntelliJ가 찾아서 한 번에 바꿔 줍니다.
          이게 '리팩터링 도구'의 첫걸음이에요.
        </div>
      </Section>

      <Section n={2} title="자동완성 200% 활용하기" sub="psvm, sout — 몇 글자로 코드 소환하기">
        <p>
          자동완성은 "철자 대신 쳐 주는 기능"이 아니라 <strong>코드를 통째로 소환하는
          마법 주문</strong>에 가까워요. 그 주문서가 <strong>라이브 템플릿</strong>(Live Template)입니다.
          약속된 몇 글자를 치고 <span className="kbd">Tab</span>을 누르면 정해진 코드 뭉치가 펼쳐져요.
        </p>
        <Code>{CODE_LIVE_TEMPLATE}</Code>
        <p>
          예를 들어 디버깅용 출력 한 줄이 필요하면 <span className="icode">sout</span> 네 글자 +
          Tab이면 끝이에요. <span className="icode">iter</span>는 더 똑똑해서, 바로 위에 선언된
          리스트를 보고 <strong>알아서 그 변수로 for문을 채워</strong> 줍니다.
          Settings → Editor → Live Templates에서 나만의 주문을 새로 등록할 수도 있어요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ①</b> 아무 자바 파일에서 새 클래스를 하나 만들고,
          본문에 <span className="icode">psvm</span> + <span className="kbd">Tab</span>,
          이어서 그 안에 <span className="icode">sout</span> + <span className="kbd">Tab</span>을 쳐 보세요.
          main 메서드와 출력문이 순식간에 생기면 성공 — 방금 타자 수십 번을 아꼈습니다.
        </div>
      </Section>

      <Section n={3} title="Git 통합 복습 + 로컬 히스토리" sub="커밋 안 했어도 복구된다는 사실, 알고 있었나요?">
        <p>
          Git 코스에서 터미널 명령을 배웠다면, IntelliJ에서는 그걸 <strong>화면으로</strong> 합니다.
          터미널이 익숙해진 뒤 IDE 통합을 쓰면 "지금 뭐가 바뀌었는지"가 눈에 보여서 실수가 확 줄어요.
        </p>
        <Code>{CODE_GIT_PANEL}</Code>
        <p>
          그리고 IntelliJ에는 Git과 별개인 <strong>비밀 보험</strong>이 하나 더 있어요 —
          바로 <strong>로컬 히스토리</strong>입니다. 커밋을 안 했어도, 파일을 저장할 때마다
          IDE가 스스로 스냅샷을 남겨 두거든요.
        </p>
        <Code>{CODE_LOCAL_HISTORY}</Code>
        <div className="warn">
          <b>보험은 보험일 뿐</b> 로컬 히스토리는 내 PC에만, 며칠만 남아요.
          PC가 바뀌거나 시간이 지나면 사라집니다. 팀과 공유되고 영원히 남는 진짜 기록은
          <strong> Git 커밋 + Gitea 푸시</strong>뿐이에요. "커밋은 자주, 푸시는 매일" 원칙은 그대로!
        </div>
      </Section>

      <Section n={4} title="디버거 실전 — println 지옥 탈출" sub="시간을 멈추고 변수 속을 들여다보기">
        <p>
          버그를 잡을 때 <span className="icode">System.out.println("여기 왔나?")</span>을
          도배해 본 적 있죠? 그건 여행지에서 <strong>사진 몇 장</strong> 받아 보는 방식이에요.
          디버거는 다릅니다 — <strong>시간을 멈추고 현장을 직접 걸어다니는</strong> 방식이거든요.
        </p>
        <Code>{CODE_DEBUGGER}</Code>
        <ol className="olist">
            <li>의심 가는 줄에 <strong>브레이크포인트</strong>(빨간 점)를 찍고,</li>
            <li><strong>벌레 아이콘(Debug)</strong>으로 실행한 뒤,</li>
            <li>멈춘 순간의 <strong>Variables 창</strong>에서 변수의 진짜 값을 확인 —
              내 상상과 다른 값이 들어 있는 지점이 바로 버그의 현장입니다.</li>
          </ol>
        <p>
          <span className="kbd">F8</span>(한 줄씩)과 <span className="kbd">F7</span>(메서드 안으로)의
          차이만 익혀도 충분해요. 특정 변수를 계속 지켜보고 싶으면 우클릭 →
          <strong> Add to Watches</strong> — CCTV를 달아 두는 셈이죠.
        </p>
        <div className="tip">
          <b>조건부 브레이크포인트</b> 반복문 1,000번 중 딱 문제 되는 한 번만 멈추고 싶다면?
          빨간 점을 우클릭하고 조건(예: <span className="icode">i == 743</span>)을 적으세요.
          그 조건이 참일 때만 멈춥니다. 디버거가 두 배로 강해지는 순간이에요.
        </div>
      </Section>

      <Section n={5} title="Spring Boot 실행 구성" sub="우측 상단 그 초록 화살표, 제대로 알고 쓰기">
        <p>
          매일 누르는 우측 상단 <strong>초록 화살표(Run)</strong>의 정체는
          <strong> 실행 구성</strong>(Run Configuration)이에요. "무엇을, 어떤 설정으로,
          어떤 환경변수와 함께 실행할까"를 묶어 둔 <strong>출발 준비 체크리스트</strong>죠.
        </p>
        <Code>{CODE_RUN_CONFIG}</Code>
        <p>
          우리 회사 규칙과도 이어져요 — DB 비밀번호 같은 <strong>시크릿은 코드에 적지 않고
          환경변수로 주입</strong>합니다. 실행 구성의 Environment variables 칸이 바로 그 주입구예요.
          또 <strong>Active profiles</strong>에 <span className="icode">local</span>을 넣으면
          운영 설정이 아닌 내 PC용 설정(<span className="icode">application-local.yml</span>)으로 뜹니다.
        </p>
        <div className="warn">
          <b>Run과 Debug는 형제지만 다릅니다</b> 브레이크포인트를 찍었는데 안 멈춘다면
          십중팔구 <strong>Run(▶)으로 실행</strong>한 경우예요. 빨간 점이 작동하려면 반드시
          <strong> Debug(벌레 아이콘)</strong>로 실행해야 합니다. 섹션 7 실습에서 써먹을 거예요.
        </div>
      </Section>

      <Section n={6} title="DB 도구 맛보기" sub="IntelliJ 안에서 PostgreSQL 테이블 구경하기">
        <p>
          백엔드를 짜다 보면 "지금 DB에 뭐가 들었지?"가 수시로 궁금해져요. 그때마다 터미널에서
          psql을 켜도 되지만, IntelliJ의 <strong>Database 도구창</strong>을 연결해 두면
          코드 옆에서 바로 테이블을 열어 볼 수 있습니다. 코드와 데이터를 <strong>한 화면에서</strong> —
          이게 통합(I)개발(D)환경(E)이라는 이름값이에요.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="IntelliJ 화면 구역도: 좌측 프로젝트 트리, 중앙 에디터, 우측 도구창(Database), 하단 실행 디버그 패널, 상단 우측 실행 구성">
          <rect x="20" y="20" width="600" height="320" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="20" y1="58" x2="620" y2="58" stroke="var(--line)" strokeWidth="1.5" />
          <text x="34" y="44" fontSize="13" fill="var(--muted)">상단 바</text>
          <rect x="380" y="29" width="228" height="22" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="392" y="44" fontSize="12" fill="var(--ink)">BackendApplication ▾</text>
          <text x="540" y="44" fontSize="12" fill="var(--teal)">▶ Run</text>
          <text x="580" y="44" fontSize="12" fill="var(--rose)">Debug</text>

          <rect x="30" y="70" width="132" height="192" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="42" y="92" fontSize="13" fontWeight="600" fill="var(--ink)">좌측 · 프로젝트</text>
          <text x="42" y="110" fontSize="12" fill="var(--muted)">파일 트리</text>
          <line x1="42" y1="126" x2="120" y2="126" stroke="var(--line)" strokeWidth="1.5" strokeLinecap="round" />
          <line x1="52" y1="146" x2="130" y2="146" stroke="var(--line)" strokeWidth="1.5" strokeLinecap="round" />
          <line x1="52" y1="166" x2="112" y2="166" stroke="var(--line)" strokeWidth="1.5" strokeLinecap="round" />
          <line x1="62" y1="186" x2="140" y2="186" stroke="var(--line)" strokeWidth="1.5" strokeLinecap="round" />
          <line x1="62" y1="206" x2="124" y2="206" stroke="var(--line)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="42" y="240" fontSize="12" fill="var(--muted)">Shift Shift 로</text>
          <text x="42" y="256" fontSize="12" fill="var(--muted)">어디든 검색</text>

          <rect x="174" y="70" width="292" height="192" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="188" y="92" fontSize="13" fontWeight="600" fill="var(--ink)">중앙 · 에디터 (코드)</text>
          <circle cx="192" cy="126" r="5" fill="var(--rose)" />
          <text x="208" y="131" fontSize="12" fill="var(--muted)">브레이크포인트는 줄 번호 옆 거터</text>
          <line x1="208" y1="152" x2="440" y2="152" stroke="var(--line)" strokeWidth="1.5" strokeLinecap="round" />
          <line x1="208" y1="172" x2="400" y2="172" stroke="var(--line)" strokeWidth="1.5" strokeLinecap="round" />
          <line x1="208" y1="192" x2="430" y2="192" stroke="var(--line)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="188" y="228" fontSize="12" fill="var(--muted)">Ctrl + 클릭 → 정의로 이동</text>
          <text x="188" y="248" fontSize="12" fill="var(--muted)">Ctrl + Alt + ← → 왔던 길로</text>

          <rect x="478" y="70" width="132" height="192" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="490" y="92" fontSize="13" fontWeight="600" fill="var(--ink)">우측 · 도구창</text>
          <text x="490" y="114" fontSize="12" fill="var(--teal)">Database</text>
          <line x1="490" y1="130" x2="598" y2="130" stroke="var(--line)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="490" y="150" fontSize="12" fill="var(--muted)">users 테이블</text>
          <text x="490" y="170" fontSize="12" fill="var(--muted)">SQL 콘솔</text>
          <text x="490" y="190" fontSize="12" fill="var(--muted)">Diagram</text>
          <line x1="490" y1="206" x2="598" y2="206" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="4 4" />
          <text x="490" y="230" fontSize="12" fill="var(--muted)">Alt + 9 는</text>
          <text x="490" y="248" fontSize="12" fill="var(--muted)">Git 도구창</text>

          <rect x="30" y="274" width="580" height="56" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="42" y="296" fontSize="13" fontWeight="600" fill="var(--ink)">하단 · 실행 / 디버그 패널</text>
          <text x="42" y="318" fontSize="12" fill="var(--muted)">Tomcat started on port 8080</text>
          <text x="300" y="296" fontSize="12" fill="var(--muted)">Variables · Watches</text>
          <text x="300" y="318" fontSize="12" fill="var(--muted)">F8 한 줄씩 · F7 안으로 · F9 다음 빨간 점</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: IntelliJ 화면 구역도 — 좌측 프로젝트 트리, 중앙 에디터, 우측 도구창(Database·Git), 하단 실행/디버그 패널, 상단 우측 실행 구성</p>
        <Code>{CODE_DB_TOOL}</Code>
        <p>
          특히 <strong>Diagram 기능</strong>은 꼭 한번 열어 보세요. 테이블끼리 어떤 외래키로
          이어져 있는지 지도처럼 그려 줘서, 우리 데이터베이스 코스에서 배운 테이블 관계가
          한눈에 복습됩니다.
        </p>
        <div className="tip">
          <b>안전 수칙</b> 연습은 언제나 <strong>내 PC의 Docker PostgreSQL</strong>로!
          운영(AWS EC2) DB 접속 정보는 아예 IntelliJ에 등록하지 않는 게 원칙이에요.
          필요할 땐 멘토와 함께, 읽기 전용으로만.
        </div>
      </Section>

      <Section n={7} title="실습: Ctrl+클릭으로 로그인 흐름 여행" sub="배운 것 전부를 우리 backend에서 써먹기">
        <p>
          이제 종합 실습입니다. 우리 플랫폼 backend에서 <strong>로그인 요청 하나가 지나가는 길</strong>을
          Ctrl+클릭만으로 따라가 볼 거예요. 코드를 '읽는' 게 아니라 코드 속을 '여행'하는 감각 —
          이게 IntelliJ로 낯선 코드를 파악하는 표준 기술입니다.
        </p>
        <Code>{CODE_LOGIN_TOUR}</Code>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> 위 여행 코스 ①~④를 지금 바로 해 보세요. 그리고 여유가 되면
          ⑤까지 — 서비스 메서드에 브레이크포인트를 찍고 <strong>Debug로 서버를 띄운 뒤</strong>,
          브라우저에서 우리 플랫폼에 로그인해 보세요. 내가 누른 로그인 버튼이 지금 내 IntelliJ의
          빨간 점에서 멈춰 서는 순간, 프론트와 백엔드가 한 몸으로 이어지는 게 처음으로 '보입니다'.
        </div>
        <p>
          여행하다 길을 잃으면 당황하지 말고 <span className="kbd">Ctrl</span>+<span className="kbd">Alt</span>+<span className="kbd">←</span>.
          어디를 클릭해 들어왔든 왔던 길을 그대로 되짚어 줍니다. 낯선 코드베이스에서 이 두 개
          (들어가기: Ctrl+클릭 / 나오기: Ctrl+Alt+←)만 있으면 절대 미아가 되지 않아요.
        </p>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🧰 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분의 IntelliJ에는 만능 검색(<strong>Shift Shift</strong>),
            자동 수리(<strong>Alt+Enter</strong>), 코드 여행(<strong>Ctrl+클릭</strong>),
            시간 정지(<strong>디버거</strong>), 비밀 보험(<strong>로컬 히스토리</strong>)까지
            장착됐어요. 도구는 결국 쓰면서 늘어요 — 오늘 배운 단축키를{' '}
            <Link to="/learn/git-deep"><strong>Git 코스</strong></Link>의 커밋 습관,{' '}
            <Link to="/learn/sql"><strong>SQL 입문 코스</strong></Link>의 SQL 연습과
            묶어서, 다음 백엔드 과제에서 마우스 없이 하루를 버텨 보는 걸 첫 목표로 삼아 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
