v2026.03.30-01 레포지토리 재연결
This commit is contained in:
476
index.html
Normal file
476
index.html
Normal file
@@ -0,0 +1,476 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<title>Amiibo Filter</title>
|
||||
<style>
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 2rem;
|
||||
background: #f0f0f0;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 좌우 2단 레이아웃 */
|
||||
.container {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
/* height: calc(100vh - 4rem); */
|
||||
}
|
||||
|
||||
/* 필터 영역 */
|
||||
.filters {
|
||||
flex: 0 0 280px;
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 언어 선택 버튼 영역 */
|
||||
.language-switch {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.language-switch button {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
background-color: #5c6ac4;
|
||||
color: white;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.language-switch button.active,
|
||||
.language-switch button:hover {
|
||||
background-color: #4b57a0;
|
||||
}
|
||||
|
||||
/* 필터 그룹 */
|
||||
.filter-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.filter-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.filter-option {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
/* 버튼들 */
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: auto; /* 하단에 붙도록 */
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
button#resetFilter, button#shuffle {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background: #5c6ac4;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease;
|
||||
flex: 1 1 100px;
|
||||
}
|
||||
button#resetFilter:hover, button#shuffle:hover {
|
||||
background: #4b57a0;
|
||||
}
|
||||
|
||||
/* 결과 영역 */
|
||||
.results {
|
||||
flex: 1 1 auto;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.results h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 목록 그리드 */
|
||||
#amiibo-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
|
||||
gap: 1rem;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#amiibo-list li {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
#amiibo-list li.not-have {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#amiibo-list img {
|
||||
max-width: 150px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
#amiibo-list .title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.3rem;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
#amiibo-list .subtitle {
|
||||
color: #555;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.3rem;
|
||||
text-align: center;
|
||||
}
|
||||
#amiibo-list .status {
|
||||
font-size: 0.8rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><a href="./index.html">Amiibo DB</a></h1>
|
||||
|
||||
<div class="container">
|
||||
<!-- 좌측 필터 -->
|
||||
<div class="filters" role="region" aria-label="Amiibo Filters">
|
||||
|
||||
<!-- 언어 선택 버튼 -->
|
||||
<div class="language-switch" role="group" aria-label="언어 선택">
|
||||
<button type="button" id="btn-ko" class="active" aria-pressed="true">한국어</button>
|
||||
<button type="button" id="btn-ja" aria-pressed="false">日本語</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-group" id="series-filter">
|
||||
<div class="filter-title">Series</div>
|
||||
<div id="series-options"></div>
|
||||
</div>
|
||||
<div class="filter-group" id="status-filter">
|
||||
<div class="filter-title">Status</div>
|
||||
<div id="status-options"></div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button id="resetFilter" type="button">필터 초기화</button>
|
||||
<button id="shuffle" type="button">SUFFLE!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 우측 결과 -->
|
||||
<div class="results" role="main">
|
||||
<div id="amiibo-count" style="margin-bottom: 1rem; font-weight: bold;"></div>
|
||||
<ul id="amiibo-list" tabindex="0" aria-live="polite" aria-relevant="all"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import AMIIBO_DB from './db/amiibo.db.js';
|
||||
|
||||
// 시리즈명 일본어 → 한국어 변환 맵
|
||||
const seriesNameMap = {
|
||||
'大乱闘スマッシュブラザーズシリーズ': '대난투 스매시브라더스 시리즈',
|
||||
'スーパーマリオシリーズ': '슈퍼 마리오 시리즈',
|
||||
'スプラトゥーンシリーズ': '스플래툰 시리즈',
|
||||
'ヨッシー ウールワールドシリーズ': '요시 울월드 시리즈',
|
||||
'SUPER MARIO BROS. 30thシリーズ': '슈퍼 마리오 브라더스 30주년 시리즈',
|
||||
'ちびロボ！シリーズ': '치비로보! 시리즈',
|
||||
'どうぶつの森シリーズ': '동물의 숲 시리즈',
|
||||
'ゼルダの伝説シリーズ': '젤다의 전설 시리즈',
|
||||
'星のカービィシリーズ': '별의 커비 시리즈',
|
||||
'ショベルナイトシリーズ': '쇼벨 나이트 시리즈',
|
||||
'モンスターハンター ストーリーズシリーズ': '몬스터 헌터 스토리즈 시리즈',
|
||||
'ハコボーイ！シリーズ': '하코보이! 시리즈',
|
||||
'ファイアーエムブレムシリーズ': '파이어 엠블렘 시리즈',
|
||||
'ピクミンシリーズ': '피크민 시리즈',
|
||||
'メトロイドシリーズ': '메트로이드 시리즈',
|
||||
'ポケモンシリーズ': '포켓몬 시리즈',
|
||||
'ロックマンシリーズ': '록맨 시리즈',
|
||||
'DARK SOULSシリーズ': '다크 소울 시리즈',
|
||||
'モンスターハンターシリーズ': '몬스터 헌터 시리즈',
|
||||
'others': '기타',
|
||||
'ゼノブレイドシリーズ': '제로브레이드 시리즈'
|
||||
};
|
||||
|
||||
// 현재 선택된 언어 (기본: ko)
|
||||
let currentLang = 'ko';
|
||||
|
||||
// 필터 상태 저장
|
||||
const selectedFilters = {
|
||||
series: new Set(),
|
||||
status: new Set()
|
||||
};
|
||||
|
||||
// 시리즈 필터 옵션 생성 (중복제거 후)
|
||||
const seriesOptions = [...new Set(AMIIBO_DB.map(a => a.series))].map(series => ({
|
||||
value: series,
|
||||
label: seriesNameMap[series] || series
|
||||
}));
|
||||
|
||||
// 상태 필터 옵션
|
||||
const statusFilters = [
|
||||
{ value: 'isHave', label: '보유' },
|
||||
{ value: 'notHave', label: '미보유' },
|
||||
{ value: 'isOpen', label: '개봉' },
|
||||
{ value: 'notOpen', label: '미개봉' },
|
||||
{ value: 'isDamaged', label: '박스훼손' }
|
||||
];
|
||||
|
||||
// DOM 요소 참조
|
||||
const seriesContainer = document.getElementById('series-options');
|
||||
const statusContainer = document.getElementById('status-options');
|
||||
const amiiboList = document.getElementById('amiibo-list');
|
||||
const btnKo = document.getElementById('btn-ko');
|
||||
const btnJa = document.getElementById('btn-ja');
|
||||
|
||||
// 시리즈 필터 렌더링 함수
|
||||
function renderSeriesFilters() {
|
||||
seriesContainer.innerHTML = '';
|
||||
seriesOptions.forEach(opt => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'filter-option';
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
input.id = `series-${opt.value}`;
|
||||
input.value = opt.value;
|
||||
|
||||
input.addEventListener('change', () => {
|
||||
if (input.checked) {
|
||||
selectedFilters.series.add(opt.value);
|
||||
} else {
|
||||
selectedFilters.series.delete(opt.value);
|
||||
}
|
||||
renderAmiiboList();
|
||||
});
|
||||
|
||||
const label = document.createElement('label');
|
||||
label.htmlFor = input.id;
|
||||
label.textContent = (currentLang === 'ko') ? (seriesNameMap[opt.value] || opt.value) : opt.value;
|
||||
|
||||
div.appendChild(input);
|
||||
div.appendChild(label);
|
||||
seriesContainer.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// 상태 필터 렌더링 함수
|
||||
function renderStatusFilters() {
|
||||
statusContainer.innerHTML = '';
|
||||
statusFilters.forEach(opt => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'filter-option';
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
input.id = `status-${opt.value}`;
|
||||
input.value = opt.value;
|
||||
|
||||
input.addEventListener('change', () => {
|
||||
if (input.checked) {
|
||||
selectedFilters.status.add(opt.value);
|
||||
} else {
|
||||
selectedFilters.status.delete(opt.value);
|
||||
}
|
||||
renderAmiiboList();
|
||||
});
|
||||
|
||||
const label = document.createElement('label');
|
||||
label.htmlFor = input.id;
|
||||
|
||||
// 상태명도 언어별로 변경 (일본어는 단순 예시)
|
||||
if (currentLang === 'ko') {
|
||||
label.textContent = opt.label;
|
||||
} else {
|
||||
const jaLabels = {
|
||||
'보유': '保有',
|
||||
'미보유': '未保有',
|
||||
'개봉': '開封',
|
||||
'미개봉': '未開封',
|
||||
'박스훼손': '箱破損'
|
||||
};
|
||||
label.textContent = jaLabels[opt.label] || opt.label;
|
||||
}
|
||||
|
||||
div.appendChild(input);
|
||||
div.appendChild(label);
|
||||
statusContainer.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
const amiiboCount = document.getElementById('amiibo-count'); // 상단에 추가
|
||||
|
||||
function renderAmiiboList() {
|
||||
let filtered = AMIIBO_DB.filter(a => {
|
||||
if (selectedFilters.series.size > 0 && !selectedFilters.series.has(a.series)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (selectedFilters.status.size > 0) {
|
||||
const statusArr = Array.from(selectedFilters.status);
|
||||
const statusMatch = statusArr.every(status => {
|
||||
if (status === 'isHave') return a.status.isHave === true;
|
||||
if (status === 'notHave') return a.status.isHave === false;
|
||||
if (status === 'isOpen') return a.status.isOpen === true;
|
||||
if (status === 'notOpen') return a.status.isHave === true && a.status.isOpen === false;
|
||||
if (status === 'isDamaged') return a.status.isDamaged === true;
|
||||
return true;
|
||||
});
|
||||
if (!statusMatch) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
// 정렬: no 기준 내림차순
|
||||
filtered.sort((a, b) => b.no - a.no);
|
||||
|
||||
// 카운트 텍스트 설정
|
||||
const countText = currentLang === 'ko'
|
||||
? `총 ${filtered.length}개`
|
||||
: `全${filtered.length}件`;
|
||||
amiiboCount.textContent = countText;
|
||||
|
||||
// 결과 없을 경우
|
||||
if (filtered.length === 0) {
|
||||
amiiboList.innerHTML = currentLang === 'ko'
|
||||
? '<li>검색 결과가 없습니다.</li>'
|
||||
: '<li>検索結果がありません。</li>';
|
||||
return;
|
||||
}
|
||||
|
||||
amiiboList.innerHTML = filtered.map(a => {
|
||||
const title = currentLang === 'ko' ? (a.koTitle || a.title) : (a.usTitle || a.title);
|
||||
const series = currentLang === 'ko' ? (seriesNameMap[a.series] || a.series) : a.series;
|
||||
const haveText = currentLang === 'ko' ? '보유' : '保有';
|
||||
const notHaveText = currentLang === 'ko' ? '미보유' : '未保有';
|
||||
const openText = currentLang === 'ko' ? '개봉' : '開封';
|
||||
const notOpenText = currentLang === 'ko' ? '미개봉' : '未開封';
|
||||
const damagedText = currentLang === 'ko' ? '박스훼손' : '箱破損';
|
||||
const normalText = currentLang === 'ko' ? '정상' : '正常';
|
||||
|
||||
return `
|
||||
<li class="amiibo-card ${a.status.isHave ? '' : 'not-have'}" style="position: relative;">
|
||||
<span style="position: absolute; top: 6px; left: 8px; font-size: 0.75rem; color: #666;">no.${a.no}</span>
|
||||
${a.status.isHave ? `<span style="position: absolute; top: 6px; right: 8px; font-size: 0.75rem; color: #666;">x${a.count}</span>` : ''}
|
||||
<img src="${a.image}" alt="${title}" loading="lazy" />
|
||||
<div class="title">${title}</div>
|
||||
<div class="subtitle">${series}</div>
|
||||
<div class="status">
|
||||
${a.status.isHave ? haveText : notHaveText} /
|
||||
${a.status.isOpen ? openText : notOpenText} /
|
||||
${a.status.isDamaged ? damagedText : normalText}
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
// 필터 초기화 함수
|
||||
function resetFilters() {
|
||||
selectedFilters.series.clear();
|
||||
selectedFilters.status.clear();
|
||||
document.querySelectorAll('input[type=checkbox]').forEach(chk => (chk.checked = false));
|
||||
renderAmiiboList();
|
||||
}
|
||||
|
||||
// 셔플 함수
|
||||
function shuffleAmiibos() {
|
||||
const shuffled = [...AMIIBO_DB].sort(() => Math.random() - 0.5);
|
||||
amiiboList.innerHTML = shuffled.map(a => `
|
||||
<li class="${a.status.isHave ? '' : 'not-have'}">
|
||||
<img src="${a.image}" alt="${currentLang === 'ko' ? (a.koTitle || a.title) : (a.usTitle || a.title)}" loading="lazy" />
|
||||
<div class="title">${currentLang === 'ko' ? (a.koTitle || a.title) : (a.usTitle || a.title)}</div>
|
||||
<div class="subtitle">${currentLang === 'ko' ? (seriesNameMap[a.series] || a.series) : a.series}</div>
|
||||
<div class="status">
|
||||
${a.status.isHave ? (currentLang === 'ko' ? '보유' : '保有') : (currentLang === 'ko' ? '미보유' : '未保有')} /
|
||||
${a.status.isOpen ? (currentLang === 'ko' ? '개봉' : '開封') : (currentLang === 'ko' ? '미개봉' : '未開封')} /
|
||||
${a.status.isDamaged ? (currentLang === 'ko' ? '박스훼손' : '箱破損') : (currentLang === 'ko' ? '정상' : '正常')}
|
||||
</div>
|
||||
</li>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// 언어 전환 버튼 클릭 처리
|
||||
function setLanguage(lang) {
|
||||
if (lang === currentLang) return;
|
||||
|
||||
currentLang = lang;
|
||||
|
||||
// 버튼 상태 변경
|
||||
if (lang === 'ko') {
|
||||
btnKo.classList.add('active');
|
||||
btnKo.setAttribute('aria-pressed', 'true');
|
||||
btnJa.classList.remove('active');
|
||||
btnJa.setAttribute('aria-pressed', 'false');
|
||||
} else {
|
||||
btnJa.classList.add('active');
|
||||
btnJa.setAttribute('aria-pressed', 'true');
|
||||
btnKo.classList.remove('active');
|
||||
btnKo.setAttribute('aria-pressed', 'false');
|
||||
}
|
||||
|
||||
// 필터 라벨 재렌더링
|
||||
renderSeriesFilters();
|
||||
renderStatusFilters();
|
||||
|
||||
// 리스트 재렌더링
|
||||
renderAmiiboList();
|
||||
}
|
||||
|
||||
// 초기 렌더링
|
||||
renderSeriesFilters();
|
||||
renderStatusFilters();
|
||||
renderAmiiboList();
|
||||
|
||||
// 이벤트 리스너 연결
|
||||
document.getElementById('resetFilter').addEventListener('click', resetFilters);
|
||||
document.getElementById('shuffle').addEventListener('click', shuffleAmiibos);
|
||||
btnKo.addEventListener('click', () => setLanguage('ko'));
|
||||
btnJa.addEventListener('click', () => setLanguage('ja'));
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user