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

파일-화면 매핑 가이드

/

• 진입 파일: index.html
• 화면 역할: 시리즈 선택 홈 화면
• 사용자 행동:
• 언어 선택
• 시리즈 카드 클릭
• 연결 파일:
• i18n/translations.<lang>.json: 제목, 설명, 시리즈명
• script/navigation.js: 공통 네비게이션 오버레이
• style/output.css: 공통 스타일

/cardList.html?series=<seriesKey>

• 진입 파일: cardList.html
• 화면 역할: 카드 검색, 필터링, 수량 선택, 키 카드 지정
• 사용자 행동:
• 검색어 입력
• 색상/타입/트리거 필터
• 카드 수량 조절
• 키 카드 지정
• 덱 결과 페이지 이동
• 연결 파일:
• datas/<seriesKey>.js: 현재 시리즈 카드 원본 데이터
• images/<seriesKey>/: 카드 이미지 원본
• i18n/translations.<lang>.json: 버튼/문구 번역
• script/navigation.js: 공통 네비게이션

/result.html

• 진입 파일: result.html
• 화면 역할: 선택한 덱 미리보기 및 이미지 저장
• 사용자 행동:
• 덱 이름 입력
• 출력 스타일 선택
• 고화질 저장 토글
• PNG 다운로드
• 연결 파일:
• localStorage.selectedCards 또는 cards 쿼리스트링: 덱 데이터 소스
• images/<seriesKey>/: 결과 이미지 렌더링 대상
• i18n/translations.<lang>.json: 결과 화면 번역

공통 보조 파일

• script/navigation.js: 오버레이 메뉴 생성 및 이동 처리
• i18n/i18n.js: data-i18n 기반 공통 번역 적용
• style/style.css, style/navigation.css, style/output.css: 공통/페이지 스타일

초보자용 이해 포인트

• 이 프로젝트는 프레임워크 앱이 아니라 HTML 파일 3개가 직접 화면 역할을 나눠 갖는 구조다.
• 카드 정보는 datas/에, 실제 카드 이미지는 images/에 따로 있다.
• 화면에서 보이는 한 장의 카드는 "데이터 파일의 객체 1개 + 이미지 폴더의 파일 1개" 조합으로 만들어진다.