# 기술 명세

## 1. 프로젝트 개요
- 프로젝트명: `UADECK V3.1.0 - Union Arena Deck Builder`
- 형태: 정적 HTML/CSS/JavaScript 기반 덱 빌더
- 패키지 의존성: `tailwindcss`, `@tailwindcss/cli`
- 빌드 산출 스타일: `style/output.css`

## 2. 화면 구조

### `/index.html`
- 시리즈 선택 랜딩 페이지다.
- `i18n/translations.<lang>.json`을 직접 fetch하여 시리즈명과 소개 문구를 렌더링한다.
- 사용자가 시리즈를 선택하면 `cardList.html?series=<key>&seriesName=<name>&lang=<lang>`로 이동한다.

### `/cardList.html`
- 특정 시리즈의 카드 목록을 보여주고 덱을 편집한다.
- 쿼리스트링의 `series` 값을 기준으로 `./datas/${seriesKey}.js`를 동적 import 한다.
- 필터 기능:
- 검색어
- 색상(`All`, `Red`, `Blue`, `Green`, `Yellow`, `Purple`)
- 시리즈 하위 그룹
- 타입(`Basic`, `AP`, `Parallel`)
- 트리거(`All`, `Special`, `Color`, `Final`)
- 카드 수량 증감, 키 카드 지정, 초기화, 상세 오버레이, 결과 페이지 이동을 담당한다.

### `/result.html`
- 선택한 카드 목록을 미리보기하고 이미지로 저장한다.
- 스타일 모드:
- `type1`: 키 카드 강조형
- `type2`: 클래식 5열형
- `html-to-image` CDN을 사용해 덱 이미지를 PNG로 저장한다.

## 3. 데이터 구조

### 카드 데이터 파일
- 위치: `datas/*.js`
- 파일 수: 현재 `52개`
- 각 파일은 `export const cardList = [...]` 형태를 사용한다.

### 카드 객체 스키마
```js
{
    imgSrc: '/ua24/UA24BT_SHY-1-001.png',
    Number: 'UA24BT/SHY-1-001',
    count: 0,
    key: false,
    color: 'Red',
    parallel: false,
    rarity: 'C',
    trigger: null,
}
```

### 필드 의미
- `imgSrc`: 원본 상대 식별자. 실제 렌더링 시 `images/${seriesKey}/${fileName}` 형태로 재구성한다.
- `Number`: 카드 번호. 동일 카드 판본 묶음과 필터 기준으로 사용한다.
- `count`: 현재 덱에 담긴 수량.
- `key`: 키 카드 여부.
- `color`: 카드 색상 또는 일부 특수 분류 값.
- `parallel`: 패러렐 여부.
- `rarity`: 희귀도 표기.
- `trigger`: `null`, `COLOR`, `FINAL`, `SPECIAL` 등 트리거 정보.
- `maxCount`: 일부 카드만 선택적으로 사용하며 기본값은 `4`로 동작한다.

## 4. 이미지 규칙
- 기본 위치: `images/<seriesKey>/`
- 저장 정책: `images/**`는 `Git LFS` 대상으로 관리한다.
- 렌더링 규칙:
- 카드 목록 화면: `images/${seriesKey}/${fileName}`
- 결과 화면: `/images/${seriesKey}/${fileName}`
- 폴백 이미지: `/images/uapr/comingsoon.png`
- 현재 용량 현황:
- `images/` 약 `1.7G`
- 이미지 파일 약 `9,370개`

## 5. 다국어
- 지원 언어: `ko`, `ja`, `en`
- 번역 파일:
- `i18n/translations.ko.json`
- `i18n/translations.ja.json`
- `i18n/translations.en.json`
- `index.html`은 번역 JSON을 직접 읽는다.
- 공통 텍스트 치환은 `i18n/i18n.js`의 `data-i18n` 기반 로직을 사용한다.

## 6. 상태 저장
- `localStorage.lang`: 현재 언어
- `localStorage.selectedCards`: 선택 카드 목록(JSON 문자열을 `encodeURIComponent` 처리)
- `localStorage.selectedSeries`: 일부 흐름에서 사용하는 선택 시리즈 값

## 7. 스타일 및 자산
- Tailwind 유틸리티 클래스와 페이지별 인라인 스타일을 혼용한다.
- 공통 스타일 파일:
- `style/output.css`
- `style/style.css`
- `style/navigation.css`

## 8. 알려진 제약
- `cardList.html`과 `result.html`의 스크립트가 페이지 내부에 크게 포함되어 있어 모듈 분리 전까지는 변경 영향 범위가 넓다.
- `script/navigation.js`의 일부 이동 대상 페이지는 현재 저장소에 존재하지 않는다.
- 이미지가 Git 일반 객체로 계속 누적되면 저장소 히스토리 크기가 지속 증가한다.