diff --git a/docs/00-overview.md b/docs/00-overview.md index 98a2600..68e3ceb 100644 --- a/docs/00-overview.md +++ b/docs/00-overview.md @@ -20,7 +20,7 @@ - 인원: 각 게임의 원래 최소/최대 인원을 그대로 따른다. - 계정: 디스코드 로그인 또는 닉네임만 정하는 게스트. 디스코드 로그인 사용자도 닉네임을 바꿀 수 있다. - 방: 6자리 숫자 코드, 초대 링크, 코드/링크 복사, QR, 모바일 공유 시트, 빠른 시작, 관전, 재접속. -- 기기: 모바일(세로) 우선, 태블릿·PC 모두 지원. 최신 Chrome/Safari/Edge/Samsung Internet. +- 기기: **PC 우선**(사용자 결정, 2026-10-04). 태블릿·휴대폰도 같은 화면을 접어서 지원. 최신 Chrome/Edge/Safari/Firefox/Samsung Internet. ## 5. 범위 밖 (Non-goals) - 실제 돈, 유료 재화, 환전, 사이트 전체에서 유지되는 칩/포인트. 포커·섯다·고스톱의 칩/점수는 **그 방 안에서만** 쓰이고 방이 끝나면 사라진다(법적 위험 회피, `04-stability-security.md` 6절). diff --git a/docs/06-lobby-rooms.md b/docs/06-lobby-rooms.md index a2e83fc..f6313b9 100644 --- a/docs/06-lobby-rooms.md +++ b/docs/06-lobby-rooms.md @@ -29,7 +29,7 @@ 3. 대기실에서 방장이 바꿀 수 있는 것: 게임 모드/옵션(시간 제한 포함 — 게임마다 다름), 최대 인원(게임의 최소~최대 범위 안), 공개/비공개, 관전 허용, 채팅 허용. 4. 옵션은 "기본 설정" 몇 개만 보이고 나머지는 "자세한 설정" 접기 안에 둔다. -## 5. 대기실 화면 (위에서 아래 순서, 모바일 세로 기준) +## 5. 대기실 화면 (PC는 두 칸 배치 — `07-ui-ux.md` 3.4. 아래는 내용 순서이며 좁은 화면에서는 이 순서로 한 칸에 쌓인다) 1. **초대 카드**(가장 눈에 띄게): 큰 글씨 코드 `123 456` - [코드 복사] [링크 복사] [공유하기](모바일: 공유 시트 → 카카오톡 등) [QR 보기](같은 공간의 가족이 폰으로 찍어서 입장) - 복사하면 버튼이 1.5초간 "복사했어요 ✓"로 바뀜 + 진동(지원 기기). diff --git a/docs/07-ui-ux.md b/docs/07-ui-ux.md index 622e8ec..120d68a 100644 --- a/docs/07-ui-ux.md +++ b/docs/07-ui-ux.md @@ -40,24 +40,62 @@ - 모서리 둥글기 12px(버튼), 16px(카드). - 바둑판처럼 칸이 작은 보드: 칸 크기가 32px 미만이면 "확대 보기" 버튼 + 두 손가락 확대 지원, "두 번 눌러 확정" 기본 켜짐. -## 3. 공통 화면 틀 +## 3. 화면 틀 — PC 중심 (2026-10-04 결정) +사용자 요청으로 **PC 화면을 기준으로 설계**한다. 휴대폰·태블릿은 같은 화면을 세로로 접어서 지원한다. + +### 3.1 화면 폭 구간 +| 구간 | 폭 | 배치 | +|---|---|---| +| PC (기준) | 1100px 이상 (설계 기준 1280~1920) | 상단 메뉴 + 여러 칸 배치, 채팅·기보 항상 보임 | +| 태블릿 | 720~1099px | 두 칸 → 한 칸으로 접힘, 오른쪽 패널은 판 아래로 | +| 휴대폰 | 720px 미만 | 한 칸, 채팅은 버튼으로 여는 시트, 주요 버튼은 아래 고정 | + +### 3.2 공통 상단 메뉴 (PC) ``` -┌──────────────────────────┐ -│ ← 홈 오목 · 123 456 ⋯ │ ← 상단 바(56px): 뒤로, 게임·코드, 메뉴 -│ 내 차례예요 (●흑) ◔ 23초 │ ← 상태 줄: 지금 할 일 + 타이머 -├──────────────────────────┤ -│ 상대 정보 (이름, 시간) │ -│ │ -│ 게임 보드 │ ← 화면 폭에 맞춰 정사각형 -│ │ -│ 내 정보 / 내 손패 │ -├──────────────────────────┤ -│ [주요 행동 버튼들] │ ← 하단 고정, 엄지 영역 -│ 💬 채팅 😊 반응 │ -└──────────────────────────┘ +┌──────────────────────────────────────────────────────────────────────────┐ +│ ● 같이 놀자 보드게임 홈 게임 목록 [코드 6자리 입력칸][참여] 👤 닉네임 ▾ │ 64px +└──────────────────────────────────────────────────────────────────────────┘ ``` -- PC(가로 넓음): 보드 가운데, 오른쪽 패널에 플레이어 목록·채팅·기록. -- 카드 게임: 원형 테이블 배치, 나는 항상 아래. 상대는 인원에 따라 위/좌/우에 자동 배치. +- 어느 화면에서든 코드를 바로 넣어 참여할 수 있게 상단에 코드 입력칸을 둔다. +- 내용 폭은 최대 1280px, 가운데 정렬. 게임 화면만 화면 전체 폭을 쓴다. + +### 3.3 홈 (PC) +``` +┌ 상단 메뉴 ───────────────────────────────────────────────────────────────┐ +│ [＋ 방 만들기 (큰 버튼)] [코드로 참여: □□□ □□□ ] [▶ 하던 게임으로] │ +├──────────────────────────────────────────────────────┬───────────────────┤ +│ 게임 카드 격자 (4~5열, 카드에 인원·시간·난이도) │ 지금 열린 공개 방 │ +│ │ (게임·인원·참여) │ +└──────────────────────────────────────────────────────┴───────────────────┘ +``` + +### 3.4 대기실 (PC) +``` +┌──────────────────────────────┬────────────────────────────────┐ +│ 초대 카드(코드 크게, 복사·QR) │ 자리 목록(2~10칸 격자) │ +│ 게임 설정(펼쳐서 바로 수정 — 방장) │ 채팅(항상 보임) │ +│ 규칙 요약 │ [게임 시작] / [준비하기] │ +└──────────────────────────────┴────────────────────────────────┘ +``` + +### 3.5 게임 화면 (PC) +``` +┌ 상단 메뉴(얇게 48px: 게임명·코드·메뉴) ─────────────────────────────────────┐ +│ │ 상태: 내 차례예요 ◔ 23초 │ +│ │ 상대 정보 · 시계 │ +│ 게임 판 (화면 높이에 맞춤) │ 내 정보 · 시계 │ +│ │ [무르기][무승부][기권] │ +│ │ 기보(수 목록) │ +│ │ 채팅 + 반응 버튼 │ +└──────────────────────────────────────────────┴──────────────────────────────┘ +``` +- 오른쪽 패널 폭 360px, 판은 남은 공간에서 가장 큰 정사각형. +- 카드 게임: 판 자리에 원형 테이블, 나는 항상 아래, 내 패는 판 아래쪽 넓게. +- PC 조작: 마우스를 올리면 미리 보기 돌(반투명), 클릭 한 번에 착수(기본값). "두 번 눌러 확정"은 터치 기기의 기본값이고 설정에서 바꿀 수 있다. +- 단축키: `Enter` 채팅 입력, `Esc` 창 닫기, 방향키+`Enter` 판 조작. + +### 3.6 관리자 (PC) +왼쪽 사이드바(220px)에 메뉴, 오른쪽에 내용. 표는 PC에서 표 형태, 좁은 화면에서는 카드 목록. ## 4. 공통 컴포넌트 | 컴포넌트 | 동작 | diff --git a/docs/10-testing.md b/docs/10-testing.md index 4db86d5..c01754a 100644 --- a/docs/10-testing.md +++ b/docs/10-testing.md @@ -13,9 +13,9 @@ | 정보 유출 | 같은 도구 | 숨김 정보 게임 | 매 커밋 | | 서버 통합 | `bun test` + 실제 WS 클라이언트 | 인증, 방 만들기/입장, 행동, 재접속, 강퇴, 한 판 더 | 매 커밋 | | 복구 | 통합 테스트 | 서버 인스턴스 종료 → 같은 DB로 재시작 → 상태 동일 | 매 커밋 | -| E2E | Playwright(크로미움 + 모바일 뷰포트) | 게스트 시작 → 방 만들기 → 링크로 두 번째 사용자 입장 → 오목 한 판 끝까지 | 마일스톤마다 | +| E2E | Playwright(크로미움, PC 1440×900 기준 + 모바일 뷰포트 1개) | 게스트 시작 → 방 만들기 → 링크로 두 번째 사용자 입장 → 오목 한 판 끝까지 | 마일스톤마다 | | 접근성 | axe-core(Playwright) | 주요 화면 | 마일스톤마다 | -| 성능 | Lighthouse(모바일) | 홈, 방 | 마일스톤마다, 예산 위반 시 실패 | +| 성능 | Lighthouse(데스크톱 + 모바일) | 홈, 방 | 마일스톤마다, 예산 위반 시 실패 | | 부하 | 자체 Bun 스크립트(가짜 클라이언트) | 동시 2,000 연결, 방 500개, 각 방 2초마다 행동 | 마일스톤 M2, M5, 출시 전 | | 장애 주입 | 스크립트 | 게임 중 서버 강제 종료(SIGKILL), 네트워크 끊김, 느린 클라이언트 | 마일스톤 M2, 출시 전 | diff --git a/docs/13-decisions.md b/docs/13-decisions.md index 639dfa1..7830048 100644 --- a/docs/13-decisions.md +++ b/docs/13-decisions.md @@ -6,6 +6,7 @@ - 도메인: **game.tkrmagid.kr** 고정. 모든 기능을 완성한 뒤 연결한다. - 상표명: 친구끼리 쓰는 사이트라 **원래 이름을 그대로 사용**한다. - 관리자 사이트 추가. 슈퍼어드민은 디스코드 ID `293719842274541579`, 어드민은 디스코드 ID로 추가(`14-admin.md`). +- 화면은 **PC 버전 중심**으로 만든다(휴대폰은 접어서 지원). - 게임 규칙 기본값은 관리자 사이트에서 모두 바꿀 수 있으므로, 3절의 기본안은 "처음 값"이다. ## 1. 운영 (진행에 꼭 필요) diff --git a/docs/games/_TEMPLATE.md b/docs/games/_TEMPLATE.md index 4e63925..208ae09 100644 --- a/docs/games/_TEMPLATE.md +++ b/docs/games/_TEMPLATE.md @@ -34,7 +34,7 @@ ### 8.6 종료 조건과 결과(GameResult) ## 9. UI/UX -- 화면 배치(모바일 세로 / PC), 조작 방법, 합법 수 하이라이트, 애니메이션, 초보자 도움말 +- 화면 배치(PC 기준 — 판 + 오른쪽 패널, 좁은 화면 접힘), 조작 방법, 합법 수 하이라이트, 애니메이션, 초보자 도움말 ## 10. 테스트 체크리스트 - [ ] 구체적인 시나리오