v4.0.0: 덱 UX·i18n·썸네일 저장 개선 및 413 수정

즐겨찾기·홀드 미리보기·페이지 도움말·3개국어 번역을 추가하고, 덱 저장 시 썸네일을 1200px로 통일하며 Nginx/API 업로드 제한을 상향했다.

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

docs/map.md

@@ -24,19 +24,23 @@
 
 ## `/login.html`, `/signup.html`
 - 인증 화면
+- 연결: `script/page-i18n.js` (`data-i18n` 속성)
 
 ## `/profile.html` (내 프로필)
 - 로그인 사용자: 이메일·사용자명·프로필 사진·비밀번호 변경
-- 연결: `script/api.js` (`updateProfile`, `changePassword`), `script/image-utils.js`, `style/profile.css`
+- 연결: `script/api.js` (`updateProfile`, `changePassword`), `script/image-utils.js`, `script/page-i18n.js`, `script/ads.js`, `style/profile.css`
 
 ## `/deckHistory.html`
 - 로그인 사용자의 저장 덱 목록·불러오기·삭제
-- 카드 그리드 + 미리보기 썸네일 (`preview_url`)
+- 카드 그리드 + 미리보기 썸네일 (`preview_url`), 클릭·길게 눌러 확대 (`deck-preview-hold.js`)
 - 시리즈 필터·검색 (`style/deck-history.css`)
+- 연결: `script/page-i18n.js`, `script/ads.js` (우측 AdSense `4260332296`)
 
 ## `/preset.html` (공개 덱)
 - 사용자가 공개 전환한 덱 목록 (카드 그리드)
+- 썸네일 클릭·길게 눌러 확대 (`deck-preview-hold.js`, 안내 문구 없음)
 - API: `GET /api/v1/decks/presets` → `is_public=1` user 덱
+- 연결: `script/page-i18n.js`, `script/ads.js`
 
 ## `/admin.html`
 - 관리자: 회원 관리, 덱 관리 (`style/admin.css`)
@@ -47,7 +51,12 @@
 
 ## 공통
 - `style/app-shell.css`: 헤더·본문 최대 너비 1280px (`max-w-7xl`), 데스크톱 우측 광고 레일
+- `script/ads.js`: Google AdSense `ins.adsbygoogle` 슬롯 초기화
+- `script/page-help.js`: 페이지 제목 `?` 툴팁
+- `script/page-i18n.js`: `data-i18n` / `data-i18n-html` / `data-i18n-placeholder`, `UaPageI18n.t()`
+- `script/deck-favorites.js`: 덱 즐겨찾기 (localStorage)
+- `script/deck-preview-hold.js`: 덱 썸네일 클릭·길게 눌러 확대 (내 덱·공개 덱)
 - `script/api.js`: API 클라이언트 (`updateProfile`, `changePassword` 포함)
-- `script/auth-header.js`: 헤더 프로필 드롭다운 (내 프로필, 내 덱 관리, 공개 덱), 로그인 시 아바타 옆 사용자명 표시
+- `script/auth-header.js`: 헤더 프로필 드롭다운 (i18n), 로그인 시 **썸네일 옆 닉네임** 표시 (`auth-profile-trigger`)
 - `script/image-utils.js`: 클라이언트 이미지 PNG 리사이즈 (`UaImageUtils.resizeImageToPng`)
 - `style/auth-header.css`

docs/todo.md

@@ -21,7 +21,11 @@
 - [ ] `.env` 설정 및 기존 리버스 프록시 연동
 - [ ] 옆 프로젝트에 `integrations/uadeck-deck-client.js` 적용
 - [ ] `cardList.html` 인라인 스크립트 모듈 분리
-- [ ] i18n 번역 키 추가 (auth, admin 문구)
+- [x] i18n: 모달·홈 버튼·auth·덱 관리·프로필·로그인/가입 3개국어 (v4.0.0 후속)
+- [x] 덱 즐겨찾기·필터 (내 덱·공개 덱)
+- [x] 공개 덱: 홀드 미리보기 + 하단 즐겨찾기/불러오기 버튼
+- [x] 내 덱: 썸네일 클릭·홀드 확대, 저장 썸네일 1200px 정규화
+- [ ] i18n: `admin.html` 문구
 
 ## v4.0.0 최근 완료
 - [x] `profile.html`: 일반 사용자 프로필 화면 (아바타·닉네임·이메일·비밀번호)

docs/update.md

@@ -1,5 +1,85 @@
 # 업데이트 이력
 
+## 2026-06-19 / v4.0.0 — 덱 썸네일 미리보기·저장 크기 통일
+
+### 수행 작업
+- `deckHistory.html`: `deck-preview-hold.js` 연동 — 내 덱 썸네일도 클릭·길게 눌러 확대
+- `preset.html`: 썸네일 위「클릭·길게 눌러…」안내 문구 제거 (홀드 기능 유지)
+- `result.html`: 저장용 미리보기를 다운로드와 동일한 **1200px** 기준으로 정규화 (`normalizePreviewForSave`)
+  - 저장 시 HQ 옵션 무시 (`highQuality: false`) 후 너비 1200px로 스케일
+  - 기존 960px 축소만 하던 `compressPreviewForSave` 제거 → 크기 제각각이던 원인 해소
+- `style/deck-history.css`: 미사용 `.deck-card-preview-hint` 제거
+
+### 참고
+- 이미 저장된 덱 썸네일은 예전 크기 그대로이며, Preview에서 **다시 저장**하면 1200px로 갱신됨
+
+## 2026-06-19 / v4.0.0 — 덱 저장 413 수정
+
+### 원인
+- `localhost:8080` 요청은 Nginx(`client_max_body_size 2m`)를 거침
+- 덱 저장 시 미리보기 PNG(base64)가 JSON에 포함되어 2MB 초과 → **413 Request Entity Too Large**
+
+### 수행 작업
+- `nginx/default.conf`: `client_max_body_size` 2m → **25m** (API location 포함)
+- `api/src/index.js`: JSON limit 20mb, 413 전용 오류 메시지
+- `script/api.js`: 413 사용자 안내 문구
+- `result.html`: 저장용 미리보기 최대 너비 960px 리사이즈
+
+### 적용
+```bash
+npm stop && npm start
+```
+
+## 2026-06-19 / v4.0.0 — 공개 덱 미리보기 수정
+
+### 수행 작업
+- `deck-preview-hold.js`: mouseleave 즉시 닫힘 버그 수정, 클릭 고정·길게 누르기 동시 지원
+- ~~안내 문구:「클릭·길게 눌러 크게 보기」~~ → 이후 제거됨
+
+## 2026-06-19 / v4.0.0 — 프로필 덱 저장 설정 UI
+
+### 수행 작업
+- 덱 저장 설정: 설명 문단 제거 → `?` 툴팁, 설정 패널·토글 ON/OFF 표시·즉시 저장 안내 메시지
+- 토글 클릭 시 API/localStorage 동기화는 기존 `deck-prefs.js` 유지
+
+## 2026-06-19 / v4.0.0 — 메인 프로필 i18n·페이지 도움말
+
+### 수행 작업
+- `index.html`: `page-i18n.js` 로드, 언어 전환 시 `UaPageI18n` + `UaDeckAuth.refresh()`로 프로필 드롭다운 재번역
+- `script/page-help.js`: 제목 옆 `?` 버튼 클릭 시 설명 툴팁
+- `deckHistory.html`, `preset.html`, `profile.html`: 상단 설명 `<p>` 제거 → `?` 도움말 버튼
+- `style/app-shell.css`: `.page-title-row`, `.page-help-btn`, `.page-help-tooltip`
+
+## 2026-06-19 / v4.0.0 — 덱 즐겨찾기·공개 덱 미리보기
+
+### 수행 작업
+- `script/deck-favorites.js`: share_code 기준 즐겨찾기 (localStorage)
+- `script/deck-preview-hold.js`: 썸네일 길게 누르기 확대 미리보기
+- `deckHistory.html`: 카드 하단 즐겨찾기 버튼, 툴바「즐겨찾기」필터
+- `preset.html`: 카드 클릭 이동 제거 → 홀드 미리보기 + 하단「즐겨찾기」「불러오기」버튼
+- `style/deck-history.css`: 즐겨찾기·홀드 오버레이 스타일
+- i18n: `deckFavorite`, `deckFavoriteFilter`, `deckHoldPreviewHint`
+
+### 메모
+- 즐겨찾기는 브라우저 localStorage에 저장 (기기·브라우저별). 추후 계정 동기화 API 확장 가능.
+
+## 2026-06-19 / v4.0.0 — AdSense·i18n 보완
+
+### 수행 작업
+- Google AdSense 우측 슬롯(`4260332296`) 삽입: `deckHistory.html`, `preset.html`, `profile.html` `#ad-sidebar`
+- `script/ads.js`: `ins.adsbygoogle` 초기화 헬퍼
+- `script/page-i18n.js`: `data-i18n` / `data-i18n-html` / `data-i18n-placeholder` + `UaPageI18n.t()` 헬퍼
+- `script/auth-header.js`: 드롭다운 메뉴 3개국어(ko/en/ja)
+- `login.html`, `signup.html`, `profile.html`, `deckHistory.html`, `preset.html` 정적 문구 i18n 연결
+- `cardList.html`: `← 홈` 버튼 `homeNav` 키 적용
+- `result.html`: 저장 모달·로딩 확인·홈 버튼 기존 `applyTranslationsToUI` 유지, `page-i18n`으로 헤더 메뉴 번역
+- `deckHistory.html` / `preset.html`: 목록·버튼·확인 대화상자 동적 문구 i18n
+- `i18n/translations.{ko,en,ja}.json`: auth·덱 관리·프로필·공개 덱 관련 키 추가
+
+### 확인
+- `?lang=en` 또는 `?lang=ja` 로 각 페이지 문구 전환 확인
+- AdSense는 로컬/비승인 도메인에서는 빈 슬롯으로 보일 수 있음
+
 ## 2026-06-19 / v4.0.0
 
 ### 수행 작업
@@ -92,6 +172,13 @@
 - 프로필 폼은 콘텐츠 영역 내 `max-width: 42rem` 유지
 - `auth-pages.css`, `admin.css` 너비도 80rem으로 통일
 
+### 후속 UI
+- `result.html` 저장 모달 토글: Tailwind `translate-x-6` 미빌드 → 전용 `.save-deck-switch` CSS
+- `result.html` 하단 버튼 비율: 홈 0.5 · 다운로드 0.5 · 내 덱 저장 2
+- `result.html` 덱 저장: 브라우저 alert 제거 → 로딩 모달 완료 메시지 후 홈 이동
+- `signup.html`: 비밀번호 확인 필드, 가입 후 홈(`/`) 이동
+- `cardList.html`: 동일 카드 번호(패러랠 포함) 수량 공유 시 +/- 버튼 UI 동기화
+
 ## 2026-06-19 / v4.0.0 — 덱 썸네일 수정
 
 ### 수행 작업