웹: 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>
This commit is contained in:
EJClaw
@@ -528,3 +528,432 @@ label.field {
|
||||
min-width: min(100%, 320px);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
PC-first layout (docs/07-ui-ux.md §3). Breakpoints: ≥1100 PC, 720–1099 tablet, <720 phone.
|
||||
===================================================================== */
|
||||
.page {
|
||||
max-width: 1280px;
|
||||
padding: 24px 24px 48px;
|
||||
}
|
||||
@media (max-width: 719px) {
|
||||
.page {
|
||||
padding: 16px 16px calc(120px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
height: 64px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.site-header-inner {
|
||||
max-width: 1280px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.site-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 800;
|
||||
font-size: 1.15rem;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.site-nav {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.site-nav a {
|
||||
padding: 8px 14px;
|
||||
border-radius: 10px;
|
||||
color: var(--text-sub);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
.site-nav a:hover {
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
}
|
||||
.site-nav a.active {
|
||||
color: var(--primary);
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
.header-join {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.header-join input {
|
||||
width: 150px;
|
||||
height: 42px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--border);
|
||||
background: var(--bg);
|
||||
padding: 0 12px;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.header-join input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.header-join .btn {
|
||||
min-height: 42px;
|
||||
}
|
||||
.header-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 10px 4px 4px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
}
|
||||
.header-user:hover {
|
||||
background: var(--surface-2);
|
||||
}
|
||||
@media (max-width: 1099px) {
|
||||
.site-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 719px) {
|
||||
.site-header {
|
||||
height: 56px;
|
||||
}
|
||||
.site-header-inner {
|
||||
padding: 0 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
.header-join {
|
||||
display: none;
|
||||
}
|
||||
.site-logo .full {
|
||||
display: none;
|
||||
}
|
||||
.site-logo {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Room bar under the site header */
|
||||
.room-bar {
|
||||
position: sticky;
|
||||
top: 64px;
|
||||
z-index: 25;
|
||||
height: 52px;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.room-bar-inner {
|
||||
max-width: 1600px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
@media (max-width: 719px) {
|
||||
.room-bar {
|
||||
top: 56px;
|
||||
}
|
||||
.room-bar-inner {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Two-column page (lobby, home) */
|
||||
.two-col {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 400px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1099px) {
|
||||
.two-col {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Game screen: board + right panel, fits the viewport height on PC */
|
||||
.game-layout {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 16px 24px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 380px;
|
||||
gap: 20px;
|
||||
height: calc(100vh - 64px - 52px);
|
||||
min-height: 560px;
|
||||
}
|
||||
.game-main {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.game-side {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
.game-side .chat-panel {
|
||||
flex: 1;
|
||||
min-height: 220px;
|
||||
}
|
||||
@media (max-width: 1099px) {
|
||||
.game-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
height: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.board-wrap {
|
||||
max-width: min(100%, calc(100vh - 64px - 52px - 120px));
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 1099px) {
|
||||
.board-wrap {
|
||||
max-width: min(100%, 720px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Chat panel (inline on PC) */
|
||||
.chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 12px;
|
||||
}
|
||||
.chat-list {
|
||||
flex: 1;
|
||||
min-height: 120px;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.game-side .chat-list {
|
||||
max-height: none;
|
||||
}
|
||||
.chat-line {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.chat-line strong {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.emote-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
.emote-row button {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.emote-row button:hover {
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
/* Bottom bar only floats on phones; on wider screens it renders inline. */
|
||||
@media (min-width: 720px) {
|
||||
.bottom-bar.inline-wide {
|
||||
position: static;
|
||||
background: none;
|
||||
backdrop-filter: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.bottom-bar.inline-wide .bottom-bar-inner {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hover affordances (mouse) */
|
||||
@media (hover: hover) {
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--surface-2);
|
||||
}
|
||||
.game-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
.game-card {
|
||||
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
.phone-only {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 719px) {
|
||||
.phone-only {
|
||||
display: initial;
|
||||
}
|
||||
.wide-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Admin: sidebar layout */
|
||||
.admin-layout {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 220px minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
}
|
||||
.admin-side {
|
||||
position: sticky;
|
||||
top: 88px;
|
||||
align-self: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.admin-side a {
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
.admin-side a:hover {
|
||||
background: var(--surface-2);
|
||||
}
|
||||
.admin-side a.active {
|
||||
background: var(--primary);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
@media (max-width: 899px) {
|
||||
.admin-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding: 12px;
|
||||
}
|
||||
.admin-side {
|
||||
position: static;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.admin-side a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.data-table th {
|
||||
background: var(--surface-2);
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
.data-table tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.data-table tr.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.data-table tr.clickable:hover td {
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
/* Page sub-header (TopBar) sits under the site header and scrolls with the page. */
|
||||
.topbar {
|
||||
position: static;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
background: transparent;
|
||||
border-bottom: 0;
|
||||
padding: 12px 16px 0;
|
||||
min-height: 0;
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.bottom-bar.sticky-save {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
right: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px;
|
||||
}
|
||||
.bottom-bar.sticky-save .bottom-bar-inner {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
.room-bar-inner > *,
|
||||
.room-bar-inner .btn {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@media (max-width: 719px) {
|
||||
.room-bar-inner {
|
||||
gap: 4px;
|
||||
}
|
||||
.room-bar .rb-game {
|
||||
display: none;
|
||||
}
|
||||
.room-bar .btn-sm {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.schema-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px 24px;
|
||||
align-items: start;
|
||||
}
|
||||
.schema-grid > .schema-group {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.schema-group > .schema-grid,
|
||||
.schema-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
}
|
||||
.schema-group > legend {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user