Files
uniare.sori.studio/docs/update.md
zenn dbf02241e2 v4.0.0: 회원·덱 API, 인증 UI, 프로필 및 레이아웃 통일
Express/SQLite API와 Docker 구성을 추가하고 로그인·덱 저장·공개 덱·관리자·프로필 화면을 구현했다. 결과 화면 저장 UX, 헤더 프로필, 애드센스용 app-shell 레이아웃(1280px) 및 문서를 반영했다.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-22 16:59:36 +09:00

12 KiB

업데이트 이력

2026-06-19 / v4.0.0

수행 작업

  • v4.0.0 회원·덱 API·공유 시스템 1차 구현
  • api/ Express + SQLite 백엔드 (인증, 덱 CRUD, 관리자 API)
  • docker-compose.yml, .env.example, nginx/uadeck.conf 추가
  • 프론트: script/api.js, script/auth-header.js, style/auth-header.css
  • 신규 페이지: login.html, signup.html, deckHistory.html, preset.html, admin.html
  • index.html v4.0.0 + 프로필 헤더
  • cardList.html: ?cards= 제거, ?d= API 로드, 저장·공유 버튼
  • result.html: localStorage 기반, 프로필 헤더
  • docs/spec.md §9 API·DB 명세 반영

배포 방법

  1. .env.example을 .env로 복사 후 JWT_SECRET, ADMIN_EMAIL, ADMIN_PASSWORD 설정
  2. docker compose up -d --build
  3. 리버스 프록시에 nginx/uadeck.conf 규칙 적용 (/api/, /d/)

메모

  • 비회원도 저장·공유 가능 (30일 만료). 회원은 영구 저장.
  • 외부 연동: GET /api/v1/decks/:shareCode, 클라이언트 integrations/uadeck-deck-client.js

2026-06-19 / v4.0.0 덱 저장 UX

수행 작업

  • cardList.html 저장·공유 버튼 제거

  • result.html 하단 Back 제거 →「내 덱에 저장」「공유」버튼 추가

  • 저장·공유 시 Preview 이미지 PNG 함께 API 저장 (preview_image)

  • 덱 이름: 입력값 없으면 시리즈명 YYYY-MM-DD

  • deckHistory.html 미리보기 썸네일 표시

  • 로그아웃 시 메인(/)으로 이동

  • seedAdmin: ADMIN_EMAIL로 먼저 가입한 경우 역할을 admin으로 승격 (기존에는 INSERT 실패로 관리자 미생성)

  • auth-header.js: 프로필 메뉴 열 때 /auth/me로 role 재동기화 (관리자 메뉴 미표시 수정)

  • 관리자 API: JWT role 대신 DB role 확인 (createRequireAdmin)

  • npm start / npm stop / npm run logs 로컬 실행 명령 정리 (package.json)

  • 관리자 덱 관리 썸네일, 회원 모달 개편 (아바타·비밀번호 분리 모달)

  • 본인 계정 역할/비활성 변경 서버·UI 차단, 표시 이름 필드 제거 (사용자명 사용)

2026-06-19 / v4.0.0 — 공개 덱·관리자 UI

수행 작업

  • 메타 덱: 관리자 프리셋 등록 폐기 → 사용자 is_public 공개 덱이 /preset.html(공개 덱)에 노출
  • 내 덱 저장 기본 비공개, 공유 시 공개, 내 덱 관리에서 공개/비공개 전환
  • 덱 이름 기본값: YYYYMMDD_HHMMSS (시리즈명 제외)
  • admin.html 레이아웃 개편 (style/admin.css), 프리셋 등록 탭 제거
  • preset.html 카드 그리드 + 필터 UI

2026-06-19 / v4.0.0 — 프로필·아바타

수행 작업

  • 썸네일(프로필 사진) 미적용 원인: JPEG 등을 .png로 그대로 저장해 브라우저 표시 실패 → 업로드 전 canvas로 PNG 변환 (script/image-utils.js)
  • profile.html 신규: 일반 사용자가 이메일·사용자명·아바타·비밀번호 변경 (PUT /auth/me, POST /auth/me/password)
  • 헤더 드롭다운에「내 프로필」추가 (script/auth-header.js)
  • 아바타 URL에 updatedAt 쿼리로 캐시 무효화 (저장 후 즉시 반영)
  • admin.html 아바타 업로드도 동일 PNG 변환 적용
  • script/api.js: updateProfile, changePassword 추가
  • docs/spec.md 인증 API 엔드포인트 보강

확인 방법

  1. npm stop && npm start 로 API 재시작 (auth 라우트 변경 반영)
  2. http://localhost:8080/profile.html 에서 사진 업로드 →「프로필 저장」
  3. 헤더 썸네일 클릭 →「내 프로필」메뉴 확인

후속

  • 헤더 프로필 버튼: 로그인 시 아바타 옆 사용자명 표시 (auth-header.js, auth-header.css)

2026-06-19 / v4.0.0 — 덱 저장 UX·네비게이션

수행 작업

  • deckHistory.html: /d/코드 경로 표시 제거 (링크 복사 버튼 유지)
  • result.html 하단 버튼: 홈으로 / 이미지로 다운로드 / 내 덱으로 저장
  • 저장 시「모두에게 공개할까요?」모달 +「다음부터 물어보지 않기」토글
  • script/deck-prefs.js: 공개 기본값·프롬프트 스킵 (localStorage + API 동기화)
  • users 테이블: default_deck_public, skip_deck_public_prompt 컬럼 추가
  • profile.html: 덱 저장 설정 (기본 공개, 물어보기 on/off)
  • 뒤로가기 루프 수정: result.html 편집 복귀 시 history.back(), cardList ← 홈 버튼

확인

  • API 변경 반영: npm stop && npm start (또는 docker compose up -d --build)

2026-06-19 / v4.0.0 — 레이아웃 통일·광고 공간

수행 작업

  • style/app-shell.css 추가: 헤더·본문 80rem(1280px, index max-w-7xl과 동일)
  • deckHistory.html, preset.html, profile.html 공통 셸 적용 (페이지 이동 시 헤더 너비 점프 제거)
  • 데스크톱: 본문 좌측 + 우측 300px 광고 레일(app-ad-rail), 모바일: 상단 리더보드 슬롯
  • 프로필 폼은 콘텐츠 영역 내 max-width: 42rem 유지
  • auth-pages.css, admin.css 너비도 80rem으로 통일

2026-06-19 / v4.0.0 — 덱 썸네일 수정

수행 작업

  • Preview 캡처 시 카드 이미지 로드 대기 + cacheBust 추가 (result.html)
  • 캡처 실패해도 덱 저장은 진행, 안내 메시지 표시
  • deckHistory.html: UaDeckApi.resolveMediaUrl()로 미리보기 URL 보정 (Live Server 등)
  • 이미지 로드 실패 시 플레이스홀더 표시
  • Docker 미리보기 저장 경로를 ./api/data/previews 호스트 바인드 마운트로 변경
  • API getPreviewUrl: DB preview_image 컬럼도 참고

2026-06-19 / v4.0.0 UI — 내 덱 관리

수행 작업

  • deckHistory.html 카드 그리드 레이아웃으로 개편 (미리보기 이미지 상단 배치)
  • style/deck-history.css 추가: 상단 여백, 툴바, 카드 그리드 전용 스타일
  • 시리즈별 필터 드롭다운 + 덱 이름·시리즈 검색 입력 추가
  • Tailwind 미빌드 클래스 의존 제거

2026-06-19 / v4.0.0 UI — result 하단 버튼

수행 작업

  • result.html 하단「내 덱에 저장」「공유」버튼이 style/output.css에 없는 Tailwind 클래스(bg-slate-700, bg-emerald-600)로 인해 보이지 않던 문제 수정
  • 페이지 내 <style>에 .result-footer-*, .result-btn-* 전용 스타일 추가 (인증 페이지와 동일한 패턴)

2026-06-19 / v4.0.0 UI — 인증 페이지

수행 작업

  • style/auth-pages.css 추가: 폼 최대 너비 28rem, 상단 여백, index와 동일한 그라데이션·폰트
  • login.html, signup.html 레이아웃 개선 (Tailwind 미빌드 클래스 의존 제거)

2026-06-19 / v4.0.0 배포·연동 보강

수행 작업

  • docker-compose.prod.yml: Nginx + API 풀스택 (정적 파일 볼륨 마운트, 재빌드 불필요)
  • nginx/default.conf, docs/deploy.md NAS 배포 가이드
  • integrations/uadeck-deck-client.js 옆 프로젝트용 클라이언트
  • docs/api-integration.md API 연동 문서
  • admin.html 프리셋 등록 탭 추가

2026-06-19 / v4.0.0

수행 작업

  • v4 회원·덱 API·공유 방식 설계를 확정했다.
  • URL 쿼리(?cards=) 기반 공유는 폐기하고, 공유 코드 + GET /api/v1/decks/:shareCode API로 전환하기로 했다.
  • 개인 덱은 저장마다 고유 share_code, 메타 덱·프리셋은 내용 해시 기반 고정 코드를 사용한다.
  • DB 스키마 초안(users, decks)과 API 엔드포인트 목록을 docs/spec.md §9에 반영했다.
  • 의사결정 내용을 docs/history.md에 기록했다.

메모

  • 구현은 이 설계를 기준으로 진행한다. 실제 코드·Docker·화면 작업은 다음 단계다.
  • 옆 프로젝트는 API 계약만 맞추면 되며, 레거시 쿼리 호환은 필요 없다.

2026-04-19 / v3.1.0

수행 작업

  • datas/ua51.js를 추가해 ua51 시리즈 데이터를 등록했다.
  • images/ua51/에 나 혼자만 레벨업 카드 이미지 자산을 반영했다.
  • images/ua49/에 누락되어 있던 마도정병의 슬레이브 병렬 카드 이미지를 보강했다.
  • i18n/translations.ko.json, i18n/translations.ja.json, i18n/translations.en.json에 ua51 시리즈명을 추가했다.
  • index.html과 docs/spec.md의 버전 표기를 v3.1.0으로 통일했다.
  • 다음 작업자가 동일한 기준으로 이어받을 수 있도록 docs/codex-handoff.md를 작성했다.

메모

  • 이번 릴리즈는 신규 시리즈(ua51) 반영과 누락 자산 보강이 핵심이다.
  • 배포 전에는 datas/<series>.js, images/<series>/, i18n/translations.*.json 세 축이 모두 맞물렸는지 반드시 함께 확인해야 한다.
  • 이미지 자산은 계속 Git LFS 대상으로 유지한다.

2026-03-30 / docs-bootstrap-1

수행 작업

  • 프로젝트 루트의 .ai-rules.md와 .cursorrules를 검토하여 문서 운영 규칙을 확인했다.
  • 부재하던 docs/ 디렉터리를 생성하고 문서 기본 세트(update.md, todo.md, spec.md, convention.md, history.md, map.md)를 초기 구축했다.
  • 정적 사이트 구조를 기준으로 주요 페이지(index.html, cardList.html, result.html)와 보조 스크립트(script/navigation.js, i18n/i18n.js)의 역할을 문서화했다.
  • 카드 데이터셋 구조(datas/*.js)와 이미지 경로 규칙(images/<seriesKey>/<fileName>)을 정리했다.
  • 이미지 저장소 현황을 점검했다.
  • 점검 결과: images/ 디렉터리 약 1.7G, 이미지 파일 약 9,370개, 데이터 파일 52개.
  • 대용량 이미지 자산 관리를 위한 Git LFS 도입 검토 사항과 주의점을 문서에 반영했다.

메모

  • 현재 저장소에는 docs/가 없었기 때문에 이번 작업은 문서 체계 초기 세팅 성격이 강하다.
  • Git LFS는 신규 이미지 유입 관리에는 유효하지만, 저장소 자체를 즉시 가볍게 만들지는 않으므로 히스토리 정리 전략을 별도 검토해야 한다.

2026-03-30 / lfs-migration-1

수행 작업

  • images/** 전체를 Git LFS 대상으로 관리하기 위해 .gitattributes를 추가했다.
  • 기존 저장소 용량 절감을 목표로 Git LFS 히스토리 마이그레이션을 수행하는 방향으로 결정했다.
  • 현재 변경분을 포함한 뒤 전체 히스토리를 재작성하고 강제 푸시하는 절차를 진행한다.

메모

  • 이번 작업은 단순 추적 설정이 아니라 과거 커밋까지 다시 쓰는 작업이므로 커밋 해시가 변경된다.
  • 원격 반영 시 일반 푸시가 아닌 force-with-lease가 필요하다.
  • 마이그레이션 체크아웃 이후 ua27의 추가 이미지와 데이터 보완분이 확인되어 최종 반영 대상에 포함했다.

2026-03-30 / repo-reset-1

수행 작업

  • 저장소 용량을 근본적으로 단순화하기 위해 현재 로컬 작업본을 기준으로 새 루트 커밋 하나만 남기는 방향으로 전환했다.
  • 기존 Git 히스토리는 원격 main에서는 제거하고, 로컬 백업 브랜치로만 보존하는 방식으로 진행한다.
  • images/**는 계속 Git LFS 대상으로 유지한다.
  • 새 시작 버전은 v3.0.0으로 정하고, 기존 1.x, 2.x 버전 이력은 새 원격 기준에서 계승하지 않기로 했다.

메모

  • 이 작업 후 원격 저장소는 사실상 "현재 스냅샷 기반 새 저장소"처럼 동작한다.
  • 과거 커밋 이력, 기존 태그, 옛 해시는 원격 기준으로 더 이상 사용하지 않게 된다.

2026-03-30 / v3.0.1

수행 작업

  • 일부 시리즈 데이터의 잘못된 이미지 경로를 실제 파일명 기준으로 수정했다.
  • ua04, ua30, ua37, ua38, ua45의 imgSrc 오기입을 정정했다.
  • ua44에서 더 이상 사용하지 않는 주석 처리된 UAPR/EVA-AP01, UAPR/EVA-AP02 항목을 제거했다.
  • 누락되어 있던 이미지 파일 images/ua08/UAPB_BLC-AP01.png, images/ua09/UAPR_BTR-AP03.png를 반영했다.

메모

  • 이번 반영은 카드 데이터와 실제 이미지 파일 간의 불일치를 줄이는 목적이다.
  • 버전 태그 체계는 v3.x 기준으로 이어간다.