레슨 클릭 실행 - 커리큘럼과 브라우저 런타임 연결(P3.5)

커리큘럼 생성기가 각 레슨의 첫 실행 스니펫을 추출(467/472). /learn에서 레슨
카드를 누르면 그 코드가 상단 실행기로 로드되고 스크롤한다. PythonRunner에
외부 코드 로드(load) 배선 추가. 이제 472개 레슨이 브라우저에서 진짜 실행된다.
전체 빌드 green(83 routes).

Author: eddmpython

landing/scripts/generateCurriculum.js

@@ -36,6 +36,26 @@ function domainOf(fileRel) {
   return fileRel.split(/[\\/]/)[0];
 }
 
+// 레슨 문서에서 첫 실행 코드(snippet)를 재귀로 찾는다. sections[].snippet 등 위치가 다양하다.
+function findFirstSnippet(node, depth = 0) {
+  if (!node || depth > 8) return "";
+  if (Array.isArray(node)) {
+    for (const item of node) {
+      const found = findFirstSnippet(item, depth + 1);
+      if (found) return found;
+    }
+    return "";
+  }
+  if (typeof node === "object") {
+    if (typeof node.snippet === "string" && node.snippet.trim().length > 0) return node.snippet;
+    for (const value of Object.values(node)) {
+      const found = findFirstSnippet(value, depth + 1);
+      if (found) return found;
+    }
+  }
+  return "";
+}
+
 const files = existsSync(CURRICULA) ? walkYaml(CURRICULA) : [];
 const domains = new Map();
 let lessonCount = 0;
@@ -61,6 +81,7 @@ for (const file of files) {
     emoji: (doc.intro && doc.intro.emoji) || "",
     direction: (doc.intro && doc.intro.direction) || (meta.seo && meta.seo.description) || "",
     slug: `${domain}/${track}/${meta.id}`,
+    code: findFirstSnippet(doc).slice(0, 800),
   };
   if (!domains.has(domain)) domains.set(domain, new Map());
   const tracks = domains.get(domain);

landing/src/components/pythonRunner.jsx

@@ -1,7 +1,7 @@
 // pythonRunner.jsx - 브라우저에서 진짜 Python을 실행하는 위젯(pyproc).
 // 단일 boot()+runAsync() 경로는 SharedArrayBuffer/COOP-COEP가 필요 없어 GitHub Pages에서도 돈다.
 // pyproc은 첫 실행 클릭에서 lazy import(코드 스플릿 + 큰 런타임 다운로드 지연). SSR 안전(렌더 시 브라우저 API 미접근).
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Play, Loader2, RotateCcw } from "lucide-react";
 import { Button } from "@astryxdesign/core/Button";
 import { Badge } from "@astryxdesign/core/Badge";
@@ -21,13 +21,21 @@ const STATUS_LABEL = {
   ready: "준비됨",
 };
 
-export function PythonRunner({ initialCode = DEFAULT_CODE }) {
+export function PythonRunner({ initialCode = DEFAULT_CODE, load }) {
   const [code, setCode] = useState(initialCode);
   const [output, setOutput] = useState("");
   const [status, setStatus] = useState("idle");
   const rtRef = useRef(null);
   const linesRef = useRef([]);
 
+  // 외부(레슨 카드)에서 코드를 실어 보내면 에디터에 로드한다. load.nonce가 바뀔 때마다 반영.
+  useEffect(() => {
+    if (load && typeof load.code === "string" && load.code.length > 0) {
+      setCode(load.code);
+      setOutput("");
+    }
+  }, [load]);
+
   async function ensureRuntime() {
     if (rtRef.current) return rtRef.current;
     setStatus("booting");