// 이 파일이 하는 일: "노션으로 기록하기" 코스 — 개발자에게 기록이 왜 자산인지에서 출발해
// 노션의 기본 블록·페이지 구조·코드 스니펫 관리·데이터베이스·검색·공유까지 8개 섹션으로 안내하고,
// 마지막에 나만의 TIL 템플릿을 직접 만들어 첫 기록을 남기는 정적 학습 페이지.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램·예시는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_THREE_LINES = `3줄 회고 — 매일 퇴근(하교) 전 3분이면 충분해요.

오늘 배운 것   : Docker 컨테이너와 이미지의 차이 (이미지=붕어빵 틀, 컨테이너=붕어빵)
오늘 막힌 것   : Gitea에 push했는데 인증 오류 → 토큰 만료가 원인이었음
내일 할 것     : Spring Boot 컨트롤러에 새 API 하나 추가해 보기

→ 이 3줄이 100일 쌓이면? 나만의 성장 그래프이자
  "나 이런 것까지 해봤어요"라고 보여줄 수 있는 포트폴리오가 됩니다.`;

const CODE_BLOCKS = `노션의 4가지 기본 블록 — 이것만 알면 시작할 수 있어요.

블록          단축키/입력법        언제 쓰나
──────────────────────────────────────────────────────
텍스트        그냥 타이핑          기본 메모, 회고 문장
토글          > + 스페이스        접었다 펼치는 목록 — "답 가리기"에 최고
코드          \`\`\` 입력            명령어·설정·에러 메시지 원본 보존
표(테이블)    /표 입력             비교표, 체크리스트

→ 슬래시(/)를 치면 블록 메뉴 전체가 열려요.
  "뭐가 있는지 모르겠으면 일단 /" — 노션의 만능 열쇠입니다.`;

const CODE_PAGE_TREE = `추천 페이지 구조 — 폴더 정리하듯 페이지를 트리로 쌓아요.

📓 나의 개발 노트 (최상위 페이지)
├── 📅 TIL 일지            ← 매일 3줄 회고가 쌓이는 곳
│   ├── 2026-07-16
│   ├── 2026-07-15
│   └── ...
├── 🔥 트러블슈팅 모음      ← "막혔다가 뚫은 기록"만 따로
│   ├── Gitea push 인증 오류 해결
│   └── Docker 포트 충돌 해결
└── ⌨️ 명령어 치트시트      ← 자주 까먹는 명령어 사전
    ├── Git 명령어
    └── Docker 명령어

→ 핵심: '일지'와 '해결법'을 섞지 마세요.
  일지는 날짜순, 해결법은 주제순 — 찾는 방법이 다르니까요.`;

const CODE_TROUBLE_TEMPLATE = `트러블슈팅 페이지 템플릿 — 이 4칸만 채우면 됩니다.

## 증상
Gitea(edu.awesomedevapp.com:3000)에 push하면
"authentication failed" 에러가 뜸

## 원인
액세스 토큰이 만료되어 있었음

## 해결
Gitea 설정 → 애플리케이션 → 새 토큰 발급 → 다시 push

## 배운 것
에러 메시지를 그대로 검색하면 답이 빨리 나온다.
토큰에도 유효기간이 있다!`;

const CODE_SNIPPET = `코드 블록 활용 예 — 자주 쓰는 명령어를 '복사 가능한 원본'으로 저장.

# 우리 회사에서 매일 쓰는 Docker 명령어
docker ps                  # 지금 돌고 있는 컨테이너 목록
docker compose up -d       # 백그라운드로 전체 스택 실행
docker logs -f 컨테이너이름  # 로그 실시간으로 보기

→ 노션 코드 블록에 마우스를 올리면 '복사' 버튼이 떠요.
  스크린샷으로 찍은 명령어는 다시 타이핑해야 하지만,
  코드 블록은 클릭 한 번이면 터미널에 붙여넣기 끝!`;

const CODE_DATABASE = `과제 트래커 데이터베이스 — 표에 '속성'이 붙으면 데이터베이스가 됩니다.

과제 이름                  상태        마감일       과목
────────────────────────────────────────────────────────
React 컴포넌트 과제        진행 중     07-18       프론트엔드
PostgreSQL 테이블 설계     완료 ✓      07-14       데이터베이스
학습 플랫폼 회고 작성      시작 전     07-21       공통

데이터베이스가 표보다 강한 이유:
1) 필터  — "상태 = 진행 중"만 골라 보기
2) 정렬  — 마감일 빠른 순으로 자동 줄 세우기
3) 보기  — 같은 데이터를 표로도, 칸반 보드로도, 캘린더로도!`;

const CODE_SEARCH_RULE = `검색되는 기록을 만드는 3가지 규칙

1) 에러 메시지는 '복사-붙여넣기' 원본 그대로
   나쁨: "빨간 에러가 났다"
   좋음: "port is already allocated" 에러 발생
   → 나중에 같은 에러가 나면 이 문구로 검색해서 바로 찾음!

2) 제목에 핵심 단어를 넣기
   나쁨: "오늘의 삽질"
   좋음: "Docker 포트 충돌(port is already allocated) 해결"

3) 미래의 나를 독자로 생각하기
   3개월 뒤의 나는 오늘의 맥락을 다 까먹은 남입니다.
   "그때 그거"가 아니라 "무엇을, 왜, 어떻게"를 적어 주세요.`;

const CODE_TIL_TEMPLATE = `나만의 TIL 템플릿 — 이대로 만들고 매일 복제해서 쓰세요.

# 📅 2026-07-16 (수)

## 오늘 배운 것 (Today I Learned)
-

## 오늘 막힌 것 & 해결 과정
> 토글 블록으로 만들면: 제목만 보고 "이거 뭐였더라?" 떠올려 본 뒤
> 펼쳐서 답을 확인하는 셀프 퀴즈가 됩니다.

## 오늘의 명령어/코드 한 조각
(코드 블록으로! 스크린샷 금지)

## 내일 할 것
- [ ]

## 오늘의 기분 한 줄
`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '공유와 협업' },
  { n: 8, label: '실습: TIL 템플릿' },
];

export default function ToolNotionPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 부록 · 도구</div>
        <h1>노션으로 기록하기</h1>
        <p>
          같은 걸 배워도 <strong>적어 둔 사람</strong>과 안 적어 둔 사람의 3개월 뒤는
          완전히 달라요. 이 코스에서는 노션으로 배운 것·막힌 것·해결한 것을 차곡차곡
          쌓아서, <strong>검색 한 번이면 꺼내 쓰는 나만의 개발 노트</strong>를 만듭니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 40분</span>
          <span className="chip">직접 해보기 3개</span>
          <span className="chip">준비물: 노션 계정 (무료)</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>
          개발을 배우다 보면 하루에도 새로운 것이 쏟아져요. React 문법, Docker 명령어,
          Gitea 사용법... 그런데 우리 뇌는 <strong>USB가 아니라 휘발성 메모리(RAM)</strong>에
          가깝습니다. 전원이 꺼지면(자고 일어나면) 상당 부분이 날아가죠. 그래서 잘하는
          개발자들은 예외 없이 <strong>어딘가에 적어 두는 습관</strong>이 있어요.
        </p>
        <p>
          거창할 필요 없어요. 매일 <strong>3줄 회고</strong>면 충분합니다. 문제는
          "어디에" 적느냐예요. 카톡 나에게 보내기? 메모장 파일? 다 흩어져서 나중에
          못 찾아요. 이 코스에서 쓸 도구가 바로 <strong>노션(Notion)</strong> —
          메모장 + 폴더 + 표 + 검색이 한 몸인 기록 앱입니다.
        </p>
        <Code>{CODE_THREE_LINES}</Code>
        <div className="tip">
          <b>왜 기록이 '복리'일까요?</b> 오늘 적은 해결법은 다음에 같은 문제를 만났을 때
          검색 10초로 재사용돼요. 적금처럼 넣은 만큼만 돌아오는 게 아니라, 꺼내 쓸수록
          시간이 이자처럼 불어납니다.
        </div>
      </Section>

      <Section n={2} title="노션 기본 블록 4가지" sub="텍스트 · 토글 · 코드 · 표 — 레고 블록처럼 조립">
        <p>
          노션의 모든 내용은 <strong>블록</strong>이라는 단위로 이뤄져 있어요. 레고처럼
          블록을 쌓아 페이지를 만드는 거죠. 종류가 수십 가지지만, 개발 기록에는
          이 4가지면 90%가 해결됩니다.
        </p>
        <Code>{CODE_BLOCKS}</Code>
        <p>
          특히 <strong>토글 블록</strong>은 개발 노트의 숨은 보석이에요. "Docker 이미지와
          컨테이너의 차이는?"이라고 제목을 쓰고 답을 토글 안에 접어 두면, 나중에 제목만
          보고 스스로 답해 본 뒤 펼쳐서 확인하는 <strong>셀프 퀴즈</strong>가 됩니다.
        </p>
        <div className="tip">
          <b>직접 해보기 ①</b> 노션에서 새 페이지를 만들고 4가지 블록을 하나씩 넣어 보세요.
          <span className="icode">/토글</span>을 입력해 토글 블록을 만들고, 제목에
          "우리 학습 플랫폼의 프론트는 무엇으로 만들어졌을까?"라고 쓴 뒤 안에
          "React!"를 접어 넣어 보세요. 첫 셀프 퀴즈 완성입니다.
        </div>
      </Section>

      <Section n={3} title="페이지 구조 잡기" sub="TIL 일지 · 트러블슈팅 모음 · 명령어 치트시트">
        <p>
          블록을 배웠으니 이제 <strong>집의 뼈대</strong>를 세울 차례예요. 노션 페이지는
          안에 또 페이지를 넣을 수 있어서, 폴더처럼 트리 구조를 만들 수 있습니다.
          수습 기간에 추천하는 구조는 딱 세 채예요.
        </p>
        <Code>{CODE_PAGE_TREE}</Code>
        <p>
          <strong>트러블슈팅 모음</strong>이 특히 중요해요. "막혔다가 뚫은 경험"은
          여러분의 실력이 가장 크게 자라는 순간인데, 안 적어 두면 다음에 똑같은 곳에서
          또 막혀요. 형식은 아래 4칸이면 충분합니다.
        </p>
        <Code>{CODE_TROUBLE_TEMPLATE}</Code>
        <div className="warn">
          <b>흔한 실수</b> — 처음부터 폴더를 10개, 20개 만들어 놓는 것. 서랍장만 잔뜩
          사 놓고 옷은 안 넣는 격이에요. 위의 <strong>세 페이지로 시작</strong>하고,
          기록이 넘칠 때 나누세요. 구조는 기록을 따라오는 것이지, 기록보다 먼저가 아닙니다.
        </div>
      </Section>

      <Section n={4} title="코드 블록으로 스니펫 관리" sub="스크린샷은 죽은 기록, 코드 블록은 살아 있는 기록">
        <p>
          명령어나 설정을 기록할 때 초보자가 가장 많이 하는 실수가 <strong>스크린샷으로
          찍어 두는 것</strong>이에요. 스크린샷 속 명령어는 복사가 안 되고, 검색도 안 되고,
          글자가 흐릿하면 읽지도 못해요. 반드시 <strong>코드 블록</strong>에 텍스트로
          저장하세요.
        </p>
        <Code>{CODE_SNIPPET}</Code>
        <p>
          코드 블록을 만들 때 <strong>언어를 지정</strong>하면(Shell, SQL, JavaScript 등)
          문법에 맞게 색이 입혀져 훨씬 읽기 좋아요. 우리 회사 스택 기준으로는
          Git·Docker 명령어(Shell), PostgreSQL 쿼리(SQL), React 코드(JavaScript)를
          각각의 언어로 지정해 모아 두면 나만의 치트시트가 완성됩니다.
        </p>
        <div className="tip">
          <b>직접 해보기 ②</b> 터미널을 열어 <span className="icode">git log --oneline -5</span>를
          실행하고, 명령어와 결과를 노션 코드 블록(언어: Shell)에 붙여 넣어 보세요.
          그리고 코드 블록에 마우스를 올려 <strong>복사 버튼</strong>을 눌러 터미널에
          다시 붙여넣기 — 이 왕복이 되는 순간, 스크린샷과의 차이를 몸으로 느낄 거예요.
        </div>
      </Section>

      <Section n={5} title="데이터베이스 맛보기 — 과제 트래커" sub="표에 필터·정렬·보기가 붙으면 데이터베이스">
        <p>
          노션의 <strong>데이터베이스</strong>는 이름이 거창하지만, 시작은 그냥
          <strong> 속성(컬럼)이 붙은 표</strong>예요. 우리가 배우는 PostgreSQL의 테이블과
          닮았죠 — 행(row) 하나가 데이터 하나, 열(column) 하나가 속성 하나. 다만 노션은
          SQL 대신 마우스 클릭으로 필터와 정렬을 겁니다.
        </p>
        <Code>{CODE_DATABASE}</Code>
        <p>
          만들기는 간단해요. <span className="icode">/데이터베이스</span>를 입력하고
          "표 보기"를 선택한 뒤, 속성으로 <strong>상태(선택)·마감일(날짜)·과목(선택)</strong>을
          추가하면 끝. 같은 데이터를 <strong>칸반 보드 보기</strong>로 바꾸면 과제 카드를
          "시작 전 → 진행 중 → 완료"로 드래그하며 옮길 수 있어서, 할 일이 눈에 확 들어옵니다.
        </p>
        <div className="tip">
          <b>연결해서 생각하기</b> 나중에 <Link to="/learn/sql"><strong>데이터베이스
          코스</strong></Link>에서 PostgreSQL을 배울 때 "아, 노션 데이터베이스의 필터가
          SQL의 WHERE고, 정렬이 ORDER BY구나"라고 연결되는 순간이 올 거예요.
          도구는 달라도 데이터를 다루는 사고방식은 하나입니다.
        </div>
      </Section>

      <Section n={6} title="검색되는 기록이 진짜 자산" sub="적는 것의 절반, 찾을 수 있게 적는 것이 나머지 절반">
        <p>
          열심히 적어도 <strong>못 찾으면 없는 기록</strong>이에요. 도서관에 책이 아무리
          많아도 색인이 없으면 창고일 뿐이죠. 노션은 <span className="kbd">Ctrl</span>+
          <span className="kbd">P</span> 한 번으로 전체 페이지를 검색할 수 있는데,
          이 검색이 잘 걸리게 적는 요령이 따로 있습니다.
        </p>
        <Code>{CODE_SEARCH_RULE}</Code>
        <p>
          핵심은 <strong>"3개월 뒤의 나는 남이다"</strong>라는 마음가짐이에요. 그 남이
          검색창에 뭐라고 칠지 상상하며 제목과 본문에 그 단어를 심어 두는 것 —
          이게 기록을 메모에서 <strong>자산</strong>으로 바꾸는 한 끗입니다.
        </p>
        <div className="warn">
          <b>주의</b> — 회사 코드나 시크릿(비밀번호, 토큰, <span className="icode">.env</span> 내용)을
          개인 노션에 통째로 복사하면 안 돼요. 기록하고 싶다면 값은
          <span className="icode">****</span>로 가리고 "어디에 있는지, 어떻게 발급받는지"만
          적으세요. 기록 습관만큼 보안 습관도 개발자의 기본기입니다.
        </div>
      </Section>

      <Section n={7} title="공유와 협업" sub="내 노트가 팀의 노트가 되는 순간">
        <p>
          노션의 모든 페이지는 <strong>링크 하나로 공유</strong>할 수 있어요. 오른쪽 위
          "공유" 버튼에서 특정 사람을 초대하거나, 링크가 있는 사람 모두 보게 열 수 있죠.
          권한도 <strong>보기 전용 / 댓글 가능 / 편집 가능</strong> 세 단계로 나뉩니다 —
          Gitea에서 저장소 권한을 나누는 것과 같은 개념이에요.
        </p>
        <p>
          수습 기간에 특히 좋은 활용법 두 가지예요. 첫째, <strong>트러블슈팅 페이지를
          동기와 공유</strong>하기 — 내가 어제 뚫은 문제를 동기가 오늘 만나는 일이 정말
          많거든요. 서로의 삽질 기록이 팀 전체의 지도가 됩니다. 둘째, <strong>멘토에게
          질문할 때 정리한 페이지 링크로 물어보기</strong> — "안 돼요"보다 "증상·시도한 것·
          에러 메시지를 정리했는데 봐 주세요"가 백 배 빠른 답을 받아요.
        </p>
        <div className="tip">
          <b>질문의 품격</b> 잘 정리된 질문 페이지는 그 자체로 "이 사람 일 잘하겠다"는
          신호예요. 신기하게도, 질문을 정리하다가 스스로 답을 찾는 일도 자주 생깁니다.
          남에게 설명하려고 정리하는 순간 머릿속이 정리되는 것 — 이걸 러버덕 효과라고 불러요.
        </div>
      </Section>

      <Section n={8} title="실습: 나만의 TIL 템플릿 만들기" sub="오늘 배운 것을 오늘 첫 기록으로">
        <p>
          이제 다 배웠으니 <strong>진짜로 만들 시간</strong>이에요. 아래 템플릿을 참고해서
          여러분만의 TIL 페이지를 만들고, <strong>바로 오늘, 이 코스에서 배운 것</strong>을
          첫 기록으로 남겨 보세요.
        </p>
        <svg className="diagram" viewBox="0 0 640 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="TIL 페이지 구조 도해: 날짜 제목 아래 오늘 배운 것, 오늘 막힌 것, 내일 할 것 세 블록이 놓이고 각 블록에 알맞은 노션 블록 종류가 짝지어져 있다">
          <rect x="150" y="16" width="340" height="42" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="320" y="42" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">📅 2026-07-16 (수) — 오늘의 TIL 페이지</text>

          <line x1="320" y1="58" x2="320" y2="76" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="100" y1="76" x2="540" y2="76" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="100" y1="76" x2="100" y2="94" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="320" y1="76" x2="320" y2="94" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="540" y1="76" x2="540" y2="94" stroke="var(--line)" strokeWidth="1.5" />

          <rect x="16" y="94" width="168" height="130" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="100" y="120" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">오늘 배운 것</text>
          <text x="100" y="142" textAnchor="middle" fontSize="12" fill="var(--muted)">Today I Learned</text>
          <line x1="36" y1="158" x2="164" y2="158" stroke="var(--line)" strokeWidth="1" />
          <text x="100" y="180" textAnchor="middle" fontSize="12" fill="var(--ink)">새로 안 개념 한 줄</text>
          <text x="100" y="200" textAnchor="middle" fontSize="12" fill="var(--muted)">텍스트 블록</text>

          <rect x="236" y="94" width="168" height="130" rx="8" fill="var(--card)" stroke="var(--rose)" strokeWidth="1.5" />
          <text x="320" y="120" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">오늘 막힌 것</text>
          <text x="320" y="142" textAnchor="middle" fontSize="12" fill="var(--muted)">＆ 해결 과정</text>
          <line x1="256" y1="158" x2="384" y2="158" stroke="var(--line)" strokeWidth="1" />
          <text x="320" y="180" textAnchor="middle" fontSize="12" fill="var(--ink)">제목만 보고 셀프 퀴즈</text>
          <text x="320" y="200" textAnchor="middle" fontSize="12" fill="var(--muted)">토글 블록 + 코드 블록</text>

          <rect x="456" y="94" width="168" height="130" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="540" y="120" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">내일 할 것</text>
          <text x="540" y="142" textAnchor="middle" fontSize="12" fill="var(--muted)">다음 한 걸음</text>
          <line x1="476" y1="158" x2="604" y2="158" stroke="var(--line)" strokeWidth="1" />
          <text x="540" y="180" textAnchor="middle" fontSize="12" fill="var(--ink)">체크박스로 남기기</text>
          <text x="540" y="200" textAnchor="middle" fontSize="12" fill="var(--muted)">할 일 목록 블록</text>

          <line x1="184" y1="159" x2="236" y2="159" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="4 4" />
          <line x1="404" y1="159" x2="456" y2="159" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="4 4" />

          <rect x="16" y="252" width="608" height="70" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="5 4" />
          <text x="320" y="278" textAnchor="middle" fontSize="13" fill="var(--ink)">이 3블록을 템플릿으로 만들고 매일 복제 → 하루 3분</text>
          <text x="320" y="302" textAnchor="middle" fontSize="12" fill="var(--muted)">100일 뒤 검색되는 나만의 성장 기록</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: TIL 페이지의 3블록 구조 — 배운 것·막힌 것·내일 할 것과 각각에 어울리는 노션 블록</p>
        <Code>{CODE_TIL_TEMPLATE}</Code>
        <ol className="olist">
          <li>노션에 <strong>"TIL 일지"</strong> 페이지를 만들어요. (섹션 3의 구조 참고)</li>
          <li>그 안에 오늘 날짜로 새 페이지를 만들고, 위 템플릿의 항목을 블록으로 조립해요.
            막힌 것 항목은 <strong>토글 블록</strong>, 명령어 항목은 <strong>코드 블록</strong>으로!</li>
          <li>"오늘 배운 것"에 이 코스에서 기억에 남는 것 3가지를 적어요.
            (예: 토글로 셀프 퀴즈 만들기, 스크린샷 대신 코드 블록, 3개월 뒤의 나는 남이다)</li>
          <li>다 만든 페이지에서 <span className="icode">...</span> 메뉴 →
            <strong> 복제</strong>를 눌러 보세요. 내일부터는 복제 한 번으로 새 일지를 시작할 수 있어요.</li>
          <li>마지막으로 <span className="kbd">Ctrl</span>+<span className="kbd">P</span>를 눌러
            방금 쓴 단어 하나로 내 페이지가 검색되는지 확인 — 검색되면 진짜 완성입니다.</li>
        </ol>
        <div className="tip">
          <b>직접 해보기 ③ (오늘의 미션)</b> 위 5단계를 끝내고, 완성한 TIL 페이지의
          공유 링크를 멘토에게 보내 보세요. "수습 기간 동안 매일 여기에 기록하겠습니다"라는
          한 줄과 함께요. 공개 선언은 습관을 만드는 가장 강력한 접착제입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📓 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분에겐 <strong>배운 것이 사라지지 않는 시스템</strong>이 생겼어요.
            블록으로 적고, 구조로 정리하고, 검색으로 꺼내 쓰고, 링크로 나눈다 —
            이 네 가지가 오늘의 전부입니다. 앞으로 모든 코스에서 배우는 내용을
            오늘 만든 TIL에 쌓아 보세요. 다음 도구가 궁금하다면{' '}
            <Link to="/learn/git-deep"><strong>Git과 Gitea로 협업하기</strong></Link> 코스에서
            "코드의 기록"을 남기는 법을 이어서 배우고, 각 코스의 과제를
            오늘 만든 <strong>과제 트래커</strong>에 등록해 관리해 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
