프리뷰 UX: 모바일 뷰 E2E 추가

.gitea/workflows/ci.yml

@@ -27,6 +27,10 @@ jobs:
         run: |
           npm ci
 
+      - name: Generate Prisma Client
+        run: |
+          npx prisma generate
+
       - name: Run unit tests
         run: |
           npm test

tests/e2e/preview.spec.ts

@@ -75,3 +75,35 @@ test("에디터에서 CTA 템플릿을 추가하면 프리뷰에서 CTA 텍스
   await expect(page.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible();
   await expect(page.getByText("CTA 버튼")).toBeVisible();
 });
+
+test("모바일 뷰에서도 프리뷰 페이지가 깨지지 않고 주요 템플릿 컨텐츠를 보여줘야 한다", async ({ page }) => {
+  // 에디터에서 여러 템플릿을 추가한다.
+  await page.goto("/editor");
+
+  await page.getByRole("button", { name: "Hero 템플릿 추가" }).click();
+  await page.getByRole("button", { name: "Features 템플릿 추가" }).click();
+  await page.getByRole("button", { name: "Pricing 템플릿 추가" }).click();
+  await page.getByRole("button", { name: "Testimonials 템플릿 추가" }).click();
+
+  // 모바일 뷰포트로 전환한다.
+  await page.setViewportSize({ width: 390, height: 844 });
+
+  // 프리뷰로 이동한다.
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+
+  // 프리뷰 헤더와 주요 템플릿 텍스트들이 모두 보여야 한다.
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  // Hero 헤드라인
+  await expect(page.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
+
+  // Features 제목 일부
+  await expect(page.getByText("Feature 1 제목")).toBeVisible();
+
+  // Pricing 플랜 이름/가격 일부
+  await expect(page.getByText("Basic")).toBeVisible();
+  await expect(page.getByText("₩9,900/월")).toBeVisible();
+
+  // Testimonials 본문 일부
+  await expect(page.getByText("이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.")).toBeVisible();
+});