- 카드 전환 방식 변경

- 필터 조건 선택 가능하게 변경 등

data/games.js

@@ -1,84 +1,108 @@
 const games = [
     {
-    id: 'j4r9x6pm',
+        id: 'q8t4m2zs',
-    createdAt: '2026-02-11',
+        createdAt: '2026-02-11',
-    updatedAt: '2026-02-11',
+        updatedAt: '2026-02-11',
 
-    title: '-KATANA Project CompleteBox- 煌花絢爛',
+        title: '아마카노3',
-    price: 250000,
+        price: 200000,
-    currency: '₩',
+        currency: '₩',
-    category: 'PC Games',
+        category: 'Games',
-    status: '미판매',
+        status: '미판매',
-    customTag: 'R19',
+        customTag: '',
 
-    tags: ['PC', 'JP', 'R19'],
+        tags: ['PC', 'JP', 'R19'],
 
-    images: [
+        images: ['/images/games/q8t4m2zs_01.jpg', '/images/games/q8t4m2zs_02.jpg', '/images/games/q8t4m2zs_03.jpg', '/images/games/q8t4m2zs_04.jpg'],
-        '/images/games/j4r9x6pm_01.webp',
-        '/images/games/j4r9x6pm_02.webp',
-        '/images/games/j4r9x6pm_03.webp',
-        '/images/games/j4r9x6pm_04.webp',
-    ],
 
-    description: '미개봉 새제품, 일본 내수용(JP), 한국어 미지원, R19',
+        description: '일본판(JP), R19, 한국어 미지원',
 
-    specs: {
+        specs: {
-        purchaseDate: '',
+            purchaseDate: '',
-        condition: 'BRAND_NEW',
+            condition: 'Brand New (미개봉)',
-        isVerified: true,
+            isVerified: true,
+        },
+
+        fullDescription: ['아마카노3(アマカノ3) PC용 패키지입니다.', '일본 내수용(JP) 제품입니다.', 'R19 성인용 게임입니다.', '한국어는 지원하지 않습니다.', '미개봉 새제품 상태입니다.', '', '아마존 한정 특정: B2 타페스트리(W스에이드), 아크릴 코스터, A4 코튼백 포함', ''],
     },
-
-    fullDescription: [
-        '-KATANA Project CompleteBox- 煌花絢爛 PC용 패키지입니다.',
-        '일본 내수용(JP) 성인용(R19) 제품입니다.',
-        '한국어는 지원하지 않습니다.',
-        '미개봉 새제품 상태입니다.',
-        '',
-        '',
-        '',
-        '',
-    ],
-},
     {
-    id: 'b5k8q2zn',
+        id: 'k3x9p7dm',
-    createdAt: '2026-02-11',
+        createdAt: '2026-02-11',
-    updatedAt: '2026-02-11',
+        updatedAt: '2026-02-11',
 
-    title: '9-nine-',
+        title: '아마카노2+',
-    price: 300000,
+        price: 200000,
-    currency: '₩',
+        currency: '₩',
-    category: 'PC Games',
+        category: 'Games',
-    status: '미판매',
+        status: '미판매',
-    customTag: 'R19',
+        customTag: '',
 
-    tags: ['PC', 'JP', 'Limited Edition', 'R19'],
+        tags: ['PC', 'JP', 'R19'],
 
-    images: [
+        images: ['/images/games/k3x9p7dm_01.jpg', '/images/games/k3x9p7dm_02.jpg', '/images/games/k3x9p7dm_03.jpg', '/images/games/k3x9p7dm_04.jpg'],
-        '/images/games/b5k8q2zn_01.webp',
-        '/images/games/b5k8q2zn_02.webp',
-        '/images/games/b5k8q2zn_03.webp',
-        '/images/games/b5k8q2zn_04.webp',
-    ],
 
-    description: '미개봉 새제품, 호화판, 일본 내수용(JP), 한국어 미지원',
+        description: '일본판(JP), R19, 한국어 미지원',
 
-    specs: {
+        specs: {
-        purchaseDate: '',
+            purchaseDate: '',
-        condition: 'BRAND_NEW',
+            condition: 'Brand New (미개봉)',
-        isVerified: true,
+            isVerified: true,
+        },
+
+        fullDescription: ['아마카노2+(アマカノ2+) PC용 패키지입니다.', '일본 내수용(JP) 제품입니다.', 'R19 성인용 게임입니다.', '한국어는 지원하지 않습니다.', '미개봉 새제품 상태입니다.', '', '', ''],
     },
+    {
+        id: 'j4r9x6pm',
+        createdAt: '2026-02-11',
+        updatedAt: '2026-02-11',
 
-    fullDescription: [
+        title: '-KATANA Project CompleteBox- 煌花絢爛',
-        '9-nine- PC용 패키지입니다.',
+        price: 250000,
-        '일본 내수용(JP) 호화판 제품입니다.',
+        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: '',

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) */
+}
         </style>
     </head>
     <body class="bg-background-light dark:bg-background-dark transition-colors duration-200">
@@ -240,7 +245,7 @@
                         <!-- Right: Details Section (스크롤 영역 + 하단 버튼 고정) -->
                         <div class="w-full md:w-2/5 flex flex-col min-h-0 flex-1 bg-white dark:bg-background-dark overflow-hidden">
                             <!-- 스크롤 영역: 뱃지~설명 (스크롤바 숨김, 설명 잘림 방지) -->
-                            <div class="flex-1 min-h-0 overflow-y-auto no-scrollbar p-4 sm:p-6 md:p-8 lg:p-10">
+                            <div id="modal-content-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar p-4 sm:p-6 md:p-8 lg:p-10">
                                 <!-- Category/Badge: 배지 단위로만 줄바꿈, 중간 사이즈 대응 -->
                                 <div class="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-3 sm:mb-4">
                                     <span

scripts/config.js

@@ -7,6 +7,11 @@ export const ITEMS_PER_PAGE = 20;
 //     showSold: true,
 // };
 
+export const SORT_CONFIG = {
+    PUSH_SOLD_OUT_TO_END: false, // 판매완료를 뒤로 보낼지 여부 (테스트 시 false)
+    PUSH_NON_SALE_TO_END: false, // 미판매를 뒤로 보낼지 여부 (테스트 시 false)
+};
+
 export const STATUS_META = {
     미판매: {
         selectable: false,   // 체크박스 선택 불가

scripts/filters.js

@@ -1,6 +1,6 @@
 /** 상태·카테고리·검색 필터 로직 및 UI */
 import { state, productsData } from './state.js';
-import { ITEMS_PER_PAGE, STATUS_META, STATUS_FILTERS, STATUS_ORDER, STATUS_COLOR, SEARCH_CONFIG,  } from './config.js';
+import { ITEMS_PER_PAGE, STATUS_META, STATUS_FILTERS, STATUS_ORDER, STATUS_COLOR, SEARCH_CONFIG, SORT_CONFIG } from './config.js';
 import { renderProducts } from './productList.js';
 
 function getStatusChipClass(status, isActive) {
@@ -19,7 +19,7 @@ export function renderStatusChips() {
     // 이제 config에서 자동 생성된 STATUS_FILTERS를 사용합니다.
     STATUS_FILTERS.forEach(({ key, label }) => {
         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 ${
+        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'}`;
-            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' });
 });
-

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 rect = e.currentTarget.getBoundingClientRect();
-    const thumbImg = document.getElementById(`thumb-${productId}`);
+    const x = e.clientX - rect.left;
-    const indicator = document.getElementById(`indicator-${productId}`);
+    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];
+        updateThumbnailWithFade(productId, product.images[index], 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';
-                    }
-                });
-            }
-        });
     }
 };
 
+// 페이드 업데이트 함수
+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 (mainThumb && fadeThumb) {
-    if (indicator) {
+        const firstImg = `url("${product.images[0]}")`;
-        Array.from(indicator.children).forEach((dot, i) => {
+
-            dot.style.backgroundColor = i === 0 ? 'white' : 'rgba(255,255,255,0.3)';
+        // 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';
+        });
+    }
+}
+

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('<br>') : product.fullDescription || '';
+        if (product.status === '미판매') {
+            modalDesc.innerHTML = '<p class="text-gray-400 italic">판매중인 상품이 아니기에 정보가 제공되지 않습니다.</p>';
+        } else {
+            modalDesc.innerHTML = Array.isArray(product.fullDescription) 
+                ? product.fullDescription.join('<br>') 
+                : 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);
 }

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', `
-        <div class="product-card group flex flex-col gap-4 cursor-pointer" 
+    <div class="product-card group flex flex-col gap-4 cursor-pointer" 
-            data-id="${product.id}"
+        data-id="${product.id}"
-            onclick="window.openModal('${product.id}')"
+        onclick="if(!window.isDragging) window.openModal('${product.id}')"
-            ${!isSold ? `onmousemove="window.handleThumbnailHover(event, '${product.id}')" 
+        
-                        onmouseleave="window.handleThumbnailLeave('${product.id}')"` : ''}>
+        ${!isSold ? `
+            onmousemove="window.handleThumbnailHover(event, '${product.id}')" 
+            onmouseleave="window.handleThumbnailLeave('${product.id}')"
+            ontouchstart="window.handleTouchStart(event)"
+            ontouchmove="window.handleTouchMove(event, '${product.id}')"
+            ontouchend="window.handleTouchEnd(event, '${product.id}')"
+        ` : `
+            ontouchend="window.handleTouchEnd(event, '${product.id}')"
+        `}>
 
-            <div class="relative w-full aspect-card bg-slate-200 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm">
+        <div class="relative w-full aspect-card bg-slate-200 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm">
-                <div id="thumb-${product.id}"
+            <div id="thumb-${product.id}"
-                    class="w-full h-full bg-center bg-no-repeat bg-cover transform ${isSold ? 'grayscale opacity-60' : 'group-hover:scale-105 transition-transform duration-500'}"
+                class="w-full h-full bg-center bg-no-repeat bg-cover absolute inset-0 transform transition-transform duration-500 ${isSold ? 'grayscale opacity-60' : 'group-hover:scale-105'}"
-                    style="background-image: none; will-change: background-image;">
+                style="background-image: none; will-change: background-image;">
-                </div>
-
-                <div class="absolute top-3 left-3">
-                    <span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded ${STATUS_COLOR[product.status]} backdrop-blur-md border">
-                        ${product.status}
-                    </span>
-                </div>
-
-                ${!isSold && product.images?.length > 1 ? `
-                    <div id="indicator-${product.id}" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none">
-                        ${product.images.map((_, i) => `
-                            <div class="w-1.5 h-1.5 rounded-full transition-all duration-300 shadow-sm ${i === 0 ? 'bg-white scale-125' : 'bg-white/40'}"></div>
-                        `).join('')}
-                    </div>
-                ` : ''}
             </div>
 
-            <div class="flex flex-col gap-1.5">
+            <div id="thumb-fade-${product.id}"
-                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-baseline gap-1">
+                class="w-full h-full bg-center bg-no-repeat bg-cover absolute inset-0 opacity-0 transition-opacity duration-300 pointer-events-none transform transition-transform duration-500 ${isSold ? 'grayscale' : 'group-hover:scale-105'}"
-                    <h3 class="text-slate-900 dark:text-white text-base font-semibold leading-tight break-keep ${isSold ? 'line-through text-slate-400' : ''}">
+                style="background-image: none; will-change: background-image, opacity;">
-                        ${product.title}
+            </div>
-                    </h3>
-                    <p class="text-base font-bold whitespace-nowrap ${isNonSale ? 'text-slate-400 font-medium text-xs uppercase' : 'text-slate-900 dark:text-white'}">
-                        ${isNonSale ? 'Not for Sale' : `₩${product.price.toLocaleString()}`}
-                    </p>
-                </div>
 
-                <div class="flex flex-col">
+            <div class="absolute top-3 left-3 z-10">
-                    ${conditionDisplay ? `<span class="text-[11px] font-medium text-slate-400 mb-0.5">${conditionDisplay}</span>` : ''}
+                <span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded ${STATUS_COLOR[product.status]} backdrop-blur-md border">
-                    <p class="text-slate-500 dark:text-slate-400 text-sm font-normal line-clamp-1 italic">
+                    ${product.status}
-                        ${product.description}
+                </span>
-                    </p>
+            </div>
+
+            ${!isSold && product.images?.length > 1 ? `
+                <div id="indicator-${product.id}" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-10">
+                    ${product.images.map((_, i) => `
+                        <div class="w-1.5 h-1.5 rounded-full transition-all duration-300 shadow-sm ${i === 0 ? 'bg-white scale-125' : 'bg-white/40'}"></div>
+                    `).join('')}
                 </div>
+            ` : ''}
+        </div>
+
+        <div class="flex flex-col gap-1.5">
+            <div class="flex flex-col justify-between items-start sm:items-baseline gap-1">
+                <h3 class="text-slate-900 dark:text-white text-base font-semibold leading-tight break-keep ${isSold ? 'line-through text-slate-400' : ''}">
+                    ${product.title}
+                </h3>
+                <p class="text-base font-bold whitespace-nowrap ${isNonSale ? 'text-slate-400 font-medium text-xs uppercase' : 'text-slate-900 dark:text-white'}">
+                    ${isNonSale ? 'Not for Sale' : `${product.currency || '₩'}${product.price.toLocaleString()}`}
+                </p>
+            </div>
+
+            <div class="flex flex-col">
+                ${conditionDisplay ? `<span class="text-[11px] font-medium text-slate-400 mb-0.5">${conditionDisplay}</span>` : ''}
+                <p class="text-slate-500 dark:text-slate-400 text-sm font-normal line-clamp-1 italic">
+                    ${product.description}
+                </p>
             </div>
         </div>
-    `);
+    </div>
+`);
 });
 
-        // 지연 로딩(Lazy Loading) 관찰자 설정
+setupLazyLoading();
-        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));
 
     } 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;