관리자 기능과 계정 즐겨찾기 개선

2026-06-23 14:32:43 +09:00
parent 00e05dbe3f
commit 93e81ce3ea
26 changed files with 804 additions and 914 deletions
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,23 @@
 # 변경사항

+## v4.0.3
+
+### 즐겨찾기 계정 동기화
+
+로그인한 사용자의 즐겨찾기가 계정에 저장됩니다. 다른 브라우저나 기기에서도 같은 계정으로 로그인하면 즐겨찾기가 유지됩니다.
+
+기존 브라우저에 저장된 즐겨찾기는 로그인 시 계정으로 이전되며, 삭제되거나 더 이상 공개되지 않는 덱은 자동으로 정리됩니다.
+
+## v4.0.2
+
+### 관리자 덱 관리 화면 개선
+
+관리자 화면에서도 내 덱과 동일한 형태로 시리즈, 공개 상태, 수정일을 확인할 수 있습니다. 삭제 기능은 각 카드의 더보기 메뉴로 이동했습니다.
+
+### 불필요한 덱 썸네일 정리
+
+덱을 삭제하면 연결된 썸네일도 함께 삭제됩니다. 기존에 남은 미참조 썸네일은 관리자 화면에서 목록과 용량을 확인한 뒤 정리할 수 있습니다.
+
 ## v4.0.1

 ### 프로젝트 운영 문서 정비
--- a/docs/convention.md
+++ b/docs/convention.md
@@ -31,7 +31,7 @@

 ## 스타일

- 현재 CSS를 Tailwind로 일괄 전환하지 않는다.
+- 기존 CSS는 `todo.md`의 화면별 순서에 따라 한 화면씩 Tailwind로 전환한다.
 - 새 단순 스타일은 Tailwind 유틸리티를 우선 검토하되 기존 페이지 패턴과 빌드 여부를 함께 확인한다.
 - 반복되는 공통 스타일은 공통 CSS 또는 컴포넌트 역할의 클래스로 분리한다.
 - `style/output.css`를 직접 편집하지 않고 `npm run build:css`로 생성한다.
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -67,7 +67,7 @@ Docker 실행: `docker compose -f docker-compose.prod.yml up -d --build`

 API 확인: `curl -fsS http://localhost:44082/api/v1/health`

-정상이면 `{"ok":true,"version":"4.0.1"}`이 표시된다.
+정상이면 `{"ok":true,"version":"4.0.3"}`이 표시된다.

 NAS 리버스 프록시는 `https://uniare.sori.studio`을 `http://<NAS_IP>:44082`로 연결한다.

--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,35 @@
 # 의사결정 이력

+## 2026-06-23 v4.0.3 — 검색 설명은 정적 기본 콘텐츠를 제공
+
+💡 JavaScript 번역 로딩 전 빈 문구나 네트워크 오류가 검색 결과 설명으로 수집되는 것을 막기 위함.
+🔧 메인 제목·설명 기본값과 SEO 메타데이터를 HTML에 기록하고 내부 오류 메시지는 사용자 안내로 대체.
+
+## 2026-06-23 v4.0.3 — Tailwind 전환은 화면 단위로 진행
+
+💡 여러 화면의 CSS를 동시에 바꾸면 시각 회귀 범위와 검수 부담이 지나치게 커지기 때문.
+🔧 관리자와 인증 화면부터 전환하고 전용 CSS는 제거하며 공용 덱 카드 CSS는 해당 화면 차례까지 유지.
+
+## 2026-06-23 v4.0.3 — 로그인 즐겨찾기는 계정 DB에 저장
+
+💡 브라우저를 바꾸거나 데이터를 지워도 사용자의 즐겨찾기가 유지되어야 하기 때문.
+🔧 계정별 `deck_favorites`를 추가하고 기존 로컬 항목은 유효한 덱만 최초 로그인 시 이전.
+
+## 2026-06-23 v4.0.3 — 접근할 수 없는 즐겨찾기는 자동 정리
+
+💡 삭제·만료·비공개 전환된 덱이 즐겨찾기 목록에 남아 빈 항목을 만들지 않게 하기 위함.
+🔧 덱 삭제는 외래키 연쇄 삭제, 만료·타인 비공개 덱은 즐겨찾기 조회 시 제거.
+
+## 2026-06-23 v4.0.2 — 덱 삭제와 미리보기 파일 수명주기를 연결
+
+💡 DB에서 덱만 삭제하면 더 이상 참조되지 않는 PNG가 운영 스토리지에 계속 누적되기 때문.
+🔧 덱 삭제 시 연결 PNG를 함께 지우고, 관리자는 과거 고아 파일을 조회·일괄 정리할 수 있게 구성.
+
+## 2026-06-23 v4.0.2 — 관리자 덱 목록도 사용자 덱 카드 구조를 사용
+
+💡 같은 덱 정보를 화면마다 다르게 표시하면 관리자가 시리즈·공개 상태·수정일을 비교하기 어렵기 때문.
+🔧 사용자 덱과 같은 카드·배지·날짜 구조를 적용하고 관리자 삭제는 더보기 메뉴로 이동.
+
 ## 2026-06-23 v4.0.0 — SQLite 백업은 온라인 백업 API를 사용

 💡 WAL 모드에서 DB 본파일만 복사하면 아직 병합되지 않은 최신 트랜잭션이 누락될 수 있기 때문.
--- a/docs/map.md
+++ b/docs/map.md
@@ -66,6 +66,10 @@ script/deck-prefs.js
 덱 즐겨찾기
 script/deck-favorites.js

+계정 즐겨찾기 DB·API
+api/src/db.js
+api/src/routes/decks.js
+
 덱 썸네일 확대
 script/deck-preview-hold.js

@@ -79,9 +83,6 @@ script/ads.js
 ## 페이지 전용 스타일

 ```text
-로그인·회원가입
-style/auth-pages.css
-
 프로필
 style/profile.css

@@ -89,7 +90,11 @@ style/profile.css
 style/deck-history.css

 관리자
-style/admin.css
+admin.html — 관리자 화면 Tailwind 유틸리티
+
+로그인·회원가입
+login.html
+signup.html

 Tailwind 입력·산출물
 style/input.css
@@ -125,6 +130,10 @@ api/src/services/avatarImage.js

 덱 미리보기 저장
 api/src/services/previewImage.js
+
+미참조 덱 미리보기 조회·정리
+api/src/routes/admin.js
+api/src/services/previewImage.js
 ```

 ## 데이터·자산
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -3,7 +3,7 @@
 ## 프로젝트 개요

 - 서비스명: `UNIARE - Union Arena Deck Builder`
- 현재 버전: `v4.0.1`
+- 현재 버전: `v4.0.3`
 - 프론트: 정적 HTML, CSS, JavaScript
 - 백엔드: Express, SQLite(`better-sqlite3`)
 - 운영: Docker Compose 기반 Nginx + API
@@ -26,6 +26,14 @@
 | `/admin.html` | 회원과 덱 관리 |
 | `/d/<shareCode>` | Nginx에서 `cardList.html?d=<shareCode>`로 연결 |

+## 검색 노출
+
+- 메인 검색 제목은 `UNIARE | 유니온 아레나 덱 빌더`를 사용한다.
+- 메인 설명은 카드 검색, 덱 제작·저장·공유, 공개 덱과 즐겨찾기 기능을 안내한다.
+- JavaScript 실행 전에도 메인 제목과 설명이 HTML에 표시된다.
+- canonical, Open Graph, Twitter Card, WebSite·WebApplication 구조화 데이터를 제공한다.
+- 번역 파일 로딩 실패 시 내부 오류 대신 새로고침 안내를 표시한다.
+
 ## 카드 데이터

 - 데이터 위치: `datas/*.js`
@@ -60,6 +68,8 @@
 - `images/**`는 Git LFS로 관리한다.
 - 아바타와 덱 미리보기는 API 데이터 디렉터리에 저장하며 Git에 포함하지 않는다.
 - 덱 저장 미리보기는 1200px 기준 PNG로 정규화한다.
+- 덱 삭제 시 해당 공유 코드의 미리보기 PNG도 함께 삭제한다.
+- 관리자는 DB에서 참조하지 않는 미리보기 파일을 조회하고 일괄 삭제할 수 있다.

 ## 브라우저 상태

@@ -70,7 +80,7 @@
 | `selectedSeries` | 현재 시리즈 |
 | `uadeck_token` | JWT |
 | `uadeck_user` | 로그인 사용자 캐시 |
-| 덱 즐겨찾기 키 | 공유 코드 기반 로컬 즐겨찾기 |
+| `uadeck.deckFavorites` | 비로그인 즐겨찾기 및 로그인 시 최초 이전 대상 |

 ## 인증 및 권한

@@ -80,6 +90,8 @@
 - `admin`은 회원 상태·역할·비밀번호와 전체 덱을 관리할 수 있다.
 - 관리자는 자신의 관리자 역할을 해제하거나 자신의 계정을 비활성화할 수 없다.
 - 비공개 덱은 소유자와 관리자만 조회할 수 있다.
+- 로그인 사용자의 즐겨찾기는 계정 DB에 저장되어 브라우저와 기기가 달라도 유지된다.
+- 비로그인 즐겨찾기는 브라우저에 저장하고 로그인 시 유효한 덱만 계정으로 이전한다.

 ## 덱 저장 정책

@@ -125,6 +137,14 @@
 | `preview_image` | 저장된 미리보기 파일 정보 |
 | `created_at`, `updated_at` | 생성·수정 시각 |

+### `deck_favorites`
+
+| 컬럼 | 설명 |
+|---|---|
+| `user_id` | 즐겨찾기 사용자, 사용자 삭제 시 함께 삭제 |
+| `share_code` | 즐겨찾기 덱, 덱 삭제 시 함께 삭제 |
+| `created_at` | 즐겨찾기 등록 시각 |
+
 ## API

 ### 공통
@@ -155,6 +175,10 @@
 | POST | `/api/v1/decks` | 공개 | 회원 또는 비회원 덱 저장 |
 | PUT | `/api/v1/decks/:shareCode` | 소유자·관리자 | 덱 수정 |
 | DELETE | `/api/v1/decks/:shareCode` | 소유자·관리자 | 덱 삭제 |
+| GET | `/api/v1/decks/favorites` | 회원 | 내 즐겨찾기 코드 목록 |
+| POST | `/api/v1/decks/favorites` | 회원 | 브라우저 즐겨찾기 일괄 이전 |
+| PUT | `/api/v1/decks/favorites/:shareCode` | 회원 | 즐겨찾기 추가 |
+| DELETE | `/api/v1/decks/favorites/:shareCode` | 회원 | 즐겨찾기 제거 |

 ### 관리자

@@ -166,12 +190,17 @@
 | POST | `/api/v1/admin/users/:id/reset-password` | 비밀번호 초기화 |
 | GET | `/api/v1/admin/decks` | 전체 덱 목록 |
 | DELETE | `/api/v1/admin/decks/:shareCode` | 덱 삭제 |
+| GET | `/api/v1/admin/previews/orphans` | 미참조 덱 미리보기 목록 |
+| DELETE | `/api/v1/admin/previews/orphans` | 미참조 덱 미리보기 일괄 삭제 |
 | POST | `/api/v1/admin/decks/preset` | 레거시 프리셋 생성 |

 ## 스타일

 - 현재는 Tailwind 유틸리티, 공통 CSS, 페이지 전용 CSS, 일부 인라인 스타일을 혼용한다.
- 이번 단계에서는 기존 CSS를 Tailwind로 일괄 전환하지 않는다.
+- 기존 CSS는 `todo.md`의 화면별 체크리스트 순서에 따라 점진적으로 Tailwind로 전환한다.
+- 관리자와 로그인·회원가입 화면은 Tailwind 전환을 완료하고 전용 CSS를 제거했다.
+- 관리자 탭·모달 상태는 JavaScript에서 `border-*`, `text-*`, `hidden`, `flex` 유틸리티를 전환한다.
+- 관리자 덱 목록이 재사용하는 `style/deck-history.css`는 내 덱·공개 덱 화면 전환 때 함께 정리한다.
 - `style/output.css`는 `style/input.css`에서 생성하는 빌드 산출물이다.
 - 헤더 로고 크기는 `style/brand.css`만 기준으로 사용한다.
 - 기본 글꼴은 Pretendard 계열을 우선 사용한다.
@@ -180,6 +209,5 @@

 - `cardList.html`, `result.html`의 인라인 스크립트가 커서 변경 영향 범위가 넓다.
 - `admin.html`은 3개 언어 번역 적용이 완료되지 않았다.
- 즐겨찾기는 브라우저별 로컬 상태라 계정 간 동기화되지 않는다.
 - Homepage 전용 `GET /api/homepage` 엔드포인트는 아직 구현되지 않았다.
 - 현재 Compose의 컨테이너명(`uniare-api`, `uniare-web`)과 데이터 볼륨명(`uniare-data`)은 고정값이며 환경 변수화되지 않았다.
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -3,6 +3,7 @@
 ## 운영

 - NAS에서 `uniare-web`, `uniare-api` 스택의 재기동과 헬스 체크를 최종 확인한다.
+- SEO 메타데이터 배포 후 Google Search Console에서 메인 URL 재색인을 요청한다.
 - 운영 `.env`의 `JWT_SECRET`, 관리자 계정, CORS 허용 도메인을 실제 환경 기준으로 점검한다.
 - DB와 업로드 이미지(`api/data/previews`, `api/data/avatars`)의 정기 백업·복구 절차를 검증한다.
 - 원격 저장소의 Git LFS 업로드 상태와 용량 정책을 확인한다.
@@ -18,5 +19,16 @@

 - `cardList.html`, `result.html`의 대형 인라인 스크립트를 기능 단위 모듈로 분리한다.
 - `datas/ua99 sample.js`, `datas/ua99 sample mini.js`의 보존 목적과 배포 제외 여부를 확정한다.
- 즐겨찾기의 계정 간 동기화가 필요하면 사용자별 API 저장 방식으로 확장한다.
- 이미지 규모가 Git LFS 운영 한도를 넘으면 자산 저장소 또는 CDN 분리를 검토한다.
+
+## 화면별 Tailwind 전환
+
+- [x] 관리자 (`admin.html`, 전용 CSS 제거)
+- [x] 로그인·회원가입 (`login.html`, `signup.html`, 전용 CSS 제거)
+- [ ] 프로필 (`profile.html`, `style/profile.css`)
+- [ ] 내 덱 (`deckHistory.html`, `style/deck-history.css`)
+- [ ] 공개 덱 (`preset.html`, `style/deck-history.css`)
+- [ ] 공통 인증 헤더 (`script/auth-header.js`, `style/auth-header.css`)
+- [ ] 공통 앱 셸 (`style/app-shell.css`)
+- [ ] 카드 목록 (`cardList.html`, `style/style.css`)
+- [ ] 덱 결과 (`result.html`)
+- [ ] 메인·공통 내비게이션 (`index.html`, `style/navigation.css`)
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,33 @@
 # 업데이트 이력

+## 2026-06-23 / v4.0.3 — 계정 즐겨찾기 동기화
+
+### 수행 작업
+- 로그인 사용자의 즐겨찾기를 `deck_favorites` DB 테이블에 계정별 저장
+- 다른 브라우저와 기기에서도 같은 계정의 즐겨찾기 유지
+- 기존 브라우저 즐겨찾기는 로그인 시 접근 가능한 덱만 계정으로 자동 이전
+- 덱 삭제 시 외래키로 관련 즐겨찾기 자동 삭제
+- 만료되거나 타인이 비공개로 전환한 덱은 즐겨찾기 조회 시 자동 정리
+- 비로그인 사용자는 기존처럼 브라우저 `localStorage` 즐겨찾기 사용
+- 개인 NAS·자체 Git LFS 운영 구조에 불필요한 CDN 분리 TODO 제거
+- `todo.md`에 화면별 Tailwind 전환 체크리스트 추가
+- 관리자 레이아웃·회원 관리·모달·정리 도구를 Tailwind 유틸리티로 전환
+- 관리자 탭·모달 상태도 JavaScript에서 Tailwind 클래스를 전환하도록 변경하고 `style/admin.css` 제거
+- 로그인·회원가입 화면을 Tailwind 유틸리티로 전환하고 `style/auth-pages.css` 제거
+- Google Fonts 외부 호출을 제거하고 Pretendard 우선 시스템 폰트 스택 적용
+- `style/output.css` 재빌드
+- 메인 페이지 검색 제목·설명을 UNIARE 기준으로 변경하고 canonical·Open Graph·Twitter·구조화 데이터 추가
+- 검색 엔진이 빈 제목이나 `Failed to fetch` 오류를 수집하지 않도록 정적 기본 문구와 사용자용 오류 안내 적용
+
+## 2026-06-23 / v4.0.2 — 관리자 덱 관리·썸네일 정리 개선
+
+### 수행 작업
+- 관리자 화면 본문에 반응형 좌우 여백을 적용해 좁은 화면에서 콘텐츠가 벽에 붙는 문제 수정
+- 관리자 덱 목록을 내 덱 화면과 같은 시리즈·공개 상태·수정일 카드 구조로 변경
+- 조회 수와 `/d/공유코드` 표시 제거, 삭제 기능을 더보기 메뉴로 이동
+- 일반 사용자와 관리자 덱 삭제 API에서 연결된 미리보기 PNG도 함께 삭제
+- 관리자가 미참조 썸네일의 파일명·용량·수정일을 확인하고 일괄 삭제하는 기능 추가
+
 ## 2026-06-23 / v4.0.1 — 프로젝트 문서 체계 정비

 ### 수행 작업