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>

apps/web/src/pages/Home.tsx

@@ -0,0 +1,109 @@
+/** 홈: 큰 버튼 두 개 + 진행 중 게임 + 게임 카드 (docs/06 §2). */
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router';
+import { CATALOG } from '@bg/shared/lite';
+import { Avatar, Sheet } from '../components/ui';
+import { NicknameForm } from '../components/NicknameForm';
+import { api } from '../net/api';
+import { useSession } from '../store/session';
+import { toast } from '../store/toast';
+import { formatRoomCode } from '@bg/shared/lite';
+import { GAME_ICON, UPCOMING } from '../lib/catalog-ui';
+
+export function Home() {
+  const { me, activeRoom } = useSession();
+  const catalog = useSession((s) => (s.catalog.length ? s.catalog : CATALOG));
+  const nav = useNavigate();
+  const [picker, setPicker] = useState(false);
+  const [needName, setNeedName] = useState<null | (() => void)>(null);
+  const [busy, setBusy] = useState(false);
+  const available = catalog.filter((g) => g.available);
+
+  const withName = (fn: () => void) => (me ? fn() : setNeedName(() => fn));
+
+  const create = (gameId: string) =>
+    withName(async () => {
+      setBusy(true);
+      try {
+        const { code } = await api.createRoom(gameId);
+        nav(`/r/${code}`);
+      } catch (e) {
+        toast((e as Error).message, 'error');
+      } finally {
+        setBusy(false);
+      }
+    });
+
+  return (
+    <main className="page">
+      <header className="row" style={{ justifyContent: 'space-between' }}>
+        <h1>같이 놀자 보드게임</h1>
+        <Link to="/me" className="btn btn-ghost" aria-label="내 정보">
+          {me ? <Avatar user={me} size={36} /> : '👤'} <span className="small">{me ? me.nickname : '내 정보'}</span>
+        </Link>
+      </header>
+
+      {activeRoom && (
+        <Link to={`/r/${activeRoom}`} className="btn btn-success btn-block">
+          ▶ 하던 게임으로 돌아가기 (방 {formatRoomCode(activeRoom)})
+        </Link>
+      )}
+
+      <div className="stack">
+        <button className="btn btn-primary btn-block" style={{ minHeight: 72, fontSize: '1.25rem' }} disabled={busy} onClick={() => (available.length === 1 ? create(available[0]!.id) : setPicker(true))}>
+          ＋ 방 만들기
+        </button>
+        <Link to="/j" className="btn btn-secondary btn-block" style={{ minHeight: 72, fontSize: '1.25rem' }}>
+          🔢 코드로 참여하기
+        </Link>
+      </div>
+
+      <section className="stack">
+        <h2>게임 고르기</h2>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: 12 }}>
+          {available.map((g) => (
+            <Link key={g.id} to={`/g/${g.id}`} className="card" style={{ textDecoration: 'none', color: 'inherit', display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <span style={{ fontSize: '2.4rem' }} aria-hidden>
+                {GAME_ICON[g.id] ?? '🎲'}
+              </span>
+              <strong style={{ fontSize: '1.15rem' }}>{g.nameKo}</strong>
+              <span className="muted small">{g.blurb}</span>
+              <span className="small">
+                {g.minPlayers === g.maxPlayers ? `${g.minPlayers}명` : `${g.minPlayers}~${g.maxPlayers}명`} · {g.minutes}분
+              </span>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      <section className="stack">
+        <h2>곧 나와요</h2>
+        <p className="muted">{UPCOMING.join(' · ')}</p>
+      </section>
+
+      {picker && (
+        <Sheet onClose={() => setPicker(false)} label="게임 고르기">
+          <h2>어떤 게임을 할까요?</h2>
+          {available.map((g) => (
+            <button key={g.id} className="btn btn-secondary btn-block" onClick={() => (setPicker(false), create(g.id))}>
+              {GAME_ICON[g.id]} {g.nameKo}
+            </button>
+          ))}
+        </Sheet>
+      )}
+      {needName && (
+        <Sheet onClose={() => setNeedName(null)} label="이름 정하기">
+          <h2>먼저 이름을 정해 주세요</h2>
+          <NicknameForm
+            next="/"
+            onDone={() => {
+              const fn = needName;
+              setNeedName(null);
+              fn();
+            }}
+          />
+        </Sheet>
+      )}
+    </main>
+  );
+}