[260206]
- 검색 조건 보완, 검색 결과 개수 표시, 검색 결과 없을 경우 안내 추가 - 상품 +7
311
data/games.js
@@ -1,8 +1,233 @@
|
|||||||
const games = [
|
const games = [
|
||||||
{
|
{
|
||||||
|
id: 'a7k3m9q2',
|
||||||
|
createdAt: '2026-02-05',
|
||||||
|
updatedAt: '2026-02-05',
|
||||||
|
|
||||||
|
title: '크라이스타',
|
||||||
|
price: 0,
|
||||||
|
currency: '₩',
|
||||||
|
category: 'Games',
|
||||||
|
status: '판매중',
|
||||||
|
customTag: '',
|
||||||
|
|
||||||
|
tags: ['Switch', 'KR'],
|
||||||
|
|
||||||
|
images: ['/images/games/a7k3m9q2_01.jpg', '/images/games/a7k3m9q2_02.jpg', '/images/games/a7k3m9q2_03.jpg'],
|
||||||
|
|
||||||
|
description: '개봉품, 한국 정식 발매판(KR), 상태 매우 양호',
|
||||||
|
|
||||||
|
specs: {
|
||||||
|
purchaseDate: '',
|
||||||
|
condition: 'Excellent (개봉품, 상태 매우 양호)',
|
||||||
|
isVerified: true,
|
||||||
|
},
|
||||||
|
fullDescription: ['크라이스타 (CRYSTAR) 닌텐도 스위치용 패키지입니다.', '한국 정식 발매판(KR) 제품입니다.', '', '사용 후 OPP에 넣어 보관·관리했으며', '전체적으로 상태가 매우 좋은 편입니다.', '', '', ''],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'fynzefa9',
|
||||||
|
createdAt: '2026-02-05',
|
||||||
|
updatedAt: '2026-02-05',
|
||||||
|
|
||||||
|
title: '신 같은 너에게',
|
||||||
|
price: 45000,
|
||||||
|
currency: '₩',
|
||||||
|
category: 'Games',
|
||||||
|
status: '판매중',
|
||||||
|
customTag: '',
|
||||||
|
|
||||||
|
tags: ['Switch', 'JP'],
|
||||||
|
|
||||||
|
images: ['/images/games/fynzefa9_01.jpg', '/images/games/fynzefa9_02.jpg', '/images/games/fynzefa9_03.jpg'],
|
||||||
|
|
||||||
|
description: '미개봉 새제품, 일본 내수용(JP), 한국어 미지원',
|
||||||
|
|
||||||
|
specs: {
|
||||||
|
purchaseDate: '',
|
||||||
|
condition: 'Brand New (미개봉)',
|
||||||
|
isVerified: true,
|
||||||
|
},
|
||||||
|
fullDescription: ['신 같은 너에게 (神様のような君へ) 닌텐도 스위치용 패키지입니다.', '일본 내수용(JP) 제품입니다.', '미개봉 새제품 상태입니다.', '', '※ 한국어는 지원하지 않습니다.', '', '', ''],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '0xutijk8',
|
||||||
|
createdAt: '2026-02-05',
|
||||||
|
updatedAt: '2026-02-05',
|
||||||
|
|
||||||
|
title: '드래곤볼 더 브레이커스 스페셜 에디션',
|
||||||
|
price: 10000,
|
||||||
|
currency: '₩',
|
||||||
|
category: 'Games',
|
||||||
|
status: '판매중',
|
||||||
|
customTag: '',
|
||||||
|
|
||||||
|
tags: ['Switch', 'KR'],
|
||||||
|
|
||||||
|
images: ['/images/games/0xutijk8_01.jpg', '/images/games/0xutijk8_02.jpg', '/images/games/0xutijk8_03.jpg'],
|
||||||
|
|
||||||
|
description: '미개봉 새제품, 한국 정식 발매판(KR)',
|
||||||
|
|
||||||
|
specs: {
|
||||||
|
purchaseDate: '',
|
||||||
|
condition: 'Brand New (미개봉)',
|
||||||
|
isVerified: true,
|
||||||
|
},
|
||||||
|
fullDescription: ['드래곤볼 더 브레이커스 스페셜 에디션 닌텐도 스위치용 패키지입니다.', '한국 정식 발매판(KR) 제품입니다.', '미개봉 새제품 상태입니다.', '', '', '', '', ''],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'w5vyp5x2',
|
||||||
|
createdAt: '2026-02-05',
|
||||||
|
updatedAt: '2026-02-05',
|
||||||
|
|
||||||
|
title: '페어리 펜서 F 리프레인 코드',
|
||||||
|
price: 25000,
|
||||||
|
currency: '₩',
|
||||||
|
category: 'Games',
|
||||||
|
status: '판매중',
|
||||||
|
customTag: '',
|
||||||
|
|
||||||
|
tags: ['Switch', 'KR'],
|
||||||
|
|
||||||
|
images: ['/images/games/w5vyp5x2_01.jpg', '/images/games/w5vyp5x2_02.jpg', '/images/games/w5vyp5x2_03.jpg'],
|
||||||
|
|
||||||
|
description: '미개봉 새제품, 한국 정식 발매판(KR)',
|
||||||
|
|
||||||
|
specs: {
|
||||||
|
purchaseDate: '',
|
||||||
|
condition: 'Brand New (미개봉)',
|
||||||
|
isVerified: true,
|
||||||
|
},
|
||||||
|
fullDescription: ['페어리 펜서 F 리프레인 코드 닌텐도 스위치용 패키지입니다.', '한국 정식 발매판(KR) 제품입니다.', '미개봉 새제품 상태입니다.', '', '', '', '', ''],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'de41vs8u',
|
||||||
|
createdAt: '2026-02-05',
|
||||||
|
updatedAt: '2026-02-05',
|
||||||
|
|
||||||
|
title: "포켓몬스터 Let's Go! 이브이",
|
||||||
|
price: 50000,
|
||||||
|
currency: '₩',
|
||||||
|
category: 'Games',
|
||||||
|
status: '판매중',
|
||||||
|
customTag: '',
|
||||||
|
|
||||||
|
tags: ['Switch', 'Nintendo', 'JP', 'Pokemon'],
|
||||||
|
|
||||||
|
images: ['/images/games/de41vs8u_01.jpg', '/images/games/de41vs8u_02.jpg', '/images/games/de41vs8u_03.jpg'],
|
||||||
|
|
||||||
|
description: '개봉품, 일본 내수용(JP), 한국어 지원, 상태 매우 양호',
|
||||||
|
|
||||||
|
specs: {
|
||||||
|
purchaseDate: '',
|
||||||
|
condition: 'Excellent (개봉품, 상태 매우 양호)',
|
||||||
|
isVerified: true,
|
||||||
|
},
|
||||||
|
fullDescription: [
|
||||||
|
"포켓몬스터 Let's Go! 이브이 (ポケットモンスター Let's Go! イーブイ) 닌텐도 스위치용 패키지입니다.",
|
||||||
|
'일본 내수용(JP) 제품입니다.',
|
||||||
|
'멀티랭기지 지원으로 한국어 플레이가 가능합니다.',
|
||||||
|
'',
|
||||||
|
'사용 후 OPP에 넣어 보관·관리했으며',
|
||||||
|
'전체적으로 상태가 매우 좋은 편입니다.',
|
||||||
|
'',
|
||||||
|
'',
|
||||||
|
'',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'z69xbqg7',
|
||||||
|
createdAt: '2026-02-05',
|
||||||
|
updatedAt: '2026-02-05',
|
||||||
|
|
||||||
|
title: '젤다의 전설 꿈꾸는 섬',
|
||||||
|
price: 55000,
|
||||||
|
currency: '₩',
|
||||||
|
category: 'Games',
|
||||||
|
status: '판매중',
|
||||||
|
customTag: '',
|
||||||
|
|
||||||
|
tags: ['Switch', 'Nintendo', 'JP'],
|
||||||
|
|
||||||
|
images: ['/images/games/z69xbqg7_01.jpg', '/images/games/z69xbqg7_02.jpg', '/images/games/z69xbqg7_03.jpg'],
|
||||||
|
description: '개봉품, 일본 내수용(JP), 한국어 지원, 상태 매우 양호',
|
||||||
|
|
||||||
|
specs: {
|
||||||
|
purchaseDate: '',
|
||||||
|
condition: 'Excellent (개봉품, 상태 매우 양호)',
|
||||||
|
isVerified: true,
|
||||||
|
},
|
||||||
|
fullDescription: ['젤다의 전설 꿈꾸는 섬 (ゼルダの伝説 夢をみる島) 닌텐도 스위치용 패키지입니다.', '일본 내수용(JP) 제품입니다.', '멀티랭기지 지원으로 한국어 플레이가 가능합니다.', '', '사용 후 OPP에 넣어 보관·관리했으며', '전체적으로 상태가 매우 좋은 편입니다.', '', '', ''],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'q0422roj',
|
||||||
|
createdAt: '2026-02-05',
|
||||||
|
updatedAt: '2026-02-05',
|
||||||
|
|
||||||
|
title: 'LOOPERS',
|
||||||
|
price: 25000,
|
||||||
|
currency: '₩',
|
||||||
|
category: 'Games',
|
||||||
|
status: '판매중',
|
||||||
|
customTag: '',
|
||||||
|
|
||||||
|
tags: ['Switch', 'Key', 'JP', 'Kinetic Novel'],
|
||||||
|
|
||||||
|
images: ['/images/games/q0422roj_01.jpg', '/images/games/q0422roj_02.jpg', '/images/games/q0422roj_03.jpg'],
|
||||||
|
description: '개봉품, 일본 내수용(JP), 한국어 미지원, 상태 매우 양호',
|
||||||
|
|
||||||
|
specs: {
|
||||||
|
purchaseDate: '',
|
||||||
|
condition: 'Excellent (개봉품, 상태 매우 양호)',
|
||||||
|
isVerified: true,
|
||||||
|
},
|
||||||
|
fullDescription: [
|
||||||
|
'LOOPERS (ルーパーズ) 닌텐도 스위치용 패키지입니다.',
|
||||||
|
'일본 내수용(JP) 제품입니다.',
|
||||||
|
'엔젤비트(Angel Beats!) 등으로 유명한 Key 제작 작품입니다.',
|
||||||
|
'장르는 키네틱 노벨입니다.',
|
||||||
|
'',
|
||||||
|
'사용 후 OPP에 넣어 보관·관리했으며',
|
||||||
|
'전체적으로 상태가 매우 좋은 편입니다.',
|
||||||
|
'',
|
||||||
|
'※ 한국어는 지원하지 않습니다.',
|
||||||
|
'',
|
||||||
|
'',
|
||||||
|
'',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// [1] 시스템 및 메타 정보 (가장 먼저 확인하게 되는 고유값)
|
||||||
|
id: 'i3zgj4zl',
|
||||||
|
createdAt: '2026-02-02',
|
||||||
|
updatedAt: '2026-02-02',
|
||||||
|
|
||||||
|
// [2] 기본 판매 정보 (리스트 카드에 바로 노출될 핵심 정보)
|
||||||
|
title: '플로럴 플로우러브',
|
||||||
|
price: 60000,
|
||||||
|
currency: '₩',
|
||||||
|
category: 'Games',
|
||||||
|
status: '판매중',
|
||||||
|
customTag: '완전생산한정판', // 카드 위에 띄울 뱃지용
|
||||||
|
|
||||||
|
// [3] 분류 및 필터 정보 (중복 선택 및 검색용)
|
||||||
|
tags: ['Switch', '한정판', 'JP'],
|
||||||
|
|
||||||
|
// [4] 시각 및 요약 정보
|
||||||
|
images: ['/images/games/i3zgj4zl_01.jpg', '/images/games/i3zgj4zl_02.jpg', '/images/games/i3zgj4zl_03.jpg', '/images/games/i3zgj4zl_04.jpg'],
|
||||||
|
description: '미개봉 새제품, 한정판, 일본 내수용(JP), 한글미지원',
|
||||||
|
|
||||||
|
// [5] 상세 스펙 및 본문 (데이터 양이 가장 많으므로 하단 배치)
|
||||||
|
specs: {
|
||||||
|
purchaseDate: '',
|
||||||
|
condition: 'Brand New (미개봉)',
|
||||||
|
isVerified: true,
|
||||||
|
},
|
||||||
|
fullDescription: ['플로럴 플로우러브 (フローラル・フローラブ) 닌텐도 스위치용 패키지입니다.', '일본 내수용(JP) 완전생산한정판 제품입니다.', '미개봉 새제품 상태입니다.', '한글은 지원하지 않으며 일본어로 플레이 가능합니다.', '', '', '', '', '', '', '', '', '', ''],
|
||||||
|
},
|
||||||
|
{
|
||||||
id: 'nm4uzduj',
|
id: 'nm4uzduj',
|
||||||
createdAt: '2026-02-04',
|
createdAt: '2026-02-01',
|
||||||
updatedAt: '2026-02-04',
|
updatedAt: '2026-02-01',
|
||||||
|
|
||||||
title: '닌텐도 게임앤워치 젤다의 전설',
|
title: '닌텐도 게임앤워치 젤다의 전설',
|
||||||
price: 80000,
|
price: 80000,
|
||||||
@@ -21,27 +246,12 @@ const games = [
|
|||||||
condition: 'Brand New (미개봉)',
|
condition: 'Brand New (미개봉)',
|
||||||
isVerified: true,
|
isVerified: true,
|
||||||
},
|
},
|
||||||
fullDescription: [
|
fullDescription: ['닌텐도 Game & Watch 젤다의 전설 에디션입니다.', '일본 내수용 제품입니다.', '미개봉 새제품 상태입니다.', '소장용으로 보관하기 좋은 상태입니다.', '', '※ 게임&워치는 한국어에 대응하지 않습니다.', '', '', '', '', '', '', '', ''],
|
||||||
'닌텐도 Game & Watch 젤다의 전설 에디션입니다.',
|
|
||||||
'일본 내수용 제품입니다.',
|
|
||||||
'미개봉 새제품 상태입니다.',
|
|
||||||
'소장용으로 보관하기 좋은 상태입니다.',
|
|
||||||
'',
|
|
||||||
'※ 게임&워치는 한국어에 대응하지 않습니다.',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'vzwe916n',
|
id: 'vzwe916n',
|
||||||
createdAt: '2026-02-04',
|
createdAt: '2026-02-01',
|
||||||
updatedAt: '2026-02-04',
|
updatedAt: '2026-02-01',
|
||||||
|
|
||||||
title: '닌텐도 게임앤워치 슈퍼마리오 브라더스',
|
title: '닌텐도 게임앤워치 슈퍼마리오 브라더스',
|
||||||
price: 80000,
|
price: 80000,
|
||||||
@@ -60,66 +270,7 @@ const games = [
|
|||||||
condition: 'Brand New (미개봉)',
|
condition: 'Brand New (미개봉)',
|
||||||
isVerified: true,
|
isVerified: true,
|
||||||
},
|
},
|
||||||
fullDescription: [
|
fullDescription: ['닌텐도 Game & Watch 슈퍼 마리오 에디션입니다.', '한국 정식 발매판으로 국내 유통된 제품입니다.', '미개봉 새제품 상태입니다.', '소장용으로 보관하기 좋은 상태입니다.', '', '※ 게임&워치는 한국어에 대응하지 않습니다.', '', '', '', '', '', '', '', ''],
|
||||||
'닌텐도 Game & Watch 슈퍼 마리오 에디션입니다.',
|
|
||||||
'한국 정식 발매판으로 국내 유통된 제품입니다.',
|
|
||||||
'미개봉 새제품 상태입니다.',
|
|
||||||
'소장용으로 보관하기 좋은 상태입니다.',
|
|
||||||
'',
|
|
||||||
'※ 게임&워치는 한국어에 대응하지 않습니다.',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// [1] 시스템 및 메타 정보 (가장 먼저 확인하게 되는 고유값)
|
|
||||||
id: 'i3zgj4zl',
|
|
||||||
createdAt: '2025-01-22',
|
|
||||||
updatedAt: '2025-01-22',
|
|
||||||
|
|
||||||
// [2] 기본 판매 정보 (리스트 카드에 바로 노출될 핵심 정보)
|
|
||||||
title: '플로럴 플로우러브',
|
|
||||||
price: 60000,
|
|
||||||
currency: '₩',
|
|
||||||
category: 'Games',
|
|
||||||
status: '판매중',
|
|
||||||
customTag: '완전생산한정판', // 카드 위에 띄울 뱃지용
|
|
||||||
|
|
||||||
// [3] 분류 및 필터 정보 (중복 선택 및 검색용)
|
|
||||||
tags: ['Switch', 'Limited Edition', 'JP'],
|
|
||||||
|
|
||||||
// [4] 시각 및 요약 정보
|
|
||||||
images: ['/images/games/i3zgj4zl_01.jpg', '/images/games/i3zgj4zl_02.jpg', '/images/games/i3zgj4zl_03.jpg', '/images/games/i3zgj4zl_04.jpg'],
|
|
||||||
description: '미개봉 새제품, 한정판, 일본 내수용(JP), 한글미지원',
|
|
||||||
|
|
||||||
// [5] 상세 스펙 및 본문 (데이터 양이 가장 많으므로 하단 배치)
|
|
||||||
specs: {
|
|
||||||
purchaseDate: '',
|
|
||||||
condition: 'Brand New (미개봉)',
|
|
||||||
isVerified: true,
|
|
||||||
},
|
|
||||||
fullDescription: [
|
|
||||||
'플로럴 플로우러브 (フローラル・フローラブ) 닌텐도 스위치용 패키지입니다.',
|
|
||||||
'일본 내수용(JP) 완전생산한정판 제품입니다.',
|
|
||||||
'미개봉 새제품 상태입니다.',
|
|
||||||
'한글은 지원하지 않으며 일본어로 플레이 가능합니다.',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
'',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
export default games;
|
export default games;
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 146 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 928 B |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 15 KiB |
@@ -1 +0,0 @@
|
|||||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
|
||||||
BIN
images/games/0xutijk8_01.jpg
Normal file
|
After Width: | Height: | Size: 1.9 MiB |
BIN
images/games/0xutijk8_02.jpg
Normal file
|
After Width: | Height: | Size: 1.9 MiB |
BIN
images/games/0xutijk8_03.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
images/games/a7k3m9q2_01.jpg
Normal file
|
After Width: | Height: | Size: 1.9 MiB |
BIN
images/games/a7k3m9q2_02.jpg
Normal file
|
After Width: | Height: | Size: 1.9 MiB |
BIN
images/games/a7k3m9q2_03.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
images/games/de41vs8u_01.jpg
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
images/games/de41vs8u_02.jpg
Normal file
|
After Width: | Height: | Size: 2.1 MiB |
BIN
images/games/de41vs8u_03.jpg
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
images/games/fynzefa9_01.jpg
Normal file
|
After Width: | Height: | Size: 2.0 MiB |
BIN
images/games/fynzefa9_02.jpg
Normal file
|
After Width: | Height: | Size: 2.1 MiB |
BIN
images/games/fynzefa9_03.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
images/games/q0422roj_01.jpg
Normal file
|
After Width: | Height: | Size: 1.8 MiB |
BIN
images/games/q0422roj_02.jpg
Normal file
|
After Width: | Height: | Size: 1.8 MiB |
BIN
images/games/q0422roj_03.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
images/games/w5vyp5x2_01.jpg
Normal file
|
After Width: | Height: | Size: 1.8 MiB |
BIN
images/games/w5vyp5x2_02.jpg
Normal file
|
After Width: | Height: | Size: 2.1 MiB |
BIN
images/games/w5vyp5x2_03.jpg
Normal file
|
After Width: | Height: | Size: 880 KiB |
BIN
images/games/z69xbqg7_01.jpg
Normal file
|
After Width: | Height: | Size: 1.6 MiB |
BIN
images/games/z69xbqg7_02.jpg
Normal file
|
After Width: | Height: | Size: 1.8 MiB |
BIN
images/games/z69xbqg7_03.jpg
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
22
index.html
@@ -15,12 +15,7 @@
|
|||||||
<meta property="twitter:title" content="sori.inventory" />
|
<meta property="twitter:title" content="sori.inventory" />
|
||||||
<meta property="twitter:description" content="일상의 조각들, 그리고 취향의 공유." />
|
<meta property="twitter:description" content="일상의 조각들, 그리고 취향의 공유." />
|
||||||
<meta property="twitter:image" content="https://sori.studio/og/inven.jpg" />
|
<meta property="twitter:image" content="https://sori.studio/og/inven.jpg" />
|
||||||
<!-- Favicon -->
|
<!-- -->
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/images/assets/favicon/favicon-32x32.png" />
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/images/assets/favicon/favicon-16x16.png" />
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/images/assets/favicon/apple-touch-icon.png" />
|
|
||||||
<link rel="manifest" href="/images/assets/favicon/site.webmanifest" />
|
|
||||||
<!-- default -->
|
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
<title>sori.inventory</title>
|
<title>sori.inventory</title>
|
||||||
@@ -88,8 +83,10 @@
|
|||||||
<header class="sticky top-0 z-50 gap-2 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-40 py-3">
|
<header class="sticky top-0 z-50 gap-2 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-40 py-3">
|
||||||
<div class="flex items-center gap-8">
|
<div class="flex items-center gap-8">
|
||||||
<div class="flex items-center gap-3 text-slate-900 dark:text-white">
|
<div class="flex items-center gap-3 text-slate-900 dark:text-white">
|
||||||
<img src="/images/assets/favicon/favicon-32x32.png" alt="sori.inventory logo" class="w-5 h-5" />
|
<div class="flex items-center justify-center size-8 bg-primary rounded-lg text-white">
|
||||||
<h2 class="hidden xs:block text-lg font-bold leading-tight tracking-tight">sori.inventory</h2>
|
<span class="material-symbols-outlined text-xl">inventory_2</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="hidden xs:block text-lg font-bold leading-tight tracking-tight cursor-pointer" id="logo-title">sori.inventory</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-1 justify-end gap-4 items-center">
|
<div class="flex flex-1 justify-end gap-4 items-center">
|
||||||
@@ -133,6 +130,15 @@
|
|||||||
<!-- filter-chips -->
|
<!-- filter-chips -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<section class="px-6 md:px-40 pt-6 -mb-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-slate-400 dark:text-slate-500 text-xs font-bold uppercase tracking-widest">Total Results</span>
|
||||||
|
<span id="total-count" class="px-2 py-0.5 rounded bg-primary/10 text-primary text-sm font-bold">0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<!-- Product Grid -->
|
<!-- Product Grid -->
|
||||||
<div class="px-6 md:px-40 py-10">
|
<div class="px-6 md:px-40 py-10">
|
||||||
<div id="product-grid" class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
|
<div id="product-grid" class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
|
||||||
|
|||||||
@@ -64,3 +64,11 @@ export const TAG_STYLES = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const TAG_DEFAULT_STYLE = 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400';
|
export const TAG_DEFAULT_STYLE = 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400';
|
||||||
|
|
||||||
|
export const SEARCH_CONFIG = {
|
||||||
|
USE_TITLE: true, // 상품명 검색
|
||||||
|
USE_CUSTOM_TAG: true, // 커스텀 태그 검색
|
||||||
|
USE_TAGS: true, // 태그 배열 검색
|
||||||
|
USE_DESCRIPTION: true, // 요약 설명 검색
|
||||||
|
USE_FULL_DESCRIPTION: false, // 상세 설명 배열 검색
|
||||||
|
};
|
||||||
@@ -1,11 +1,6 @@
|
|||||||
/** 상태·카테고리·검색 필터 로직 및 UI */
|
/** 상태·카테고리·검색 필터 로직 및 UI */
|
||||||
import { state, productsData } from './state.js';
|
import { state, productsData } from './state.js';
|
||||||
import {
|
import { VISIBILITY_CONFIG, STATUS_FILTERS, STATUS_ORDER, STATUS_COLOR, SEARCH_CONFIG } from './config.js';
|
||||||
VISIBILITY_CONFIG,
|
|
||||||
STATUS_FILTERS,
|
|
||||||
STATUS_ORDER,
|
|
||||||
STATUS_COLOR,
|
|
||||||
} from './config.js';
|
|
||||||
import { renderProducts } from './productList.js';
|
import { renderProducts } from './productList.js';
|
||||||
|
|
||||||
function getStatusChipClass(status, isActive) {
|
function getStatusChipClass(status, isActive) {
|
||||||
@@ -46,13 +41,37 @@ function toggleStatusFilter(status) {
|
|||||||
|
|
||||||
export function applyFilters() {
|
export function applyFilters() {
|
||||||
state.currentPage = 1;
|
state.currentPage = 1;
|
||||||
|
const keyword = state.searchKeyword.toLowerCase();
|
||||||
|
|
||||||
state.visibleProducts = productsData
|
state.visibleProducts = productsData
|
||||||
.filter((product) => {
|
.filter((product) => {
|
||||||
|
// [1] 가시성 및 상태/카테고리 필터
|
||||||
if (product.status === '미판매' && !VISIBILITY_CONFIG.showUnlisted) return false;
|
if (product.status === '미판매' && !VISIBILITY_CONFIG.showUnlisted) return false;
|
||||||
if (product.status === '판매완료' && !VISIBILITY_CONFIG.showSold) return false;
|
if (product.status === '판매완료' && !VISIBILITY_CONFIG.showSold) return false;
|
||||||
|
|
||||||
const statusMatch = state.activeStatuses.has(product.status);
|
const statusMatch = state.activeStatuses.has(product.status);
|
||||||
const categoryMatch = state.activeCategories.has('All') || state.activeCategories.has(product.category);
|
const categoryMatch = state.activeCategories.has('All') || state.activeCategories.has(product.category);
|
||||||
const searchMatch = state.searchKeyword === '' || product.title.toLowerCase().includes(state.searchKeyword);
|
|
||||||
|
// [2] config 설정을 기반으로 한 동적 검색 매칭
|
||||||
|
const searchMatch =
|
||||||
|
keyword === '' ||
|
||||||
|
(() => {
|
||||||
|
const searchPool = [];
|
||||||
|
|
||||||
|
if (SEARCH_CONFIG.USE_TITLE) searchPool.push(product.title);
|
||||||
|
|
||||||
|
if (SEARCH_CONFIG.USE_CUSTOM_TAG && product.customTag) searchPool.push(product.customTag);
|
||||||
|
|
||||||
|
if (SEARCH_CONFIG.USE_DESCRIPTION && product.description) searchPool.push(product.description);
|
||||||
|
|
||||||
|
if (SEARCH_CONFIG.USE_TAGS && product.tags) searchPool.push(...product.tags); // 배열 요소를 풀어서 추가
|
||||||
|
|
||||||
|
if (SEARCH_CONFIG.USE_FULL_DESCRIPTION && product.fullDescription) searchPool.push(...product.fullDescription);
|
||||||
|
|
||||||
|
// 검색 풀(Pool)에 있는 단어 중 키워드를 포함하는 게 하나라도 있는지 확인
|
||||||
|
return searchPool.some((text) => String(text).toLowerCase().includes(keyword));
|
||||||
|
})();
|
||||||
|
|
||||||
return statusMatch && categoryMatch && searchMatch;
|
return statusMatch && categoryMatch && searchMatch;
|
||||||
})
|
})
|
||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
@@ -60,9 +79,20 @@ export function applyFilters() {
|
|||||||
const bOrder = STATUS_ORDER[b.status] ?? 999;
|
const bOrder = STATUS_ORDER[b.status] ?? 999;
|
||||||
return aOrder - bOrder;
|
return aOrder - bOrder;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
renderTotalCount(state.visibleProducts.length);
|
||||||
|
|
||||||
renderProducts(state.currentPage);
|
renderProducts(state.currentPage);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 총 개수를 화면에 표시하는 보조 함수 */
|
||||||
|
function renderTotalCount(count) {
|
||||||
|
const totalCountElement = document.getElementById('total-count');
|
||||||
|
if (totalCountElement) {
|
||||||
|
totalCountElement.textContent = count.toLocaleString(); // 3자리마다 콤마
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export function getCategories(products) {
|
export function getCategories(products) {
|
||||||
return ['All', ...new Set(products.map((p) => p.category))];
|
return ['All', ...new Set(products.map((p) => p.category))];
|
||||||
}
|
}
|
||||||
@@ -115,3 +145,27 @@ export function bindCategoryFilter(products) {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 로고 클릭 시 초기화 로직
|
||||||
|
document.getElementById('logo-title')?.addEventListener('click', () => {
|
||||||
|
// 1. 검색어 초기화
|
||||||
|
state.searchKeyword = '';
|
||||||
|
const searchInput = document.getElementById('search-input'); // 검색창 ID가 있다면
|
||||||
|
if (searchInput) searchInput.value = '';
|
||||||
|
|
||||||
|
// 2. 카테고리 초기화 (All 선택)
|
||||||
|
state.activeCategories.clear();
|
||||||
|
state.activeCategories.add('All');
|
||||||
|
|
||||||
|
// 3. 상태 필터 초기화 (기본 활성화 상태로)
|
||||||
|
state.activeStatuses.clear();
|
||||||
|
STATUS_FILTERS.filter(f => f.defaultActive).forEach(f => state.activeStatuses.add(f.key));
|
||||||
|
|
||||||
|
// 4. 필터 적용 및 UI 갱신
|
||||||
|
applyFilters();
|
||||||
|
renderStatusChips();
|
||||||
|
renderCategoryChips(productsData);
|
||||||
|
|
||||||
|
// 5. 페이지 최상단으로 스크롤 (선택 사항)
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
});
|
||||||
@@ -97,3 +97,4 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
// 데이터용 새 ID 생성기
|
// 데이터용 새 ID 생성기
|
||||||
const newId = Math.random().toString(36).substring(2, 10);
|
const newId = Math.random().toString(36).substring(2, 10);
|
||||||
console.log(`%c[NUMBER]: ${newId}`, 'color: #137fec; font-weight: bold; border: 1px solid #137fec; padding: 2px 5px; border-radius: 4px;');
|
console.log(`%c[NUMBER]: ${newId}`, 'color: #137fec; font-weight: bold; border: 1px solid #137fec; padding: 2px 5px; border-radius: 4px;');
|
||||||
|
|
||||||
|
|||||||
@@ -2,33 +2,49 @@
|
|||||||
import { state } from './state.js';
|
import { state } from './state.js';
|
||||||
import { ITEMS_PER_PAGE, STATUS_META } from './config.js';
|
import { ITEMS_PER_PAGE, STATUS_META } from './config.js';
|
||||||
|
|
||||||
export function renderProducts(page) {
|
export function renderProducts(page = 1) {
|
||||||
const grid = document.getElementById('product-grid');
|
const grid = document.getElementById('product-grid');
|
||||||
|
const paginationContainer = document.getElementById('pagination');
|
||||||
if (!grid) return;
|
if (!grid) return;
|
||||||
|
|
||||||
|
// 1. 결과가 0개인 경우 (안내 텍스트만 출력)
|
||||||
|
if (state.visibleProducts.length === 0) {
|
||||||
|
grid.classList.remove('grid'); // 중앙 정렬을 위해 그리드 해제
|
||||||
|
grid.innerHTML = `
|
||||||
|
<div class="flex flex-col items-center justify-center py-20 w-full text-center">
|
||||||
|
<span class="material-symbols-outlined text-6xl text-slate-300 dark:text-slate-700 mb-4">
|
||||||
|
search_off
|
||||||
|
</span>
|
||||||
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">검색 결과가 없습니다</h3>
|
||||||
|
<p class="text-slate-500 dark:text-slate-400 text-sm">
|
||||||
|
입력하신 검색어나 선택한 필터를 확인해 주세요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
if (paginationContainer) paginationContainer.innerHTML = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 결과가 있을 경우 (그리드 복구 및 초기화)
|
||||||
|
grid.classList.add('grid');
|
||||||
grid.innerHTML = '';
|
grid.innerHTML = '';
|
||||||
|
|
||||||
const startIndex = (page - 1) * ITEMS_PER_PAGE;
|
const startIndex = (page - 1) * ITEMS_PER_PAGE;
|
||||||
const pagedProducts = state.visibleProducts.slice(startIndex, startIndex + ITEMS_PER_PAGE);
|
const pagedProducts = state.visibleProducts.slice(startIndex, startIndex + ITEMS_PER_PAGE);
|
||||||
|
|
||||||
|
// 상품 카드 생성 로직
|
||||||
pagedProducts.forEach((product) => {
|
pagedProducts.forEach((product) => {
|
||||||
const isSold = STATUS_META[product.status]?.soldOut === true;
|
const isSold = STATUS_META[product.status]?.soldOut === true;
|
||||||
const cardHtml = `
|
const cardHtml = `
|
||||||
<div class="group flex flex-col gap-4 cursor-pointer" onclick="openModal('${product.id}')">
|
<div class="group flex flex-col gap-4 cursor-pointer" onclick="openModal('${product.id}')">
|
||||||
<div class="relative w-full aspect-[4/5] bg-slate-50 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm group-hover:shadow-md transition-shadow">
|
<div class="relative w-full aspect-[4/5] bg-slate-50 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm">
|
||||||
<div class="w-full h-full bg-center bg-no-repeat bg-cover transform ${isSold ? 'grayscale opacity-80' : 'group-hover:scale-105'} transition-transform duration-500"
|
<div class="w-full h-full bg-center bg-no-repeat bg-cover transform ${isSold ? 'grayscale opacity-80' : 'group-hover:scale-105'} transition-transform duration-500"
|
||||||
style="background-image: url('${product.images[0]}')"></div>
|
style="background-image: url('${product.images[0]}')"></div>
|
||||||
<div class="absolute top-3 left-3">
|
|
||||||
<span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded ${isSold ? 'bg-slate-900/10 text-slate-500' : 'bg-primary/10 text-primary'} backdrop-blur-md border border-primary/20">
|
|
||||||
${product.status}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-1">
|
<div class="flex flex-col gap-1">
|
||||||
<div class="flex flex-col sm:flex-row justify-between items-start">
|
<h3 class="text-slate-900 dark:text-white text-base font-semibold ${isSold ? 'line-through text-slate-400' : ''}">${product.title}</h3>
|
||||||
<h3 class="text-slate-900 dark:text-white text-base font-semibold ${isSold ? 'line-through text-slate-400' : ''}">${product.title}</h3>
|
<p class="text-slate-500 dark:text-slate-400 text-sm font-normal line-clamp-1">${product.description}</p>
|
||||||
<p class="text-slate-900 dark:text-white text-base font-bold text-nowrap">${product.currency}${product.price.toLocaleString()}</p>
|
|
||||||
</div>
|
|
||||||
<p class="text-slate-500 dark:text-slate-400 text-sm font-normal">${product.description}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -69,3 +85,24 @@ export function changePage(page) {
|
|||||||
renderProducts(page);
|
renderProducts(page);
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 모든 필터를 초기 상태로 되돌리는 함수 */
|
||||||
|
function resetAllFilters() {
|
||||||
|
state.searchKeyword = '';
|
||||||
|
const searchInput = document.getElementById('search-input');
|
||||||
|
if (searchInput) searchInput.value = '';
|
||||||
|
|
||||||
|
state.activeCategories.clear();
|
||||||
|
state.activeCategories.add('All');
|
||||||
|
|
||||||
|
// 상태 필터 초기화 (config에서 defaultActive인 것만)
|
||||||
|
import('./config.js').then(({ STATUS_FILTERS }) => {
|
||||||
|
state.activeStatuses.clear();
|
||||||
|
STATUS_FILTERS.filter(f => f.defaultActive).forEach(f => state.activeStatuses.add(f.key));
|
||||||
|
|
||||||
|
// UI 전체 갱신
|
||||||
|
applyFilters();
|
||||||
|
renderStatusChips();
|
||||||
|
renderCategoryChips(productsData);
|
||||||
|
});
|
||||||
|
}
|
||||||