// 이 파일이 하는 일: "와이어프레임 기초" 코스 — 화면을 만들기 전에 그리는 '설계 도면'인
// 와이어프레임을 8개 섹션으로 안내하는 정적 학습 페이지.
// (건축 도면 비유 → 왜 대충 그리나 → 3단계 → 화면 부품 어휘 → 플로우 → 우리 플랫폼 역설계 → 피그마 키트 → 종합 프로젝트 연결)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_BLUEPRINT = `같은 '집'을 표현하는 두 가지 그림

건축 도면 (와이어프레임)            완성 조감도 (디자인 시안)
──────────────────────         ──────────────────────
벽·문·창문의 위치와 크기            벽지 색, 조명 분위기, 가구 브랜드
선과 네모, 글자뿐                   사진처럼 예쁜 렌더링
그리는 데 10분                      그리는 데 며칠
"동선이 이상한데?" 즉시 수정         고치려면 처음부터 다시

→ 순서가 핵심이에요. 도면에서 구조를 확정한 뒤에
  꾸미기 시작해야, 다 지어 놓고 벽을 부수는 일이 없어요.`;

const CODE_LOFI = `완성도를 일부러 낮추는 이유 — '버리는 비용' 비교

손그림 와이어프레임 1장:  10분  → 버려도 10분 손해
피그마 예쁜 시안 1장:     3시간 → 버리면 3시간 + 아까운 마음
코드로 만든 화면 1개:     이틀  → 버리자는 말을 꺼내기도 힘듦

아이디어 10개 중 좋은 건 보통 1~2개.
나머지 8개를 '싸게' 버릴 수 있어야 좋은 걸 빨리 찾습니다.

+ 심리 효과: 대충 그린 그림엔 "여기 이상해요"라고 말하기 쉽지만,
  반짝반짝한 시안엔 "색이 예쁘네요" 같은 겉모습 얘기만 나와요.`;

const CODE_3STEPS = `와이어프레임의 3단계 — 점점 또렷해지는 사진처럼

1단계  손그림 (Lo-Fi)
       종이+펜. 네모와 낙서 수준. 1장에 1~2분.
       목적: 아이디어 쏟아내고 골라내기

2단계  회색 박스 (Mid-Fi)
       피그마 등 도구로. 회색 네모 + 진짜 텍스트 + 정확한 크기.
       색·사진·아이콘은 아직 금지!
       목적: 배치와 흐름을 팀과 확정하기

3단계  디자인 시안 (Hi-Fi)
       색·폰트·이미지·로고까지 입힌 '완성 예상도'.
       목적: 개발 전 최종 확인, 개발자에게 전달

함정: 1단계를 건너뛰고 3단계부터 시작하면
      '예쁘지만 구조가 이상한' 화면이 나옵니다.`;

const CODE_VOCAB = `화면 부품 어휘장 — 팀 대화가 빨라지는 단어들

헤더(Header)     화면 맨 위 고정 띠. 로고·메뉴·프로필이 사는 곳
네비게이션(Nav)   페이지 사이를 이동하는 메뉴 묶음 (상단 바, 사이드바)
카드(Card)       정보 한 덩어리를 담는 네모. 목록에서 반복됨
모달(Modal)      화면 위에 '팝' 뜨는 창. 뒤 배경은 어두워짐
탭(Tab)          같은 자리에서 내용만 갈아 끼우는 전환 메뉴
버튼(Button)     누르면 무언가 '일어나는' 것 (이동만 하면 링크)
폼(Form)         입력창 + 제출 버튼 묶음. 로그인 화면이 대표
푸터(Footer)     맨 아래. 회사 정보·약관 링크

→ "위에 그거, 누르면 뜨는 네모"라고 말하면 회의가 3배 길어져요.
  "헤더의 프로필 버튼을 누르면 모달이 떠요" — 한 문장 끝!`;

const CODE_FLOW = `화면 플로우 — 화면 '한 장'이 아니라 '이동'을 그린다

[로그인] ──성공──> [코스 목록] ──카드 클릭──> [코스 상세]
    │                  │
  실패                 검색
    │                  │
    v                  v
[에러 메시지        [검색 결과]
 + 다시 입력]

화살표 위에 '무엇을 하면 이동하는지'(조건)를 꼭 적으세요.
플로우를 그리다 보면 이런 질문이 저절로 나옵니다:
- 로그인에 실패하면? (에러 화면이 설계에 있나?)
- 검색 결과가 0개면? (빈 화면은 뭘 보여 주지?)
→ 코드를 짜기 '전에' 구멍을 찾는 게 플로우의 힘이에요.`;

const CODE_REVERSE = `역설계 실습 — 지금 보고 있는 이 플랫폼을 도면으로 되돌리기

준비물: 종이 1장, 펜 1자루, 이 학습 플랫폼

1) 학습 센터 메인 화면을 띄운다
2) 눈에 보이는 걸 전부 '네모'로만 종이에 옮긴다
   - 이미지는 X자 친 네모
   - 글자는 구불구불한 선 (진짜 글자 쓰지 말기!)
   - 버튼은 모서리 둥근 네모
3) 각 네모 옆에 섹션 4에서 배운 어휘로 이름표를 단다
   (헤더? 카드? 네비게이션?)
4) 옆 사람 것과 비교 — 같은 화면인데 네모 크기·개수가
   다르다면, 서로 '중요하다고 본 것'이 달랐다는 뜻!

목표 시간: 15분. 잘 그리기 대회가 아니에요 — 구조를 '읽어내는' 연습입니다.`;

const CODE_FIGMA_KIT = `피그마 와이어프레임 키트 만들기 — 나만의 레고 블록 상자

1) figma.com 무료 가입 후 새 파일 (Design file)
2) 프레임 만들기: F 키 → 오른쪽에서 Desktop(1440) 선택
3) 부품 5개를 회색으로만 만든다:
   - 헤더:  가로로 긴 네모 (회색 #DDD 같은 밝은 회색)
   - 카드:  세로 네모 + 위쪽에 X자 친 이미지 자리
   - 버튼:  모서리 둥근 작은 네모 + 가운데 텍스트
   - 입력창: 테두리만 있는 네모 + 왼쪽 안내 텍스트
   - 탭:   글자 3개 나란히 + 선택된 것 아래만 밑줄
4) 각 부품을 선택 → 우클릭 → Create component (◆ 표시)
5) 왼쪽 Assets 탭에서 부품을 끌어다 화면 조립!

컴포넌트로 만들어 두면 React와 똑같은 사고방식이에요 —
부품 하나를 고치면 복사해 둔 모든 곳이 함께 바뀝니다.`;

const CODE_CHECK = `와이어프레임 셀프 체크 — 넘어가기 전에 3가지만

□ 색을 썼나요? → 회색 말고 색이 보이면 아직 이 단계가 아님
□ 화면이 '한 장'뿐인가요? → 성공/실패/빈 화면까지 그렸는지
□ 말로 설명이 되나요? → "여기는 헤더, 누르면 모달이..."
   부품 이름으로 화면 전체를 설명할 수 있으면 통과!`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '3단계 진화' },
  { n: 4, label: '화면 부품 어휘' },
  { n: 5, label: '플로우 그리기' },
  { n: 6, label: '역설계 실습' },
  { n: 7, label: '피그마 키트' },
  { n: 8, label: '7주차 프로젝트로' },
];

export default function WireframePage() {
  return (
    <div>
      {/* 히어로: 이 코스가 무엇을 다루고 어디로 이어지는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 디자인</div>
        <h1>와이어프레임 기초<br />— 코드보다 먼저 그리는 설계 도면</h1>
        <p>
          집을 지을 때 도면 없이 벽돌부터 쌓는 사람은 없어요. 화면도 마찬가지 —
          코드를 치기 전에 <strong>네모와 선만으로 구조를 그리는 기술</strong>이 와이어프레임입니다.
          이 코스가 끝나면 종이 한 장으로 화면을 설계하고, 피그마로 나만의 부품 상자까지 만들 수 있어요.
        </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>와이어프레임(Wireframe)</strong>은 화면의 <strong>뼈대 그림</strong>이에요.
          어디에 메뉴가 있고, 어디에 목록이 오고, 버튼은 몇 개인지 — <strong>위치와 크기</strong>만
          네모와 선으로 그립니다. 색, 예쁜 폰트, 사진은 일부러 뺍니다.
        </p>
        <p>
          건축 도면과 완전히 같은 역할이에요. 도면에는 벽지 색이 없죠. 대신 벽이 어디 서고
          문이 어느 쪽으로 열리는지가 있어요. 그 단계에서 "화장실이 현관에서 너무 머네"를
          발견하면 지우개로 고치면 끝이지만, 집을 다 짓고 발견하면 벽을 부숴야 합니다.
        </p>
        <Code>{CODE_BLUEPRINT}</Code>
        <div className="tip">
          <b>한 줄 정의</b> 와이어프레임은 <strong>"무엇이 어디에 있는가"</strong>에만 답하는
          그림이에요. "얼마나 예쁜가"는 다음 단계(디자인 시안)의 질문입니다.
        </div>
      </Section>

      <Section n={2} title="왜 일부러 대충 그릴까" sub="빨리 버리기 위해서">
        <p>
          와이어프레임의 목적은 잘 그리는 게 아니라 <strong>빨리 버리는 것</strong>이에요.
          첫 아이디어가 최고인 경우는 거의 없거든요. 좋은 배치는 보통 여러 개를 그려 놓고
          비교하다가 나옵니다. 그러려면 한 장 버리는 게 <strong>하나도 아깝지 않을 만큼 싸야</strong> 해요.
        </p>
        <Code>{CODE_LOFI}</Code>
        <p>
          비유하면 <strong>연필 스케치와 유화</strong>의 차이예요. 화가도 유화 물감을 짜기 전에
          연필로 구도를 수십 번 잡아 봅니다. 스케치는 찢어 버려도 아프지 않으니까요.
          공들인 그림일수록 "이거 갈아엎자"는 말이 목구멍에서 안 나옵니다 —
          이걸 <strong>매몰 비용의 함정</strong>이라고 해요.
        </p>
        <div className="warn">
          <b>수습 개발자가 가장 많이 하는 실수</b> — 화면 배치가 확정되기 전에
          React 코드부터 짜기 시작하는 것. 배치가 바뀌면 코드도 갈아엎어야 해요.
          <strong>그리기는 분 단위, 코딩은 일 단위</strong>라는 걸 기억하세요. 싼 것부터!
        </div>
      </Section>

      <Section n={3} title="손그림 → 회색 박스 → 시안" sub="3단계로 점점 또렷해진다">
        <p>
          와이어프레임은 한 번에 완성하는 게 아니라 <strong>3단계로 해상도를 올려</strong> 가요.
          흐릿한 사진의 초점이 점점 맞아 가는 것처럼, 단계마다 확정하는 것이 다릅니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="와이어프레임 3단계 진화: 손그림 Lo-Fi, 회색 박스 Mid-Fi, 디자인 시안 Hi-Fi 순으로 완성도가 올라가는 흐름">
          <text x="320" y="22" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">완성도가 올라가는 3단계</text>

          <rect x="20" y="44" width="170" height="200" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="5 4" />
          <text x="105" y="66" textAnchor="middle" fontSize="13" fontWeight="700" fill="var(--primary)">1단계 · 손그림</text>
          <text x="105" y="83" textAnchor="middle" fontSize="12" fill="var(--muted)">Lo-Fi · 종이+펜</text>
          <line x1="42" y1="100" x2="168" y2="100" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <line x1="42" y1="118" x2="120" y2="118" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <rect x="42" y="132" width="56" height="42" rx="8" fill="none" stroke="var(--muted)" strokeWidth="1.5" strokeDasharray="4 3" />
          <rect x="110" y="132" width="58" height="42" rx="8" fill="none" stroke="var(--muted)" strokeWidth="1.5" strokeDasharray="4 3" />
          <line x1="42" y1="188" x2="150" y2="188" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <text x="105" y="216" textAnchor="middle" fontSize="12" fill="var(--ink)">1장에 1~2분</text>
          <text x="105" y="233" textAnchor="middle" fontSize="12" fill="var(--muted)">아이디어 골라내기</text>

          <rect x="235" y="44" width="170" height="200" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="320" y="66" textAnchor="middle" fontSize="13" fontWeight="700" fill="var(--teal)">2단계 · 회색 박스</text>
          <text x="320" y="83" textAnchor="middle" fontSize="12" fill="var(--muted)">Mid-Fi · 피그마</text>
          <rect x="257" y="94" width="126" height="16" rx="8" fill="none" stroke="var(--teal)" strokeWidth="1.5" />
          <rect x="257" y="120" width="60" height="54" rx="8" fill="none" stroke="var(--teal)" strokeWidth="1.5" />
          <rect x="323" y="120" width="60" height="54" rx="8" fill="none" stroke="var(--teal)" strokeWidth="1.5" />
          <rect x="257" y="182" width="126" height="14" rx="7" fill="none" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="320" y="216" textAnchor="middle" fontSize="12" fill="var(--ink)">색·사진 아직 금지</text>
          <text x="320" y="233" textAnchor="middle" fontSize="12" fill="var(--muted)">배치와 흐름 확정</text>

          <rect x="450" y="44" width="170" height="200" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="535" y="66" textAnchor="middle" fontSize="13" fontWeight="700" fill="var(--amber)">3단계 · 디자인 시안</text>
          <text x="535" y="83" textAnchor="middle" fontSize="12" fill="var(--muted)">Hi-Fi · 완성 예상도</text>
          <rect x="472" y="94" width="126" height="16" rx="8" fill="var(--primary)" stroke="var(--primary)" strokeWidth="1.5" />
          <rect x="472" y="120" width="60" height="54" rx="8" fill="var(--amber)" stroke="var(--amber)" strokeWidth="1.5" />
          <rect x="538" y="120" width="60" height="54" rx="8" fill="var(--rose)" stroke="var(--rose)" strokeWidth="1.5" />
          <rect x="472" y="182" width="126" height="14" rx="7" fill="var(--teal)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="535" y="216" textAnchor="middle" fontSize="12" fill="var(--ink)">색·폰트·이미지</text>
          <text x="535" y="233" textAnchor="middle" fontSize="12" fill="var(--muted)">개발 전 최종 확인</text>

          <line x1="196" y1="144" x2="228" y2="144" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="220,138 229,144 220,150" fill="none" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" />
          <line x1="411" y1="144" x2="443" y2="144" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="435,138 444,144 435,150" fill="none" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" />

          <line x1="20" y1="278" x2="620" y2="278" stroke="var(--line)" strokeWidth="1.5" />
          <polyline points="612,272 621,278 612,284" fill="none" stroke="var(--line)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="20" y="300" fontSize="12" fill="var(--muted)">완성도 낮음 · 버리기 쉬움</text>
          <text x="620" y="300" textAnchor="end" fontSize="12" fill="var(--muted)">완성도 높음 · 고치기 비쌈</text>
          <text x="320" y="330" textAnchor="middle" fontSize="12.5" fill="var(--rose)">1단계를 건너뛰고 3단계부터 시작하면 예쁘지만 구조가 이상한 화면</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 손그림 → 회색 박스 → 시안, 단계마다 완성도가 올라가고 수정 비용도 함께 올라간다</p>
        <Code>{CODE_3STEPS}</Code>
        <p>
          단계마다 <strong>결정하는 사람의 질문</strong>이 달라진다는 게 포인트예요.
          손그림 앞에서는 "이 기능이 필요한가?"를, 회색 박스 앞에서는 "이 배치가 편한가?"를,
          시안 앞에서는 "이 색과 느낌이 맞나?"를 물어요. 순서를 지키면 앞 단계 결정을
          되돌리는 일이 확 줄어듭니다.
        </p>
        <div className="tip">
          <b>실무 감각</b> 어썸데브에서 새 기능 회의를 하면 화이트보드에 손그림부터 그려요.
          회의 중에 그리고, 회의 중에 지우죠. 피그마를 여는 건 방향이 정해진 <strong>다음</strong>입니다.
        </div>
      </Section>

      <Section n={4} title="화면 부품 어휘 익히기" sub="헤더·카드·모달·탭 — 이름을 알면 대화가 빨라진다">
        <p>
          화면은 몇 가지 <strong>정해진 부품의 조합</strong>이에요. 레고에 기본 블록이 있듯이
          웹 화면에도 전 세계 공통의 블록 이름이 있습니다. 이름을 알면 팀과의 대화도,
          와이어프레임에 이름표를 다는 것도 빨라져요.
        </p>
        <Code>{CODE_VOCAB}</Code>
        <p>
          이 어휘는 나중에 React 컴포넌트 이름과 그대로 이어져요.
          <span className="icode">&lt;Header /&gt;</span>, <span className="icode">&lt;CourseCard /&gt;</span>,
          <span className="icode">&lt;LoginModal /&gt;</span> — 와이어프레임에서 부품을 잘 쪼갠 사람이
          컴포넌트도 잘 쪼갭니다. 도면의 방 구분이 그대로 벽이 되는 것과 같아요.
        </p>
        <div className="tip">
          <b>눈 훈련</b> 오늘부터 아무 사이트나 열 때마다 속으로 이름을 붙여 보세요.
          "저건 헤더, 저건 카드 목록, 지금 뜬 건 모달." 일주일이면 화면이 부품 단위로 보이기 시작해요.
        </div>
      </Section>

      <Section n={5} title="플로우 그리기" sub="화면 사이의 '이동'을 화살표로">
        <p>
          화면 한 장을 잘 그렸어도 반쪽짜리예요. 사용자는 화면 <strong>사이를 이동</strong>하니까요.
          화면들을 화살표로 잇고, 화살표 위에 "무엇을 하면 넘어가는지"를 적은 그림을
          <strong> 플로우(Flow)</strong>라고 합니다. 지하철 노선도에서 역(화면)과
          노선(이동)을 함께 그리는 것과 같아요.
        </p>
        <Code>{CODE_FLOW}</Code>
        <p>
          플로우의 진짜 가치는 <strong>구멍 찾기</strong>예요. "실패하면?", "결과가 없으면?",
          "뒤로 가면?" — 화살표를 그리다 보면 미처 생각 못 한 화면이 드러나요.
          이 구멍을 코딩 <strong>전에</strong> 찾으면 10분짜리 수정이고,
          코딩 <strong>후에</strong> 찾으면 야근입니다.
        </p>
        <div className="warn">
          <b>해피 패스의 함정</b> — 모든 게 잘 풀리는 경로(해피 패스)만 그리고 끝내지 마세요.
          실제 사용자는 오타를 내고, 뒤로 가기를 누르고, 검색 결과 0개를 만납니다.
          에러·빈 화면·로딩까지 그려야 진짜 설계예요.
        </div>
      </Section>

      <Section n={6} title="직접 확인해 보기 ① — 우리 플랫폼 역설계" sub="완성된 화면을 도면으로 되돌리는 연습">
        <p>
          설계 연습의 가장 좋은 교재는 <strong>이미 잘 만들어진 화면</strong>이에요.
          마침 여러분 눈앞에 하나 있죠 — 지금 보고 있는 이 학습 플랫폼입니다.
          완성된 화면에서 색과 글자를 머릿속으로 지우고 <strong>뼈대만 종이에 옮기는</strong>
          역설계를 해 봅시다.
        </p>
        <Code>{CODE_REVERSE}</Code>
        <p>
          역설계를 하면 두 가지가 보여요. 첫째, 잘 만든 화면일수록 부품이
          <strong> 규칙적으로 반복</strong>된다는 것(카드가 다 같은 크기죠?).
          둘째, 여백도 <strong>설계의 일부</strong>라는 것 — 아무것도 없는 자리가
          우연이 아니라 의도라는 걸 그려 보면 알게 됩니다.
        </p>
        <div className="tip">
          <b>한 단계 더</b> 다 그렸다면 이 플랫폼의 <strong>플로우</strong>도 그려 보세요.
          로그인 → 학습 센터 → 코스 페이지(지금 여기!)까지, 화살표 위에 조건을 적으면서요.
          섹션 5에서 배운 걸 실전 화면에 바로 적용하는 겁니다.
        </div>
      </Section>

      <Section n={7} title="직접 확인해 보기 ② — 피그마로 와이어프레임 키트 만들기" sub="회색 부품 5개짜리 나만의 레고 상자">
        <p>
          손그림 다음 단계인 <strong>회색 박스</strong>는 도구가 필요해요. 실무 표준은
          <strong> 피그마(Figma)</strong> — 브라우저에서 바로 돌아가고 무료 계정으로 충분합니다.
          오늘은 화면을 그리기 전에, 매번 다시 쓸 수 있는 <strong>부품 키트</strong>부터 만들어요.
          레고 놀이 전에 블록 상자부터 채우는 셈이죠.
        </p>
        <Code>{CODE_FIGMA_KIT}</Code>
        <p>
          키트가 완성됐다면 첫 조립 과제: 섹션 6에서 종이에 그린 <strong>우리 플랫폼 역설계</strong>를
          피그마 키트로 다시 조립해 보세요. 손그림(1단계)을 회색 박스(2단계)로 올리는,
          실무에서 매일 일어나는 바로 그 흐름입니다.
        </p>
        <Code>{CODE_CHECK}</Code>
        <div className="tip">
          <b>공유하는 법</b> 완성한 피그마 파일은 오른쪽 위 <span className="kbd">Share</span> 버튼으로
          링크를 만들어 멘토에게 보여 주세요. 피드백은 파일 위에 바로 댓글로 달려요 —
          이것도 실무에서 디자이너·개발자가 협업하는 방식 그대로입니다.
        </div>
      </Section>

      <Section n={8} title="7주차 종합 프로젝트와의 연결" sub="이 코스는 그날을 위한 준비 운동">
        <p>
          왜 지금 와이어프레임을 배울까요? <strong>7주차 종합 프로젝트</strong>에서 여러분은
          팀으로 서비스를 하나 기획하고 만들게 돼요. 그때 가장 먼저 하는 일이 바로
          오늘 배운 것들입니다.
        </p>
        <ol className="olist">
          <li>아이디어가 모이면 → <strong>손그림</strong>으로 화면 후보를 쏟아낸다 (섹션 2·3)</li>
          <li>팀이 방향을 고르면 → <strong>플로우</strong>로 화면 사이 이동과 구멍을 찾는다 (섹션 5)</li>
          <li>구조가 정해지면 → <strong>피그마 회색 박스</strong>로 배치를 확정한다 (섹션 7)</li>
          <li>그다음에야 → React 컴포넌트로 옮긴다 — 부품 이름 그대로! (섹션 4)</li>
        </ol>
        <p>
          이 순서를 지키는 팀과 안 지키는 팀은 프로젝트 후반에 차이가 확 벌어져요.
          도면 없이 시작한 팀은 마지막 주에 벽을 부수고 있고, 도면부터 그린 팀은
          꾸미기와 다듬기에 시간을 씁니다.
        </p>
        <div className="tip">
          <b>지금 해 둘 것</b> 섹션 6·7의 실습 결과물(종이 사진 + 피그마 링크)을 버리지 말고
          모아 두세요. 7주차 기획 회의 때 "나 이거 할 줄 알아"의 증거이자,
          팀에서 와이어프레임 담당을 맡을 수 있는 포트폴리오가 됩니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📐 여기까지 왔다면</h3>
          <p className="muted">
            이제 화면을 만나면 색보다 <strong>구조</strong>가 먼저 보일 거예요. 네모와 화살표만으로
            서비스를 설계하는 언어를 익힌 거죠. 다음은 그 도면을 진짜 화면으로 세우는 차례 —{' '}
            <Link to="/learn/coding"><strong>코딩 기초</strong></Link> 코스에서 와이어프레임의 부품이
            어떻게 React 컴포넌트가 되는지 이어서 배워 보세요. 그리고 7주차 종합 프로젝트에서
            오늘 만든 피그마 키트를 꺼내 쓰는 것, 잊지 말기!
          </p>
        </div>
      </div>
    </div>
  );
}
