diff --git a/data/games.js b/data/games.js index 3f51dc3..d7aaf28 100644 --- a/data/games.js +++ b/data/games.js @@ -1,84 +1,108 @@ const games = [ { - id: 'j4r9x6pm', - createdAt: '2026-02-11', - updatedAt: '2026-02-11', + id: 'q8t4m2zs', + createdAt: '2026-02-11', + updatedAt: '2026-02-11', - title: '-KATANA Project CompleteBox- 煌花絢爛', - price: 250000, - currency: '₩', - category: 'PC Games', - status: '미판매', - customTag: 'R19', + title: '아마카노3', + price: 200000, + currency: '₩', + category: 'Games', + status: '미판매', + customTag: '', - tags: ['PC', 'JP', 'R19'], + tags: ['PC', 'JP', 'R19'], - images: [ - '/images/games/j4r9x6pm_01.webp', - '/images/games/j4r9x6pm_02.webp', - '/images/games/j4r9x6pm_03.webp', - '/images/games/j4r9x6pm_04.webp', - ], + images: ['/images/games/q8t4m2zs_01.jpg', '/images/games/q8t4m2zs_02.jpg', '/images/games/q8t4m2zs_03.jpg', '/images/games/q8t4m2zs_04.jpg'], - description: '미개봉 새제품, 일본 내수용(JP), 한국어 미지원, R19', + description: '일본판(JP), R19, 한국어 미지원', - specs: { - purchaseDate: '', - condition: 'BRAND_NEW', - isVerified: true, + specs: { + purchaseDate: '', + condition: 'Brand New (미개봉)', + isVerified: true, + }, + + fullDescription: ['아마카노3(アマカノ3) PC용 패키지입니다.', '일본 내수용(JP) 제품입니다.', 'R19 성인용 게임입니다.', '한국어는 지원하지 않습니다.', '미개봉 새제품 상태입니다.', '', '아마존 한정 특정: B2 타페스트리(W스에이드), 아크릴 코스터, A4 코튼백 포함', ''], }, - - fullDescription: [ - '-KATANA Project CompleteBox- 煌花絢爛 PC용 패키지입니다.', - '일본 내수용(JP) 성인용(R19) 제품입니다.', - '한국어는 지원하지 않습니다.', - '미개봉 새제품 상태입니다.', - '', - '', - '', - '', - ], -}, { - id: 'b5k8q2zn', - createdAt: '2026-02-11', - updatedAt: '2026-02-11', + id: 'k3x9p7dm', + createdAt: '2026-02-11', + updatedAt: '2026-02-11', - title: '9-nine-', - price: 300000, - currency: '₩', - category: 'PC Games', - status: '미판매', - customTag: 'R19', + title: '아마카노2+', + price: 200000, + currency: '₩', + category: 'Games', + status: '미판매', + customTag: '', - tags: ['PC', 'JP', 'Limited Edition', 'R19'], + tags: ['PC', 'JP', 'R19'], - images: [ - '/images/games/b5k8q2zn_01.webp', - '/images/games/b5k8q2zn_02.webp', - '/images/games/b5k8q2zn_03.webp', - '/images/games/b5k8q2zn_04.webp', - ], + images: ['/images/games/k3x9p7dm_01.jpg', '/images/games/k3x9p7dm_02.jpg', '/images/games/k3x9p7dm_03.jpg', '/images/games/k3x9p7dm_04.jpg'], - description: '미개봉 새제품, 호화판, 일본 내수용(JP), 한국어 미지원', + description: '일본판(JP), R19, 한국어 미지원', - specs: { - purchaseDate: '', - condition: 'BRAND_NEW', - isVerified: true, + specs: { + purchaseDate: '', + condition: 'Brand New (미개봉)', + isVerified: true, + }, + + fullDescription: ['아마카노2+(アマカノ2+) PC용 패키지입니다.', '일본 내수용(JP) 제품입니다.', 'R19 성인용 게임입니다.', '한국어는 지원하지 않습니다.', '미개봉 새제품 상태입니다.', '', '', ''], }, + { + id: 'j4r9x6pm', + createdAt: '2026-02-11', + updatedAt: '2026-02-11', - fullDescription: [ - '9-nine- PC용 패키지입니다.', - '일본 내수용(JP) 호화판 제품입니다.', - '한국어는 지원하지 않습니다.', - '미개봉 새제품 상태입니다.', - '', - '', - '', - '', - ], -}, + title: '-KATANA Project CompleteBox- 煌花絢爛', + price: 250000, + currency: '₩', + category: 'PC Games', + status: '미판매', + customTag: 'R19', + + tags: ['PC', 'JP', 'R19'], + + images: ['/images/games/j4r9x6pm_01.webp', '/images/games/j4r9x6pm_02.webp', '/images/games/j4r9x6pm_03.webp', '/images/games/j4r9x6pm_04.webp'], + + description: '일본 내수용(JP), 한국어 미지원, R19', + + specs: { + purchaseDate: '', + condition: 'BRAND_NEW', + isVerified: true, + }, + + fullDescription: ['-KATANA Project CompleteBox- 煌花絢爛 PC용 패키지입니다.', '일본 내수용(JP) 성인용(R19) 제품입니다.', '한국어는 지원하지 않습니다.', '미개봉 새제품 상태입니다.', '', '', '', ''], + }, + { + id: 'b5k8q2zn', + createdAt: '2026-02-11', + updatedAt: '2026-02-11', + + title: '9-nine-', + price: 300000, + currency: '₩', + category: 'PC Games', + status: '미판매', + customTag: 'R19', + + tags: ['PC', 'JP', 'Limited Edition', 'R19'], + + images: ['/images/games/b5k8q2zn_01.webp', '/images/games/b5k8q2zn_02.webp', '/images/games/b5k8q2zn_03.webp', '/images/games/b5k8q2zn_04.webp'], + + description: '호화판, 일본 내수용(JP), 한국어 미지원', + + specs: { + purchaseDate: '', + condition: 'BRAND_NEW', + isVerified: true, + }, + + fullDescription: ['9-nine- PC용 패키지입니다.', '일본 내수용(JP) 호화판 제품입니다.', '한국어는 지원하지 않습니다.', '미개봉 새제품 상태입니다.', '', '', '', ''], + }, { id: 't6x3m8qe', createdAt: '2026-02-10', @@ -95,7 +119,7 @@ const games = [ images: ['/images/games/t6x3m8qe_01.webp', '/images/games/t6x3m8qe_02.webp', '/images/games/t6x3m8qe_03.webp', '/images/games/t6x3m8qe_04.webp'], - description: '미개봉 새제품, 일본 내수용(JP), 한국어 지원', + description: '일본 내수용(JP), 한국어 지원', specs: { purchaseDate: '', @@ -121,7 +145,7 @@ const games = [ images: ['/images/games/v9f2k6mb_01.webp', '/images/games/v9f2k6mb_02.webp', '/images/games/v9f2k6mb_03.webp', '/images/games/v9f2k6mb_04.webp'], - description: '미개봉 새제품, 초회 한정판, 일본 내수용(JP), 한국어 미지원', + description: '초회 한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -173,7 +197,7 @@ const games = [ images: ['/images/games/g5w8n2rb_01.webp', '/images/games/g5w8n2rb_02.webp', '/images/games/g5w8n2rb_03.webp', '/images/games/g5w8n2rb_04.webp', '/images/games/g5w8n2rb_05.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -199,7 +223,7 @@ const games = [ images: ['/images/games/d8m5r2yk_01.webp', '/images/games/d8m5r2yk_02.webp', '/images/games/d8m5r2yk_03.webp', '/images/games/d8m5r2yk_04.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -225,7 +249,7 @@ const games = [ images: ['/images/games/h6q3z9vt_01.webp', '/images/games/h6q3z9vt_02.webp', '/images/games/h6q3z9vt_03.webp', '/images/games/h6q3z9vt_04.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -251,7 +275,7 @@ const games = [ images: ['/images/games/p2w9e6ks_01.webp', '/images/games/p2w9e6ks_02.webp', '/images/games/p2w9e6ks_03.webp', '/images/games/p2w9e6ks_04.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -277,7 +301,7 @@ const games = [ images: ['/images/games/u3n8x5ra_01.webp', '/images/games/u3n8x5ra_02.webp', '/images/games/u3n8x5ra_03.webp', '/images/games/u3n8x5ra_04.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -303,7 +327,7 @@ const games = [ images: ['/images/games/r4h8k2pz_01.webp', '/images/games/r4h8k2pz_02.webp', '/images/games/r4h8k2pz_03.webp', '/images/games/r4h8k2pz_04.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -329,7 +353,7 @@ const games = [ images: ['/images/games/c9v3k7mw_01.webp', '/images/games/c9v3k7mw_02.webp', '/images/games/c9v3k7mw_03.webp', '/images/games/c9v3k7mw_04.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -355,7 +379,7 @@ const games = [ images: ['/images/games/x4r7p2ds_01.webp', '/images/games/x4r7p2ds_02.webp', '/images/games/x4r7p2ds_03.webp', '/images/games/x4r7p2ds_04.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -381,7 +405,7 @@ const games = [ images: ['/images/games/q8t2mz4k_01.webp', '/images/games/q8t2mz4k_02.webp', '/images/games/q8t2mz4k_03.webp', '/images/games/q8t2mz4k_04.webp', '/images/games/q8t2mz4k_05.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -406,7 +430,7 @@ const games = [ images: ['/images/games/m7k2v9qp_01.webp', '/images/games/m7k2v9qp_02.webp', '/images/games/m7k2v9qp_03.webp', '/images/games/m7k2v9qp_04.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -431,7 +455,7 @@ const games = [ images: ['/images/games/q8m2x4ra_01.webp', '/images/games/q8m2x4ra_02.webp', '/images/games/q8m2x4ra_03.webp', '/images/games/q8m2x4ra_04.webp', '/images/games/q8m2x4ra_05.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -456,7 +480,7 @@ const games = [ images: ['/images/games/k3f8d2qa_01.webp', '/images/games/k3f8d2qa_02.webp', '/images/games/k3f8d2qa_03.webp', '/images/games/k3f8d2qa_04.webp', '/images/games/k3f8d2qa_05.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -481,7 +505,7 @@ const games = [ images: ['/images/games/p4x9t2qa_01.webp', '/images/games/p4x9t2qa_02.webp', '/images/games/p4x9t2qa_03.webp', '/images/games/p4x9t2qa_04.webp'], - description: '미개봉 새제품, 디럭스판, 일본 내수용(JP), 한국어 지원', + description: '디럭스판, 일본 내수용(JP), 한국어 지원', specs: { purchaseDate: '', @@ -506,7 +530,7 @@ const games = [ images: ['/images/games/k8q3mz7r_01.webp', '/images/games/k8q3mz7r_02.webp', '/images/games/k8q3mz7r_03.webp', '/images/games/k8q3mz7r_04.webp'], - description: '미개봉 새제품, 초회 한정판, 일본 내수용(JP), 한국어 미지원', + description: '초회 한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -531,7 +555,7 @@ const games = [ images: ['/images/games/p4x8s2ke_01.webp', '/images/games/p4x8s2ke_02.webp', '/images/games/p4x8s2ke_03.webp', '/images/games/p4x8s2ke_04.webp', '/images/games/p4x8s2ke_05.webp', '/images/games/p4x8s2ke_06.webp'], - description: '미개봉 새제품, 완전생산한정판, 일본 내수용(JP), 한국어 미지원', + description: '완전생산한정판, 일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -556,7 +580,7 @@ const games = [ images: ['/images/games/m7t4q9bx_01.webp', '/images/games/m7t4q9bx_02.webp', '/images/games/m7t4q9bx_03.webp'], - description: '개봉품, 한국 정식 발매판(KR), 상태 매우 양호', + description: '한국 정식 발매판(KR)', specs: { purchaseDate: '', @@ -581,7 +605,7 @@ const games = [ images: ['/images/games/k3p9x2qa_01.webp', '/images/games/k3p9x2qa_02.webp', '/images/games/k3p9x2qa_03.webp'], - description: '개봉품, 한국 정식 발매판(KR), 상태 매우 양호', + description: '한국 정식 발매판(KR)', specs: { purchaseDate: '', @@ -606,7 +630,7 @@ const games = [ images: ['/images/games/r8k2v4pd_01.webp', '/images/games/r8k2v4pd_02.webp', '/images/games/r8k2v4pd_03.webp'], - description: '개봉품, 한국 정식 발매판(KR), 상태 매우 양호', + description: '한국 정식 발매판(KR)', specs: { purchaseDate: '', @@ -631,7 +655,7 @@ const games = [ images: ['/images/games/a7k3m9q2_01.webp', '/images/games/a7k3m9q2_02.webp', '/images/games/a7k3m9q2_03.webp'], - description: '개봉품, 한국 정식 발매판(KR), 상태 매우 양호', + description: '한국 정식 발매판(KR)', specs: { purchaseDate: '', @@ -656,7 +680,7 @@ const games = [ images: ['/images/games/fynzefa9_01.webp', '/images/games/fynzefa9_02.webp', '/images/games/fynzefa9_03.webp'], - description: '미개봉 새제품, 일본 내수용(JP), 한국어 미지원', + description: '일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -681,7 +705,7 @@ const games = [ images: ['/images/games/0xutijk8_01.webp', '/images/games/0xutijk8_02.webp', '/images/games/0xutijk8_03.webp'], - description: '미개봉 새제품, 한국 정식 발매판(KR)', + description: '한국 정식 발매판(KR)', specs: { purchaseDate: '', @@ -706,7 +730,7 @@ const games = [ images: ['/images/games/w5vyp5x2_01.webp', '/images/games/w5vyp5x2_02.webp', '/images/games/w5vyp5x2_03.webp'], - description: '미개봉 새제품, 한국 정식 발매판(KR)', + description: '한국 정식 발매판(KR)', specs: { purchaseDate: '', @@ -731,7 +755,7 @@ const games = [ images: ['/images/games/de41vs8u_01.webp', '/images/games/de41vs8u_02.webp', '/images/games/de41vs8u_03.webp'], - description: '개봉품, 일본 내수용(JP), 한국어 지원, 상태 매우 양호', + description: '일본 내수용(JP), 한국어 지원', specs: { purchaseDate: '', @@ -765,7 +789,7 @@ const games = [ tags: ['Switch', 'Nintendo', 'JP'], images: ['/images/games/z69xbqg7_01.webp', '/images/games/z69xbqg7_02.webp', '/images/games/z69xbqg7_03.webp'], - description: '개봉품, 일본 내수용(JP), 한국어 지원, 상태 매우 양호', + description: '일본 내수용(JP), 한국어 지원', specs: { purchaseDate: '', @@ -789,7 +813,7 @@ const games = [ tags: ['Switch', 'Key', 'JP', 'Kinetic Novel'], images: ['/images/games/q0422roj_01.webp', '/images/games/q0422roj_02.webp', '/images/games/q0422roj_03.webp'], - description: '개봉품, 일본 내수용(JP), 한국어 미지원, 상태 매우 양호', + description: '일본 내수용(JP), 한국어 미지원', specs: { purchaseDate: '', @@ -830,7 +854,7 @@ const games = [ // [4] 시각 및 요약 정보 images: ['/images/games/i3zgj4zl_01.webp', '/images/games/i3zgj4zl_02.webp', '/images/games/i3zgj4zl_03.webp', '/images/games/i3zgj4zl_04.webp'], - description: '미개봉 새제품, 한정판, 일본 내수용(JP), 한글미지원', + description: '한정판, 일본 내수용(JP), 한글미지원', // [5] 상세 스펙 및 본문 (데이터 양이 가장 많으므로 하단 배치) specs: { @@ -855,7 +879,7 @@ const games = [ tags: ['Nintendo', 'Game&Watch'], images: ['/images/games/nm4uzduj_01.webp', '/images/games/nm4uzduj_02.webp'], - description: '미개봉 새제품, 일본 내수용(JP)', + description: '일본 내수용(JP)', specs: { purchaseDate: '', @@ -879,7 +903,7 @@ const games = [ tags: ['Nintendo', 'Game&Watch'], images: ['/images/games/vzwe916n_01.webp', '/images/games/vzwe916n_02.webp'], - description: '미개봉 새제품, 한국 정식 발매판(KR)', + description: '한국 정식 발매판(KR)', specs: { purchaseDate: '', diff --git a/images/games/k3x9p7dm_01.jpg b/images/games/k3x9p7dm_01.jpg new file mode 100644 index 0000000..869eb5a Binary files /dev/null and b/images/games/k3x9p7dm_01.jpg differ diff --git a/images/games/k3x9p7dm_02.jpg b/images/games/k3x9p7dm_02.jpg new file mode 100644 index 0000000..f5754a1 Binary files /dev/null and b/images/games/k3x9p7dm_02.jpg differ diff --git a/images/games/k3x9p7dm_03.jpg b/images/games/k3x9p7dm_03.jpg new file mode 100644 index 0000000..84d9813 Binary files /dev/null and b/images/games/k3x9p7dm_03.jpg differ diff --git a/images/games/k3x9p7dm_04.jpg b/images/games/k3x9p7dm_04.jpg new file mode 100644 index 0000000..60a2c70 Binary files /dev/null and b/images/games/k3x9p7dm_04.jpg differ diff --git a/images/games/q8t4m2zs_01.jpg b/images/games/q8t4m2zs_01.jpg new file mode 100644 index 0000000..9699433 Binary files /dev/null and b/images/games/q8t4m2zs_01.jpg differ diff --git a/images/games/q8t4m2zs_02.jpg b/images/games/q8t4m2zs_02.jpg new file mode 100644 index 0000000..2f1ce9e Binary files /dev/null and b/images/games/q8t4m2zs_02.jpg differ diff --git a/images/games/q8t4m2zs_03.jpg b/images/games/q8t4m2zs_03.jpg new file mode 100644 index 0000000..4c2c6aa Binary files /dev/null and b/images/games/q8t4m2zs_03.jpg differ diff --git a/images/games/q8t4m2zs_04.jpg b/images/games/q8t4m2zs_04.jpg new file mode 100644 index 0000000..11d0805 Binary files /dev/null and b/images/games/q8t4m2zs_04.jpg differ diff --git a/images/games/q8t4m2zs_05.jpg b/images/games/q8t4m2zs_05.jpg new file mode 100644 index 0000000..b9687e1 Binary files /dev/null and b/images/games/q8t4m2zs_05.jpg differ diff --git a/images/games/q8t4m2zs_06.jpg b/images/games/q8t4m2zs_06.jpg new file mode 100644 index 0000000..b8afcd3 Binary files /dev/null and b/images/games/q8t4m2zs_06.jpg differ diff --git a/index.html b/index.html index f903cb2..863a532 100644 --- a/index.html +++ b/index.html @@ -82,6 +82,11 @@ #product-modal { overscroll-behavior: contain; } + + [id^="thumb-"] { + transition: all 0.6s ease-in-out; + background-color: #f1f5f9; /* 로딩 중 배경색 (slate-100) */ +} @@ -240,7 +245,7 @@
-
+
{ const isActive = state.activeStatuses.has(key); - + const chip = document.createElement('button'); // getStatusChipClass 함수가 기존에 정의되어 있다면 그대로 사용하세요. chip.className = `status-chip px-3 py-1.5 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-medium transition-all duration-200 border ${getStatusChipClass(key, isActive)}`; @@ -44,7 +44,6 @@ function toggleStatusFilter(status) { // [핵심] 필터 적용 함수 export function applyFilters() { - // [수정] 무조건 1페이지로 초기화하지 않고, 나중에 데이터 개수에 맞춰 계산합니다. const keyword = state.searchKeyword.toLowerCase(); // 1. 데이터 필터링 및 정렬 @@ -52,10 +51,10 @@ export function applyFilters() { .filter((product) => { const meta = STATUS_META[product.status]; - // [1] 시스템 가시성 체크 (isSystemVisible이 false면 목록에서 완전히 제외) + // [1] 시스템 가시성 체크 if (!meta || !meta.isSystemVisible) return false; - // [2] 상태 필터 체크 (사용자가 필터 칩을 클릭해 활성화했는지) + // [2] 상태 필터 체크 const statusMatch = state.activeStatuses.has(product.status); // [3] 카테고리 필터 체크 @@ -72,33 +71,57 @@ export function applyFilters() { if (SEARCH_CONFIG.USE_TAGS && product.tags) searchPool.push(...product.tags); if (SEARCH_CONFIG.USE_FULL_DESCRIPTION && product.fullDescription) searchPool.push(...product.fullDescription); - return searchPool.some((text) => String(text || '').toLowerCase().includes(keyword)); + return searchPool.some((text) => + String(text || '') + .toLowerCase() + .includes(keyword), + ); })(); return statusMatch && categoryMatch && searchMatch; }) .sort((a, b) => { + // 0. 스위치가 모두 꺼져있다면 정렬하지 않고 원본 순서 유지 + if (!SORT_CONFIG.PUSH_SOLD_OUT_TO_END && !SORT_CONFIG.PUSH_NON_SALE_TO_END) { + return 0; + } + + const isASold = STATUS_META[a.status]?.soldOut; + const isBSold = STATUS_META[b.status]?.soldOut; + const isANonSale = a.status === '미판매'; + const isBNonSale = b.status === '미판매'; + + // 1. 판매완료 정렬 제어 + if (SORT_CONFIG.PUSH_SOLD_OUT_TO_END) { + if (isASold !== isBSold) return isASold ? 1 : -1; + } + + // 2. 미판매 정렬 제어 + if (SORT_CONFIG.PUSH_NON_SALE_TO_END) { + if (isANonSale !== isBNonSale) return isANonSale ? 1 : -1; + } + + // 3. 만약 위 스위치들 중 하나라도 켜져 있다면, 나머지는 STATUS_ORDER를 따름 const aOrder = STATUS_ORDER[a.status] ?? 999; const bOrder = STATUS_ORDER[b.status] ?? 999; return aOrder - bOrder; }); - // 2. [추가] 페이지 위치 안전 조정 로직 - // 필터링된 결과로 가질 수 있는 최대 페이지 계산 + // 2. 페이지 위치 안전 조정 로직 const totalPages = Math.ceil(state.visibleProducts.length / ITEMS_PER_PAGE); if (state.currentPage > totalPages) { - // 만약 필터링 후 전체 페이지가 현재 페이지보다 적어지면 마지막 페이지로 이동 state.currentPage = Math.max(1, totalPages); } else if (state.currentPage < 1) { - // 혹시 모를 에러 방지용 1페이지 고정 state.currentPage = 1; } - // ※ 참고: 필터를 걸 때마다 무조건 첫 페이지를 보게 하고 싶다면 - // 위 로직 대신 단순히 state.currentPage = 1; 을 쓰시면 됩니다. // 3. UI 업데이트 - renderTotalCount(state.visibleProducts.length); + // renderTotalCount 함수가 정의되어 있다면 실행 + if (typeof renderTotalCount === 'function') { + renderTotalCount(state.visibleProducts.length); + } + renderProducts(state.currentPage); } @@ -120,26 +143,22 @@ export function renderCategoryChips(products) { // [핵심] 시스템 가시성이 true인 상품의 카테고리만 추출합니다. const validCategories = products - .filter(p => { + .filter((p) => { const meta = STATUS_META[p.status]; // 해당 상태가 정의되어 있고, 시스템에서 보여주기로 한 경우만 포함 return meta && meta.isSystemVisible; }) - .map(p => p.category); + .map((p) => p.category); // 'All'은 항상 포함하고, 필터링된 카테고리들만 중복 제거하여 합침 const categories = ['All', ...new Set(validCategories)]; - + container.innerHTML = ''; categories.forEach((cat) => { const isActive = state.activeCategories.has(cat); const chip = document.createElement('button'); - chip.className = `filter-chip px-3 py-1.5 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-medium transition border ${ - isActive - ? 'bg-primary text-white border-primary shadow-sm' - : 'bg-slate-50 text-slate-600 border-slate-200' - }`; + chip.className = `filter-chip px-3 py-1.5 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-medium transition border ${isActive ? 'bg-primary text-white border-primary shadow-sm' : 'bg-slate-50 text-slate-600 border-slate-200'}`; chip.textContent = cat; chip.dataset.category = cat; chip.onclick = () => toggleCategory(cat); @@ -192,7 +211,7 @@ document.getElementById('logo-title')?.addEventListener('click', () => { // 3. 상태 필터 초기화 (기본 활성화 상태로) state.activeStatuses.clear(); - STATUS_FILTERS.filter(f => f.defaultActive).forEach(f => state.activeStatuses.add(f.key)); + STATUS_FILTERS.filter((f) => f.defaultActive).forEach((f) => state.activeStatuses.add(f.key)); // 4. 필터 적용 및 UI 갱신 applyFilters(); @@ -202,4 +221,3 @@ document.getElementById('logo-title')?.addEventListener('click', () => { // 5. 페이지 최상단으로 스크롤 (선택 사항) window.scrollTo({ top: 0, behavior: 'smooth' }); }); - diff --git a/scripts/main.js b/scripts/main.js index cc708bb..af72a36 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -14,6 +14,8 @@ window.closeModal = closeModal; window.changePage = changePage; window.scrollToImage = scrollToImage; +let fadeTimers = {}; + // 뷰 전환 이벤트 document.getElementById('view-grid').onclick = () => { state.viewMode = 'grid'; @@ -259,56 +261,161 @@ window.exportToExcel = () => { let currentHoverIndex = -1; -window.handleThumbnailHover = (event, productId) => { +window.handleThumbnailHover = (e, productId) => { + if (window.isDragging) return; + const product = productsData.find((p) => p.id === productId); - if (!product || product.images.length <= 1) return; + if (!product || !product.images || product.images.length <= 1) return; - const container = event.currentTarget; - const thumbImg = document.getElementById(`thumb-${productId}`); - const indicator = document.getElementById(`indicator-${productId}`); + const rect = e.currentTarget.getBoundingClientRect(); + const x = e.clientX - rect.left; + let index = Math.floor((x / rect.width) * product.images.length); + index = Math.max(0, Math.min(product.images.length - 1, index)); - const rect = container.getBoundingClientRect(); - const x = event.clientX - rect.left; - const index = Math.min(Math.floor((x / rect.width) * product.images.length), product.images.length - 1); - - // [핵심] 인덱스가 실제로 바뀔 때만 딱 한 번 실행 if (currentHoverIndex !== index) { currentHoverIndex = index; - const targetImgUrl = product.images[index]; - - requestAnimationFrame(() => { - // 이미 프리로드된 상태라면 즉시 교체됨 - thumbImg.style.backgroundImage = `url("${targetImgUrl}")`; - - if (indicator) { - Array.from(indicator.children).forEach((dot, i) => { - if (i === index) { - dot.style.backgroundColor = 'white'; - dot.style.transform = 'scale(1.2)'; - dot.style.opacity = '1'; - } else { - dot.style.backgroundColor = 'rgba(255, 255, 255, 0.4)'; - dot.style.transform = 'scale(1)'; - dot.style.opacity = '0.7'; - } - }); - } - }); + updateThumbnailWithFade(productId, product.images[index], index); } }; +// 페이드 업데이트 함수 +function updateThumbnailWithFade(productId, newImageUrl, index) { + const mainThumb = document.getElementById(`thumb-${productId}`); + const fadeThumb = document.getElementById(`thumb-fade-${productId}`); + const indicator = document.getElementById(`indicator-${productId}`); + + if (!mainThumb || !fadeThumb) return; + + // 기존에 해당 카드에서 돌아가던 타이머가 있다면 즉시 제거 + if (fadeTimers[productId]) { + clearTimeout(fadeTimers[productId]); + } + + // 페이드 레이어 세팅 + fadeThumb.style.transition = 'opacity 0.3s ease-in-out'; + fadeThumb.style.backgroundImage = `url("${newImageUrl}")`; + fadeThumb.style.opacity = '1'; + + // 타이머 시작 + fadeTimers[productId] = setTimeout(() => { + mainThumb.style.backgroundImage = `url("${newImageUrl}")`; + fadeThumb.style.opacity = '0'; + delete fadeTimers[productId]; // 작업 완료 후 타이머 삭제 + }, 300); + + if (indicator) updateIndicatorUI(indicator, index); +} + window.handleThumbnailLeave = (productId) => { currentHoverIndex = -1; // 인덱스 초기화 + + resetThumbnail(productId); +}; + +function resetThumbnail(productId) { + // 1. 진행 중인 모든 페이드 타이머 즉시 파괴 + if (fadeTimers[productId]) { + clearTimeout(fadeTimers[productId]); + delete fadeTimers[productId]; + } + const product = productsData.find((p) => p.id === productId); if (!product) return; - const thumbImg = document.getElementById(`thumb-${productId}`); + const mainThumb = document.getElementById(`thumb-${productId}`); + const fadeThumb = document.getElementById(`thumb-fade-${productId}`); const indicator = document.getElementById(`indicator-${productId}`); - thumbImg.style.backgroundImage = `url("${product.images[0]}")`; - if (indicator) { - Array.from(indicator.children).forEach((dot, i) => { - dot.style.backgroundColor = i === 0 ? 'white' : 'rgba(255,255,255,0.3)'; - }); + if (mainThumb && fadeThumb) { + const firstImg = `url("${product.images[0]}")`; + + // 2. 페이드 레이어를 즉시 숨김 (transition 방해 금지) + fadeThumb.style.transition = 'none'; + fadeThumb.style.opacity = '0'; + + // 3. 두 레이어 모두 첫 번째 이미지로 강제 일치 + mainThumb.style.backgroundImage = firstImg; + fadeThumb.style.backgroundImage = firstImg; + + // 4. 다음 호버를 위해 트랜지션 복구 + setTimeout(() => { + fadeThumb.style.transition = 'opacity 0.3s ease-in-out'; + }, 50); + } + + if (indicator) updateIndicatorUI(indicator, 0); +} + +// 중복 코드를 방지하기 위한 UI 업데이트 헬퍼 +function updateIndicatorUI(indicator, activeIndex) { + Array.from(indicator.children).forEach((dot, i) => { + const isActive = i === activeIndex; + dot.style.backgroundColor = isActive ? 'white' : 'rgba(255, 255, 255, 0.4)'; + dot.style.transform = isActive ? 'scale(1.2)' : 'scale(1)'; + dot.style.opacity = isActive ? '1' : '0.7'; + }); +} + + +// 터치 상태 관리를 위한 변수 +let touchStartX = 0; +let isDragging = false; + +window.handleTouchStart = (e) => { + touchStartX = e.touches[0].clientX; + isDragging = false; +}; + +window.handleTouchMove = (e, productId) => { + const product = productsData.find((p) => p.id === productId); + if (!product || !product.images || product.images.length <= 1) return; + + const cardElement = e.currentTarget; + const cardWidth = cardElement.offsetWidth; + const touchCurrentX = e.touches[0].clientX; + const diffX = touchStartX - touchCurrentX; + + if (Math.abs(diffX) > 10) { + isDragging = true; + if (e.cancelable) e.preventDefault(); + } + + if (isDragging) { + const step = cardWidth / product.images.length; + let index = Math.floor(Math.abs(diffX) / step); + index = Math.max(0, Math.min(product.images.length - 1, index)); + + const mainThumb = document.getElementById(`thumb-${productId}`); + const fadeThumb = document.getElementById(`thumb-fade-${productId}`); + + if (mainThumb && fadeThumb) { + // 드래그 중에는 페이드 없이 즉시 교체 (반응성 우선) + mainThumb.style.backgroundImage = `url("${product.images[index]}")`; + fadeThumb.style.opacity = '0'; // 페이드 레이어 숨김 + updateIndicator(productId, index); + } } }; + +window.handleTouchEnd = (e, productId) => { + if (e.cancelable) e.preventDefault(); + + if (!isDragging) { + window.openModal(productId); + } else { + resetThumbnail(productId); // 드래그 종료 시 확실한 리셋 + } + isDragging = false; +}; + +// 인디케이터 업데이트 헬퍼 함수 +function updateIndicator(productId, index) { + const indicator = document.getElementById(`indicator-${productId}`); + if (indicator) { + Array.from(indicator.children).forEach((dot, i) => { + dot.style.backgroundColor = i === index ? 'white' : 'rgba(255, 255, 255, 0.4)'; + dot.style.opacity = i === index ? '1' : '0.7'; + }); + } +} + diff --git a/scripts/modal.js b/scripts/modal.js index a4abe00..7d5a196 100644 --- a/scripts/modal.js +++ b/scripts/modal.js @@ -95,6 +95,8 @@ export function openModal(id) { } } + + // 제품 상태(specs.condition): 값이 있을 때만 행 노출 const conditionText = product.specs?.condition; const isVerified = product.specs?.isVerified; @@ -119,9 +121,30 @@ export function openModal(id) { } } +// 가격 표시 로직 수정 + const priceElement = document.getElementById('modal-price'); + if (priceElement) { + if (product.status === '미판매') { + // 미판매 상태일 때의 처리 + priceElement.textContent = 'NOT FOR SALE'; + priceElement.classList.add('text-gray-500'); // 시각적으로 구분되도록 스타일 추가 가능 + } else { + // 정상 판매 중인 경우 + priceElement.textContent = `${product.currency}${product.price.toLocaleString()}`; + priceElement.classList.remove('text-gray-500'); + } + } + + // (선택 사항) 미판매 상품일 때 상세 설명 부분에 대체 텍스트를 넣거나 숨기고 싶다면: const modalDesc = document.getElementById('modal-desc'); if (modalDesc) { - modalDesc.innerHTML = Array.isArray(product.fullDescription) ? product.fullDescription.join('
') : product.fullDescription || ''; + if (product.status === '미판매') { + modalDesc.innerHTML = '

판매중인 상품이 아니기에 정보가 제공되지 않습니다.

'; + } else { + modalDesc.innerHTML = Array.isArray(product.fullDescription) + ? product.fullDescription.join('
') + : product.fullDescription || ''; + } } const copyBtn = document.getElementById('copy-link-btn'); @@ -154,13 +177,28 @@ export function openModal(id) { } export function closeModal() { - document.getElementById('product-modal').classList.add('hidden'); + const modal = document.getElementById('product-modal'); + + // 1. 이미지 캐러셀 영역 초기화 + const carouselContainer = document.getElementById('modal-main-carousel-container'); + if (carouselContainer) { + carouselContainer.scrollLeft = 0; + } + + // 2. 우측 상세 정보 스크롤 영역 초기화 (추가된 부분) + const contentScroll = document.getElementById('modal-content-scroll'); + if (contentScroll) { + contentScroll.scrollTo(0, 0); // 스크롤을 맨 위로! + } + + // 모달 닫기 로직 + modal.classList.add('hidden'); document.body.classList.remove('modal-open'); + // 히스토리 및 URL 정리 if (window.history.state && window.history.state.modalOpen) { window.history.back(); } - const cleanUrl = window.location.origin + window.location.pathname; window.history.replaceState(null, '', cleanUrl); } diff --git a/scripts/productList.js b/scripts/productList.js index 58acff5..9e09701 100644 --- a/scripts/productList.js +++ b/scripts/productList.js @@ -67,6 +67,7 @@ export function renderProducts(page = 1) { if (state.viewMode === 'grid') { grid.innerHTML = ''; pagedProducts.forEach((product) => { + // 1. 상태 판별 const isSold = STATUS_META[product.status]?.soldOut === true; const isNonSale = product.status === '미판매'; // 상태값이 '미판매'일 때 @@ -76,82 +77,69 @@ export function renderProducts(page = 1) { const conditionConfig = PRODUCT_CONDITIONS[conditionKey]; const conditionDisplay = conditionConfig ? conditionConfig.label : (conditionKey || ''); - grid.insertAdjacentHTML('beforeend', ` -
+ grid.insertAdjacentHTML('beforeend', ` +
-
-
-
- -
- - ${product.status} - -
- - ${!isSold && product.images?.length > 1 ? ` -
- ${product.images.map((_, i) => ` -
- `).join('')} -
- ` : ''} +
+
-
-
-

- ${product.title} -

-

- ${isNonSale ? 'Not for Sale' : `₩${product.price.toLocaleString()}`} -

-
+
+
-
- ${conditionDisplay ? `${conditionDisplay}` : ''} -

- ${product.description} -

+
+ + ${product.status} + +
+ + ${!isSold && product.images?.length > 1 ? ` +
+ ${product.images.map((_, i) => ` +
+ `).join('')}
+ ` : ''} +
+ +
+
+

+ ${product.title} +

+

+ ${isNonSale ? 'Not for Sale' : `${product.currency || '₩'}${product.price.toLocaleString()}`} +

+
+ +
+ ${conditionDisplay ? `${conditionDisplay}` : ''} +

+ ${product.description} +

- `); +
+`); }); - // 지연 로딩(Lazy Loading) 관찰자 설정 - const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - const card = entry.target; - const productId = card.getAttribute('data-id'); - const product = state.visibleProducts.find(p => p.id === productId); - const thumb = document.getElementById(`thumb-${productId}`); - - if (product && thumb) { - // 1. 첫 번째 이미지 로드 - thumb.style.backgroundImage = `url("${product.images[0]}")`; - - // 2. 마우스 올리기 전, 나머지 이미지들 백그라운드 프리로드 - if (!STATUS_META[product.status]?.soldOut && product.images.length > 1) { - product.images.slice(1).forEach(url => { - const img = new Image(); - img.src = url; - }); - } - } - observer.unobserve(card); - } - }); - }, { threshold: 0.1 }); - - document.querySelectorAll('.product-card').forEach(card => observer.observe(card)); +setupLazyLoading(); } else { // 테이블 렌더링 @@ -204,6 +192,36 @@ export function renderProducts(page = 1) { } } +function setupLazyLoading() { + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const card = entry.target; + const productId = card.getAttribute('data-id'); + // state.js 등에서 가져온 데이터 활용 + const product = state.visibleProducts.find(p => p.id === productId); + const thumb = document.getElementById(`thumb-${productId}`); + + if (product && thumb) { + // 1. 첫 번째 이미지 로드 + thumb.style.backgroundImage = `url("${product.images[0]}")`; + + // 2. 나머지 이미지 프리로드 (반짝임 방지) + if (!STATUS_META[product.status]?.soldOut && product.images.length > 1) { + product.images.slice(1).forEach(url => { + const img = new Image(); + img.src = url; + }); + } + } + observer.unobserve(card); + } + }); + }, { threshold: 0.1 }); + + document.querySelectorAll('.product-card').forEach(card => observer.observe(card)); +} + export function renderPagination() { const container = document.getElementById('pagination'); if (!container) return;