diff --git a/apps/web/src/components/ui.tsx b/apps/web/src/components/ui.tsx index edc745c..b90bbc4 100644 --- a/apps/web/src/components/ui.tsx +++ b/apps/web/src/components/ui.tsx @@ -20,7 +20,7 @@ export function Avatar({ user, size = 40 }: { user: Pick { try { diff --git a/apps/web/src/pages/RoomPage.tsx b/apps/web/src/pages/RoomPage.tsx index f891089..6e939d7 100644 --- a/apps/web/src/pages/RoomPage.tsx +++ b/apps/web/src/pages/RoomPage.tsx @@ -88,7 +88,6 @@ function Room({ code, me }: { code: string; me: PublicUser }) { const nav = useNavigate(); const { room, game, result, status, joinError, pending, slow, needsRefresh } = useRoom(); const [ui, setUi] = useState(null); - const [menu, setMenu] = useState(false); const [leaveAsk, setLeaveAsk] = useState(false); const [chatOpen, setChatOpen] = useState(false); const gameId = room?.gameId; @@ -158,31 +157,59 @@ function Room({ code, me }: { code: string; me: PublicUser }) { {g.nameKo} 방 {formatRoomCode(code)}
+ {/* No ⋯ menu: every room action sits on this bar. Phones stack icon over a short label (.rb-btn). */} {/* ← 홈 leaves the room, same as [나가기]. */} - {g.nameKo} - {/* On phones the link sits in the menu so ← 홈 · 채팅 · 🚪 나가기 · 메뉴 fit on one line. */} - - 방 🔗} done="링크 복사됨 ✓" className="btn btn-ghost btn-sm" /> - + + 🔗 + + + 방 + + 링크 + + + } + done={ + <> + ✓ + 복사됨 + + } + className="btn btn-ghost btn-sm rb-btn" + /> {!roomChatClosed && ( setChatOpen(true)} /> )} - - - + )} +
@@ -209,25 +236,6 @@ function Room({ code, me }: { code: string; me: PublicUser }) { )} - {menu && ( - setMenu(false)} label="메뉴"> -

메뉴

- - 🔗 방 링크 복사} done="링크 복사됨 ✓" className="btn btn-secondary btn-block" /> - - - - {isHost && room.status === 'paused' && ( - - )} -
- )} {leaveAsk && ( void }) { const seen = useChatSeen((s) => s.seen); const unread = Math.max(0, total - seen); return ( - ); } diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css index 92506c7..9f56af5 100644 --- a/apps/web/src/styles/global.css +++ b/apps/web/src/styles/global.css @@ -976,9 +976,14 @@ button.header-user { white-space: nowrap; flex-shrink: 0; } +/* Room bar buttons: icon + label inline on PC, icon over a small label on phones (no ⋯ menu). */ +.rb-btn { + gap: 6px; + position: relative; +} @media (max-width: 719px) { .room-bar-inner { - gap: 4px; + gap: 2px; } .room-bar .rb-game { display: none; @@ -986,6 +991,27 @@ button.header-user { .room-bar .btn-sm { padding: 0 8px; } + .room-bar .rb-btn { + flex-direction: column; + gap: 0; + padding: 2px 6px; + min-width: 46px; + line-height: 1.1; + } + .room-bar .rb-ico { + font-size: 1.1rem; + } + .room-bar .rb-lbl { + font-size: 0.72rem; + font-weight: 700; + } + .room-bar .rb-badge { + position: absolute; + top: 0; + right: 0; + padding: 0 5px; + font-size: 0.7rem; + } } .schema-grid { diff --git a/docs/06-lobby-rooms.md b/docs/06-lobby-rooms.md index acc8cff..21c742b 100644 --- a/docs/06-lobby-rooms.md +++ b/docs/06-lobby-rooms.md @@ -57,9 +57,9 @@ ## 8. 게임 중 - 위쪽 상태 줄: 지금 할 일 문장("내 차례예요" / "OO님 차례예요"), 남은 시간 링. -- 방 막대: [← 홈] 게임 이름 · 방 코드 링크(휴대폰은 메뉴 안) · [💬 채팅](휴대폰) · [📖 규칙](PC) · **[🚪 나가기]** · [⋯ 메뉴]. +- 방 막대(메뉴 버튼 없이 모두 밖에): [← 홈] 게임 이름(PC) · [🔗 방 코드 링크 복사] · [💬 채팅](휴대폰) · [📖 규칙] · [⚙️ 설정](글자 크기·소리, `/me`) · [⏹ 게임 끝내기](방장, 오류로 멈춘 게임만) · **[🚪 나가기]**. 휴대폰에서는 아이콘 아래 짧은 글자로 쌓아 한 줄(320px)에 들어가게 한다. - [🚪 나가기]와 [← 홈]은 같은 동작이다: 방에서 나가고 홈으로. 한 번 누르면 바로 나가고, 게임 중에 자리에 앉아 있을 때만 "게임 중에 나가면 기권으로 처리돼요" 확인을 한 번 더 묻는다. -- 메뉴(⋯): 규칙 보기, 소리, 글자 크기, 무르기 요청(지원 게임), 무승부 제안(지원 게임), 기권. 나가기는 메뉴에 넣지 않는다. +- 무르기 요청·무승부 제안·기권은 게임 화면 안의 버튼으로 한다(지원 게임). - 관전자는 [자리 나면 참가] 대기 가능(다음 판부터). ## 9. 게임 끝