// 이 파일이 하는 일: "포트폴리오 만들기" 코스 — 포트폴리오를 '결과 자랑'이 아니라
// '과정의 이야기'로 다시 정의하고, 수습 8주 산출물을 재료 삼아 개발자/디자이너
// 각자의 포트폴리오를 만드는 방법을 7개 섹션으로 안내하는 정적 학습 페이지.
// (과정의 이야기 → STAR 틀 → 수습 8주 = 재료 → 개발자 편 → 디자이너 편 → 스크린샷 → 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램·예시는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_STORY_VS_LIST = `같은 프로젝트, 두 가지 소개 방식

[나열형 — 읽는 사람 기억에 안 남음]
"React와 Spring Boot로 게시판을 만들었습니다.
 로그인, 글쓰기, 댓글 기능이 있습니다."

[이야기형 — 읽는 사람이 '같이 일하고 싶다'고 느낌]
"댓글이 300개 넘는 글에서 페이지가 3초씩 멈추는 문제(문제)를 만나,
 개발자 도구로 렌더링 병목을 찾아보고(고민)
 목록을 페이지 단위로 잘라 불러오게 바꿔(해결)
 0.4초로 줄였습니다. '처음부터 데이터 양을 상상하며
 설계해야 한다'는 걸 배웠어요(배움)."

→ 기능 목록은 검색하면 나와요. 하지만
  문제 → 고민 → 해결 → 배움 의 이야기는 나만 쓸 수 있습니다.`;

const CODE_STAR = `STAR — 프로젝트 한 개를 정리하는 4칸 틀

S (Situation, 상황)   어떤 프로젝트였고, 나는 무슨 역할이었나?
T (Task, 과제)        내가 맡은 문제/목표는 정확히 무엇이었나?
A (Action, 행동)      나는 '구체적으로' 무엇을 했나? (제일 길게!)
R (Result, 결과)      그래서 뭐가 달라졌나? + 뭘 배웠나?

예시 — 수습 과제 하나를 STAR로:
S: 학습 플랫폼 과제로 출석 체크 화면을 맡음 (React, 2인 팀)
T: 새로고침하면 체크 상태가 사라지는 버그 해결
R: 새로고침해도 상태 유지, 멘토 코드리뷰 통과
A: 상태가 어디 저장되는지 추적 → 컴포넌트 안에만 있음을 발견
   → 서버 저장 vs 브라우저 저장을 비교 → 서버 API 저장으로 결정

함정 주의: 다들 S와 R만 쓰고 A를 한 줄로 끝내요.
읽는 사람이 궁금한 건 A — "너는 뭘 했는데?" 입니다.`;

const CODE_8WEEKS = `수습 8주 = 포트폴리오 재료 창고

주차        생기는 재료                    포트폴리오에서의 쓰임
──────────────────────────────────────────────────────────
1~2주차    과제집 산출물 (미니 실습들)      "기초를 이렇게 다졌다" 증거
3~6주차    티켓 (실제 이슈 처리 기록)       "실무 문제를 이렇게 풀었다" 사례
7~8주차    종합 프로젝트                   대표작 후보 1순위!
매주       회고·멘토 피드백                '배움(R)' 칸을 채울 원석

→ 즉, 포트폴리오를 "나중에 몰아서" 만드는 게 아니라
  지금 하는 과제 하나하나가 이미 포트폴리오의 한 페이지예요.
  오늘 닫은 티켓의 번호와 한 줄 메모만 남겨도 반은 완성입니다.`;

const CODE_README = `좋은 프로젝트 README의 뼈대 (Gitea/GitHub 공통)

# 프로젝트 이름 — 한 줄 소개
"무엇을 왜 만들었는지" 한 문장. (예: 출석 체크를 3초→즉시로)

## 스크린샷 또는 데모 GIF
글보다 먼저 화면. 읽는 사람은 3초 안에 떠나요.

## 내가 한 일 (팀 프로젝트라면 특히!)
- 출석 API 설계·구현 (Spring Boot)
- 상태 저장 버그 해결 (아래 트러블슈팅 참고)

## 트러블슈팅 — 이 프로젝트의 하이라이트
문제 → 원인 → 해결 을 짧게. STAR의 A를 여기에!

## 실행 방법
docker compose up 한 줄이면 최고. 안 되면 단계별로.

## 기술 스택
React · Spring Boot · PostgreSQL · Docker · AWS EC2`;

const CODE_DESIGNER_CASE = `디자이너 포트폴리오 — 한 작품의 케이스 스터디 구성

1) 커버         결과물 대표 이미지 + 프로젝트 한 줄 소개
2) 배경          누구를 위해, 왜 이 디자인이 필요했나 (S·T)
3) 과정          레퍼런스 조사 → 스케치 → 시안 A/B → 선택 이유 (A!)
4) 결과          최종 화면들 + 전/후 비교
5) 회고          다시 한다면 뭘 다르게 할까 (R)

버린 시안도 재료예요:
"시안 A는 예뻤지만 버튼이 안 보여서 B를 골랐다"
→ 이 한 줄이 '감각'이 아니라 '판단'을 보여줍니다.
읽는 사람이 궁금한 건 최종본이 아니라 왜 그렇게 골랐는가!`;

const CODE_SCREENSHOT = `스크린샷 체크리스트 — 찍기 전 30초 점검

□ 진짜 데이터처럼 보이는가?
  "ㅁㄴㅇㄹ", "test123" 대신 그럴듯한 이름·글 제목 넣기
□ 개인정보가 없는가?
  실명·이메일·토큰이 화면에 있으면 가리거나 더미로 교체
□ 브라우저 잡동사니를 잘랐는가?
  북마크바·탭 20개·알림 배지는 작품의 일부가 아님
□ 핵심이 한눈에 보이는가?
  전체 화면 1장보다, 자랑할 부분을 크게 자른 1장이 낫다
□ 흐름이 이어지는가?
  "클릭 전 → 클릭 후" 2장 세트가 긴 설명보다 강력

Windows 단축키:
Win + Shift + S   원하는 영역만 골라 캡처 (가장 추천!)
Alt + PrtSc       지금 활성 창만 캡처
Win + G           화면 녹화 (움직이는 기능 시연용)`;

const CODE_PRACTICE = `실습 양식 — 그대로 복사해서 채워 보세요

[1단계] 산출물 전수조사 (15분)
────────────────────────────────
번호  산출물               어디에 있나           대표작 후보?
 1    (예) 출석 체크 과제   Gitea 저장소 ○○      ★
 2    (예) 버그 티켓 #41    이슈 트래커
 3    ...
→ 사소해 보여도 일단 다 적기. 고르는 건 다음 단계에서.

[2단계] 대표작 1개 스토리 초안 (25분)
────────────────────────────────
제목(한 줄):
S 상황:
T 과제:
A 행동:  ← 최소 3문장! "무엇을 시도했고, 왜 그 방법을 골랐나"
R 결과와 배움:
첨부할 스크린샷 2장:  ① 문제 상황   ② 해결된 화면

다 썼으면 → 멘토에게 공유하고 피드백 받기.
"A가 더 궁금해요"라는 말을 들으면 정상 궤도입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'STAR 정리 틀' },
  { n: 3, label: '수습 8주 = 재료' },
  { n: 4, label: '개발자 편' },
  { n: 5, label: '디자이너 편' },
  { n: 6, label: '스크린샷 잘 찍기' },
  { n: 7, label: '실습: 대표작 초안' },
];

export default function PortfolioPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 무엇을 바꿔 주는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 디자인</div>
        <h1>포트폴리오 만들기<br />— 결과가 아니라 과정을 파는 법</h1>
        <p>
          포트폴리오는 완성작 전시회가 아니라, <strong>내가 문제를 어떻게 푸는 사람인지</strong>를
          보여주는 이야기책이에요. 이 코스에서는 수습 8주 동안 이미 쌓인 재료로
          그 이야기책의 첫 장을 직접 써 봅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 2개 포함</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>
          요리 오디션 프로그램을 떠올려 보세요. 심사위원의 마음을 움직이는 건 완성된 접시
          사진 한 장이 아니라, <strong>재료가 없을 때 어떻게 대처했고 실패한 소스를 어떻게
          살려냈는지</strong>의 과정이에요. 포트폴리오도 똑같습니다. 보는 사람(선배 개발자,
          디자이너, 면접관)이 진짜 궁금한 건 "무엇을 만들었나"보다
          <strong> "문제를 만났을 때 어떻게 움직이는 사람인가"</strong>예요.
        </p>
        <p>
          그래서 모든 프로젝트 소개는 네 박자로 씁니다 —
          <strong> 문제 → 고민 → 해결 → 배움</strong>. 아래 두 소개를 비교해 보세요.
        </p>
        <Code>{CODE_STORY_VS_LIST}</Code>
        <div className="warn">
          <b>흔한 착각</b> — "대단한 걸 만들어야 포트폴리오가 된다"는 생각이요.
          반대예요. 작은 버그 하나라도 <strong>내가 왜, 어떻게 풀었는지</strong> 설명할 수
          있으면 훌륭한 재료고, 화려한 결과물이라도 과정을 설명 못 하면 남의 옷 같아 보입니다.
        </div>
      </Section>

      <Section n={2} title="프로젝트 정리 틀 — STAR" sub="어떤 프로젝트든 4칸에 넣으면 이야기가 된다">
        <p>
          "과정을 이야기로 쓰라"는 말이 막막하죠? 그래서 틀이 있어요. 면접·자기소개서에서도
          쓰이는 <strong>STAR</strong>입니다. 상황(S)과 과제(T)로 무대를 깔고,
          행동(A)으로 주인공(나)이 움직이고, 결과(R)로 막을 내리는 — 사실상
          <strong> 모든 드라마의 구조</strong>예요.
        </p>
        <Code>{CODE_STAR}</Code>
        <p>
          핵심은 <strong>A(행동)가 주인공</strong>이라는 것. "팀으로 만들었습니다"가 아니라
          "나는 이 부분에서 두 가지 방법을 비교해 이걸 골랐습니다"까지 내려가야
          읽는 사람이 <em>나</em>를 볼 수 있어요. 팀 프로젝트일수록 더 그래요 —
          단체 사진 속에서 나를 찾으려면 내가 어디 서 있는지 표시해 줘야 하니까요.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="STAR 구조 도해 — 상황, 과제, 행동, 결과의 흐름과 각 칸에 쓸 내용">
          <text x="20" y="26" fontSize="14" fontWeight="600" fill="var(--ink)">STAR — 프로젝트 한 개를 담는 4칸 흐름</text>

          <rect x="20" y="48" width="130" height="70" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="85" y="74" fontSize="14" fontWeight="600" textAnchor="middle" fill="var(--primary)">S · 상황</text>
          <text x="85" y="96" fontSize="12" textAnchor="middle" fill="var(--muted)">어떤 프로젝트,</text>
          <text x="85" y="111" fontSize="12" textAnchor="middle" fill="var(--muted)">나는 무슨 역할</text>

          <rect x="180" y="48" width="130" height="70" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="245" y="74" fontSize="14" fontWeight="600" textAnchor="middle" fill="var(--teal)">T · 과제</text>
          <text x="245" y="96" fontSize="12" textAnchor="middle" fill="var(--muted)">내가 맡은</text>
          <text x="245" y="111" fontSize="12" textAnchor="middle" fill="var(--muted)">문제와 목표</text>

          <rect x="340" y="48" width="130" height="70" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="3" />
          <text x="405" y="74" fontSize="14" fontWeight="600" textAnchor="middle" fill="var(--amber)">A · 행동</text>
          <text x="405" y="96" fontSize="12" textAnchor="middle" fill="var(--muted)">내가 구체적으로</text>
          <text x="405" y="111" fontSize="12" textAnchor="middle" fill="var(--muted)">한 일 (제일 길게)</text>

          <rect x="500" y="48" width="120" height="70" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="560" y="74" fontSize="14" fontWeight="600" textAnchor="middle" fill="var(--rose)">R · 결과</text>
          <text x="560" y="96" fontSize="12" textAnchor="middle" fill="var(--muted)">뭐가 달라졌나</text>
          <text x="560" y="111" fontSize="12" textAnchor="middle" fill="var(--muted)">+ 뭘 배웠나</text>

          <line x1="152" y1="83" x2="176" y2="83" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="170,78 177,83 170,88" fill="none" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <line x1="312" y1="83" x2="336" y2="83" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="330,78 337,83 330,88" fill="none" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <line x1="472" y1="83" x2="496" y2="83" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="490,78 497,83 490,88" fill="none" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />

          <text x="85" y="146" fontSize="12" textAnchor="middle" fill="var(--muted)">무대를 깐다</text>
          <text x="245" y="146" fontSize="12" textAnchor="middle" fill="var(--muted)">목표를 세운다</text>
          <text x="405" y="146" fontSize="12" textAnchor="middle" fill="var(--amber)">주인공이 움직인다</text>
          <text x="560" y="146" fontSize="12" textAnchor="middle" fill="var(--muted)">막을 내린다</text>

          <rect x="340" y="170" width="280" height="130" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" strokeDasharray="5 4" />
          <text x="360" y="194" fontSize="13" fontWeight="600" fill="var(--amber)">A 칸을 채우는 재료</text>
          <text x="360" y="220" fontSize="12" fill="var(--ink)">· 무엇을 시도했나</text>
          <text x="360" y="242" fontSize="12" fill="var(--ink)">· 어떤 방법들을 비교했나</text>
          <text x="360" y="264" fontSize="12" fill="var(--ink)">· 왜 그 방법을 골랐나</text>
          <text x="360" y="286" fontSize="12" fill="var(--ink)">· 시도했다가 버린 것은</text>

          <line x1="405" y1="122" x2="405" y2="166" stroke="var(--amber)" strokeWidth="2" strokeDasharray="4 4" strokeLinecap="round" />

          <rect x="20" y="170" width="290" height="130" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="40" y="194" fontSize="13" fontWeight="600" fill="var(--ink)">흔한 함정</text>
          <text x="40" y="220" fontSize="12" fill="var(--muted)">S와 R만 길게 쓰고</text>
          <text x="40" y="242" fontSize="12" fill="var(--muted)">A를 한 줄로 끝낸다</text>
          <text x="40" y="270" fontSize="12" fill="var(--rose)">읽는 사람이 궁금한 건 A —</text>
          <text x="40" y="288" fontSize="12" fill="var(--rose)">"너는 뭘 했는데?"</text>

          <text x="320" y="332" fontSize="12.5" textAnchor="middle" fill="var(--muted)">S · T · A · R 네 칸 중 길이의 절반은 A가 가져가야 한다</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: STAR 4칸의 흐름 — 무대(S·T) → 주인공의 행동(A) → 결말(R), 승부처는 A</p>
        <div className="tip">
          <b>직접 확인해 보기</b> 가장 최근에 끝낸 과제 하나를 골라, 종이에 S/T/A/R 네 줄만
          써 보세요. 5분이면 됩니다. A가 한 줄밖에 안 나온다면 — 그 과제를 하며
          "뭘 시도했다가 버렸는지"를 떠올려 보세요. 버린 시도가 곧 A의 재료예요.
        </div>
      </Section>

      <Section n={3} title="수습 8주가 곧 포트폴리오 재료다" sub="나중에 몰아서 만드는 게 아니라, 지금 쌓이고 있다">
        <p>
          "포트폴리오 만들 시간이 없어요"는 절반만 맞는 말이에요. 만들 <strong>시간</strong>은
          따로 필요하지만, <strong>재료</strong>는 이미 매일 생기고 있거든요. 우리 수습 과정의
          산출물을 재료 창고로 보면 이렇게 정리됩니다.
        </p>
        <Code>{CODE_8WEEKS}</Code>
        <p>
          농사와 같아요. 수확(포트폴리오 완성)은 마지막이지만, 씨 뿌리기(기록)는 지금이에요.
          티켓을 닫을 때 <strong>"무엇이 문제였고 어떻게 풀었는지 두 줄"</strong>만 이슈에
          남겨 두면, 8주 뒤의 나는 과거의 나에게 큰절을 하게 됩니다. 기억은 반드시
          휘발되거든요 — 특히 "고민(A)" 부분이 제일 먼저 사라져요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 우리 Gitea(<span className="icode">edu.awesomedevapp.com:3000</span>)에
          로그인해서 내가 올린 커밋과 닫은 이슈 목록을 열어 보세요. 그중 "이건 좀 고생했는데"
          싶은 것 1개를 골라, 그 이슈에 <strong>문제/해결 두 줄 코멘트</strong>를 지금 달아 보세요.
          방금 포트폴리오 한 조각을 저장한 거예요.
        </div>
      </Section>

      <Section n={4} title="개발자 포트폴리오 — 저장소가 곧 얼굴" sub="잔디는 성실함을, README는 사고력을 보여준다">
        <p>
          개발자의 포트폴리오는 별도의 예쁜 사이트가 아니어도 됩니다.
          <strong> Gitea/GitHub 프로필 자체</strong>가 포트폴리오예요. 보는 사람의 시선 순서는
          보통 이래요 — ① 잔디(활동 그래프) ② 고정된 대표 저장소 ③ 그 저장소의 README.
        </p>
        <ol className="olist">
          <li>
            <strong>잔디(커밋 그래프)</strong>는 출석부예요. 하루에 몰아서 100커밋보다,
            매일 조금씩 초록 칸이 이어지는 쪽이 "꾸준한 사람"으로 읽힙니다. 커밋 메시지도
            기록의 일부 — <span className="icode">fix</span> 한 단어보다
            <span className="icode">fix: 새로고침 시 출석 상태 유실 수정</span>처럼 쓰면
            그 자체가 이야기가 돼요.
          </li>
          <li>
            <strong>README</strong>는 저장소의 현관문이에요. 코드를 한 줄도 안 읽고도
            "이 사람이 뭘 왜 어떻게 만들었는지" 알 수 있어야 합니다.
          </li>
          <li>
            <strong>트러블슈팅 문단</strong>이 진짜 승부처 — 섹션 2에서 쓴 STAR의 A를
            여기 옮겨 담으세요.
          </li>
        </ol>
        <Code>{CODE_README}</Code>
        <div className="warn">
          <b>올리기 전에 꼭!</b> — 저장소를 공개하기 전에 <strong>비밀번호·API 키·
          <span className="icode">.env</span> 파일</strong>이 커밋에 섞여 있지 않은지 확인하세요.
          한 번 커밋된 비밀은 삭제해도 이력에 남습니다. 회사 코드는 공개 저장소에 올리지 않는 게
          원칙이에요 — 공개용은 개인 연습 프로젝트로, 회사 작업은 사내 Gitea에서 링크로.
        </div>
      </Section>

      <Section n={5} title="디자이너 포트폴리오 — 케이스 스터디로 말하기" sub="비핸스는 전시장, 노션은 서재">
        <p>
          디자이너는 결과물이 눈에 보이니 오히려 함정에 빠지기 쉬워요 — 예쁜 최종본만
          주르륵 올리는 것. 하지만 섹션 1에서 배웠죠? 보는 사람이 궁금한 건
          <strong> 왜 그렇게 디자인했는가</strong>입니다. 그래서 작품 하나를
          <strong> 케이스 스터디</strong>(사건 기록) 형식으로 폅니다.
        </p>
        <Code>{CODE_DESIGNER_CASE}</Code>
        <p>
          어디에 올릴까요? <strong>비핸스</strong>는 갤러리형 전시장 — 이미지 중심이라
          첫인상이 강하고, 다른 디자이너들에게 노출되기 좋아요. <strong>노션</strong>은
          서재형 — 글·이미지·링크를 자유롭게 섞을 수 있어 과정 설명이 긴 케이스 스터디에
          유리하고, 링크 하나로 공유가 끝나죠. 둘 중 하나를 고르기보다
          <strong> 비핸스에 전시하고 노션에 과정을 쌓는</strong> 조합이 흔한 정답입니다.
        </p>
        <div className="tip">
          <b>개발자도 남 얘기가 아니에요</b> — 우리 학습 플랫폼 과제에서 화면을 만들었다면
          "왜 버튼을 여기 뒀는지" 한 줄 설명하는 순간 그게 케이스 스터디예요. 반대로
          디자이너도 Gitea에 시안 파일과 결정 기록을 커밋하면 잔디가 자랍니다.
          두 세계는 생각보다 붙어 있어요.
        </div>
      </Section>

      <Section n={6} title="스크린샷 잘 찍는 법" sub="같은 작업물도 사진이 절반이다">
        <p>
          중고 거래 앱에서 같은 물건이라도 사진이 흐릿하면 안 팔리죠. 포트폴리오의
          스크린샷도 똑같아요 — <strong>작업물의 증명사진</strong>입니다. 찍기 전에
          아래 체크리스트로 30초만 점검하세요.
        </p>
        <Code>{CODE_SCREENSHOT}</Code>
        <p>
          한 가지 더 — 움직이는 기능(드래그, 실시간 갱신 등)은 정지 사진으론 전달이 안 돼요.
          짧은 <strong>화면 녹화 → GIF</strong>로 만들면 README 맨 위에서 3초 만에
          시선을 잡습니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 바로 <span className="kbd">Win</span> +
          <span className="kbd">Shift</span> + <span className="kbd">S</span>를 눌러
          이 페이지의 섹션 하나를 영역 캡처해 보세요. 그리고 체크리스트에 비춰 보기 —
          잡동사니 없이 핵심만 담겼나요? 이 감각이 손에 붙으면 캡처가 습관이 됩니다.
        </div>
      </Section>

      <Section n={7} title="실습 — 산출물 목록화 + 대표작 스토리 초안" sub="오늘 40분, 포트폴리오의 첫 페이지">
        <p>
          이제 배운 걸 전부 모아 손을 움직일 시간이에요. 목표는 두 가지 —
          <strong> ① 내 재료 창고의 재고 조사</strong>,
          <strong> ② 대표작 1개의 스토리 초안</strong>. 완벽하게 쓰려고 하지 마세요.
          초안은 원래 못생긴 게 정상이고, 못생긴 초안이 없는 사람은 완성본도 없습니다.
        </p>
        <Code>{CODE_PRACTICE}</Code>
        <ol className="olist">
          <li>과제집 산출물·닫은 티켓·진행 중인 종합 프로젝트를 <strong>빠짐없이</strong> 표에 적어요. (섹션 3의 창고 조사)</li>
          <li>그중 "고생한 이야기가 있는" 것 하나에 ★을 칩니다 — 화려한 것 말고 <strong>이야기가 있는 것</strong>.</li>
          <li>★ 과제를 STAR 4칸으로 풀어 씁니다. A는 최소 3문장! (섹션 2)</li>
          <li>첨부할 스크린샷 2장을 체크리스트대로 찍어요. (섹션 6)</li>
          <li>개발자는 해당 저장소 README에, 디자이너는 노션 페이지에 초안을 옮겨 담고 멘토에게 링크를 공유합니다.</li>
        </ol>
        <div className="tip">
          <b>제출 기준은 하나</b> — 멘토가 읽고 "그래서 그 다음엔 어떻게 했어요?"라고
          물어보고 싶어지면 성공이에요. 질문이 생기는 글이 좋은 포트폴리오 글입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📁 여기까지 왔다면</h3>
          <p className="muted">
            이제 포트폴리오가 <strong>결과 전시가 아니라 과정의 이야기</strong>라는 것,
            그 이야기를 <strong>STAR 틀</strong>에 담는 법, 그리고 수습 8주의 산출물이
            이미 재료라는 걸 알게 됐어요. 오늘 쓴 초안은 종합 프로젝트가 끝날 때마다 한 장씩
            늘려 가세요. 대표작을 더 단단하게 만들고 싶다면{' '}
            <Link to="/learn/git-deep"><strong>Git과 협업</strong></Link> 코스에서 커밋 메시지와
            저장소 관리 습관을, <Link to="/learn/coding"><strong>코딩 기초</strong></Link>{' '}
            코스에서 트러블슈팅에 쓸 실력을 이어서 다져 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
