51 lines
1.9 KiB
Markdown
51 lines
1.9 KiB
Markdown
# 파일-화면 매핑 가이드
|
|
|
|
## `/`
|
|
- 진입 파일: `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개" 조합으로 만들어진다.
|