union-arena-deck-builder/docs/spec.md

기술 명세

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 = [...] 형태를 사용한다.

카드 객체 스키마

{
    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 일반 객체로 계속 누적되면 저장소 히스토리 크기가 지속 증가한다.