v2026.03.30-01 레포지토리 재연결

.ai-rules.md

@@ -0,0 +1,39 @@
+# 프로젝트 AI 가이드라인 및 문서화 규칙
+
+## 🌐 기본 응답 원칙
+- 모든 대화와 문서는 **한국어**로 작성한다.
+- 코드 내 주석은 반드시 **JSDoc 형식**을 사용한다.
+
+## 🧾 Git 및 버전 관리 규칙
+- Git 작성자 정보는 프로젝트 기준 계정으로 통일한다.
+- Git 커밋 메시지는 반드시 **한국어**로 작성한다.
+- Git 커밋 제목은 반드시 `vYYYY.MM.DD-번호 내용` 형식을 사용한다. (예: `v2026.03.30-03 레포지토리 재연결`)
+- 버전이 올라가는 작업은 `docs/update.md`에 먼저 반영하고, 같은 버전명을 Git 태그에도 맞춘다.
+- 원격 저장소에 푸시하기 전, 민감 정보(실명, 개인 이메일, 비밀키, 로컬 경로)가 포함되지 않았는지 확인한다.
+
+## 📂 문서 자동 관리 규칙
+모든 작업 수행 후, AI는 관련 내용을 아래 지정된 파일에 즉시 반영해야 한다.
+
+1. **작업 이력 (docs/update.md)**
+   - 수행한 작업 항목만 간략한 목록형으로 기록한다. (서술형 문장, `~했다` 표현 금지)
+   - 당일 업데이트라도 수정 시마다 버전을 갱신하여 하나의 파일에 누적 관리한다. (별도 파일 생성 금지)
+
+2. **할 일 및 이슈 (docs/todo.md)**
+   - 현재 직면한 문제점과 다음에 이어서 진행할 작업 목록을 정리한다.
+
+3. **기술 명세 (docs/spec.md)**
+   - API 명세, 기획 내용, 데이터베이스 스키마 구조를 최신 상태로 유지한다.
+
+4. **코딩 컨벤션 (docs/convention.md)**
+   - 프로젝트 전용 코딩 스타일 및 네이밍 규칙(Variable, Function, Class 등)을 정의하고 준수한다.
+
+5. **의사결정 이력 (docs/history.md)**
+   - 주요 설계 결정 사항 및 시스템 아키텍처 변경 이력을 기록한다.
+   - 결정 배경(왜 그렇게 판단했는지)과 처리 결과를 `~했다` 형태의 문장으로 명확히 작성한다.
+
+6. **파일-화면 매핑 가이드 (docs/map.md)**
+   - 연결성 기록: 특정 파일(Ex: Login.jsx)이 브라우저 화면의 어느 경로(/login)와 어느 기능(로그인 버튼 등)을 담당하는지 초보자 관점에서 기록한다.
+
+## ⚠️ 실행 지침
+- 새로운 코드를 작성하거나 수정하기 전, 반드시 `docs/` 내 관련 문서들을 먼저 참조한다.
+- 작업 완료 후 위 문서들의 업데이트가 누락되지 않도록 확인한다.

.cursorrules

@@ -0,0 +1 @@
+모든 작업 시 프로젝트 루트의 .ai-rules.md 지침을 엄격히 준수하고, 작업 종료 시마다 docs/ 폴더 내 문서를 업데이트할 것.

.gitignore

@@ -0,0 +1 @@
+node_modules/

.prettierrc.json

@@ -0,0 +1,14 @@
+{
+    "arrowParens": "avoid",
+    "bracketSameLine": true,
+    "bracketSpacing": true,
+    "endOfLine": "auto",
+    "htmlWhitespaceSensitivity": "ignore",
+    "printWidth": 100,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "all",
+    "useTabs": false,
+    "vueIndentScriptAndStyle": false
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "favorites.resources": [
+        {
+            "filePath": "index.html",
+            "group": "Default"
+        }
+    ]
+}

docs/convention.md

@@ -0,0 +1,22 @@
+# 코딩 컨벤션
+
+## 언어
+
+- 사용자 대면 문서·UI 텍스트: 프로젝트 기본은 **한국어**(필요 시 일본어 병기)
+- Git 커밋 메시지·`docs/update.md` 작업 이력: `.ai-rules.md`에 따름(커밋 제목 `vYYYY.MM.DD-번호` 형식 등)
+
+## 코드 주석
+
+- JavaScript: **JSDoc** 형식 사용(프로젝트 `.ai-rules.md` 규칙)
+
+## 네이밍 가이드
+
+| 구분 | 권장 |
+|------|------|
+| DOM 조작용 변수 | `camelCase` (`amiiboList`, `selectedFilters`) |
+| 상수 맵 | `seriesNameMap` 등 의미 있는 이름 |
+| HTML `id` | 역할이 드러나게 (`amiibo-list`, `resetFilter`) |
+
+## 데이터
+
+- 아미보 마스터 데이터는 `db/amiibo.db.js` 단일 소스로 유지하고, 필드 추가 시 본 문서의 `spec.md` 스키마 표를 갱신할 것

docs/history.md

@@ -0,0 +1,11 @@
+# 의사결정 이력
+
+## 정적 단일 페이지 + 모듈 데이터
+
+- **배경**: 개인 보유 목록을 빠르게 열람·필터링할 목적으로 서버 비용·배포 단순성을 우선함
+- **처리 결과**: `index.html`이 `db/amiibo.db.js`를 ES 모듈로 import하여 렌더링하는 구조로 정리됨. 별도 API 없이 동작한다
+
+## 시리즈명 일본어 키 + 한국어 매핑
+
+- **배경**: 원본 시리즈명이 일본어로 DB에 저장되어 있어, 한국어 UI에서 읽기 쉽게 하기 위해 `seriesNameMap`으로 표시만 변환함
+- **처리 결과**: 필터 값은 일본어 `series` 문자열을 그대로 사용하고, 라벨만 한국어로 바꿔 표시한다

docs/map.md

@@ -0,0 +1,33 @@
+# 파일–화면 매핑 가이드
+
+## URL·페이지
+
+| 브라우저 경로 | 파일 | 설명 |
+|---------------|------|------|
+| `/index.html` 또는 `/` (서버 루트 기준) | `index.html` | 유일한 메인 화면 — 좌측 필터, 우측 아미보 카드 그리드 |
+
+## `index.html` 구성 요소
+
+| 영역 | DOM / 역할 |
+|------|------------|
+| 제목 링크 | `h1 > a` → `./index.html` 새로고침·홈 |
+| 언어 | `#btn-ko`, `#btn-ja` — 한국어/日本語 전환 |
+| 시리즈 필터 | `#series-options` 안에 동적 체크박스 |
+| 상태 필터 | `#status-options` 안에 동적 체크박스 |
+| 필터 초기화 | `#resetFilter` |
+| 무작위 표시 | `#shuffle` — DB 전체 셔플(필터와 별개 동작) |
+| 건수 | `#amiibo-count` — 필터 결과 개수 |
+| 목록 | `#amiibo-list` — 카드(`li`) 단위로 이미지·제목·시리즈·상태 표시 |
+
+## 스크립트·데이터 연결
+
+| 파일 | 역할 |
+|------|------|
+| `index.html` 하단 `<script type="module">` | 화면 전체 로직(필터, 렌더, 언어, 셔플) |
+| `db/amiibo.db.js` | 아미보 배열 데이터 — `index.html`에서 `import` |
+
+## 현재 미연결 파일
+
+| 파일 | 비고 |
+|------|------|
+| `script/amiibo.js` | `DOMContentLoaded`, `gameList` 등 **다른 HTML 구조**를 전제로 한 코드. 현재 레포에는 해당 HTML이 없어 **어느 화면에도 연결되지 않음** |

docs/spec.md

@@ -0,0 +1,46 @@
+# 기술 명세
+
+## 프로젝트 개요
+
+- **목적**: 사용자가 보유한 아미보 목록을 브라우저에서 조회·필터링하는 단일 페이지 웹 애플리케이션
+- **형태**: 서버 없이 정적 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 없음(클라이언트 전용)

docs/todo.md

@@ -0,0 +1,12 @@
+# 할 일 및 이슈
+
+## 알려진 이슈
+
+- `script/amiibo.js`는 테이블·모달 등 다른 UI를 가정한 코드로, 현재 유일한 페이지인 `index.html`과 연결되어 있지 않음. 유지·삭제·통합 중 선택 필요
+- Git 상태상 `amiibo.html`, `db/nsw*.js`, `images/nsw/*` 등 다수 삭제됨 — 배포·로컬 이미지 경로(`db/amiibo.db.js`의 `/images/amiibo/`)와 실제 저장소 내용 일치 여부 확인 필요
+
+## 다음에 할 수 있는 작업
+
+- `index.html` 인라인 스크립트를 별도 모듈로 분리 시 `docs/map.md`·`spec.md` 동기화
+- 이미지·DB 경로 정리 후 정적 호스팅 또는 로컬 서버 실행 방법을 `spec.md`에 명시
+- 버튼 라벨 오타 `SUFFLE` → `SHUFFLE` 등 UI 문구 정리

docs/update.md

@@ -0,0 +1,7 @@
+# 작업 이력
+
+## v2026.03.30-01
+
+- `docs/` 폴더 신규 생성
+- `update.md`, `todo.md`, `spec.md`, `convention.md`, `history.md`, `map.md` 초기 작성
+- 프로젝트 목적(보유 아미보 목록 관리 웹 UI) 및 현재 파일 구조 반영