47 lines
2.1 KiB
Markdown
47 lines
2.1 KiB
Markdown
# 기술 명세
|
|
|
|
## 프로젝트 개요
|
|
|
|
- **목적**: 사용자가 보유한 아미보 목록을 브라우저에서 조회·필터링하는 단일 페이지 웹 애플리케이션
|
|
- **형태**: 서버 없이 정적 HTML + ES 모듈 + 로컬 JS 데이터 파일
|
|
- **진입점**: 루트의 `index.html` (제목 표시: Amiibo DB / Amiibo Filter)
|
|
|
|
## 데이터 소스
|
|
|
|
| 항목 | 내용 |
|
|
|------|------|
|
|
| 파일 | `db/amiibo.db.js` |
|
|
| 형식 | `export default [ ... ]` — 아미보 객체 배열 |
|
|
|
|
### 아미보 레코드 스키마 (필드)
|
|
|
|
| 필드 | 타입 | 설명 |
|
|
|------|------|------|
|
|
| `no` | number | 관리용 번호(정렬·표시에 사용) |
|
|
| `title` | string | 기본 표기 제목(일본어 원문 등) |
|
|
| `series` | string | 시리즈명(일본어 키, 필터·매핑에 사용) |
|
|
| `release` | string | 발매일 문자열 |
|
|
| `image` | string | 카드/피규어 이미지 URL 경로 |
|
|
| `packageImage` | string | 패키지 이미지 경로 |
|
|
| `status` | object | `isHave`, `isOpen`, `isDamaged` (boolean) |
|
|
| `koTitle` | string \| null | 한국어 제목(없으면 `title` 등 폴백) |
|
|
| `usTitle` | string \| null | 영문/미국 표기 제목(일본어 UI 시 활용) |
|
|
| `count` | number | 보유 개수(보유 시 카드에 표시) |
|
|
|
|
## UI 동작 (`index.html`)
|
|
|
|
- **언어**: 한국어 / 日本語 토글 — 시리즈명·상태 라벨·목록 제목 등 전환
|
|
- **시리즈 필터**: 체크박스 다중 선택, `db`에 존재하는 `series` 값 기준
|
|
- **상태 필터**: 보유/미보유/개봉/미개봉/박스훼손 — 다중 선택 시 **모든 선택 조건을 동시에 만족**하는 항목만 표시(AND)
|
|
- **목록 정렬**: 필터 적용 후 `no` 내림차순
|
|
- **필터 초기화**: 시리즈·상태 선택 및 체크박스 해제
|
|
- **SUFFLE 버튼**: 현재 필터 무시하고 전체 DB를 무작위 순서로 그리드에 표시(임시 보기)
|
|
|
|
## 빌드·스타일
|
|
|
|
- `package.json`: Tailwind CSS CLI 의존성 — `index.html`은 인라인 CSS 위주로 동작하며, Tailwind는 별도 파이프라인용으로 존재할 수 있음
|
|
|
|
## API
|
|
|
|
- 백엔드 API 없음(클라이언트 전용)
|