웹 경로와 3단계 인터랙티브 학습 반영

apps/server/src/admin.ts

@@ -188,6 +188,16 @@ export async function registerAdmin(app: FastifyInstance, db: DB) {
     return { rows: rows.slice(0, 25), hasMore: rows.length > 25 };
   };
   app.get("/api/support", (req) => listTickets(req, false));
+  app.get("/api/support/:id", async (req: any) => {
+    const ticketId = z.string().uuid().parse(req.params.id);
+    const result = await db.query(
+      "SELECT * FROM support_tickets WHERE id=$1 AND user_id=$2",
+      [ticketId, req.user.id],
+    );
+    if (!result.rows[0])
+      throw new DomainError(404, "NOT_FOUND", "문의를 찾을 수 없어요.");
+    return result.rows[0];
+  });
   app.get("/api/admin/inquiries", (req) => listTickets(req, true));
   app.post("/api/support", async (req: any) => {
     const v = z

apps/server/src/app.ts

@@ -42,6 +42,8 @@ type Config = {
   schedulerAudience?: string;
   schedulerEmail?: string;
   adminEmails?: string[];
+  /** Isolated browser fixture only; ignored for production and real OAuth. */
+  testRateLimit?: number;
   verifyGoogle?: (
     token: string,
   ) => Promise<{ sub: string; email: string; name: string; nonce?: string }>;
@@ -87,6 +89,10 @@ const resultInput = z.object({
   runnerImage: z.string().max(256),
 });
 export async function createApp(c: Config) {
+  const testRateLimit =
+    process.env.NODE_ENV === "test" && !c.production && c.verifyGoogle
+      ? c.testRateLimit
+      : undefined;
   const adminEmails = new Set(
     (c.adminEmails ?? []).map((e) => e.trim().toLowerCase()).filter(Boolean),
   );
@@ -103,7 +109,8 @@ export async function createApp(c: Config) {
   await app.register(cors, { origin: c.origin, credentials: true });
   await app.register(rateLimit, {
     max: (req) =>
-      req.routeOptions.url?.startsWith("/api/internal/") ? 1200 : 240,
+      testRateLimit ??
+      (req.routeOptions.url?.startsWith("/api/internal/") ? 1200 : 240),
     timeWindow: "1 minute",
   });
   const google = new OAuth2Client(c.googleClientId);
@@ -292,7 +299,11 @@ export async function createApp(c: Config) {
   });
   app.post(
     "/api/auth/challenge",
-    { config: { rateLimit: { max: 20, timeWindow: "1 minute" } } },
+    {
+      config: {
+        rateLimit: { max: testRateLimit ?? 20, timeWindow: "1 minute" },
+      },
+    },
     async (_req, reply) => {
       const nonce = randomBytes(32).toString("hex");
       await c.db.query("DELETE FROM auth_challenges WHERE expires_at<=now()");
@@ -320,7 +331,11 @@ export async function createApp(c: Config) {
   }));
   app.post(
     "/api/auth/google",
-    { config: { rateLimit: { max: 20, timeWindow: "1 minute" } } },
+    {
+      config: {
+        rateLimit: { max: testRateLimit ?? 20, timeWindow: "1 minute" },
+      },
+    },
     async (req, reply) => {
       if (!c.googleClientId && !c.verifyGoogle)
         throw new DomainError(

apps/server/src/event-catalog.ts

@@ -74,6 +74,11 @@ export const eventProperties = {
     ]),
     step: small.optional(),
   }),
+  PREDICTION_CHECKED: z.object({
+    topic: code,
+    index: small,
+    correct: z.boolean(),
+  }),
   QUIZ_VIEWED: z.object({ topic: code, index: small }),
   QUIZ_RETRIED: z.object({ topic: code }),
   LANGUAGE_SELECTED: z.object({ language }),
@@ -100,6 +105,7 @@ export const clientEventTypes = [
   "EXAMPLE_SELECTED",
   "EXAMPLE_APPLIED",
   "VISUALIZATION_CONTROL",
+  "PREDICTION_CHECKED",
   "QUIZ_VIEWED",
   "QUIZ_RETRIED",
   "LANGUAGE_SELECTED",

apps/server/src/index.ts

@@ -7,7 +7,7 @@ import { cleanExpired } from "./domain.js";
 import { processReview, recoverReviews } from "./review-worker.js";
 import { GcsStorage } from "./object-storage.js";
 import { maintenance } from "./maintenance.js";
-import staticFiles from "@fastify/static";
+import { registerWeb } from "./web-static.js";
 const production = process.env.NODE_ENV === "production";
 if (
   production &&
@@ -53,11 +53,7 @@ const app = await createApp({
   schedulerEmail: process.env.SCHEDULER_EMAIL,
   adminEmails: (process.env.ADMIN_EMAILS ?? "").split(","),
 });
-if (process.env.WEB_DIST)
-  await app.register(staticFiles, {
-    root: resolve(process.env.WEB_DIST),
-    prefix: "/",
-  });
+if (process.env.WEB_DIST) await registerWeb(app, resolve(process.env.WEB_DIST));
 let busy = false;
 const timer = setInterval(async () => {
   if (busy) return;

apps/server/src/web-static.ts

@@ -0,0 +1,19 @@
+import type { FastifyInstance } from "fastify";
+import staticFiles from "@fastify/static";
+export async function registerWeb(app: FastifyInstance, root: string) {
+  await app.register(staticFiles, { root, prefix: "/" });
+  app.setNotFoundHandler((request, reply) => {
+    const path = request.url.split("?")[0];
+    if (
+      (request.method === "GET" || request.method === "HEAD") &&
+      path !== "/api" &&
+      !path.startsWith("/api/") &&
+      !path.split("/").at(-1)?.includes(".") &&
+      request.headers.accept?.includes("text/html")
+    )
+      return reply.type("text/html").sendFile("index.html");
+    return reply
+      .code(404)
+      .send({ code: "NOT_FOUND", message: "페이지를 찾을 수 없어요." });
+  });
+}

apps/server/test/admin.test.ts

@@ -190,6 +190,14 @@ test("inquiry ownership, idempotency, reply visibility and conflicting updates",
   const created = await request(student, "POST", "/api/support", input);
   assert.equal(created.statusCode, 200, created.body);
   const ticket = created.json();
+  assert.equal(
+    (await request(student, "GET", `/api/support/${ticket.id}`)).json().body,
+    "PRIVATE_INQUIRY_CONTENT",
+  );
+  assert.equal(
+    (await request(other, "GET", `/api/support/${ticket.id}`)).statusCode,
+    404,
+  );
   assert.equal(
     (await request(student, "POST", "/api/support", input)).json().id,
     ticket.id,

apps/server/test/learning-flow.test.ts

@@ -0,0 +1,52 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { existsSync } from "node:fs";
+import {
+  checkpoints,
+  matchesAnswer,
+  answerText,
+} from "../../web/src/prediction-model.js";
+import { conceptUses } from "../../web/src/concept-uses.js";
+import { readRoute } from "../../web/src/router.js";
+test("every published concept has answerable prediction checkpoints and animation assets", () => {
+  assert.equal(Object.keys(conceptUses).length, 47);
+  for (const topic of Object.keys(conceptUses)) {
+    const checks = checkpoints(topic);
+    assert.ok(checks.length, topic);
+    for (const check of checks) {
+      assert.ok(
+        matchesAnswer(answerText(check.answer), check.answer),
+        `${topic}: ${check.field}`,
+      );
+      assert.equal(matchesAnswer("definitely-wrong", check.answer), false);
+      if (check.choices)
+        assert.ok(check.choices.some((c) => c.value === check.answer));
+    }
+    for (const theme of ["light", "dark"])
+      for (const ext of ["png", "gif"])
+        assert.ok(
+          existsSync(`apps/web/public/learning/${topic}-${theme}.${ext}`),
+        );
+  }
+});
+test("prediction answers preserve order and strings; numeric formatting is accepted", () => {
+  assert.ok(matchesAnswer("1, 2, 3", [1, 2, 3]));
+  assert.ok(matchesAnswer("[]", []));
+  assert.ok(matchesAnswer('["shortest path", "∞"]', ["shortest path", "∞"]));
+  assert.equal(matchesAnswer("3,2,1", [1, 2, 3]), false);
+  assert.ok(matchesAnswer("05", 5));
+  assert.equal(matchesAnswer("", 0), false);
+});
+test("routes reject malformed steps, extra segments and unknown admin sections", () => {
+  assert.equal(readRoute("/learn/tree/predict/2").step, 2);
+  for (const path of [
+    "/learn/tree/predict/0",
+    "/learn/tree/predict/no",
+    "/learn/tree/concept/extra",
+    "/admin/invalid",
+    "/nope",
+  ])
+    assert.equal(readRoute(path).page, "not-found");
+  assert.equal(readRoute("/records/abc").recordId, "abc");
+  assert.equal(readRoute("/learn/tree/code?record=abc").recordId, "abc");
+});

apps/server/test/web-static.test.ts

@@ -0,0 +1,58 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import Fastify from "fastify";
+import { mkdtemp, writeFile, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { registerWeb } from "../src/web-static.js";
+test("direct page navigation serves the app while missing API and assets remain 404", async () => {
+  const root = await mkdtemp(join(tmpdir(), "algostep-web-"));
+  const app = Fastify();
+  try {
+    await writeFile(
+      join(root, "index.html"),
+      "<!doctype html><title>Algostep</title>",
+    );
+    await registerWeb(app, root);
+    for (const path of [
+      "/learn/bfs/concept",
+      "/learn/tree/predict/3",
+      "/learn/fft/code?record=123",
+      "/records/abc",
+      "/support/abc",
+      "/admin/finance",
+    ]) {
+      const r = await app.inject({
+        url: path,
+        headers: { accept: "text/html" },
+      });
+      assert.equal(r.statusCode, 200, path);
+      assert.match(r.body, /<title>Algostep/);
+    }
+    for (const path of [
+      "/api",
+      "/api/missing",
+      "/missing.js",
+      "/learning/missing.gif",
+    ])
+      assert.equal(
+        (await app.inject({ url: path, headers: { accept: "text/html" } }))
+          .statusCode,
+        404,
+        path,
+      );
+    assert.equal(
+      (
+        await app.inject({
+          method: "POST",
+          url: "/learn/bfs/concept",
+          headers: { accept: "text/html" },
+        })
+      ).statusCode,
+      404,
+    );
+  } finally {
+    await app.close();
+    await rm(root, { recursive: true, force: true });
+  }
+});

apps/web/src/AdminDashboard.tsx

@@ -25,9 +25,14 @@ const eventLabels: Record<string, string> = {
   COSTS_IMPORTED: "비용 가져오기",
   RECORD_DELETED: "학습 기록 삭제",
 };
-export function AdminDashboard() {
-  const [tab, setTab] = useState("overview"),
-    [from, setFrom] = useState(today().slice(0, 7) + "-01"),
+export function AdminDashboard({
+  section: tab,
+  onNavigate: setTab,
+}: {
+  section: string;
+  onNavigate: (section: string) => void;
+}) {
+  const [from, setFrom] = useState(today().slice(0, 7) + "-01"),
     [to, setTo] = useState(today()),
     [grain, setGrain] = useState("day"),
     [query, setQuery] = useState(`from=${from}&to=${to}&grain=day`),

apps/web/src/DiagramCanvas.tsx

@@ -59,12 +59,14 @@ export function DiagramCanvas({
   nodes,
   edges = [],
   label,
-  responsiveFit = false,
+  responsiveFit = true,
+  onSelect,
 }: {
   nodes: DiagramNode[];
   edges?: DiagramEdge[];
   label: string;
   responsiveFit?: boolean;
+  onSelect?: (id: string) => void;
 }) {
   const [moved, setMoved] = useState<Record<string, { x: number; y: number }>>(
       {},
@@ -75,6 +77,7 @@ export function DiagramCanvas({
     svg = useRef<SVGSVGElement>(null),
     viewport = useRef<HTMLDivElement>(null);
   const marker = useId().replace(/:/g, "");
+  const pointerStart = useRef({ x: 0, y: 0 });
   const positioned = nodes.map((n, i) => {
     const defaultPos =
       layout === "circle"
@@ -286,10 +289,22 @@ export function DiagramCanvas({
               className="diagram-node"
               role="button"
               tabIndex={0}
-              aria-label={`${n.label}${n.detail ? " · " + n.detail : ""} 이동`}
+              aria-label={`${n.label}${n.detail ? " · " + n.detail : ""} ${onSelect ? "선택" : "이동"}`}
+              aria-pressed={onSelect ? n.state === "active" : undefined}
+              onClick={(e) => {
+                if (
+                  onSelect &&
+                  Math.hypot(
+                    e.clientX - pointerStart.current.x,
+                    e.clientY - pointerStart.current.y,
+                  ) < 6
+                )
+                  onSelect(n.id);
+              }}
               transform={`translate(${n.x} ${n.y})`}
               data-node-id={n.id}
               onPointerDown={(e) => {
+                pointerStart.current = { x: e.clientX, y: e.clientY };
                 const p = point(e);
                 if (!p) return;
                 e.currentTarget.setPointerCapture(e.pointerId);
@@ -323,6 +338,11 @@ export function DiagramCanvas({
                 drag.current = null;
               }}
               onKeyDown={(e) => {
+                if (onSelect && (e.key === "Enter" || e.key === " ")) {
+                  e.preventDefault();
+                  onSelect(n.id);
+                  return;
+                }
                 const delta: Record<string, number[]> = {
                   ArrowLeft: [-12, 0],
                   ArrowRight: [12, 0],
@@ -361,9 +381,16 @@ export function DiagramCanvas({
                   className={`node ${n.state ?? ""}`}
                 />
               ) : (
-                <circle r="26" className={`node ${n.state ?? ""}`} />
+                <circle
+                  r={onSelect ? Math.max(26, 24 / zoom) : 26}
+                  className={`node ${n.state ?? ""}`}
+                />
               )}
-              <text textAnchor="middle" y={n.detail ? -3 : 5}>
+              <text
+                textAnchor="middle"
+                y={n.detail ? -3 : 5}
+                style={onSelect ? { fontSize: 14 / zoom } : undefined}
+              >
                 {n.label.length > 22 ? n.label.slice(0, 21) + "…" : n.label}
               </text>
               {n.detail && (