my-amiibo-database/docs/spec.md

기술 명세

프로젝트 개요

• 목적: 사용자가 보유한 아미보 목록을 브라우저에서 조회·필터링하는 단일 페이지 웹 애플리케이션
• 형태: 서버 없이 정적 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 없음(클라이언트 전용)