모바일 메뉴와 주요 화면 UX 개선 및 시각 검수

apps/web/e2e/full-sweep-persona-studio.spec.ts

@@ -381,6 +381,81 @@ test.describe("persona studio full sweep", () => {
     await expect(page.locator(".ps-authoring-layout > .ps-rail")).toHaveCount(0);
   });
 
+  test("keeps authoring steps in one row and exposes the editor at every target width", async ({
+    page,
+  }) => {
+    await signInAsTeacher(page);
+    await mockStudio(page, { catalog: [approvedP1], reviews: [] });
+
+    const viewports = [
+      { width: 320, height: 844 },
+      { width: 390, height: 844 },
+      { width: 1440, height: 900 },
+    ];
+    for (const viewport of viewports) {
+      await page.setViewportSize(viewport);
+      await page.goto("/teach/personas?view=personas&mode=create&step=edit");
+
+      const stepper = page.getByRole("navigation", { name: "페르소나 작성 단계" });
+      const steps = stepper.getByRole("button");
+      await expect(steps).toHaveCount(4);
+      const boxes = await steps.evaluateAll((elements) =>
+        elements.map((element) => {
+          const rect = element.getBoundingClientRect();
+          return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+        }),
+      );
+      expect(Math.max(...boxes.map((box) => box.y)) - Math.min(...boxes.map((box) => box.y))).toBeLessThanOrEqual(1);
+      for (const box of boxes) {
+        expect(box.height).toBeGreaterThanOrEqual(44);
+        expect(box.x).toBeGreaterThanOrEqual(0);
+        expect(box.x + box.width).toBeLessThanOrEqual(viewport.width);
+      }
+      await expect(page.locator(".ps-editor__top")).toBeInViewport();
+
+      if (viewport.width <= 720) {
+        const undersizedActions = await page
+          .locator(".ps-root .vg-btn:not(:disabled), .ps-root .ps-tabs button:not(:disabled)")
+          .evaluateAll((elements) =>
+            elements.flatMap((element) => {
+              const rect = element.getBoundingClientRect();
+              if (rect.width === 0 || rect.height === 0) return [];
+              return rect.width >= 44 && rect.height >= 44
+                ? []
+                : [{
+                    selector: `${element.tagName.toLowerCase()}.${Array.from(element.classList).join(".")}`,
+                    text: element.textContent?.trim(),
+                    width: rect.width,
+                    height: rect.height,
+                  }];
+            }),
+          );
+        expect(undersizedActions).toEqual([]);
+      }
+      await expectNoHorizontalOverflow(page);
+
+      if (process.env.PERSONA_AUTHORING_CAPTURE_DIR) {
+        await page.screenshot({
+          path: `${process.env.PERSONA_AUTHORING_CAPTURE_DIR}/persona-authoring-${viewport.width}.png`,
+          fullPage: true,
+        });
+      }
+    }
+
+    for (const viewport of viewports) {
+      await page.setViewportSize(viewport);
+      await page.goto("/teach/personas?view=catalog");
+      await expect(page.getByRole("button", { name: "전체 페르소나 보기" })).toBeVisible();
+      await expectNoHorizontalOverflow(page);
+      if (process.env.PERSONA_AUTHORING_CAPTURE_DIR) {
+        await page.screenshot({
+          path: `${process.env.PERSONA_AUTHORING_CAPTURE_DIR}/persona-catalog-${viewport.width}.png`,
+          fullPage: true,
+        });
+      }
+    }
+  });
+
   // checklist: persona-studio-inspector-review-actions
   test("edits and approves review drafts from the inspector queue", async ({ page }) => {
     await signInAsTeacher(page);