zenn
dbf02241e2
Express/SQLite API와 Docker 구성을 추가하고 로그인·덱 저장·공개 덱·관리자·프로필 화면을 구현했다. 결과 화면 저장 UX, 헤더 프로필, 애드센스용 app-shell 레이아웃(1280px) 및 문서를 반영했다. Co-authored-by: Cursor <cursoragent@cursor.com>
54 lines
2.2 KiB
Markdown
54 lines
2.2 KiB
Markdown
# 파일-화면 매핑 가이드
|
|
|
|
## `/`
|
|
- 진입 파일: `index.html`
|
|
- 화면 역할: 시리즈 선택 홈 화면
|
|
- 연결: `script/auth-header.js`, `script/api.js`
|
|
|
|
## `/cardList.html?series=<key>&d=<shareCode>`
|
|
- 진입 파일: `cardList.html`
|
|
- 화면 역할: 카드 검색·필터·덱 편집·저장·공유
|
|
- `?d=` 있으면 API에서 덱 복원
|
|
- 연결: `datas/<seriesKey>.js`, `script/api.js`
|
|
|
|
## `/result.html`
|
|
- 진입 파일: `result.html`
|
|
- 화면 역할: 덱 미리보기·PNG 저장·내 덱 저장
|
|
- 데이터 소스: `localStorage.selectedCards`
|
|
- 하단 고정 바: `홈으로` | `이미지로 다운로드` | `내 덱으로 저장` (공개 여부 확인 모달)
|
|
- `script/deck-prefs.js`: 덱 공개 기본값·프롬프트 설정
|
|
|
|
## `/d/<shareCode>` (Nginx 리다이렉트)
|
|
- `nginx/uadeck.conf` 규칙으로 `cardList.html?d=` 로 이동
|
|
- 옆 프로젝트 연동: `GET /api/v1/decks/<shareCode>`
|
|
|
|
## `/login.html`, `/signup.html`
|
|
- 인증 화면
|
|
|
|
## `/profile.html` (내 프로필)
|
|
- 로그인 사용자: 이메일·사용자명·프로필 사진·비밀번호 변경
|
|
- 연결: `script/api.js` (`updateProfile`, `changePassword`), `script/image-utils.js`, `style/profile.css`
|
|
|
|
## `/deckHistory.html`
|
|
- 로그인 사용자의 저장 덱 목록·불러오기·삭제
|
|
- 카드 그리드 + 미리보기 썸네일 (`preview_url`)
|
|
- 시리즈 필터·검색 (`style/deck-history.css`)
|
|
|
|
## `/preset.html` (공개 덱)
|
|
- 사용자가 공개 전환한 덱 목록 (카드 그리드)
|
|
- API: `GET /api/v1/decks/presets` → `is_public=1` user 덱
|
|
|
|
## `/admin.html`
|
|
- 관리자: 회원 관리, 덱 관리 (`style/admin.css`)
|
|
|
|
## API (`api/`)
|
|
- Docker: `docker-compose.yml`
|
|
- 엔드포인트 베이스: `/api/v1`
|
|
|
|
## 공통
|
|
- `style/app-shell.css`: 헤더·본문 최대 너비 1280px (`max-w-7xl`), 데스크톱 우측 광고 레일
|
|
- `script/api.js`: API 클라이언트 (`updateProfile`, `changePassword` 포함)
|
|
- `script/auth-header.js`: 헤더 프로필 드롭다운 (내 프로필, 내 덱 관리, 공개 덱), 로그인 시 아바타 옆 사용자명 표시
|
|
- `script/image-utils.js`: 클라이언트 이미지 PNG 리사이즈 (`UaImageUtils.resizeImageToPng`)
|
|
- `style/auth-header.css`
|