# 화면 및 파일 구조

## 현재 화면

### `/`

- 파일: `src/views/LobbyView.vue`
- 역할: 비공개 게임 대기실
- 현재 기능:
  - 방 생성과 6자리 초대 코드
  - 방 코드 참가 입력
  - 덱 결과 URL 등록
  - 50장·동일 카드·트리거·AP 기본 검증
  - Socket.IO 서버 연결 상태
  - 서버 기반 방 생성·방 코드 참가
  - 양쪽 플레이어의 좌석·덱 등록·준비 상태
  - 양쪽 준비 완료 시 게임 화면 자동 이동
  - 방 나가기
  - 현재 방 종료 후 새 방 만들기
  - 진행 중 게임 세션 발견 시 게임 화면 자동 복귀
  - 유효한 덱으로 로컬 게임 테스트

### `/game`

- 파일: `src/views/GameView.vue`
- 주요 컴포넌트: `src/components/game-board/GameBoard.vue`
- 플레이 보드 자산: `src/assets/playboards/union-arena-standard.png`
- 역할: 실제 카드 조작 게임 화면
- 현재 기능:
  - 헤더 없는 전체 화면 16:9 플레이 보드
  - `F` 키 브라우저 전체화면 전환
  - 카드 크기 기준 표시·숨김
  - 실제 카드 이미지 한 장 표시
  - 독립 카드 인스턴스 3장 겹침 표시
  - 기존 덱 빌더 `series`·`cards` 쿼리 불러오기
  - 불러온 덱을 내 덱 영역에 뒷면으로 쌓기
  - 잘못된 덱 데이터 오류 안내
  - 내 덱 1장 드로우와 셔플
  - 온라인 서버 권위 셔플·드로우·여러 장 공개
  - 덱 위 1~10장 공개
  - 중앙 공개 영역 자동 정렬
  - 플레이매트와 분리된 화면 하단 한 줄 손패 트레이
  - 축소 손패 카드와 가로 스크롤
  - 우클릭 메뉴의 손패·덱 위·덱 아래·무덤 이동
  - 첫 손패 7장
  - 로컬 선후공 선택과 1회 멀리건
  - 온라인 서버 무작위 선후공 지정
  - 라이프 7장 세팅
  - 턴 시작 AP·드로우·일괄 언탭
  - 현재 차례 강조와 서버 기반 턴 종료·교대
  - 상대 공개 카드·덱·손패·라이프 장수 실시간 표시
  - 상대 카드 반대편 좌표 표시와 조작 차단
  - 새로고침·단기 연결 끊김의 같은 좌석 재접속
  - 게임 화면의 방 나가기
  - 상대가 방을 나가면 대기실 자동 복귀
  - 카드별 자동 언탭 제외 잠금
  - 마우스·터치 포인터 기반 자유 드래그
  - 카드 더블클릭 탭·언탭
  - 카드 우클릭 조작 메뉴
  - 우클릭 메뉴의 앞면·뒷면 전환
  - 선택 카드 레이어 순서 올리기
  - 선택 카드 좌표·레이어·앞뒤·탭 상태 표시
  - 좌우 플레이어 정보 패널
  - 라이프, 덱·손패 장수, 연결 상태와 메모 자리
- 다음 변경: 카드 조작 이벤트별 세부 검증과 진행 중 표시
- 문서 제목과 기본 언어: `index.html`의 `Play Uniare`, 한국어

## 예정 화면

### `/`

- 로컬 연습 시작
- 방 만들기
- 방 참가
- 덱 쿼리 유효성 안내

### `/room/:roomCode`

- 상대 필드
- 공용 게임 보드
- 내 필드와 손패
- 덱·무덤·공개 영역
- 카드 조작 메뉴
- 연결 상태와 재접속 안내

## 카드 우클릭 메뉴

- 선택 카드 상태에 따라 `앞면으로`·`뒷면으로`, `탭`·`언탭` 문구를 바꾼다.
- 선택 카드를 가장 위 레이어로 올릴 수 있다.
- 선택 카드를 손패, 덱 위, 덱 아래, 무덤으로 이동할 수 있다.
- 화면 가장자리에서 메뉴가 잘리지 않도록 위치를 제한한다.
- 바깥 영역 클릭 또는 `Esc` 키로 닫는다.

## 덱 쿼리 처리

- 파일: `src/services/deckQuery.js`
- 쿼리가 있으면 카드 수량을 독립 인스턴스로 확장한다.
- 쿼리가 없으면 연습 카드 3장을 사용한다.
- 카드 이미지 주소는 `VITE_CARD_ASSET_BASE_URL`을 기준으로 만든다.

## 덱 조작 패널

- 플레이 보드의 내 덱 옆에 작은 반투명 패널로 표시한다.
- 현재 덱 장수를 표시한다.
- 덱이 비어 있으면 드로우를 비활성화한다.
- 덱이 2장 미만이면 셔플을 비활성화한다.
- 공개할 카드 수를 1~10장으로 지정한다.
- 공개 중인 카드 장수를 표시한다.

## 예정 디렉터리 구조

```text
src/
├── components/
│   ├── cards/
│   │   └── GameCard.vue
│   ├── game-board/
│   │   └── GameBoard.vue
│   └── room/
├── composables/
├── services/
├── stores/
├── router/
├── stores/
├── types/
├── utils/
└── views/
```

- `components`: 화면에서 재사용하는 UI
- `composables`: Vue 반응형 조합 로직
- `services`: 쿼리 파싱, API, Socket.IO 연결
- `stores`: Pinia 기반 게임·방·사용자 상태
- `router`: 대기실과 게임 화면 경로
- `types`: JSDoc 타입 정의
- `utils`: Vue에 의존하지 않는 순수 함수
- `views`: Router 단위 화면