init: create Play Uniare project

2026-06-19 10:58:41 +09:00
commit d127f8ff60
28 changed files with 2744 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,9 @@
 .git
 .gitignore
 .vscode
 dist
 node_modules
 npm-debug.log
 .env
 .env.*
 docs
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,2 @@
 VITE_CARD_ASSET_BASE_URL=/card-assets
 VITE_SOCKET_SERVER_URL=http://localhost:3000
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,27 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 .env
 .env.*
 !.env.example
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
 {
  "recommendations": ["Vue.volar"]
 }
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,236 @@
 # Play Uniare AI 작업 지침
 ## 1. 문서 목적
 이 파일은 사람과 AI 작업자가 같은 기준으로 프로젝트를 이해하고 변경하기
 위한 최상위 작업 규칙이다. 작업 시작 전에 이 파일과 `docs/`의 관련 문서를
 반드시 읽는다.
 ## 2. 프로젝트 목표
 - 기존 UA Deck Builder가 전달한 덱 데이터로 카드 시뮬레이터를 제공한다.
 - 게임 규칙을 자동 판정하지 않는다.
 - 사용자가 카드 이동, 뒤집기, 탭, 덱·손패·무덤 이동을 직접 수행한다.
 - 혼자 연습하는 로컬 모드와 방 코드 기반 2인 세션을 제공한다.
 - 각 플레이어는 자신이 소유한 카드만 조작한다.
 - 상대 효과로 내 카드가 제거되는 경우에도 내 카드 소유자가 직접 처리한다.
 ## 3. 기술 기준
 - 프런트엔드: Vue 3 Composition API와 `<script setup>`
 - 빌드 도구: Vite
 - 스타일: Tailwind CSS 우선
 - 상태 관리: Pinia 도입 예정
 - 화면 이동: Vue Router 도입 예정
 - 실시간 통신: Socket.IO 도입 예정
 - 배포: Docker Compose와 Nginx
 - 운영 환경: UGREEN NAS
 새 라이브러리를 추가하기 전에는 기존 기술로 해결 가능한지 확인하고, 추가
 이유와 영향을 `docs/history.md`에 기록한다.
 ## 4. 작업 시작 절차
 1. `AGENTS.md`를 읽는다.
 2. `docs/spec.md`, `docs/map.md`, `docs/todo.md`를 읽는다.
 3. `git status`로 기존 변경 사항을 확인한다.
 4. 관련 코드와 기존 패턴을 확인한다.
 5. 작업 범위를 작게 정하고 구현한다.
 6. 빌드와 관련 검증을 수행한다.
 7. 변경 성격에 맞는 문서를 업데이트한다.
 8. 작업 결과 형식에 맞춰 보고한다.
 ## 5. 코드 작성 규칙
 ### 5.1 공통
 - 기존 패턴을 우선하며 최소 범위만 수정한다.
 - 하나의 컴포넌트는 하나의 분명한 역할을 갖는다.
 - 반복되는 값은 상수, 설정 또는 데이터 모델로 분리한다.
 - 서버 주소, 이미지 원본 주소, 포트, 비밀값을 코드에 하드코딩하지 않는다.
 - 임시 이름과 의미 없는 자리표시자 이름을 사용하지 않는다.
 - 검증 없이 작업을 완료 처리하지 않는다.
 ### 5.2 네이밍
 - 의미가 드러나는 영문 이름을 사용한다.
 - 축약어를 남용하지 않는다.
 - `temp`, `tmp`, `test1`, `data1`, `foo`, `bar`, `aaa` 같은 임시 이름을
  금지한다.
 - Vue 컴포넌트 파일은 PascalCase를 사용한다.
 - 함수와 변수는 camelCase를 사용한다.
 - 상수는 의미가 분명한 경우 UPPER_SNAKE_CASE를 사용한다.
 - 이벤트 이름은 발생한 사실을 나타내는 kebab-case를 사용한다.
 - 불리언 값은 `is`, `has`, `can`, `should` 접두어를 우선한다.
 ### 5.3 Vue
 - Composition API와 `<script setup>`을 사용한다.
 - 화면 컴포넌트는 `src/views/`, 재사용 컴포넌트는 `src/components/`에 둔다.
 - 비즈니스 상태를 컴포넌트 내부에 중복 저장하지 않는다.
 - props를 직접 변경하지 않는다.
 - 외부 효과와 구독은 컴포넌트 해제 시 반드시 정리한다.
 ### 5.4 스타일
 - Tailwind CSS 유틸리티를 기본으로 사용한다.
 - 반복되는 디자인 패턴은 컴포넌트로 추출한다.
 - 임의 픽셀값은 게임 보드 좌표처럼 필요한 경우에만 사용하고 이유를
  문서화한다.
 - 카드 위치는 화면 픽셀이 아니라 보드 기준 정규화 좌표 또는 영역 기반으로
  저장한다.
 - 인라인 `style`은 드래그 좌표, 회전처럼 동적 계산이 필요한 경우에만
  허용한다.
 ### 5.5 주석
 - 함수와 클래스 앞에는 한국어 JSDoc 문서화 주석을 작성한다.
 - 주석은 코드가 무엇을 하는지 반복하기보다 이유, 제약, 입력·출력을 설명한다.
 - 복잡한 타입은 `@typedef`, 함수 입력은 `@param`, 반환은 `@returns`를 쓴다.
 ```js
 /**
 * 덱 빌더에서 전달된 카드 목록을 실제 카드 인스턴스로 확장한다.
 *
 * @param {ImportedDeckCard[]} importedCards 수량이 포함된 덱 카드 목록
 * @returns {GameCard[]} 고유 식별자가 부여된 카드 인스턴스 목록
 */
 function createGameCardInstances(importedCards) {
  return []
 }
 ```
 ## 6. 상태 관리 원칙
 ### 6.1 상태 구분
 - 서버 권위 상태: 방, 플레이어, 카드 소유권, 카드 영역, 덱 순서
 - 공유 게임 상태: 필드 카드 좌표, 앞뒷면, 탭 상태, 무덤, 공개 영역
 - 개인 비공개 상태: 내 손패 카드 식별 정보
 - 로컬 UI 상태: 선택 카드, 드래그 중 여부, 메뉴 열림, 확대 상태
 서버 권위 상태를 UI 컴포넌트의 로컬 상태만으로 확정하지 않는다.
 ### 6.2 카드 모델
 카드는 덱 원본 정보와 플레이 중 인스턴스를 구분한다.
 ```js
 {
  instanceId: 'player-1-card-17',
  ownerId: 'player-1',
  cardNumber: 'EX01BT/HTR-2-001',
  imageFileName: 'EX01BT_HTR-2-001.png',
  zone: 'deck',
  position: { x: 0.5, y: 0.5 },
  isFaceUp: false,
  isTapped: false,
  stackOrder: 17
 }
 ```
 - `instanceId`는 같은 카드 여러 장을 구분하는 고유값이다.
 - 소유권은 게임 시작 후 임의로 변경하지 않는다.
 - 카드 조작 요청은 요청자와 `ownerId`가 같은지 서버에서 확인한다.
 - 상대 손패에는 카드 번호와 이미지 정보를 전송하지 않는 방향을 우선한다.
 ### 6.3 실시간 이벤트
 - 상태 전체를 매번 전송하기보다 명시적인 이벤트와 필요한 변경값을 전송한다.
 - 이벤트 이름은 `card-moved`, `card-flipped`, `deck-shuffled`처럼 작성한다.
 - 재접속 시에는 서버의 최신 전체 스냅샷으로 복구한다.
 - 같은 이벤트가 중복 수신되어도 상태가 망가지지 않도록 설계한다.
 ## 7. 데이터 처리 원칙
 - 기존 덱 빌더 쿼리는 초기 덱 불러오기 용도로만 사용한다.
 - 외부 입력은 신뢰하지 않고 스키마 검사 후 사용한다.
 - 카드 이미지 URL은 환경변수의 원본 주소와 파일 경로를 조합한다.
 - NAS 운영 환경에서는
  `/volume1/docker/projects/apps/uniare/config/www/images`를 컨테이너에 읽기
  전용으로 연결하고 `/card-assets` 경로로 제공한다.
 - 기존 Uniare의 `config/www/images`에는 쓰기 작업을 수행하지 않는다.
 - URL 길이 문제를 고려해 장기적으로 덱 코드 또는 `deckId` 방식을 도입한다.
 - URL, 로그, Git에 사용자 토큰이나 비밀값을 남기지 않는다.
 - 오류가 있는 카드 한 장 때문에 전체 덱 불러오기가 중단되지 않도록 오류
  목록을 사용자에게 명확히 보여준다.
 ## 8. 문서 업데이트 기준
 - 기능 변경 → `docs/spec.md`
 - 버그 수정 → `docs/update.md`
 - 이슈 발견 → `docs/todo.md`
 - 구조·기술·의사결정 변경 → `docs/history.md`
 - 화면 변경 → `docs/map.md`
 - 배포 변경 → `docs/deploy.md`
 - 개발 명령 변경 → `docs/development.md`
 문서 업데이트 누락을 금지한다.
 ## 9. 금지 사항
 - 기존 스타일과 구조를 확인하지 않은 변경
 - 요청 범위를 벗어난 대규모 리팩터링
 - 서버 주소, 포트, API 키와 비밀번호 하드코딩
 - `.env`, 인증서, 개인키, NAS 계정 정보 커밋
 - 조작 권한 검증을 클라이언트에만 의존
 - 상대의 비공개 손패 정보를 클라이언트로 전송
 - 테스트 또는 빌드 검증 없이 완료 처리
 - 관련 문서 업데이트 누락
 ## 10. 의사결정 원칙
 1. 기존 패턴 우선
 2. 최소 수정
 3. 유지보수 용이성
 4. 구조 파악 용이성
 5. 사용자가 직접 운영할 수 있는 단순성
 6. 비공개 정보와 카드 소유권의 안전성
 ## 11. 단계별 개발 계획
 ### 1단계: 로컬 싱글 플레이
 - 덱 쿼리 파싱과 검증
 - 카드 인스턴스 생성
 - 덱 셔플과 드로우
 - 카드 이동, 뒤집기, 탭
 - 손패, 필드, 무덤, 공개 영역
 - 덱 위·아래 이동과 위에서 N장 공개
 ### 2단계: 2인 세션
 - 로비와 방 생성·참가
 - 플레이어 좌석과 소유권
 - Socket.IO 서버
 - 실시간 카드 이벤트 동기화
 - 상대 손패 비공개 처리
 - 연결 종료와 재접속 복구
 ### 3단계: 운영 안정화
 - NAS Docker 배포
 - 상태 저장소 도입 검토
 - 모바일·태블릿 조작 개선
 - 오류 로그와 상태 복구
 - 관전자와 게임 기록은 별도 검토
 구체적인 미완료 항목은 `docs/todo.md`에서 관리한다.
 ## 12. 작업 결과 보고 형식
 - 수정 내용
 - 변경 파일
 - 검증 내용
 - 문서 반영 여부
 - 남은 이슈
 ## 13. 최종 체크리스트
 - [ ] `AGENTS.md`와 관련 `docs/` 확인
 - [ ] 코드 수정 완료
 - [ ] 네이밍과 JSDoc 규칙 확인
 - [ ] 빌드 또는 관련 검증 수행
 - [ ] 변경 성격에 맞는 문서 반영
 - [ ] 민감 정보 포함 여부 확인
 - [ ] 남은 이슈를 `docs/todo.md`에 기록
--- a/19
+++ b/19
@@ -0,0 +1,19 @@
 FROM node:22-alpine AS builder
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 COPY . .
 RUN npm run build
 FROM nginx:1.27-alpine AS runtime
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=builder /app/dist /usr/share/nginx/html
 EXPOSE 80
 HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
  CMD wget --quiet --tries=1 --spider http://127.0.0.1/ || exit 1
--- a/README.md
+++ b/README.md
@@ -0,0 +1,27 @@
 # Play Uniare
 Union Arena 덱을 불러와 혼자 연습하거나 2인 세션으로 플레이하는 웹 카드
 시뮬레이터입니다.
 ## 기술 구성
 - Vue 3
 - Vite
 - Tailwind CSS
 - 향후 Pinia, Vue Router, Socket.IO 도입 예정
 ## 빠른 실행
 ```bash
 npm install
 npm run dev
 ```
 브라우저에서 터미널에 표시된 로컬 주소로 접속합니다.
 상세한 개발 및 배포 방법은 다음 문서를 참고합니다.
 - 개발: `docs/development.md`
 - NAS 배포: `docs/deploy.md`
 - 프로젝트 명세: `docs/spec.md`
 - AI 작업 규칙: `AGENTS.md`
--- a/compose.nas.yaml
+++ b/compose.nas.yaml
@@ -0,0 +1,7 @@
 services:
  playuniare-web:
    volumes:
      - type: bind
        source: /volume1/docker/projects/apps/uniare/config/www/images
        target: /srv/uniare-card-images
        read_only: true
--- a/compose.test.nas.yaml
+++ b/compose.test.nas.yaml
@@ -0,0 +1,7 @@
 services:
  playuniare-test-web:
    volumes:
      - type: bind
        source: /volume1/docker/projects/apps/uniare/config/www/images
        target: /srv/uniare-card-images
        read_only: true
--- a/compose.test.yaml
+++ b/compose.test.yaml
@@ -0,0 +1,11 @@
 name: playuniare-test
 services:
  playuniare-test-web:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: playuniare-test-web
    restart: unless-stopped
    ports:
      - '18080:80'
--- a/compose.yaml
+++ b/compose.yaml
@@ -0,0 +1,11 @@
 name: playuniare-production
 services:
  playuniare-web:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: playuniare-web
    restart: unless-stopped
    ports:
      - '18081:80'
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@@ -0,0 +1,31 @@
 server {
    listen 80;
    server_name _;
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    location = /health {
        access_log off;
        add_header Content-Type text/plain;
        return 200 'ok';
    }
    location ^~ /card-assets/ {
        alias /srv/uniare-card-images/;
        autoindex off;
        expires 1h;
        add_header Cache-Control "public, max-age=3600";
        add_header X-Content-Type-Options "nosniff";
    }
    location ~* \.(?:css|js|jpg|jpeg|gif|png|svg|ico|webp|woff2?)$ {
        expires 7d;
        add_header Cache-Control "public, max-age=604800, immutable";
        try_files $uri =404;
    }
 }
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -0,0 +1,342 @@
 # UGREEN NAS Docker 배포 안내
 ## 문서 목적
 이 문서는 터미널과 Docker에 익숙하지 않은 사용자가 Play Uniare의 테스트
 버전과 운영 버전을 UGREEN NAS에서 실행하고 업데이트하는 절차를 설명한다.
 현재 프로젝트는 Vue 정적 프런트엔드만 포함한다. 실시간 서버가 추가되면
 `compose.yaml`에 백엔드 서비스와 상태 저장소를 함께 추가한다.
 ## 배포 방식
 ```text
 사용자 브라우저
    ↓
 NAS 포트 또는 리버스 프록시
    ↓
 Play Uniare 컨테이너의 Nginx
    ├── /              → Vue 빌드 결과
    └── /card-assets/  → 기존 Uniare 카드 이미지
 ```
 Docker 이미지를 만들 때 Node.js로 Vue를 빌드하고, 실행할 때는 가벼운
 Nginx가 빌드 결과를 제공한다.
 카드 이미지는 다음 기존 폴더를 복사하지 않고 읽기 전용으로 연결한다.
 ```text
 /volume1/docker/projects/apps/uniare/config/www/images
 ```
 ## NAS에서 처음 한 번 준비하기
 ### 1. Docker 앱 설치
 UGREEN NAS의 앱 센터에서 Docker 또는 Container Manager에 해당하는 앱을
 설치한다. 모델과 UGOS 버전에 따라 앱 이름이 다를 수 있다.
 ### 2. 프로젝트 저장 폴더 준비
 NAS 공유 폴더에 다음과 같은 폴더를 만든다.
 ```text
 /volume1/docker/projects/apps/
 ├── uniare/
 │   └── config/
 │       └── www/
 │           ├── index.html
 │           └── images/
 └── playuniare/
 ```
 이 프로젝트의 NAS 경로는 다음으로 고정한다.
 ```text
 /volume1/docker/projects/apps/playuniare
 ```
 ### 3. SSH 사용 여부 결정
 UGREEN 관리 화면에서 Docker Compose 프로젝트를 직접 등록할 수 있다면 GUI를
 우선 사용한다. GUI에서 Git 저장소를 직접 받을 수 없거나 업데이트가 어려운
 경우에만 SSH 터미널을 사용한다.
 SSH를 활성화할 때는 관리자 화면에서 포트와 계정을 확인한다. NAS 비밀번호를
 문서, `.env`, Git 저장소에 기록하지 않는다.
 ## 테스트 버전 실행
 테스트 버전은 외부 도메인에 연결하기 전에 NAS 내부에서 확인하는 용도다.
 ### 1. NAS에 프로젝트 받기
 NAS 터미널에서 프로젝트 저장 폴더로 이동한다.
 ```bash
 cd /volume1/docker/projects/apps
 ```
 처음 한 번만 저장소를 복제한다.
 ```bash
 git clone https://git.sori.studio/zenn/playuniare.sori.studio.git playuniare
 cd playuniare
 ```
 비공개 저장소가 인증을 요구하면 비밀번호 대신 Git 서버에서 발급한 접근
 토큰을 사용하는 것을 권장한다. 토큰을 명령문이나 문서에 저장하지 않는다.
 ### 2. 테스트 컨테이너 빌드 및 실행
 ```bash
 docker compose \
  -f compose.test.yaml \
  -f compose.test.nas.yaml \
  up -d --build
 ```
 이 명령은 다음 작업을 한 번에 수행한다.
 - 최신 소스 코드로 Docker 이미지 생성
 - 테스트 컨테이너 실행
 - NAS의 18080 포트와 컨테이너 연결
 ### 3. 브라우저에서 확인
 NAS의 내부 IP가 `192.168.0.20`이라면 다음 주소로 접속한다.
 ```text
 http://192.168.0.20:18080
 ```
 실제 NAS IP는 공유기 또는 UGREEN 관리 화면에서 확인한다.
 ### 4. 테스트 로그 확인
 화면이 열리지 않으면 다음을 실행한다.
 ```bash
 docker compose \
  -f compose.test.yaml \
  -f compose.test.nas.yaml \
  ps
 docker compose \
  -f compose.test.yaml \
  -f compose.test.nas.yaml \
  logs --tail=100
 ```
 `Up` 또는 `running` 상태인지 확인한다.
 ### 5. 테스트 버전 중지
 ```bash
 docker compose \
  -f compose.test.yaml \
  -f compose.test.nas.yaml \
  down
 ```
 컨테이너는 제거되지만 소스 코드와 Docker 이미지는 남아 있다.
 ## 운영 버전 최초 배포
 ### 1. 배포 전 로컬 검증
 개발 컴퓨터에서 다음 명령이 성공해야 한다.
 ```bash
 npm install
 npm run build
 ```
 그 후 변경 사항을 커밋하고 원격 저장소에 푸시한다.
 ### 2. NAS에서 운영 컨테이너 실행
 NAS 프로젝트 폴더에서 실행한다.
 ```bash
 cd /volume1/docker/projects/apps/playuniare
 git pull
 docker compose \
  -f compose.yaml \
  -f compose.nas.yaml \
  up -d --build
 ```
 운영 컨테이너는 NAS의 18081 포트를 사용한다.
 ```text
 http://NAS_IP:18081
 ```
 ### 3. 도메인 연결
 UGREEN NAS 또는 사용 중인 리버스 프록시에서 다음과 같이 연결한다.
 ```text
 외부 도메인: https://playuniare.sori.studio
 내부 대상: http://127.0.0.1:18081
 ```
 - 외부 접속은 HTTPS를 사용한다.
 - 공유기에서 컨테이너 포트를 그대로 외부에 노출하기보다 리버스 프록시를
  사용한다.
 - 인증서 자동 갱신이 설정되어 있는지 확인한다.
 ### 4. 카드 이미지 연결 확인
 브라우저에서 실제 카드 파일 하나를 직접 연다.
 ```text
 http://NAS_IP:18081/card-assets/ua03/EX01BT_HTR-2-001.png
 ```
 이미지가 보이면 읽기 전용 마운트와 Nginx 경로가 정상이다. 파일명이 실제로
 존재하는 카드인지 먼저 확인한다.
 이미지가 보이지 않으면 NAS 터미널에서 원본 경로를 확인한다.
 ```bash
 ls /volume1/docker/projects/apps/uniare/config/www/images
 ```
 시리즈 폴더가 보여야 한다. 다음 명령으로 컨테이너 내부 연결도 확인한다.
 ```bash
 docker exec playuniare-web ls /srv/uniare-card-images
 ```
 이 경로 역시 같은 시리즈 폴더를 보여야 한다.
 ## 새 버전 업데이트
 ### 안전한 권장 순서
 1. 개발 컴퓨터에서 `npm run build`를 실행한다.
 2. 변경 내용을 Git에 커밋하고 푸시한다.
 3. NAS에서 테스트 버전을 먼저 업데이트한다.
 4. 테스트 주소에서 주요 기능을 확인한다.
 5. 문제가 없으면 운영 버전을 업데이트한다.
 ### 테스트 버전 업데이트
 ```bash
 cd /volume1/docker/projects/apps/playuniare
 git pull
 docker compose \
  -f compose.test.yaml \
  -f compose.test.nas.yaml \
  up -d --build
 ```
 브라우저에서 `http://NAS_IP:18080`을 확인한다.
 ### 운영 버전 업데이트
 ```bash
 cd /volume1/docker/projects/apps/playuniare
 git pull
 docker compose \
  -f compose.yaml \
  -f compose.nas.yaml \
  up -d --build
 ```
 브라우저에서 실제 도메인을 확인한다.
 ### 사용하지 않는 Docker 이미지 정리
 업데이트를 여러 번 하면 이전 이미지가 NAS 용량을 차지할 수 있다.
 ```bash
 docker image prune
 ```
 삭제 대상 확인 질문이 나오면 내용을 읽고 `y`를 입력한다. `-a` 옵션이나
 볼륨 삭제 명령은 데이터 유실 가능성이 있으므로 이 문서에서는 사용하지 않는다.
 ## 이전 버전으로 되돌리기
 문제가 생기면 먼저 현재 커밋을 확인한다.
 ```bash
 git log --oneline -10
 ```
 정상 동작했던 커밋 식별자를 확인한 뒤 다음처럼 전환한다.
 ```bash
 git checkout 정상커밋식별자
 docker compose \
  -f compose.yaml \
  -f compose.nas.yaml \
  up -d --build
 ```
 복구가 끝난 뒤 개발 컴퓨터에서 문제를 수정하고 정상 브랜치에 새 커밋을
 만든다. NAS에서 임의로 소스 파일을 직접 수정하지 않는다.
 다시 최신 `main`으로 돌아갈 때:
 ```bash
 git checkout main
 git pull
 docker compose \
  -f compose.yaml \
  -f compose.nas.yaml \
  up -d --build
 ```
 ## 운영 점검 명령
 ```bash
 docker compose -f compose.yaml -f compose.nas.yaml ps
 docker compose -f compose.yaml -f compose.nas.yaml logs --tail=100
 docker compose -f compose.yaml -f compose.nas.yaml restart
 ```
 - `ps`: 실행 상태 확인
 - `logs`: 최근 오류 확인
 - `restart`: 같은 이미지로 컨테이너 재시작
 ## 배포 체크리스트
 - [ ] 로컬 `npm run build` 성공
 - [ ] 관련 문서 업데이트
 - [ ] Git 커밋과 푸시 완료
 - [ ] 테스트 컨테이너 재빌드
 - [ ] 테스트 URL 주요 기능 확인
 - [ ] 운영 컨테이너 재빌드
 - [ ] 실제 도메인 HTTPS 접속 확인
 - [ ] `/card-assets/<series>/<fileName>` 이미지 접속 확인
 - [ ] 카드 이미지 마운트가 읽기 전용인지 확인
 - [ ] 브라우저 새로고침과 직접 URL 접근 확인
 - [ ] 오류 로그 확인
 - [ ] `.env`, 토큰, 비밀번호가 Git에 없는지 확인
 ## 향후 실시간 서버 추가 시
 프런트엔드만 있을 때는 Nginx 컨테이너 하나면 충분하다. Socket.IO 서버가
 추가되면 다음 항목이 필요하다.
 - Node.js 서버 컨테이너
 - WebSocket을 지원하는 리버스 프록시 설정
 - 프런트엔드와 서버의 환경변수
 - 방 상태 백업 또는 Redis 도입 여부
 - 컨테이너 재시작 시 방이 종료된다는 안내
 이 구조가 변경되면 반드시 이 문서와 `docs/history.md`를 함께 수정한다.
 ## NAS 전용 Compose 파일을 분리한 이유
 - `compose.yaml`: 어느 컴퓨터에서도 검사하고 빌드할 수 있는 공통 운영 설정
 - `compose.nas.yaml`: NAS에만 존재하는 카드 이미지 절대 경로 연결
 - `compose.test.yaml`: 공통 테스트 설정
 - `compose.test.nas.yaml`: 테스트 컨테이너의 NAS 카드 이미지 연결
 개발 Mac에는 `/volume1/...` 경로가 없으므로 NAS 전용 파일을 사용하지 않는다.
 NAS에서는 반드시 공통 파일과 NAS 전용 파일을 함께 지정한다.
--- a/docs/development.md
+++ b/docs/development.md
@@ -0,0 +1,132 @@
 # 로컬 개발과 테스트 실행 안내
 ## 처음 한 번만 준비하기
 ### 1. Node.js 확인
 터미널에서 실행한다.
 ```bash
 node --version
 npm --version
 ```
 두 명령 모두 버전 번호가 출력되어야 한다. 명령을 찾을 수 없다는 메시지가
 나오면 Node.js LTS 버전을 먼저 설치한다.
 ### 2. 프로젝트 폴더로 이동
 ```bash
 cd /Users/bicute/Desktop/dxp6800pro/uniare-simulator
 ```
 ### 3. 패키지 설치
 프로젝트를 처음 받았거나 `package.json`이 변경되었을 때 실행한다.
 ```bash
 npm install
 ```
 `node_modules`는 자동 생성되며 Git에 올리지 않는다.
 ## 개발 서버 실행
 ```bash
 npm run dev
 ```
 터미널에 다음과 비슷한 주소가 표시된다.
 ```text
 Local: http://localhost:5173/
 ```
 해당 주소를 브라우저에서 연다. 개발 중 코드를 저장하면 화면이 자동으로
 갱신된다.
 개발 서버를 종료하려면 실행 중인 터미널에서 `Control + C`를 누른다.
 ## 같은 네트워크의 다른 기기에서 테스트
 ```bash
 npm run dev -- --host
 ```
 터미널의 `Network` 주소를 같은 공유기에 연결된 휴대전화나 태블릿에서 연다.
 macOS 방화벽이 연결 허용 여부를 물으면 개발 중에만 허용한다.
 ## 배포용 빌드 확인
 코드 변경을 완료하기 전에 반드시 실행한다.
 ```bash
 npm run build
 ```
 성공하면 `dist/` 폴더가 생성된다. 오류가 발생하면 배포하지 말고 오류를 먼저
 수정한다.
 빌드 결과를 로컬에서 확인하려면 다음을 실행한다.
 ```bash
 npm run preview
 ```
 개발 서버와 마찬가지로 터미널에 표시된 주소로 접속한다.
 ## 환경변수 사용
 로컬 전용 값은 프로젝트 루트의 `.env.local`에 작성한다.
 ```text
 VITE_CARD_ASSET_BASE_URL=http://127.0.0.1:5500/images
 VITE_SOCKET_SERVER_URL=http://localhost:3000
 ```
 - `VITE_`로 시작하는 값은 브라우저에 노출될 수 있다.
 - 비밀번호, 개인키, NAS 관리자 계정은 넣지 않는다.
 - `.env.local`은 Git에 커밋하지 않는다.
 ## 일반적인 작업 순서
 ```bash
 git pull
 npm install
 npm run dev
 ```
 작업이 끝난 뒤:
 ```bash
 npm run build
 git status
 ```
 변경 문서를 확인한 후 커밋하고 푸시한다.
 ## 자주 발생하는 문제
 ### 포트가 이미 사용 중이라고 나오는 경우
 Vite가 다른 포트를 자동으로 제시할 수 있다. 터미널에 새로 표시된 주소로
 접속한다. 반드시 5173 포트를 고정할 필요는 없다.
 ### 패키지 오류가 발생하는 경우
 먼저 다음을 다시 실행한다.
 ```bash
 npm install
 npm run build
 ```
 문제가 지속되면 오류 전문과 Node.js 버전을 기록하고 임의로 대규모 패키지
 업데이트를 하지 않는다.
 ### 카드 이미지가 보이지 않는 경우
 - 덱의 `series` 값이 올바른지 확인한다.
 - 이미지 파일명이 실제 파일과 같은지 확인한다.
 - `VITE_CARD_ASSET_BASE_URL` 값 끝에 불필요한 경로가 없는지 확인한다.
 - 브라우저 개발자 도구의 Network 탭에서 404 또는 CORS 오류를 확인한다.
--- a/docs/history.md
+++ b/docs/history.md
@@ -0,0 +1,38 @@
 # 구조 및 의사결정 이력
 ## 2026-06-19: 독립 Vue 프로젝트로 시작
 - 기존 UA Deck Builder와 별도 Git 저장소로 분리했다.
 - 덱 빌더는 카드 선택과 덱 데이터 제공을 담당한다.
 - Play Uniare는 카드 조작과 실시간 세션을 담당한다.
 - 카드 이미지의 대규모 복제를 피하기 위해 기존 카드 자산 도메인을 참조한다.
 ## 2026-06-19: Vue 3, Vite, Tailwind CSS 채택
 - 사용자가 직접 유지보수할 수 있는 Vue 3를 선택했다.
 - 정적 빌드와 빠른 개발 서버를 위해 Vite를 사용한다.
 - 일관된 UI 작성을 위해 Tailwind CSS를 기본 스타일 방식으로 정했다.
 ## 2026-06-19: 카드 소유자만 조작하는 권한 모델
 - 플레이어는 자신이 소유한 카드만 조작한다.
 - 전투나 효과로 내 카드가 제거되어도 내 카드 소유자가 직접 정리한다.
 - 이 원칙으로 동시에 같은 카드를 수정하는 충돌을 줄인다.
 - 온라인 모드에서는 서버가 소유권을 최종 검증한다.
 ## 2026-06-19: Docker 기반 NAS 배포
 - UGREEN NAS에서 재현 가능한 배포를 위해 Docker Compose를 사용한다.
 - Vue 빌드에는 Node.js를 사용하고 실행 이미지는 Nginx를 사용한다.
 - 테스트와 운영 컨테이너를 서로 다른 포트로 분리한다.
 ## 2026-06-19: 기존 카드 이미지 읽기 전용 공유
 - 기존 Uniare의 실제 웹 루트는
  `/volume1/docker/projects/apps/uniare/config/www`로 확인했다.
 - 카드 원본은 해당 웹 루트의 `images` 폴더를 사용한다.
 - 새 프로젝트의 NAS 위치는
  `/volume1/docker/projects/apps/playuniare`로 정했다.
 - 이미지 중복 저장을 막기 위해 Docker bind mount를 사용한다.
 - 원본 보호를 위해 컨테이너에는 읽기 전용으로 연결한다.
 - 브라우저에는 같은 출처의 `/card-assets` 경로로 제공한다.
--- a/docs/map.md
+++ b/docs/map.md
@@ -0,0 +1,53 @@
 # 화면 및 파일 구조
 ## 현재 화면
 ### `/`
 - 파일: `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 단위 화면
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -0,0 +1,106 @@
 # 프로젝트 기술 명세
 ## 프로젝트 개요
 - 프로젝트명: Play Uniare
 - 목적: Union Arena 덱을 불러와 카드 조작 중심의 로컬·온라인 플레이 제공
 - 현재 단계: 프로젝트 기반 구성
 - 프런트엔드: Vue 3, Vite, Tailwind CSS
 - 배포 대상: UGREEN NAS의 Docker 환경
 ## 제품 범위
 ### 포함
 - 기존 덱 빌더 쿼리에서 덱 불러오기
 - 카드 수량만큼 독립 인스턴스 생성
 - 덱 셔플과 드로우
 - 카드 드래그 이동
 - 카드 앞면·뒷면 전환
 - 카드 탭·언탭
 - 손패, 필드, 덱, 무덤, 공개 영역
 - 덱 위·아래 또는 무덤으로 카드 이동
 - 덱 위에서 여러 장을 공개한 후 목적지 지정
 - 혼자 연습하는 로컬 모드
 - 방 코드 기반 2인 세션
 - 각 플레이어가 자신의 카드만 조작하는 권한 모델
 ### 제외
 - 카드 효과와 게임 규칙 자동 판정
 - 음성·텍스트 채팅
 - 랭킹, 매칭, 대회 운영
 - 초기 단계의 회원가입
 ## 덱 입력
 초기에는 기존 덱 빌더 형식을 호환한다.
 ```text
 ?series=ua03&seriesName=HUNTER%C3%97HUNTER&cards=<encoded-json>
 ```
 수신 후 다음 절차를 적용한다.
 1. 쿼리 길이와 필수 필드를 검사한다.
 2. JSON 디코딩 오류를 처리한다.
 3. `series`, `imgSrc`, `Number`, `count`를 검증한다.
 4. 카드 수량만큼 고유한 게임 카드 인스턴스를 만든다.
 5. 이미지 주소는 환경변수 기반 카드 자산 원본과 조합한다.
 장기적으로는 축약된 덱 코드 또는 서버의 `deckId` 방식으로 전환한다.
 ## 권한 모델
 - 플레이어는 자기 카드만 이동·뒤집기·탭·정리할 수 있다.
 - 상대 효과로 내 카드가 제거될 때에도 내가 직접 내 카드를 이동한다.
 - 서버는 모든 카드 조작에서 요청 사용자와 카드 소유자를 비교한다.
 - 상대 손패에는 장수만 공개하고 카드 식별 정보는 공개하지 않는다.
 ## 화면 좌표
 - 배경 이미지는 카드 배치 가이드로 사용한다.
 - 실제 영역은 배경 위의 투명한 드롭 영역으로 정의한다.
 - 자유 배치 좌표는 보드 너비·높이 기준 0부터 1 사이 값으로 저장한다.
 - 창 크기가 변해도 같은 상대 위치를 유지해야 한다.
 ## 상태 저장
 - 로컬 모드: 브라우저 메모리, 추후 복구가 필요하면 localStorage 검토
 - 온라인 모드: 서버가 방 상태의 최종 권위를 가진다.
 - 초기 서버: Node.js와 Socket.IO, 메모리 기반 방 상태
 - 운영 안정화 단계: Redis 또는 데이터베이스 저장 검토
 ## 환경변수 예정
 ```text
 VITE_CARD_ASSET_BASE_URL=https://uniare.sori.studio/images
 VITE_SOCKET_SERVER_URL=https://playuniare.sori.studio
 ```
 실제 운영 값은 `.env`에 두고 Git에 커밋하지 않는다.
 ## NAS 카드 이미지 공유
 운영 NAS에서는 카드 이미지를 새 프로젝트에 복사하지 않는다. 기존 Uniare
 컨테이너가 사용하는 웹 루트의 이미지 폴더를 읽기 전용으로 공유한다.
 ```text
 기존 Uniare 웹 루트:
 /volume1/docker/projects/apps/uniare/config/www
 카드 이미지 원본:
 /volume1/docker/projects/apps/uniare/config/www/images
 Play Uniare 컨테이너 내부:
 /srv/uniare-card-images
 브라우저 공개 경로:
 /card-assets
 ```
 - `config/www`는 기존 `index.html`이 존재하는 실제 웹 루트다.
 - Docker bind mount는 `images` 폴더만 읽기 전용으로 연결한다.
 - Play Uniare는 기존 카드 이미지를 읽을 수 있지만 수정하거나 삭제할 수 없다.
 - 카드 이미지 URL은 `/card-assets/<series>/<fileName>` 형식을 사용한다.
 - 같은 Play Uniare 도메인으로 제공되므로 별도의 CORS 설정이 필요하지 않다.
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -0,0 +1,58 @@
 # 개발 할 일
 ## 기반 작업
 - [x] Vue 3와 Vite 프로젝트 생성
 - [x] Tailwind CSS 설정
 - [x] Docker 정적 배포 기반 작성
 - [x] 개발·배포·AI 작업 문서 작성
 - [ ] ESLint와 Prettier 규칙 확정
 - [ ] Vue Router 설치와 화면 구조 생성
 - [ ] Pinia 설치와 상태 구조 생성
 - [ ] 테스트 도구 도입 범위 결정
 ## 1단계: 덱 불러오기와 로컬 플레이
 - [ ] 기존 덱 쿼리 파서 작성
 - [ ] 외부 입력 검증 스키마 작성
 - [x] NAS 카드 이미지 읽기 전용 공유 경로 구성
 - [ ] 카드 이미지 원본 환경변수를 프런트엔드 코드에 연결
 - [ ] 카드 인스턴스 생성
 - [ ] 게임 보드 배경과 영역 정의
 - [ ] 덱 셔플과 드로우
 - [ ] 카드 드래그 이동
 - [ ] 앞면·뒷면 전환
 - [ ] 탭·언탭
 - [ ] 덱·손패·필드·무덤 이동
 - [ ] 덱 위 N장 공개와 정리
 - [ ] 로컬 상태 초기화
 ## 2단계: 온라인 2인 세션
 - [ ] Node.js 실시간 서버 구성
 - [ ] Socket.IO 연결
 - [ ] 방 만들기와 방 코드 참가
 - [ ] 좌석과 플레이어 소유권
 - [ ] 카드 조작 권한 서버 검증
 - [ ] 상대 손패 비공개 전송
 - [ ] 상태 스냅샷과 재접속
 - [ ] 연결 종료 처리
 - [ ] NAS WebSocket 프록시 배포
 ## 3단계: 안정화
 - [ ] 모바일·태블릿 Pointer Events 검증
 - [ ] 카드 겹침과 z-index 조작 UX
 - [ ] 잘못된 덱 입력 오류 화면
 - [ ] 이미지 로딩 실패 폴백
 - [ ] 접근성 키보드 조작 범위 검토
 - [ ] 서버 재시작 시 방 종료 안내
 - [ ] Redis 또는 상태 저장 필요성 검토
 ## 확인이 필요한 정책
 - [ ] 카드 뒷면 이미지와 플레이매트 자산 확정
 - [ ] 한 방의 최대 플레이어와 관전자 정책
 - [ ] 방 유지 시간
 - [ ] 사용하지 않는 방 자동 삭제 시간
 - [ ] 덱 빌더와 시뮬레이터 사이의 최종 전달 형식
--- a/docs/update.md
+++ b/docs/update.md
@@ -0,0 +1,13 @@
 # 버그 수정 및 작업 기록
 ## 2026-06-19
 - Vue 3와 Vite 기본 프로젝트를 생성했다.
 - Tailwind CSS Vite 플러그인을 적용했다.
 - 기본 샘플 화면을 프로젝트 안내 화면으로 교체했다.
 - UGREEN NAS Docker 테스트·운영 배포 문서를 작성했다.
 - AI 작업 지침과 초기 명세, 화면 구조, 할 일, 의사결정 문서를 추가했다.
 - Vue 프로덕션 빌드, Docker Compose 설정, Docker 이미지 빌드와 Nginx
  헬스체크를 검증했다.
 - NAS의 기존 `uniare/config/www/images`를 읽기 전용으로 공유하는 Compose
  설정과 `/card-assets` Nginx 경로를 추가했다.
--- a/index.html
+++ b/index.html
@@ -0,0 +1,17 @@
 <!doctype html>
 <html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Union Arena 덱을 불러와 연습하고 함께 플레이하는 웹 카드 시뮬레이터"
    />
    <title>Play Uniare</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,20 @@
 {
  "name": "uniare-simulator",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.34"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.3.1",
    "@vitejs/plugin-vue": "^6.0.6",
    "tailwindcss": "^4.3.1",
    "vite": "^8.0.12"
  }
 }
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
 <svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="bluesky-icon" viewBox="0 0 16 17">
    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
  </symbol>
  <symbol id="discord-icon" viewBox="0 0 20 19">
    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
  </symbol>
  <symbol id="documentation-icon" viewBox="0 0 21 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
  </symbol>
  <symbol id="github-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
  </symbol>
  <symbol id="social-icon" viewBox="0 0 20 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
  </symbol>
  <symbol id="x-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
  </symbol>
 </svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,40 @@
 <template>
  <main class="min-h-screen bg-slate-950 px-6 py-16 text-slate-100">
    <section class="mx-auto max-w-4xl">
      <p class="mb-4 text-sm font-semibold tracking-[0.24em] text-cyan-400">
        PLAY UNIARE
      </p>
      <h1 class="text-4xl font-black tracking-tight sm:text-6xl">
        Union Arena Simulator
      </h1>
      <p class="mt-6 max-w-2xl text-base leading-7 text-slate-400 sm:text-lg">
        덱 빌더에서 전달받은 카드로 혼자 연습하거나, 방을 만들어 상대와
        실시간으로 플레이하는 시뮬레이터를 준비하고 있습니다.
      </p>
      <div class="mt-10 grid gap-4 sm:grid-cols-3">
        <article class="rounded-2xl border border-slate-800 bg-slate-900 p-5">
          <p class="text-sm font-bold text-cyan-300">01</p>
          <h2 class="mt-3 text-lg font-bold">덱 불러오기</h2>
          <p class="mt-2 text-sm leading-6 text-slate-400">
            기존 덱 빌더의 쿼리 데이터를 안전하게 변환합니다.
          </p>
        </article>
        <article class="rounded-2xl border border-slate-800 bg-slate-900 p-5">
          <p class="text-sm font-bold text-cyan-300">02</p>
          <h2 class="mt-3 text-lg font-bold">카드 조작</h2>
          <p class="mt-2 text-sm leading-6 text-slate-400">
            이동, 뒤집기, 탭과 덱·손패·무덤 이동을 제공합니다.
          </p>
        </article>
        <article class="rounded-2xl border border-slate-800 bg-slate-900 p-5">
          <p class="text-sm font-bold text-cyan-300">03</p>
          <h2 class="mt-3 text-lg font-bold">2인 세션</h2>
          <p class="mt-2 text-sm leading-6 text-slate-400">
            각 플레이어가 자신의 카드만 조작하도록 동기화합니다.
          </p>
        </article>
      </div>
    </section>
  </main>
 </template>
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,5 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 createApp(App).mount('#app')
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,34 @@
@import 'tailwindcss';
 :root {
  font-family:
    Inter, Pretendard, 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  color: #e2e8f0;
  background: #020617;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 * {
  box-sizing: border-box;
 }
 html,
 body,
 #app {
  min-width: 320px;
  min-height: 100%;
 }
 html,
 body {
  background: #020617;
 }
 body {
  margin: 0;
  min-height: 100vh;
 }
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
 export default defineConfig({
  plugins: [vue(), tailwindcss()],
 })
		`@@ -0,0 +1,2 @@`
							`VITE_CARD_ASSET_BASE_URL=/card-assets`
							`VITE_SOCKET_SERVER_URL=http://localhost:3000`