v4.0.0: 회원·덱 API, 인증 UI, 프로필 및 레이아웃 통일

Express/SQLite API와 Docker 구성을 추가하고 로그인·덱 저장·공개 덱·관리자·프로필 화면을 구현했다. 결과 화면 저장 UX, 헤더 프로필, 애드센스용 app-shell 레이아웃(1280px) 및 문서를 반영했다.

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/map.md

@@ -3,48 +3,51 @@
 ## `/`
 - 진입 파일: `index.html`
 - 화면 역할: 시리즈 선택 홈 화면
-- 사용자 행동:
-- 언어 선택
-- 시리즈 카드 클릭
-- 연결 파일:
-- `i18n/translations.<lang>.json`: 제목, 설명, 시리즈명
-- `script/navigation.js`: 공통 네비게이션 오버레이
-- `style/output.css`: 공통 스타일
+- 연결: `script/auth-header.js`, `script/api.js`
 
-## `/cardList.html?series=<seriesKey>`
+## `/cardList.html?series=<key>&d=<shareCode>`
 - 진입 파일: `cardList.html`
-- 화면 역할: 카드 검색, 필터링, 수량 선택, 키 카드 지정
-- 사용자 행동:
-- 검색어 입력
-- 색상/타입/트리거 필터
-- 카드 수량 조절
-- 키 카드 지정
-- 덱 결과 페이지 이동
-- 연결 파일:
-- `datas/<seriesKey>.js`: 현재 시리즈 카드 원본 데이터
-- `images/<seriesKey>/`: 카드 이미지 원본
-- `i18n/translations.<lang>.json`: 버튼/문구 번역
-- `script/navigation.js`: 공통 네비게이션
+- 화면 역할: 카드 검색·필터·덱 편집·저장·공유
+- `?d=` 있으면 API에서 덱 복원
+- 연결: `datas/<seriesKey>.js`, `script/api.js`
 
 ## `/result.html`
 - 진입 파일: `result.html`
-- 화면 역할: 선택한 덱 미리보기 및 이미지 저장
-- 사용자 행동:
-- 덱 이름 입력
-- 출력 스타일 선택
-- 고화질 저장 토글
-- PNG 다운로드
-- 연결 파일:
-- `localStorage.selectedCards` 또는 `cards` 쿼리스트링: 덱 데이터 소스
-- `images/<seriesKey>/`: 결과 이미지 렌더링 대상
-- `i18n/translations.<lang>.json`: 결과 화면 번역
+- 화면 역할: 덱 미리보기·PNG 저장·내 덱 저장
+- 데이터 소스: `localStorage.selectedCards`
+- 하단 고정 바: `홈으로` | `이미지로 다운로드` | `내 덱으로 저장` (공개 여부 확인 모달)
+- `script/deck-prefs.js`: 덱 공개 기본값·프롬프트 설정
 
-## 공통 보조 파일
-- `script/navigation.js`: 오버레이 메뉴 생성 및 이동 처리
-- `i18n/i18n.js`: `data-i18n` 기반 공통 번역 적용
-- `style/style.css`, `style/navigation.css`, `style/output.css`: 공통/페이지 스타일
+## `/d/<shareCode>` (Nginx 리다이렉트)
+- `nginx/uadeck.conf` 규칙으로 `cardList.html?d=` 로 이동
+- 옆 프로젝트 연동: `GET /api/v1/decks/<shareCode>`
 
-## 초보자용 이해 포인트
-- 이 프로젝트는 프레임워크 앱이 아니라 HTML 파일 3개가 직접 화면 역할을 나눠 갖는 구조다.
-- 카드 정보는 `datas/`에, 실제 카드 이미지는 `images/`에 따로 있다.
-- 화면에서 보이는 한 장의 카드는 "데이터 파일의 객체 1개 + 이미지 폴더의 파일 1개" 조합으로 만들어진다.
+## `/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`