웹: PC 중심 화면으로 재구성

- 공통 상단 메뉴(사이트 이름·홈·게임 목록·관리자·어디서나 코드 입력·내 정보)
- 홈: 방 만들기 + 코드 입력 카드, 게임 격자, 지금 열린 공개 방 목록(/api/public-rooms)
- 대기실: 두 칸(초대·설정 바로 수정·규칙 요약 / 자리·시작 버튼·채팅 항상 보임)
- 게임 화면: 판(화면 높이에 맞춤, 좌표 표시) + 오른쪽 패널(상태·선수·시계·버튼·기보·채팅)
- 오목: 마우스 올리면 미리 보기 돌, PC는 한 번 클릭으로 착수(두 번 눌러 확정은 터치 기기 기본값,
  기기별 설정), GameUI에 Side 패널 추가
- 채팅: PC는 패널로 항상 표시(Enter로 바로 입력), 휴대폰은 시트
- 관리자: 왼쪽 사이드바, 사용자 표, 규칙 입력 두 칸 격자, 저장 바 고정
- 좁은 화면은 같은 화면을 한 칸으로 접어서 지원(방 상단 줄 줄바꿈 수정)
- E2E: PC 1440×900 기준(방장 PC, 친구 휴대폰), 관리자 E2E도 PC

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/pages/RoomPage.tsx

@@ -1,8 +1,7 @@
 /** 방: 대기실 ↔ 게임 ↔ 결과를 한 주소에서 전환 (docs/06 §5–§9). */
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { create } from 'zustand';
 import { useNavigate, useParams } from 'react-router';
-import { CHAT_MAX, EMOTE_LABEL, EMOTES, formatRoomCode, type PublicUser, type RoomView } from '@bg/shared/lite';
+import { formatRoomCode, type PublicUser, type RoomView } from '@bg/shared/lite';
 import { Avatar, CodeLabel, ConfirmSheet, CopyButton, ShareButton, Sheet, TopBar } from '../components/ui';
 import { NicknameForm } from '../components/NicknameForm';
 import { GameNotice, gameName } from '../components/GameNotice';
@@ -13,6 +12,8 @@ import { useSession } from '../store/session';
 import { loadGameUI } from '../games/registry';
 import type { GameUI } from '../games/types';
 import { sounds } from '../lib/feedback';
+import { ChatPanel, EmoteBubbles, useChatSeen } from '../components/ChatPanel';
+import { useWide } from '../lib/media';
 
 export default function RoomPage() {
   const { code = '' } = useParams();
@@ -143,22 +144,27 @@ function Room({ code, me }: { code: string; me: PublicUser }) {
 
   return (
     <>
-      <TopBar
-        title={
-          <>
-            {g?.nameKo} · <CodeLabel code={code} />
-          </>
-        }
-        onBack={() => nav('/')}
-        right={
-          <>
+      <div className="room-bar">
+        <div className="room-bar-inner">
+          <button className="btn btn-ghost btn-sm" onClick={() => nav('/')} aria-label="홈으로">
+            ← 홈
+          </button>
+          <strong className="rb-game" style={{ fontSize: '1.1rem' }}>
+            {g.nameKo}
+          </strong>
+          <CopyButton text={`${location.origin}/r/${code}`} label={<>방 <CodeLabel code={code} /> 🔗</>} done="링크 복사됨 ✓" className="btn btn-ghost btn-sm" />
+          <span style={{ flex: 1 }} />
+          <span className="phone-only">
             <ChatButton onOpen={() => setChatOpen(true)} />
-            <button className="icon-btn" onClick={() => setMenu(true)} aria-label="메뉴">
-              ⋯<span className="lbl">메뉴</span>
-            </button>
-          </>
-        }
-      />
+          </span>
+          <button className="btn btn-ghost btn-sm wide-only" onClick={() => nav(`/rules/${room.gameId}`)}>
+            📖 규칙
+          </button>
+          <button className="btn btn-secondary btn-sm" onClick={() => setMenu(true)} aria-label="메뉴">
+            ⋯ 메뉴
+          </button>
+        </div>
+      </div>
       {needsRefresh && (
         <div className="card row" style={{ margin: 12, justifyContent: 'space-between' }}>
           <span>새 버전이 있어요.</span>
@@ -173,7 +179,15 @@ function Room({ code, me }: { code: string; me: PublicUser }) {
         <Lobby room={room} ui={ui} me={me} />
       )}
       {room.status === 'finished' && result && game && <ResultPanel room={room} me={me} players={players} onLeave={doLeave} />}
-      <ChatDock room={room} me={me} open={chatOpen} onClose={() => setChatOpen(false)} />
+      <EmoteBubbles room={room} />
+      {chatOpen && (
+        <Sheet onClose={() => setChatOpen(false)} label="채팅">
+          <ChatPanel room={room} me={me} />
+          <button className="btn btn-secondary btn-block" onClick={() => setChatOpen(false)}>
+            닫기
+          </button>
+        </Sheet>
+      )}
       {menu && (
         <Sheet onClose={() => setMenu(false)} label="메뉴">
           <h2>메뉴</h2>
@@ -248,33 +262,35 @@ function Lobby({ room, ui, me }: { room: RoomView; ui: GameUI; me: PublicUser })
   const notReady = room.seats.filter((s) => s && !s.ready && s.user.id !== room.hostId).length;
   const [askStart, setAskStart] = useState(false);
 
-  return (
-    <main className="page">
-      <section className="card stack" style={{ textAlign: 'center' }} aria-label="초대하기">
-        <p className="muted">친구에게 이 코드를 알려 주세요</p>
-        <p style={{ fontSize: '3rem', fontWeight: 800, lineHeight: 1.1 }}>
-          <CodeLabel code={room.code} />
-        </p>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
-          <CopyButton text={room.code} label="🔢 코드 복사" />
-          <CopyButton text={url} label="🔗 링크 복사" />
-          <ShareButton title={`${gName} 같이 해요`} text={shareText} url={url} />
-          <button className="btn btn-secondary" onClick={() => setQr(true)}>
-            📷 QR 보기
-          </button>
-        </div>
-      </section>
-
-      <section className="stack" aria-label="자리">
-        <h2>
-          자리 ({seated}/{room.maxPlayers})
-        </h2>
+  const wide = useWide();
+  const invite = (
+    <section className="card stack" style={{ textAlign: 'center' }} aria-label="초대하기">
+      <p className="muted">친구에게 이 코드를 알려 주세요</p>
+      <p style={{ fontSize: '3.2rem', fontWeight: 800, lineHeight: 1.1 }}>
+        <CodeLabel code={room.code} />
+      </p>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 8 }}>
+        <CopyButton text={room.code} label="🔢 코드 복사" />
+        <CopyButton text={url} label="🔗 링크 복사" />
+        <ShareButton title={`${gName} 같이 해요`} text={shareText} url={url} />
+        <button className="btn btn-secondary" onClick={() => setQr(true)}>
+          📷 QR 보기
+        </button>
+      </div>
+    </section>
+  );
+  const seats = (
+    <section className="stack" aria-label="자리">
+      <h2>
+        자리 ({seated}/{room.maxPlayers})
+      </h2>
+      <div style={{ display: 'grid', gridTemplateColumns: wide && room.seats.length > 4 ? '1fr 1fr' : '1fr', gap: 10 }}>
         {room.seats.map((s, i) =>
           s ? (
-            <div key={i} className="card row" style={{ gap: 12 }}>
+            <div key={i} className="card row" style={{ gap: 12, flexWrap: 'nowrap' }}>
               <Avatar user={s.user} size={44} />
               <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ fontWeight: 700 }}>
+                <div style={{ fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                   {room.hostId === s.user.id && <span aria-label="방장">👑 </span>}
                   {s.user.nickname}
                   {s.user.id === me.id && <span className="muted small"> (나)</span>}
@@ -288,59 +304,83 @@ function Lobby({ room, ui, me }: { room: RoomView; ui: GameUI; me: PublicUser })
               {isHost && s.user.id !== me.id && <HostMenu room={room} target={s.user} />}
             </div>
           ) : (
-            <button key={i} className="card row" style={{ border: '2px dashed var(--border)', boxShadow: 'none', cursor: 'pointer', minHeight: 72, justifyContent: 'center', color: 'var(--text-sub)' }} onClick={() => (mySeat < 0 ? socket.send({ t: 'seat', seat: i }) : setQr(true))}>
+            <button key={i} className="card row" style={{ border: '2px dashed var(--border)', boxShadow: 'none', cursor: 'pointer', minHeight: 76, justifyContent: 'center', color: 'var(--text-sub)' }} onClick={() => (mySeat < 0 ? socket.send({ t: 'seat', seat: i }) : setQr(true))}>
               {mySeat < 0 ? '＋ 여기 앉기' : '＋ 빈자리 · 친구 초대하기'}
             </button>
           ),
         )}
-        {room.spectators.length > 0 && <p className="muted small">관전 {room.spectators.length}명: {room.spectators.map((u) => u.nickname).join(', ')}</p>}
-        {mySeat >= 0 && room.allowSpectators && (
-          <button className="btn btn-ghost" onClick={() => socket.send({ t: 'unseat' })}>
-            관전으로 바꾸기
+      </div>
+      {room.spectators.length > 0 && <p className="muted small">관전 {room.spectators.length}명: {room.spectators.map((u) => u.nickname).join(', ')}</p>}
+      {mySeat >= 0 && room.allowSpectators && (
+        <button className="btn btn-ghost" style={{ alignSelf: 'flex-start' }} onClick={() => socket.send({ t: 'unseat' })}>
+          관전으로 바꾸기
+        </button>
+      )}
+    </section>
+  );
+  const settingsCard = (
+    <section className="card stack">
+      <div className="row" style={{ justifyContent: 'space-between' }}>
+        <div>
+          <h3>게임 설정</h3>
+          <p className="muted">{ui.optionsSummary(room.options)}</p>
+        </div>
+        {isHost && !wide && (
+          <button className="btn btn-secondary btn-sm" onClick={() => setSettings(true)}>
+            설정 바꾸기
           </button>
         )}
-      </section>
-
-      <section className="card stack">
-        <div className="row" style={{ justifyContent: 'space-between' }}>
-          <div>
-            <h3>게임 설정</h3>
-            <p className="muted">{ui.optionsSummary(room.options)}</p>
-          </div>
-          {isHost && (
-            <button className="btn btn-secondary btn-sm" onClick={() => setSettings(true)}>
-              설정 바꾸기
+      </div>
+      <p className="muted small">{room.visibility === 'public' ? '공개 방 (누구나 들어올 수 있어요)' : '친구만 (코드·링크로만 들어와요)'}</p>
+      {room.lockedOptions.length > 0 && <p className="muted small">🔒 일부 규칙은 관리자가 정해 두어서 바꿀 수 없어요.</p>}
+      <GameNotice gameId={room.gameId} />
+      {isHost && wide && <SettingsForm room={room} ui={ui} inline />}
+    </section>
+  );
+  const action = (
+    <div className="bottom-bar inline-wide">
+      <div className="bottom-bar-inner">
+        {isHost ? (
+          <button className="btn btn-primary" style={{ minHeight: 64, fontSize: '1.2rem' }} disabled={need > 0} onClick={() => (notReady > 0 ? setAskStart(true) : socket.send({ t: 'start' }))}>
+            {need > 0 ? `${need}명 더 필요해요` : '▶ 게임 시작'}
+          </button>
+        ) : mySeat >= 0 ? (
+          room.seats[mySeat]!.ready ? (
+            <button className="btn btn-secondary" style={{ minHeight: 64 }} onClick={() => socket.send({ t: 'ready', ready: false })}>
+              준비 취소
             </button>
-          )}
-        </div>
-        <p className="muted small">
-          {room.visibility === 'public' ? '공개 방 (누구나 들어올 수 있어요)' : '친구만 (코드·링크로만 들어와요)'}
-        </p>
-        {room.lockedOptions.length > 0 && <p className="muted small">🔒 일부 규칙은 관리자가 정해 두어서 바꿀 수 없어요.</p>}
-        <GameNotice gameId={room.gameId} />
-      </section>
-
-      <div className="bottom-bar">
-        <div className="bottom-bar-inner">
-          {isHost ? (
-            <button className="btn btn-primary" disabled={need > 0} onClick={() => (notReady > 0 ? setAskStart(true) : socket.send({ t: 'start' }))}>
-              {need > 0 ? `${need}명 더 필요해요` : '▶ 게임 시작'}
-            </button>
-          ) : mySeat >= 0 ? (
-            room.seats[mySeat]!.ready ? (
-              <button className="btn btn-secondary" onClick={() => socket.send({ t: 'ready', ready: false })}>
-                준비 취소
-              </button>
-            ) : (
-              <button className="btn btn-success" onClick={() => socket.send({ t: 'ready', ready: true })}>
-                ✓ 준비하기
-              </button>
-            )
           ) : (
-            <button className="btn btn-primary" disabled={!room.seats.some((s) => s === null)} onClick={() => socket.send({ t: 'seat' })}>
-              {room.seats.some((s) => s === null) ? '자리에 앉기' : '자리가 다 찼어요 (관전 중)'}
+            <button className="btn btn-success" style={{ minHeight: 64, fontSize: '1.2rem' }} onClick={() => socket.send({ t: 'ready', ready: true })}>
+              ✓ 준비하기
             </button>
+          )
+        ) : (
+          <button className="btn btn-primary" style={{ minHeight: 64 }} disabled={!room.seats.some((s) => s === null)} onClick={() => socket.send({ t: 'seat' })}>
+            {room.seats.some((s) => s === null) ? '자리에 앉기' : '자리가 다 찼어요 (관전 중)'}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <main className="page">
+      <div className="two-col">
+        <div className="stack" style={{ gap: 20 }}>
+          {invite}
+          {wide ? settingsCard : seats}
+          {wide && (
+            <section className="card stack">
+              <h3>규칙 요약</h3>
+              <ui.Rules options={room.options} />
+            </section>
           )}
+          {!wide && settingsCard}
+        </div>
+        <div className="stack" style={{ gap: 16, position: wide ? 'sticky' : undefined, top: 140 }}>
+          {wide && seats}
+          {action}
+          {wide && <ChatPanel room={room} me={me} />}
         </div>
       </div>
 
@@ -388,13 +428,30 @@ function HostMenu({ room, target }: { room: RoomView; target: PublicUser }) {
 }
 
 function SettingsSheet({ room, ui, onClose }: { room: RoomView; ui: GameUI; onClose: () => void }) {
+  return (
+    <Sheet onClose={onClose} label="게임 설정">
+      <h2>게임 설정</h2>
+      <SettingsForm room={room} ui={ui} onDone={onClose} />
+    </Sheet>
+  );
+}
+
+/** Host settings: game options + room options. Inline on PC, in a sheet on narrow screens. */
+function SettingsForm({ room, ui, inline, onDone }: { room: RoomView; ui: GameUI; inline?: boolean; onDone?: () => void }) {
   const [options, setOptions] = useState(room.options);
   const [visibility, setVisibility] = useState(room.visibility);
   const [allowSpectators, setAllowSpectators] = useState(room.allowSpectators);
   const [chatEnabled, setChatEnabled] = useState(room.chatEnabled);
+  // Follow server-side changes (e.g. admin locks) when not editing.
+  useEffect(() => setOptions(room.options), [room.options]);
+  const dirty =
+    JSON.stringify(options) !== JSON.stringify(room.options) ||
+    visibility !== room.visibility ||
+    allowSpectators !== room.allowSpectators ||
+    chatEnabled !== room.chatEnabled;
   const save = () => {
     socket.send({ t: 'config', options, visibility, allowSpectators, chatEnabled });
-    onClose();
+    onDone?.();
   };
   const seg = (value: boolean, set: (v: boolean) => void, on: string, off: string) => (
     <div className="segmented">
@@ -407,26 +464,35 @@ function SettingsSheet({ room, ui, onClose }: { room: RoomView; ui: GameUI; onCl
     </div>
   );
   return (
-    <Sheet onClose={onClose} label="게임 설정">
-      <h2>게임 설정</h2>
+    <div className="stack" style={{ gap: 14 }}>
       {room.lockedOptions.length > 0 && <p className="muted small">🔒 관리자가 고정한 규칙은 바꿔도 저장되지 않아요.</p>}
       <ui.Options value={options} onChange={setOptions} />
       <hr style={{ border: 0, borderTop: '1px solid var(--border)', width: '100%' }} />
-      <strong>방 공개</strong>
-      {seg(visibility === 'public', (v) => setVisibility(v ? 'public' : 'private'), '누구나(공개)', '친구만')}
-      <strong>관전</strong>
-      {seg(allowSpectators, setAllowSpectators, '관전 허용', '관전 안 됨')}
-      <strong>채팅</strong>
-      {seg(chatEnabled, setChatEnabled, '채팅 켜기', '채팅 끄기')}
-      <div className="row">
-        <button className="btn btn-primary" style={{ flex: 2 }} onClick={save}>
-          저장
-        </button>
-        <button className="btn btn-secondary" style={{ flex: 1 }} onClick={onClose}>
-          취소
-        </button>
+      <div style={{ display: 'grid', gridTemplateColumns: inline ? 'repeat(3, minmax(0, 1fr))' : '1fr', gap: 12 }}>
+        <div className="stack" style={{ gap: 6 }}>
+          <strong>방 공개</strong>
+          {seg(visibility === 'public', (v) => setVisibility(v ? 'public' : 'private'), '누구나', '친구만')}
+        </div>
+        <div className="stack" style={{ gap: 6 }}>
+          <strong>관전</strong>
+          {seg(allowSpectators, setAllowSpectators, '허용', '안 됨')}
+        </div>
+        <div className="stack" style={{ gap: 6 }}>
+          <strong>채팅</strong>
+          {seg(chatEnabled, setChatEnabled, '켜기', '끄기')}
+        </div>
       </div>
-    </Sheet>
+      <div className="row">
+        <button className="btn btn-primary" style={{ flex: 2 }} disabled={inline && !dirty} onClick={save}>
+          {inline ? (dirty ? '설정 저장' : '저장됨') : '저장'}
+        </button>
+        {!inline && (
+          <button className="btn btn-secondary" style={{ flex: 1 }} onClick={onDone}>
+            취소
+          </button>
+        )}
+      </div>
+    </div>
   );
 }
 
@@ -435,37 +501,54 @@ function SettingsSheet({ room, ui, onClose }: { room: RoomView; ui: GameUI; onCl
 function GameView({ room, ui, me, players, pending, slow }: { room: RoomView; ui: GameUI; me: PublicUser; players: Record<string, PublicUser>; pending: boolean; slow: boolean }) {
   const game = useRoom((s) => s.game)!;
   const tapConfirm = useSession((s) => s.settings.tapConfirm);
+  const wide = useWide();
   const myTurn = ui.isMyTurn(game.view, me.id);
   const isPlayer = room.seats.some((s) => s?.user.id === me.id) && game.active !== undefined;
+  const props = {
+    view: game.view,
+    me: me.id,
+    players,
+    act: (a: unknown) => socket.act(a),
+    pending,
+    deadline: game.deadline,
+    active: game.active,
+    tapConfirm,
+  };
+  const status = (
+    <div
+      className="card"
+      role="status"
+      aria-live="polite"
+      style={{
+        padding: '14px 16px',
+        fontWeight: 700,
+        fontSize: '1.15rem',
+        background: myTurn ? 'var(--primary)' : 'var(--surface)',
+        color: myTurn ? 'var(--primary-text)' : 'var(--text)',
+        width: '100%',
+      }}
+    >
+      {room.status === 'paused' ? '오류로 게임이 멈췄어요. 방장이 끝낼 수 있어요.' : ui.statusText(game.view, me.id, players)}
+      {slow && <span className="small"> · 연결 확인 중…</span>}
+      {!isPlayer && (
+        <span className="badge" style={{ marginLeft: 8 }}>
+          관전 중
+        </span>
+      )}
+    </div>
+  );
   return (
-    <main className="page" style={{ gap: 12 }}>
-      <div
-        className="card"
-        role="status"
-        aria-live="polite"
-        style={{
-          padding: '12px 16px',
-          fontWeight: 700,
-          fontSize: '1.1rem',
-          background: myTurn ? 'var(--primary)' : 'var(--surface)',
-          color: myTurn ? 'var(--primary-text)' : 'var(--text)',
-        }}
-      >
-        {room.status === 'paused' ? '오류로 게임이 멈췄어요. 방장이 끝낼 수 있어요.' : ui.statusText(game.view, me.id, players)}
-        {slow && <span className="small"> · 연결 확인 중…</span>}
-        {!isPlayer && <span className="badge" style={{ marginLeft: 8 }}>관전 중</span>}
+    <div className="game-layout">
+      <div className="game-main">
+        {!wide && status}
+        <ui.Board {...props} />
       </div>
-      <ui.Board
-        view={game.view}
-        me={me.id}
-        players={players}
-        act={(a) => socket.act(a)}
-        pending={pending}
-        deadline={game.deadline}
-        active={game.active}
-        tapConfirm={tapConfirm}
-      />
-    </main>
+      <aside className="game-side" aria-label="게임 정보">
+        {wide && status}
+        <ui.Side {...props} />
+        {wide && <ChatPanel room={room} me={me} title={false} />}
+      </aside>
+    </div>
   );
 }
 
@@ -539,87 +622,13 @@ function ResultPanel({ room, me, players, onLeave }: { room: RoomView; me: Publi
 
 // ---------------------------------------------------------------- chat
 
-/** Unread counter shared between the top-bar button and the chat sheet. */
-const useChatSeen = create<{ seen: number }>(() => ({ seen: 0 }));
-
 function ChatButton({ onOpen }: { onOpen: () => void }) {
   const total = useRoom((s) => s.chat.length);
   const seen = useChatSeen((s) => s.seen);
   const unread = Math.max(0, total - seen);
   return (
-    <button className="icon-btn" onClick={onOpen} aria-label={`채팅${unread ? `, 새 메시지 ${unread}개` : ''}`}>
-      💬<span className="lbl">채팅</span>
-      {unread > 0 && <span className="badge warning">{unread}</span>}
+    <button className="btn btn-ghost btn-sm" onClick={onOpen} aria-label={`채팅${unread ? `, 새 메시지 ${unread}개` : ''}`}>
+      💬 채팅{unread > 0 && <span className="badge warning">{unread}</span>}
     </button>
   );
 }
-
-function ChatDock({ room, me, open, onClose }: { room: RoomView; me: PublicUser; open: boolean; onClose: () => void }) {
-  const chat = useRoom((s) => s.chat);
-  const emotes = useRoom((s) => s.emotes);
-  const setOpen = (v: boolean) => !v && onClose();
-  const [text, setText] = useState('');
-  const listRef = useRef<HTMLDivElement>(null);
-  const [hiddenUsers, setHiddenUsers] = useState<Set<string>>(new Set());
-  useEffect(() => {
-    if (open) {
-      useChatSeen.setState({ seen: chat.length });
-      listRef.current?.scrollTo({ top: listRef.current.scrollHeight });
-    }
-  }, [open, chat.length]);
-  const nick = (id: string) => room.seats.find((s) => s?.user.id === id)?.user.nickname ?? room.spectators.find((u) => u.id === id)?.nickname ?? '';
-  return (
-    <>
-      <div style={{ position: 'fixed', right: 16, bottom: 'calc(96px + env(safe-area-inset-bottom))', zIndex: 16, display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end', pointerEvents: 'none' }}>
-        {emotes.map((e) => (
-          <div key={e.id} className="toast" style={{ pointerEvents: 'none' }}>
-            {nick(e.from)}: {EMOTE_LABEL[e.emote as keyof typeof EMOTE_LABEL] ?? ''}
-          </div>
-        ))}
-      </div>
-      {open && (
-        <Sheet onClose={() => setOpen(false)} label="채팅">
-          <h2>채팅</h2>
-          <div className="row">
-            {EMOTES.map((id) => (
-              <button key={id} className="btn btn-secondary btn-sm" onClick={() => socket.send({ t: 'emote', id })}>
-                {EMOTE_LABEL[id]}
-              </button>
-            ))}
-          </div>
-          <div ref={listRef} className="stack" style={{ maxHeight: '40vh', overflow: 'auto', gap: 8 }} aria-live="polite">
-            {chat.length === 0 && <p className="muted">아직 메시지가 없어요.</p>}
-            {chat
-              .filter((m) => !m.from || !hiddenUsers.has(m.from.id))
-              .map((m) => (
-                <div key={m.id}>
-                  <strong>{m.from?.nickname ?? '알림'}</strong>{' '}
-                  {m.from && m.from.id !== me.id && (
-                    <button className="btn-ghost small muted" style={{ border: 0, background: 'none', cursor: 'pointer' }} onClick={() => setHiddenUsers(new Set([...hiddenUsers, m.from!.id]))}>
-                      (가리기)
-                    </button>
-                  )}
-                  <div>{m.text}</div>
-                </div>
-              ))}
-          </div>
-          {room.chatEnabled ? (
-            <form
-              className="row"
-              onSubmit={(e) => {
-                e.preventDefault();
-                if (text.trim()) socket.send({ t: 'chat', text: text.trim().slice(0, CHAT_MAX) });
-                setText('');
-              }}
-            >
-              <input className="input" style={{ flex: 1 }} value={text} onChange={(e) => setText(e.target.value)} maxLength={CHAT_MAX} placeholder="메시지 입력" aria-label="메시지" enterKeyHint="send" />
-              <button className="btn btn-primary">보내기</button>
-            </form>
-          ) : (
-            <p className="muted">이 방은 채팅을 쓰지 않아요. 위의 반응 버튼은 쓸 수 있어요.</p>
-          )}
-        </Sheet>
-      )}
-    </>
-  );
-}