치지직 채팅창 인식 추가 및 주사위 횟수 증가 추가.

app/game/page.tsx

@@ -1,13 +1,21 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import DicePlane from './diceplane';
 import { DEFAULT_ASSETS, getAssets } from './asset-storage';
+import { useRoom } from '@/lib/rooms/client';
 
-export default function GamePage() {
+function GamePageInner() {
+  const searchParams = useSearchParams();
+  const roomId = searchParams.get('roomId');
   const [backgroundSrc, setBackgroundSrc] = useState(DEFAULT_ASSETS.background);
   const [ready, setReady] = useState(false);
+  const [simAmount, setSimAmount] = useState(1000);
+  const { room, error, consumeDice, simulateDonation } = useRoom(roomId);
+  const chzzkOn = Boolean(room?.settings.chzzkEnabled);
+  const manualMode = Boolean(roomId) && room != null && !chzzkOn;
 
   useEffect(() => {
     setBackgroundSrc(getAssets().background);
@@ -28,16 +36,91 @@ export default function GamePage() {
       )}
       <div className="absolute inset-0 z-0 bg-black/25" aria-hidden />
 
-      <Link
-        href="/"
-        className="absolute top-3 left-3 z-40 rounded bg-black/70 px-3 py-1.5 text-sm text-white hover:bg-black/85"
-      >
-        설정으로
-      </Link>
+      <div className="absolute top-3 left-3 z-40 flex flex-col items-start gap-2">
+        <Link
+          href="/"
+          className="rounded bg-black/70 px-3 py-1.5 text-sm text-white hover:bg-black/85"
+        >
+          홈
+        </Link>
+        {roomId && chzzkOn && (
+          <div className="max-w-[min(100vw-2rem,20rem)] rounded-xl bg-black/75 px-3 py-2 text-xs text-white">
+            <p className="font-semibold">주사위 큐: {room?.diceQueue ?? '…'}</p>
+            {room?.settings.channelId && (
+              <p className="mt-1 break-all font-mono text-[10px] text-white/50">
+                채널 ID: {room.settings.channelId}
+              </p>
+            )}
+            {room && (
+              <p className="mt-1 text-white/70">
+                {room.channelName || room.settings.channelId || '—'} · {room.chatStatus}
+                {` · ${room.settings.cheesePerDice}원/${
+                  room.settings.multiplyByCheese
+                    ? `배수${room.settings.maxMultiplier > 0 ? `≤${room.settings.maxMultiplier}` : ''}`
+                    : '1회'
+                }`}
+              </p>
+            )}
+            {error && <p className="mt-1 text-red-300">{error}</p>}
+            {room?.chatError && <p className="mt-1 text-red-300">{room.chatError}</p>}
+            {room?.lastDonations?.[0] && (
+              <p className="mt-1 text-amber-200">
+                최근: {room.lastDonations[0].donatorNickname}{' '}
+                {room.lastDonations[0].payAmount}원 → +{room.lastDonations[0].diceAdded}
+              </p>
+            )}
+            <div className="mt-2 flex items-center gap-1">
+              <input
+                type="number"
+                min={1}
+                value={simAmount}
+                onChange={(e) => setSimAmount(Number(e.target.value) || 1)}
+                className="w-24 rounded border border-white/20 bg-black/50 px-2 py-1 text-white"
+              />
+              <button
+                type="button"
+                className="rounded bg-white/15 px-2 py-1 hover:bg-white/25"
+                onClick={() => void simulateDonation(simAmount).catch(() => undefined)}
+              >
+                후원 시뮬
+              </button>
+            </div>
+          </div>
+        )}
+        {manualMode && (
+          <div className="max-w-[min(100vw-2rem,20rem)] rounded-xl bg-black/75 px-3 py-2 text-xs text-white">
+            <p className="font-semibold">수동 모드</p>
+            <p className="mt-1 text-white/70">
+              치지직·채팅 연동 없음 · 주사위는 자유롭게 굴릴 수 있습니다.
+            </p>
+            {error && <p className="mt-1 text-red-300">{error}</p>}
+          </div>
+        )}
+      </div>
 
       <div className="relative z-10 h-full w-full">
-        <DicePlane />
+        <DicePlane
+          requireDiceQueue={chzzkOn}
+          diceQueue={room?.diceQueue ?? 0}
+          onConsumeDice={consumeDice}
+          showChatFeed={chzzkOn}
+          chatFeed={chzzkOn ? room?.chatFeed ?? [] : []}
+        />
       </div>
     </div>
   );
 }
+
+export default function GamePage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex h-screen items-center justify-center bg-black text-white">
+          불러오는 중…
+        </div>
+      }
+    >
+      <GamePageInner />
+    </Suspense>
+  );
+}