대시보드 중간 커밋

tests/e2e/mobile-layout.spec.ts

@@ -0,0 +1,67 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Mobile Dashboard Layout", () => {
+  test.use({
+    viewport: { width: 390, height: 844 }, // iPhone 12 Pro size
+    userAgent:
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1",
+  });
+
+  test("should verify mobile layout elements are visible and not overlapping", async ({
+    page,
+  }) => {
+    // 1. 대시보드 페이지 이동
+    await page.goto("/dashboard");
+
+    // 페이지 로딩 대기 (네트워크 유휴 상태 혹은 특정 요소)
+    await page.waitForLoadState("networkidle");
+
+    // 2. 주요 섹션 존재 여부 확인
+    const chartSection = page.locator("text=차트 영역, O, H, L, C").first(); // 차트 관련 텍스트나 영역
+    // StockLineChart가 로드되면 차트 캔버스가 있을 것임
+    const chartCanvas = page.locator("canvas").first();
+
+    // 호가창 탭
+    const orderBookTabs = page.getByRole("tablist");
+
+    // 주문 폼 탭
+    const orderFormTabs = page.getByRole("tab", { name: "매수" });
+
+    // 3. 스크린샷 캡처 (디버깅용)
+    await page.screenshot({
+      path: "test-results/mobile-dashboard-before-fix.png",
+      fullPage: true,
+    });
+
+    // 4. 요소 가시성 체크 (현재 고정 높이 버그로 인해 겹치거나 잘릴 수 있음)
+    // 수정 전에는 이것들이 겹쳐있거나 뷰포트 밖으로 밀려나도 스크롤이 안될 수 있음.
+
+    // 체크: body에 스크롤이 생겼는지 확인 (수정 후에는 생겨야 함)
+    // 현재(버그 상태)는 overflow-hidden이라 스크롤이 없을 것임.
+
+    // 5. 레이아웃 검증 로직
+    // 차트 높이가 충분한지
+    const chartBox = await page
+      .locator(".flex-1.min-h-0")
+      .first()
+      .boundingBox();
+    console.log("Chart Box:", chartBox);
+
+    // 호가창이 보이는지
+    const orderBookBox = await page
+      .locator("text=일반호가")
+      .first()
+      .boundingBox();
+    console.log("OrderBook Box:", orderBookBox);
+
+    // 주문폼이 보이는지
+    const orderFormBox = await page
+      .locator("text=매수하기")
+      .first()
+      .boundingBox();
+    console.log("OrderForm Box:", orderFormBox);
+
+    // 단순 존재 여부만 통과시키고, 실제 시각적 확인은 스크린샷으로 대체
+    expect(page.url()).toContain("/dashboard");
+  });
+});

tests/e2e/mobile-scroll-check.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Mobile Dashboard Scroll", () => {
+  test.use({
+    viewport: { width: 390, height: 844 }, // iPhone 12 Pro size
+    userAgent:
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1",
+  });
+
+  test("should allow scrolling to access order form at the bottom", async ({
+    page,
+  }) => {
+    // 1. Navigate to dashboard
+    await page.goto("http://localhost:3001/dashboard");
+    await page.waitForLoadState("domcontentloaded");
+
+    // 2. Check Top Element (Chart)
+    const chart = page.locator("canvas").first();
+    await expect(chart).toBeVisible();
+
+    // 3. Scroll to Bottom
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    await page.waitForTimeout(500); // Wait for scroll
+
+    // 4. Check Bottom Element (Order Form)
+    // "매수하기" button is a good indicator of the order form
+    const buyButton = page.getByRole("button", { name: "매수하기" });
+    await expect(buyButton).toBeVisible();
+
+    // 5. Verify Scroll Height is greater than Viewport Height
+    const scrollHeight = await page.evaluate(
+      () => document.documentElement.scrollHeight,
+    );
+    const viewportHeight = 844;
+    expect(scrollHeight).toBeGreaterThan(viewportHeight);
+
+    console.log(
+      `Scroll Height: ${scrollHeight}, Viewport Height: ${viewportHeight}`,
+    );
+
+    // Capture screenshot at bottom
+    await page.screenshot({
+      path: "test-results/mobile-scroll-bottom.png",
+      fullPage: false,
+    });
+  });
+});