M1 웹 + 배포: 홈·코드 입장·대기실·오목 화면·결과·계정, E2E, Docker/Caddy

- 웹(React+Vite): 홈(큰 버튼 2개·하던 게임 돌아가기), 6자리 코드 입력(붙여넣기 감지·자동 입장), 링크 입장(닉네임 한 칸), 대기실(코드/링크 복사·공유·QR·자리·준비·방장 메뉴·설정), 오목(SVG 판·두 번 눌러 확정·금수/위험 표시·시계·무르기·무승부·기권·키보드 조작·스크린리더 안내), 결과(한 판 더 투표·방 전적·공정성 확인), 채팅·반응, 계정(닉네임 변경·글자 크기·테마·소리·진동) - WS 클라이언트: 지수 백오프+지터 재연결, 화면 복귀/온라인 즉시 재연결, seq 순서 처리, ping/pong 지연·시계 보정, 서버 재시작 안내, 다른 창 접속 처리 - @bg/shared/lite: 브라우저용 진입점(zod 제외) → 첫 화면 JS 약 90KB gzip - e2e/omok.e2e.ts: 브라우저 두 개(모바일·PC)로 방 만들기→링크 입장→대국→새로고침 복구→승리→한 판 더 - deploy: Dockerfile(운영 의존성만, 267MB), docker-compose(app+Caddy), Caddyfile(보안 헤더·CSP), .env.example - 프록시 뒤에서만 X-Forwarded-For 신뢰(TRUST_PROXY=1) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 04:37:33 +09:00
parent b1f3d7c500
commit 17b1d0fcda
46 changed files with 3590 additions and 90 deletions
--- a/e2e/omok.e2e.ts
+++ b/e2e/omok.e2e.ts
@@ -0,0 +1,129 @@
+/**
+ * E2E (docs/10 §2): guest start → create room → second user joins by link → omok to the end.
+ * Run: bun e2e/omok.e2e.ts  (needs apps/web/dist built)
+ */
+import { chromium, type Page } from 'playwright-core';
+import { mkdirSync, mkdtempSync } from 'node:fs';
+import { join } from 'node:path';
+import { loadConfig } from '../apps/server/src/config';
+import { startServer } from '../apps/server/src/server';
+
+const PORT = Number(process.env.E2E_PORT ?? 4517);
+const ORIGIN = `http://localhost:${PORT}`;
+const SHOTS = process.env.E2E_SHOTS ?? join(import.meta.dir, '../test-results');
+mkdirSync(SHOTS, { recursive: true });
+
+const dbDir = mkdtempSync(join(process.env.TMPDIR ?? '/tmp', 'bg-e2e-'));
+const app = startServer({
+  config: loadConfig({ PORT: String(PORT), DB_PATH: join(dbDir, 'app.db'), PUBLIC_ORIGIN: ORIGIN }),
+  log: () => {},
+  staticDir: join(import.meta.dir, '../apps/web/dist'),
+});
+
+const browser = await chromium.launch({ executablePath: process.env.CHROME ?? '/usr/bin/google-chrome', headless: true });
+let failed = false;
+const step = async (name: string, fn: () => Promise<void>) => {
+  const t0 = performance.now();
+  try {
+    await fn();
+    console.log(`✓ ${name} (${Math.round(performance.now() - t0)}ms)`);
+  } catch (e) {
+    failed = true;
+    console.log(`✗ ${name}: ${(e as Error).message.split('\n')[0]}`);
+    throw e;
+  }
+};
+
+async function tapCell(page: Page, x: number, y: number, n = 15) {
+  const box = (await page.locator('svg[role="grid"]').boundingBox())!;
+  const span = n - 1 + 1.2;
+  const px = box.x + ((x + 0.6) / span) * box.width;
+  const py = box.y + ((y + 0.6) / span) * box.height;
+  await page.mouse.click(px, py);
+  await page.waitForTimeout(60);
+  await page.mouse.click(px, py); // second tap confirms (tap-confirm mode)
+}
+
+try {
+  const ctxA = await browser.newContext({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2, isMobile: true, hasTouch: true, locale: 'ko-KR' });
+  const ctxB = await browser.newContext({ viewport: { width: 1280, height: 860 }, locale: 'ko-KR' });
+  const a = await ctxA.newPage();
+  const b = await ctxB.newPage();
+  const errors: string[] = [];
+  for (const p of [a, b]) p.on('pageerror', (e) => errors.push(e.message));
+
+  let code = '';
+  await step('A: 홈 → 방 만들기 → 닉네임 → 대기실', async () => {
+    await a.goto(ORIGIN + '/');
+    await a.getByRole('button', { name: '＋ 방 만들기' }).click();
+    await a.getByLabel('내 이름(닉네임)').fill('호랑이');
+    await a.getByRole('button', { name: '이 이름으로 시작하기' }).click();
+    await a.waitForURL(/\/r\/\d{6}$/);
+    code = a.url().slice(-6);
+    await a.getByText('친구에게 이 코드를 알려 주세요').waitFor();
+    await a.screenshot({ path: join(SHOTS, '1-lobby-mobile.png') });
+  });
+
+  await step('B: 링크로 입장 → 닉네임 → 자동 착석', async () => {
+    await b.goto(`${ORIGIN}/r/${code}`);
+    await b.getByText('방에 초대받았어요').waitFor();
+    await b.getByLabel('내 이름(닉네임)').fill('고양이');
+    await b.getByRole('button', { name: '이 이름으로 입장하기' }).click();
+    await b.getByText('고양이').first().waitFor();
+    await a.getByText('고양이').waitFor();
+  });
+
+  await step('A: 설정(방장 흑, 자유룰) → 시작', async () => {
+    await a.getByRole('button', { name: '설정 바꾸기' }).click();
+    await a.getByRole('button', { name: '자유룰' }).click();
+    await a.getByRole('button', { name: '방장이 흑' }).click();
+    await a.getByRole('button', { name: '저장' }).click();
+    await a.getByText('자유룰 · 15줄').waitFor();
+    await a.getByRole('button', { name: '▶ 게임 시작' }).click();
+    await a.getByRole('button', { name: '시작하기' }).click();
+    await a.getByText('내 차례예요').waitFor();
+    await b.getByText('호랑이님이 생각 중이에요').waitFor();
+  });
+
+  await step('대국: 흑 가로 5목', async () => {
+    for (let i = 0; i < 4; i++) {
+      await tapCell(a, 5 + i, 7);
+      await b.getByText('내 차례예요').waitFor();
+      await tapCell(b, 5 + i, 3);
+      await a.getByText('내 차례예요').waitFor();
+      if (i === 1) await a.screenshot({ path: join(SHOTS, '2-game-mobile.png') });
+    }
+  });
+
+  await step('B: 새로고침해도 판이 그대로', async () => {
+    await b.reload();
+    await b.getByText('호랑이님이 생각 중이에요').waitFor();
+    const stones = await b.locator('svg[role="grid"] circle[r="0.46"]').count();
+    if (stones !== 8) throw new Error(`expected 8 stones after reload, got ${stones}`);
+  });
+
+  await step('흑 승리 → 결과 화면', async () => {
+    await tapCell(a, 9, 7);
+    await a.getByText('🎉 이겼어요!').waitFor();
+    await b.getByText('아쉽게 졌어요').waitFor();
+    await a.waitForTimeout(500); // let the sheet animation finish
+    await a.screenshot({ path: join(SHOTS, '3-result-mobile.png') });
+    await b.screenshot({ path: join(SHOTS, '4-result-desktop.png') });
+  });
+
+  await step('한 판 더 → 새 게임 시작', async () => {
+    await a.getByRole('button', { name: /한 판 더/ }).click();
+    await b.getByRole('button', { name: /한 판 더/ }).click();
+    await a.getByText(/차례예요|생각 중이에요/).waitFor();
+  });
+
+  if (errors.length) throw new Error(`page errors: ${errors.join(' | ')}`);
+} catch (e) {
+  failed = true;
+  console.error(e);
+} finally {
+  await browser.close();
+  await app.stop();
+}
+console.log(failed ? 'E2E FAILED' : 'E2E PASSED');
+process.exit(failed ? 1 : 0);