// 이 파일이 하는 일: "앱 화면과 이동" 코스 — 앱의 화면 전환·내비게이션을,
// 학생이 이미 배운 웹 라우팅(URL·react-router) 지식을 다리 삼아 7개 섹션으로
// 안내하는 정적 학습 페이지. "웹 개발자가 보는 모바일"이라는 프레이밍으로,
// 스택·탭·드로어 패턴, 화면 간 데이터 전달, 뒤로가기·딥링크, RN/Flutter의
// 내비게이션 라이브러리 개요까지 지형을 읽게 한다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하며 색을 하드코딩하지 않는다.
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 예제 코드 상수들 ──

const CODE_WHY_NAV = `앱은 "화면 여러 장"으로 이루어진 그림책이에요.

  [ 홈 ] ──탭── [ 코스 목록 ] ──누르면── [ 코스 상세 ] ──누르면── [ 강의 영상 ]

한 화면만 있는 앱은 거의 없어요. 목록에서 항목을 누르면 상세로,
상세에서 버튼을 누르면 결제로 — 이렇게 "지금 어느 화면을 보여줄지"를
결정하고 화면끼리 오가게 하는 일을 통틀어 '내비게이션(navigation)'이라 불러요.

비유: 앱은 여러 장의 카드가 담긴 카드 지갑.
내비게이션은 "어느 카드를 맨 앞으로 꺼내 보여줄까"를 정하는 손이에요.`;

const CODE_WEB_VS_APP = `웹 라우팅 — 주소(URL)가 곧 화면        앱 내비게이션 — 스택(카드 더미)이 화면
──────────────────────────────      ──────────────────────────────
브라우저 주소창이 있다                   주소창이 없다 (URL이 안 보임)
/courses/42  ← 화면 = URL              화면 = "지금 쌓인 카드 더미의 맨 위"
URL을 바꾸면 그 화면으로 이동            navigate()/push()로 카드를 쌓음
뒤로가기 = 브라우저 히스토리             뒤로가기 = 카드 한 장 걷어내기(pop)
주소를 복사해 남에게 보낼 수 있다          그 대신 '딥링크'로 특정 화면을 연다

공통점: 둘 다 '스택(쌓임)' 구조예요.
  웹도 사실 방문 기록을 스택으로 쌓아 두고, 뒤로가기로 걷어냅니다.
  차이는 "그 스택이 눈에 보이느냐(URL)"일 뿐.`;

const CODE_PATTERNS = `앱 내비게이션 3대 패턴 — 거의 모든 앱이 이 셋의 조합이에요.

1) 스택(Stack) — 카드를 위로 쌓기 / 걷어내기
   목록 → 상세 → 결제 처럼 '깊이 들어갔다 나오는' 흐름.
   push(들어가기)  pop(뒤로)  가 기본 동작.

2) 탭(Tab) — 나란한 방들 사이를 오가기
   화면 아래 [홈][검색][내 학습][프로필] 바.
   서로 대등한 최상위 구역. 탭을 바꿔도 각 탭은 자기 스택을 기억.

3) 드로어(Drawer) — 옆에서 밀려 나오는 서랍 메뉴
   왼쪽 가장자리에서 스윽 나오는 설정·메뉴 목록.
   화면이 좁은 모바일에서 '덜 쓰는 메뉴'를 숨겨 두는 서랍.

조합 예: 앱 전체는 '탭', 각 탭 안은 '스택', 계정 메뉴는 '드로어'.`;

const CODE_PASS_DATA = `화면 A에서 B로 값 넘기기 — "코스 42번을 열어줘"

// React Navigation (React Native)  ── param(매개변수)에 실어 보냄
function CourseList({ navigation }) {
  // 목록에서 항목을 누르면 상세 화면을 '쌓으면서' id를 함께 전달
  return <Button onPress={() => navigation.navigate('Detail', { courseId: 42 })} />;
}

function CourseDetail({ route }) {
  const { courseId } = route.params;   // ← 받은 값 꺼내기
  return <Text>코스 {courseId} 상세</Text>;
}

// 웹(react-router)과 비교하면 감이 와요:
//   웹:  navigate('/courses/42')  → URL(/courses/:id)에 값을 실음
//   앱:  navigate('Detail', { courseId: 42 })  → params 객체에 값을 실음
// 둘 다 "다음 화면에게 쪽지 한 장 쥐여 보내는" 일. 통로만 다를 뿐.

⚠ params엔 id 같은 '작은 열쇠'만 넘기고, 큰 데이터는 그 화면이
  id로 다시 조회하게 하세요. 화면 사이로 무거운 짐을 통째 나르지 않기.`;

const CODE_BACK_DEEPLINK = `뒤로가기와 딥링크 — 앱만의 두 가지 감각

■ 뒤로가기(back)
  Android: 화면 아래 '시스템 뒤로가기' 버튼/제스처가 항상 있음
           → 스택에서 카드 한 장 pop. 스택이 비면 앱이 종료.
  iOS:     하드웨어 버튼이 없음 → 화면 왼쪽 위 '< 뒤로', 또는 왼쪽
           가장자리에서 오른쪽으로 쓸어넘기는(swipe-back) 제스처.
  → 그래서 앱은 "뒤로가기를 눌렀을 때 뭐가 나와야 자연스러운가"를
     스택 순서로 항상 설계해 둬야 해요.

■ 딥링크(deep link) — 앱 속 특정 화면을 '주소'로 바로 열기
  myapp://courses/42          ← 커스텀 스킴(앱 전용 주소)
  https://app.example.com/courses/42   ← 유니버설/앱 링크(웹주소 겸용)

  카톡·메일의 링크를 누르면 앱이 켜지며 '코스 42 상세'로 직행.
  웹의 "URL 복사해서 공유"를 앱에서 되살리는 장치가 바로 딥링크예요.`;

const CODE_RN_FLUTTER = `RN / Flutter — 내비게이션은 '라이브러리'로 한다 (내장 아님에 가까움)

■ React Native → 사실상 표준: React Navigation
  createNativeStackNavigator()  // 스택
  createBottomTabNavigator()    // 탭
  createDrawerNavigator()       // 드로어
  navigation.navigate / goBack  // 이동/뒤로
  (Expo를 쓰면 파일 기반 라우팅인 expo-router도 선택지)

■ Flutter → 내장 Navigator + 라우팅 패키지 go_router
  Navigator.push(context, MaterialPageRoute(builder: (_) => DetailPage()));
  Navigator.pop(context);        // 뒤로
  // 규모가 커지면 go_router로 URL 스타일 경로를 선언:
  //   GoRoute(path: '/courses/:id', builder: ...)

공통 감각: "화면을 스택에 push, 뒤로는 pop, 탭/드로어는 껍데기."
프레임워크가 달라도 이 단어들(push·pop·stack·tab)은 그대로 통해요.`;

const CODE_ROUTER_BRIDGE = `우리 웹 라우팅(react-router-dom) — 앱 내비게이션과 한 뿌리

// frontend/src/App.jsx — URL과 화면을 연결 (이 코스 페이지도 여기 등록됨)
<Routes>
  <Route path="/learn/:slug" element={<CoursePage />} />
</Routes>

// 목록에서 상세로: <Link> 또는 useNavigate — 앱의 navigate와 쌍둥이
import { Link, useNavigate, useParams } from 'react-router-dom';

<Link to="/learn/react-intro">React 입문 열기</Link>   // = navigation.navigate

function CoursePage() {
  const { slug } = useParams();          // = route.params (URL이 통로)
  const navigate = useNavigate();
  return <button onClick={() => navigate(-1)}>뒤로</button>; // = goBack / pop
}

// 대응표 — 웹에서 배운 게 앱에서 그대로 쓰인다:
//   <Link to> / navigate()   ↔  navigation.navigate('화면이름')
//   useParams()              ↔  route.params
//   navigate(-1)             ↔  navigation.goBack() / Navigator.pop()
//   브라우저 히스토리 스택      ↔  네비게이션 스택(카드 더미)`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑아 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: 'URL vs 스택' },
  { n: 3, label: '스택·탭·드로어' },
  { n: 4, label: '데이터 전달' },
  { n: 5, label: '뒤로가기·딥링크' },
  { n: 6, label: 'RN·Flutter' },
  { n: 7, label: '우리 웹과의 다리' },
];

export default function AppNavigationPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 앱 개발</div>
        <h1>앱 화면과 이동<br />— 웹 라우팅으로 앱 내비게이션 읽기</h1>
        <p>
          앱은 화면 여러 장을 오가는 그림책이에요. "지금 어느 화면을 보여줄지"를 정하고
          화면끼리 이동시키는 일이 <strong>내비게이션</strong>입니다. 여러분이 이미 배운{' '}
          <strong>웹 라우팅(URL·react-router)</strong>을 다리 삼아, 앱의 스택·탭·드로어와
          딥링크까지 — <strong>지형을 읽는 눈</strong>을 만들어 봅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 70분</span>
          <span className="chip">실습: 우리 App.jsx 라우팅 뜯어보기</span>
          <span className="chip">선수 지식: React 입문(라우팅)</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>화면(screen) 여러
          장</strong>으로 나뉘어요. 홈에서 코스 목록으로, 목록에서 상세로, 상세에서 영상으로 —
          이렇게 "지금 어느 화면을 앞에 세울지" 정하고 화면끼리 오가게 하는 일 전부를{' '}
          <strong>내비게이션</strong>이라고 부릅니다.
        </p>
        <Code>{CODE_WHY_NAV}</Code>
        <p>
          왜 굳이 화면을 쪼갤까요? 모바일은 <strong>화면이 좁고</strong>, 한 번에 한 가지 일에
          집중하는 사용 패턴이라서예요. 그래서 "한 화면 = 하나의 목적"으로 잘게 나누고, 이동으로
          연결합니다. 이 감각은 사실 우리 웹에서도 익숙해요 — 페이지 하나가 컴포넌트 하나였죠.
          앱은 그 <strong>페이지 전환을 더 또렷하게, 애니메이션까지 곁들여</strong> 하는 것뿐이에요.
        </p>
        <div className="tip">
          <b>한 줄 정리</b> "화면 = 상태의 함수"를 배웠다면, 이번엔 그 위층 —
          "<strong>어느 화면</strong>을 지금 보여줄까"를 정하는 이야기예요.
          앞 코스가 카드 <em>한 장</em>을 그리는 법이었다면, 이번은 카드 <em>여러 장</em>을
          꺼내고 넣는 법입니다.
        </div>
      </Section>

      <Section n={2} title="웹 라우팅(URL) vs 앱 내비게이션(스택)" sub="주소창이 하던 일을, 앱에선 '카드 더미'가 한다">
        <p>
          웹에서 화면을 결정하는 건 <strong>주소(URL)</strong>였어요.{' '}
          <span className="icode">/learn/react-intro</span>로 주소가 바뀌면 그 화면이 뜨고,
          뒤로가기를 누르면 브라우저의 방문 기록을 되짚어 갑니다. 그런데 앱을 켜 보면{' '}
          <strong>주소창 자체가 없죠.</strong> 그럼 앱은 "지금 화면"을 무엇으로 기억할까요?
        </p>
        <p>
          답은 <strong>스택(stack)</strong>입니다. 화면에 들어갈 때마다 카드를 <strong>위로
          쌓고(push)</strong>, 뒤로가기를 하면 맨 위 카드를 <strong>걷어냅니다(pop)</strong>.
          지금 보이는 화면은 언제나 "쌓인 카드 더미의 맨 위 한 장"이에요. 사실 웹의 방문
          기록도 내부적으론 똑같은 스택 구조라, <strong>둘은 한 뿌리</strong>예요 — 차이는
          그 스택이 <strong>주소창으로 눈에 보이느냐</strong>일 뿐입니다.
        </p>
        <Code>{CODE_WEB_VS_APP}</Code>
        <svg className="diagram" viewBox="0 0 640 320" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="웹은 주소창의 URL이 바뀌며 화면이 정해지고, 앱은 화면 카드를 위로 쌓는 스택 구조로 push는 카드를 올리고 pop인 뒤로가기는 맨 위 카드를 걷어낸다">
          {/* 왼쪽: 웹 — 주소창 */}
          <text x="165" y="34" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">웹 — 주소창(URL)이 화면</text>
          <rect x="55" y="52" width="220" height="34" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="70" y="74" textAnchor="start" fontSize="12" fill="var(--muted)">🔒 /learn/react-intro</text>
          <rect x="55" y="98" width="220" height="150" rx="10" fill="var(--card)" stroke="var(--line)" />
          <text x="165" y="176" textAnchor="middle" fontSize="13" fill="var(--ink)">react-intro 화면</text>
          <text x="165" y="272" textAnchor="middle" fontSize="12" fill="var(--muted)">URL 바꾸면 그 화면으로</text>
          <text x="165" y="290" textAnchor="middle" fontSize="12" fill="var(--muted)">뒤로가기 = 히스토리 되짚기</text>

          {/* 오른쪽: 앱 — 스택 */}
          <text x="475" y="34" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">앱 — 스택(카드 더미)이 화면</text>
          <rect x="380" y="176" width="190" height="34" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="475" y="198" textAnchor="middle" fontSize="12" fill="var(--muted)">홈 (맨 아래 카드)</text>
          <rect x="392" y="142" width="190" height="34" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="487" y="164" textAnchor="middle" fontSize="12" fill="var(--muted)">코스 목록</text>
          <rect x="404" y="108" width="190" height="34" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="499" y="130" textAnchor="middle" fontSize="12" fontWeight="600" fill="var(--ink)">코스 상세 ← 지금 보임</text>
          {/* push 화살표 */}
          <line x1="352" y1="150" x2="352" y2="112" stroke="var(--primary)" strokeWidth="2" />
          <path d="M352 104 L346 116 L358 116 Z" fill="var(--primary)" />
          <text x="346" y="132" textAnchor="end" fontSize="12" fill="var(--primary)">push</text>
          {/* pop 화살표 */}
          <line x1="612" y1="112" x2="612" y2="150" stroke="var(--rose)" strokeWidth="2" strokeDasharray="4 3" />
          <path d="M612 158 L606 146 L618 146 Z" fill="var(--rose)" />
          <text x="616" y="132" textAnchor="start" fontSize="12" fill="var(--rose)">pop</text>
          <text x="475" y="272" textAnchor="middle" fontSize="12" fill="var(--muted)">push=카드 올리기 · pop=걷어내기(뒤로)</text>
          <text x="475" y="290" textAnchor="middle" fontSize="12" fill="var(--muted)">맨 위 카드가 곧 지금 화면</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 웹은 URL이, 앱은 카드 더미(스택)의 맨 위가 '지금 화면' — push로 쌓고 pop(뒤로가기)으로 걷어낸다</p>
        <div className="tip">
          <b>연결고리</b> react-router에서 <span className="icode">navigate('/courses/42')</span>로
          화면을 바꾸고 <span className="icode">navigate(-1)</span>로 뒤로 갔던 그 경험이,
          앱에선 <span className="icode">push</span>/<span className="icode">pop</span>이라는
          이름으로 똑같이 반복돼요. 새 개념이 아니라 <strong>이름만 바뀐 옛 친구</strong>입니다.
        </div>
      </Section>

      <Section n={3} title="스택·탭·드로어 내비게이션 패턴" sub="거의 모든 앱은 이 셋의 조합이다">
        <p>
          앱 화면 구조는 복잡해 보여도 사실 <strong>세 가지 패턴</strong>의 조합이에요.
          이 셋의 역할을 구분할 줄 알면, 처음 보는 앱도 "아, 여긴 탭 안의 스택이구나" 하고
          지도를 그릴 수 있게 됩니다.
        </p>
        <Code>{CODE_PATTERNS}</Code>
        <p>
          핵심은 <strong>역할이 다르다</strong>는 거예요. <strong>스택</strong>은 "깊이 들어갔다
          나오는" 상하 이동(목록→상세→결제), <strong>탭</strong>은 서로 대등한 큰 구역 사이의
          좌우 이동(홈↔검색↔프로필), <strong>드로어</strong>는 가끔 쓰는 메뉴를 옆에 숨겨 두는
          서랍이에요. 실무 앱은 보통 <strong>바깥은 탭, 각 탭 안은 각자의 스택</strong>이라,
          "검색 탭에서 상세로 들어갔다가 홈 탭으로 갔다 돌아오면 <strong>아까 그 상세가 그대로</strong>"
          유지되죠. 각 탭이 자기 카드 더미를 따로 기억하기 때문입니다.
        </p>
        <div className="tip">
          <b>우리 웹으로 번역하면</b> 상단 네비게이션 바에서 "학습·도구·내 정보"를 오가는 건{' '}
          <strong>탭</strong>과 같은 역할, 코스 목록에서 코스 상세로 들어가는 건 <strong>스택</strong>과
          같은 역할이에요. 좁은 화면이라 옆으로 숨기는 <strong>드로어</strong>만 웹에선 덜 흔할 뿐,
          개념은 그대로 대응됩니다.
        </div>
        <div className="warn">
          <b>흔한 착각</b> "탭을 누르면 새 화면이 쌓인다"가 아니에요. 탭 전환은 <strong>서랍을 바꿔
          여는 것</strong>에 가깝고, 각 탭은 자기 스택을 <strong>그대로 보존</strong>합니다.
          탭을 오갈 때마다 스택이 초기화된다면 그건 대개 설계 실수예요.
        </div>
      </Section>

      <Section n={4} title="화면 간 데이터 전달" sub="다음 화면에게 '쪽지 한 장' 쥐여 보내기">
        <p>
          "코스 목록에서 42번을 눌렀다"는 정보를 상세 화면이 알아야 그 코스를 보여줄 수 있죠.
          화면을 이동시킬 때 <strong>값을 함께 실어 보내는 것</strong>을 데이터 전달이라고 해요.
          앱에선 이 값을 <strong>파라미터(params)</strong>라는 쪽지에 담아 넘깁니다.
        </p>
        <Code>{CODE_PASS_DATA}</Code>
        <p>
          웹과 나란히 놓으면 원리가 똑같아요. 웹은 값을 <strong>URL</strong>에 실었고
          (<span className="icode">/courses/:id</span> → <span className="icode">useParams()</span>),
          앱은 값을 <strong>params 객체</strong>에 실어(<span className="icode">navigate('Detail', {'{ courseId: 42 }'})</span>{' '}
          → <span className="icode">route.params</span>) 넘길 뿐입니다. 둘 다 "다음 화면에게
          쪽지를 건네는" 같은 일이고, <strong>통로만 URL이냐 객체냐</strong>가 다릅니다.
        </p>
        <div className="warn">
          <b>큰 짐은 나르지 말 것</b> params엔 <span className="icode">id</span> 같은 작은 열쇠만
          담고, 실제 큰 데이터는 도착한 화면이 그 id로 서버에{' '}
          <span className="icode">/api/courses/42</span>를 <strong>다시 조회</strong>하게 하세요.
          화면 사이로 무거운 객체를 통째 나르면, 뒤로 갔다 오거나 딥링크로 바로 들어왔을 때
          그 데이터가 없어서 화면이 깨집니다.
        </div>
      </Section>

      <Section n={5} title="뒤로가기와 딥링크" sub="앱에만 있는 두 가지 감각 — 시스템 back, 그리고 주소 없는 곳의 주소">
        <p>
          <strong>뒤로가기</strong>는 앱 설계에서 생각보다 큰 주제예요. 특히{' '}
          <strong>Android</strong>는 화면 아래에 <strong>시스템 뒤로가기</strong> 버튼(또는
          제스처)이 항상 있어서, 사용자가 언제든 스택을 <span className="icode">pop</span> 할 수
          있어요. 반대로 <strong>iOS</strong>는 하드웨어 뒤로가기 버튼이 없고, 화면 왼쪽 위{' '}
          <span className="icode">&lt; 뒤로</span>나 <strong>왼쪽 가장자리에서 쓸어넘기는
          제스처</strong>로 뒤로 갑니다. 그래서 개발자는 "뒤로를 눌렀을 때 뭐가 나와야
          자연스러운가"를 <strong>스택 순서로 늘 설계</strong>해 둬야 해요.
        </p>
        <Code>{CODE_BACK_DEEPLINK}</Code>
        <p>
          <strong>딥링크(deep link)</strong>는 웹에서 당연했던 "URL 복사해서 공유"를 앱에서
          되살리는 장치예요. 앱엔 주소창이 없지만, <span className="icode">myapp://courses/42</span>{' '}
          같은 <strong>커스텀 스킴</strong>이나 <span className="icode">https://app.example.com/courses/42</span>{' '}
          같은 <strong>유니버설/앱 링크</strong>를 누르면 앱이 켜지며 <strong>특정 화면으로
          직행</strong>합니다. 카톡·메일로 받은 링크가 앱을 열어 바로 그 코스로 데려가는 게
          전부 딥링크죠.
        </p>
        <div className="tip">
          <b>왜 중요할까</b> 딥링크로 앱 <em>중간 화면</em>에 곧장 들어오면, 그 앞 화면(목록·홈)이
          스택에 없을 수 있어요. 그래서 잘 만든 앱은 딥링크 진입 시 "돌아갈 자리(홈 등)를 스택에
          미리 깔아 두는" 처리를 합니다. 섹션 4의 "id만 넘기고 다시 조회" 원칙이 여기서 빛나요 —
          중간에 뚝 떨어져도 id만 있으면 화면을 스스로 채울 수 있으니까요.
        </div>
      </Section>

      <Section n={6} title="RN·Flutter의 내비게이션 라이브러리 개요" sub="프레임워크는 달라도 push·pop·stack은 통한다">
        <p>
          모바일 앱을 만드는 대표적인 크로스플랫폼 도구가 <strong>React Native(RN)</strong>와{' '}
          <strong>Flutter</strong>예요. 재미있게도 둘 다 내비게이션을 <strong>라이브러리/패키지</strong>로
          다루고, 쓰는 <strong>단어가 거의 같습니다.</strong> 그래서 하나를 익히면 다른 쪽 지형도
          금방 읽혀요.
        </p>
        <Code>{CODE_RN_FLUTTER}</Code>
        <p>
          <strong>React Native</strong>는 <span className="icode">React Navigation</span>이 사실상
          표준이에요. 여러분이 배운 React 문법(컴포넌트·props) 위에서{' '}
          <span className="icode">navigation.navigate('Detail')</span>처럼 이동하죠 — JSX를 아는
          사람에게 진입 장벽이 가장 낮은 길입니다. <strong>Flutter</strong>는 Dart 언어를 쓰고,
          화면을 <span className="icode">Navigator.push</span>로 쌓고{' '}
          <span className="icode">Navigator.pop</span>으로 걷어내며, 규모가 커지면{' '}
          <span className="icode">go_router</span>로 URL 스타일 경로를 선언합니다.
        </p>
        <div className="tip">
          <b>지형만 읽어도 충분</b> 지금 목표는 "2개월 만에 RN/Flutter 전문가"가 아니에요.
          "앱 내비게이션은 결국 <strong>스택에 push, 뒤로는 pop, 탭·드로어는 껍데기</strong>"라는
          지도를 갖는 것 — 그 지도만 있으면, 나중에 어떤 프레임워크를 만나도 여러분의 React
          실력을 다리 삼아 걸어 들어갈 수 있어요.
        </div>
      </Section>

      <Section n={7} title="우리 웹 라우팅과의 다리" sub="react-router에서 배운 게 앱에서 그대로 쓰인다">
        <p>
          마지막으로, 이 모든 걸 <strong>우리 코드</strong>로 되감아 봅시다. 우리 학습 플랫폼
          프론트는 <span className="icode">react-router-dom</span>으로 라우팅해요. 지금 보고 있는
          이 코스 페이지도 <span className="icode">frontend/src/App.jsx</span>의{' '}
          <span className="icode">&lt;Route&gt;</span>에 등록돼 URL로 열린 화면입니다.
        </p>
        <Code>{CODE_ROUTER_BRIDGE}</Code>
        <p>
          대응표를 보면 <strong>새로 외울 게 거의 없다</strong>는 걸 알 수 있어요.{' '}
          <span className="icode">&lt;Link to&gt;</span>는 앱의{' '}
          <span className="icode">navigate('화면')</span>, <span className="icode">useParams()</span>는{' '}
          <span className="icode">route.params</span>, <span className="icode">navigate(-1)</span>은{' '}
          <span className="icode">goBack()</span>/<span className="icode">pop()</span> — 웹에서 손에
          익힌 동작들이 앱에서 <strong>이름만 갈아입고</strong> 다시 등장합니다. 이게 "웹
          개발자가 보는 모바일"의 핵심이에요. 밑바닥 개념(스택·params·history)은 공유하니까요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 에디터로 <span className="icode">frontend/src/App.jsx</span>를 열어{' '}
          <span className="icode">&lt;Routes&gt;</span>와 <span className="icode">&lt;Route path=.../&gt;</span>를
          찾아보세요. 그다음 아무 코스 카드나 눌렀다가 브라우저 <span className="kbd">←</span>
          (뒤로가기)를 눌러 보세요. 방금 화면이 스택에서 <span className="icode">pop</span> 되는
          그 감각 — 앱의 뒤로가기와 정확히 같은 동작입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📱 여기까지 왔다면</h3>
          <p className="muted">
            이제 앱의 화면 전환을 <strong>스택·탭·드로어</strong>라는 단어로 설명하고,{' '}
            <strong>params로 데이터를 넘기고</strong>, 뒤로가기·딥링크가 왜 중요한지 말할 수
            있게 됐어요. 무엇보다 이 전부가 여러분이 배운 <strong>react-router와 한 뿌리</strong>라는
            걸 봤죠. 그런데 화면을 오갈 때 "그 화면이 <em>보여줄 데이터</em>는 누가, 어떻게
            들고 있을까?" — 다음은 그 이야기예요.{' '}
            <Link to="/learn/app-state-data"><strong>앱 상태와 데이터</strong></Link> 코스에서,
            화면을 넘나드는 데이터를 다루는 법으로 이어 갑니다.
          </p>
        </div>
      </div>
    </div>
  );
}
