zenn
dbf02241e2
Express/SQLite API와 Docker 구성을 추가하고 로그인·덱 저장·공개 덱·관리자·프로필 화면을 구현했다. 결과 화면 저장 UX, 헤더 프로필, 애드센스용 app-shell 레이아웃(1280px) 및 문서를 반영했다. Co-authored-by: Cursor <cursoragent@cursor.com>
2.2 KiB
2.2 KiB
파일-화면 매핑 가이드
/
- 진입 파일:
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=1user 덱
/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