# 화면 및 파일 구조

## 현재 화면

### `/`

- 파일: `src/App.vue`
- 역할: 프로젝트 준비 상태를 보여주는 초기 랜딩 화면
- 현재 기능: 제품 목표 안내
- 다음 변경: 로비 화면과 게임 화면을 Vue Router로 분리
- 문서 제목과 기본 언어: `index.html`의 `Play Uniare`, 한국어

## 예정 화면

### `/`

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

### `/room/:roomCode`

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

## 예정 디렉터리 구조

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

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