102 lines
3.8 KiB
Markdown
102 lines
3.8 KiB
Markdown
# 기술 명세
|
|
|
|
## 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 일반 객체로 계속 누적되면 저장소 히스토리 크기가 지속 증가한다.
|