v4.0.5: 로그인·덱·관리자 Tailwind 레이아웃 통합

공통 UI를 components.css로 빌드에 포함하고 로그인·회원가입·내 덱·공개 덱·관리자 화면 레이아웃을 정리했다.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-06-23 15:48:09 +09:00
parent 93e81ce3ea
commit ba89235207
17 changed files with 1376 additions and 99 deletions

View File

@@ -3,7 +3,7 @@
## 프로젝트 개요
- 서비스명: `UNIARE - Union Arena Deck Builder`
- 현재 버전: `v4.0.3`
- 현재 버전: `v4.0.4`
- 프론트: 정적 HTML, CSS, JavaScript
- 백엔드: Express, SQLite(`better-sqlite3`)
- 운영: Docker Compose 기반 Nginx + API
@@ -17,7 +17,7 @@
| `/` | 시리즈 선택, 언어 전환, 인증 헤더 |
| `/cardList.html?series=<key>` | 카드 검색·필터, 수량 조절, 키 카드 지정, 덱 편집 |
| `/cardList.html?d=<shareCode>` | API 공유 덱 불러오기 및 편집 |
| `/result.html` | 덱 미리보기, PNG 다운로드, 덱 저장 |
| `/result.html` | 덱 미리보기, PNG 다운로드, 회원 덱 저장 |
| `/login.html` | 로그인 |
| `/signup.html` | 회원가입 |
| `/profile.html` | 이메일·사용자명·아바타·비밀번호·덱 공개 기본값 관리 |
@@ -90,14 +90,16 @@
- `admin`은 회원 상태·역할·비밀번호와 전체 덱을 관리할 수 있다.
- 관리자는 자신의 관리자 역할을 해제하거나 자신의 계정을 비활성화할 수 없다.
- 비공개 덱은 소유자와 관리자만 조회할 수 있다.
- 비회원은 덱을 서버에 저장하거나 공개 링크를 생성할 수 없다.
- 로그인 사용자의 즐겨찾기는 계정 DB에 저장되어 브라우저와 기기가 달라도 유지된다.
- 비로그인 즐겨찾기는 브라우저에 저장하고 로그인 시 유효한 덱만 계정으로 이전한다.
## 덱 저장 정책
- 공유 코드는 저장 시 생성되는 8자 코드다.
- 회원 덱은 만료 없이 저장하며 공개 여부를 선택할 수 있다.
- 비회원 덱은 공개 상태로 저장되고 30일 뒤 만료된다.
- 덱 저장과 공개 링크 생성은 로그인한 회원만 사용할 수 있다.
- 비회원은 덱 구성과 PNG 이미지 다운로드만 사용할 수 있다.
- 기존 비회원 공유 덱은 호환을 위해 원래 만료일까지 조회할 수 있다.
- DB의 `cards_json`에는 `{number, count, key}`만 저장한다.
- API 응답 시 `datas/<series>.js`에서 이미지·색상·희귀도·트리거 정보를 합성한다.
- 공개 덱 목록은 `share_type='user'`, `is_public=1`, 미만료 조건을 사용한다.
@@ -127,13 +129,13 @@
| `share_code` | 고유 공유 코드 |
| `share_type` | `user` 또는 레거시 `preset` |
| `content_hash` | 레거시 프리셋 중복 판별 |
| `user_id` | 소유 회원, 비회원은 `null` |
| `user_id` | 소유 회원, 과거 비회원 덱은 `null` |
| `series`, `series_name` | 시리즈 키와 표시명 |
| `name` | 덱 이름 |
| `cards_json` | 최소 카드 구성 JSON |
| `is_public` | 공개 여부 |
| `view_count` | 상세 조회 횟수 |
| `expires_at` | 비회원 공유 만료 시각 |
| `expires_at` | 과거 비회원 공유 덱의 만료 시각 |
| `preview_image` | 저장된 미리보기 파일 정보 |
| `created_at`, `updated_at` | 생성·수정 시각 |
@@ -172,7 +174,7 @@
| GET | `/api/v1/decks/:shareCode/preview` | 공개 | 덱 미리보기 PNG |
| GET | `/api/v1/decks/:shareCode` | 조건부 | 공개 덱 또는 소유 덱 상세 |
| GET | `/api/v1/decks` | 회원 | 내 덱 목록 |
| POST | `/api/v1/decks` | 공개 | 회원 또는 비회원 덱 저장 |
| POST | `/api/v1/decks` | 회원 | 내 덱 저장과 공개 링크 생성 |
| PUT | `/api/v1/decks/:shareCode` | 소유자·관리자 | 덱 수정 |
| DELETE | `/api/v1/decks/:shareCode` | 소유자·관리자 | 덱 삭제 |
| GET | `/api/v1/decks/favorites` | 회원 | 내 즐겨찾기 코드 목록 |
@@ -200,7 +202,7 @@
- 기존 CSS는 `todo.md`의 화면별 체크리스트 순서에 따라 점진적으로 Tailwind로 전환한다.
- 관리자와 로그인·회원가입 화면은 Tailwind 전환을 완료하고 전용 CSS를 제거했다.
- 관리자 탭·모달 상태는 JavaScript에서 `border-*`, `text-*`, `hidden`, `flex` 유틸리티를 전환한다.
- 관리자 덱 목록이 재사용하는 `style/deck-history.css`는 내 덱·공개 덱 화면 전환 때 함께 정리한다.
- 덱 카드·툴바·프로필·앱 셸 스타일은 `style/components.css`(`@layer components`)에 통합되어 `output.css`로 빌드된다.
- `style/output.css`는 `style/input.css`에서 생성하는 빌드 산출물이다.
- 헤더 로고 크기는 `style/brand.css`만 기준으로 사용한다.
- 기본 글꼴은 Pretendard 계열을 우선 사용한다.