[260204] 샘플 파일 적용

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 300,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "auto",
+  "htmlWhitespaceSensitivity": "ignore",
+  "embeddedLanguageFormatting": "off"
+}

data.js

@@ -1,205 +1,207 @@
-
 const products = [
     {
-        id: 10,
+        id: 1,
-        title: "iPhone 10 Pro",
+        title: '플로럴 플로우러브',
-        price: 750000,
+        price: 60000,
-        currency: "₩",
+        currency: '₩',
-        category: "Tech",
+        category: 'Games',
-        status: "판매중", // 판매중, Sold
+        status: '판매중', //판매중, 판매예정, 미판매, 판매완료
-        description: "Sierra Blue, 256GB, Pristine condition.",
+        description: '미개봉, 한정판, 일본판, 한글미지원',
-        fullDescription: "Pristine condition, used for less than 2 months. Battery health 99%.",
+        fullDescription: [
-        images: [
+            '닌텐도 스위치 일본 내수용(JP) 패키지입니다.',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            '인게임 한국어 자막을 공식 지원합니다.',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            '',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            '『완전생산한정판』 구성품:',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            '• 특제 일러스트 아우터 박스',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            '• 오리지널 사운드트랙 CD (미개봉)',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            '• 풀컬러 아트북 (48P)',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            '',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            '보관용으로 구매하여 슈링크(비닐) 상태 매우 깨끗하며,',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            '암소 보관하여 박스 변색이나 모서리 눌림 없습니다.',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            '',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            '',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            '',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs"
+            '',
         ],
+        images: ['/images/games/20260204_002254.jpg'],
+        customTag: '완전생산한정판',
         specs: {
-            purchaseDate: "2023-10",
+            purchaseDate: '',
-            condition: "Mint (S-Grade)"
+            condition: 'Brand New (미개봉)',
-        }
+            isVerified: true,
+        },
     },
     {
         id: 9,
-        title: "iPhone 9 Pro",
+        title: 'iPhone 9 Pro',
         price: 750000,
-        currency: "₩",
+        currency: '₩',
         category: 'Design',
-        status: "판매예정", // 판매중, Sold
+        status: '판매예정', // 판매중, Sold
-        description: "Sierra Blue, 256GB, Pristine condition.",
+        description: 'Sierra Blue, 256GB, Pristine condition.',
-        fullDescription: "Pristine condition, used for less than 2 months. Battery health 99%.",
+        fullDescription: 'Pristine condition, used for less than 2 months. Battery health 99%.',
         images: [
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs"
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs',
         ],
         specs: {
-            purchaseDate: "2023-10",
+            purchaseDate: '2023-10',
-            condition: "Mint (S-Grade)"
+            condition: 'Mint (S-Grade)',
-        }
+        },
     },
     {
         id: 8,
-        title: "iPhone 8 Pro",
+        title: 'iPhone 8 Pro',
         price: 750000,
-        currency: "₩",
+        currency: '₩',
-        category: "Games",
+        category: 'Games',
-        status: "판매완료",
+        status: '판매완료',
-        description: "Sierra Blue, 256GB, Pristine condition.",
+        description: 'Sierra Blue, 256GB, Pristine condition.',
-        fullDescription: "Pristine condition, used for less than 2 months. Battery health 99%.",
+        fullDescription: 'Pristine condition, used for less than 2 months. Battery health 99%.',
         images: [
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs"
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs',
         ],
         specs: {
-            purchaseDate: "2023-10",
+            purchaseDate: '2023-10',
-            condition: "Mint (S-Grade)"
+            condition: 'Mint (S-Grade)',
-        }
+        },
     },
     {
         id: 7,
-        title: "iPhone 7 Pro",
+        title: 'iPhone 7 Pro',
         price: 750000,
-        currency: "₩",
+        currency: '₩',
-        category: "Tech",
+        category: 'Tech',
-        status: "판매예정", // 판매중, Sold
+        status: '판매예정', // 판매중, Sold
-        description: "Sierra Blue, 256GB, Pristine condition.",
+        description: 'Sierra Blue, 256GB, Pristine condition.',
-        fullDescription: "Pristine condition, used for less than 2 months. Battery health 99%.",
+        fullDescription: 'Pristine condition, used for less than 2 months. Battery health 99%.',
         images: [
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs"
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs',
         ],
         specs: {
-            purchaseDate: "2023-10",
+            purchaseDate: '2023-10',
-            condition: "Mint (S-Grade)"
+            condition: 'Mint (S-Grade)',
-        }
+        },
     },
     {
         id: 6,
-        title: "iPhone 6 Pro",
+        title: 'iPhone 6 Pro',
         price: 750000,
-        currency: "₩",
+        currency: '₩',
-        category: "Tech",
+        category: 'Tech',
-        status: "판매중", // 판매중, Sold
+        status: '판매중', // 판매중, Sold
-        description: "Sierra Blue, 256GB, Pristine condition.",
+        description: 'Sierra Blue, 256GB, Pristine condition.',
-        fullDescription: "Pristine condition, used for less than 2 months. Battery health 99%.",
+        fullDescription: 'Pristine condition, used for less than 2 months. Battery health 99%.',
         images: [
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs"
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs',
         ],
         specs: {
-            purchaseDate: "2023-10",
+            purchaseDate: '2023-10',
-            condition: "Mint (S-Grade)"
+            condition: 'Mint (S-Grade)',
-        }
+        },
     },
     {
         id: 5,
-        title: "iPhone 5 Pro",
+        title: 'iPhone 5 Pro',
         price: 750000,
-        currency: "₩",
+        currency: '₩',
-        category: "Tech",
+        category: 'Tech',
-        status: "판매중", // 판매중, Sold
+        status: '판매중', // 판매중, Sold
-        description: "Sierra Blue, 256GB, Pristine condition.",
+        description: 'Sierra Blue, 256GB, Pristine condition.',
-        fullDescription: "Pristine condition, used for less than 2 months. Battery health 99%.",
+        fullDescription: 'Pristine condition, used for less than 2 months. Battery health 99%.',
         images: [
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs"
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs',
         ],
         specs: {
-            purchaseDate: "2023-10",
+            purchaseDate: '2023-10',
-            condition: "Mint (S-Grade)"
+            condition: 'Mint (S-Grade)',
-        }
+        },
     },
     {
         id: 4,
-        title: "iPhone 4 Pro",
+        title: 'iPhone 4 Pro',
         price: 750000,
-        currency: "₩",
+        currency: '₩',
-        category: "Tech",
+        category: 'Tech',
-        status: "판매중", // 판매중, Sold
+        status: '판매중', // 판매중, Sold
-        description: "Sierra Blue, 256GB, Pristine condition.",
+        description: 'Sierra Blue, 256GB, Pristine condition.',
-        fullDescription: "Pristine condition, used for less than 2 months. Battery health 99%.",
+        fullDescription: 'Pristine condition, used for less than 2 months. Battery health 99%.',
         images: [
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs"
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs',
         ],
         specs: {
-            purchaseDate: "2023-10",
+            purchaseDate: '2023-10',
-            condition: "Mint (S-Grade)"
+            condition: 'Mint (S-Grade)',
-        }
+        },
     },
     {
         id: 3,
-        title: "iPhone 3 Pro",
+        title: 'iPhone 3 Pro',
         price: 750000,
-        currency: "₩",
+        currency: '₩',
-        category: "Tech",
+        category: 'Tech',
-        status: "판매중", // 판매중, Sold
+        status: '판매중', // 판매중, Sold
-        description: "Sierra Blue, 256GB, Pristine condition.",
+        description: 'Sierra Blue, 256GB, Pristine condition.',
-        fullDescription: "Pristine condition, used for less than 2 months. Battery health 99%.",
+        fullDescription: 'Pristine condition, used for less than 2 months. Battery health 99%.',
         images: [
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs"
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs',
         ],
         specs: {
-            purchaseDate: "2023-10",
+            purchaseDate: '2023-10',
-            condition: "Mint (S-Grade)"
+            condition: 'Mint (S-Grade)',
-        }
+        },
     },
     {
         id: 2,
-        title: "iPhone 2 Pro",
+        title: 'iPhone 2 Pro',
         price: 750000,
-        currency: "₩",
+        currency: '₩',
-        category: "Tech",
+        category: 'Tech',
-        status: "판매중", // 판매중, Sold
+        status: '판매중', // 판매중, Sold
-        description: "Sierra Blue, 256GB, Pristine condition.",
+        description: 'Sierra Blue, 256GB, Pristine condition.',
-        fullDescription: "Pristine condition, used for less than 2 months. Battery health 99%.",
+        fullDescription: 'Pristine condition, used for less than 2 months. Battery health 99%.',
         images: [
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs"
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs',
         ],
         specs: {
-            purchaseDate: "2023-10",
+            purchaseDate: '2023-10',
-            condition: "Mint (S-Grade)"
+            condition: 'Mint (S-Grade)',
-        }
+        },
     },
     {
         id: 1,
-        title: "iPhone 13 Pro",
+        title: 'iPhone 13 Pro',
         price: 750000,
-        currency: "₩",
+        currency: '₩',
-        category: "Tech",
+        category: 'Tech',
-        status: "판매예정", // 판매중, Sold
+        status: '판매예정', // 판매중, Sold
-        description: "Sierra Blue, 256GB, Pristine condition.",
+        description: 'Sierra Blue, 256GB, Pristine condition.',
-        fullDescription: "Pristine condition, used for less than 2 months. Battery health 99%.",
+        fullDescription: 'Pristine condition, used for less than 2 months. Battery health 99%.',
         images: [
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc",
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc',
-            "https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs"
+            'https://lh3.googleusercontent.com/aida-public/AB6AXuA7hmGyvHzZaWVIskqdD5YU8lZM79hZ0JQjlKk75lRwcbonNCkKqS1EmRqbRzgcdq4AF6nOitcS23NvUZJ4aq_kt_pC2tG875KcVuro1hpXzdRixXHg5p0Dj0WTAaHyfc7GRWqFwOG3Sj0WOyXxULWDvKCR92rySu5iZz7hM6j73uP9i5QRRrkukQIzJWyx_KKmBc_uHX6v0MRn05_uttHQCtBeMUiabXwujqea0pay9fk7jC2mWHS5DaweeVv7SYuXSvypdJRZggs',
         ],
         specs: {
-            purchaseDate: "2023-10",
+            purchaseDate: '2023-10',
-            condition: "Mint (S-Grade)"
+            condition: 'Mint (S-Grade)',
-        }
+        },
     },
     // ... 추가 상품 데이터 (8~12개 이상)
 ];
-export default products;
+export default products;

index.html

@@ -38,37 +38,37 @@
             }
         </script>
         <style>
-            .material-symbols-outlined {
+                        .material-symbols-outlined {
-                font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+                            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+                        }
+                        body {
+                            font-family: 'Inter', sans-serif;
+                        }
+                        /* 스크롤바 완전히 숨기기 */
+                        .no-scrollbar::-webkit-scrollbar {
+                            display: none;
+                        }
+                        .no-scrollbar {
+                            -ms-overflow-style: none; /* IE and Edge */
+                            scrollbar-width: none; /* Firefox */
+                        }
+
+                        #modal-main-carousel-container {
+              scroll-snap-type: none;
+              overflow-x: hidden;
             }
-            body {
+            .filter-chip,
-                font-family: 'Inter', sans-serif;
+            .status-chip {
-            }
+              @apply px-4 py-2 rounded-full text-sm font-medium transition
-            /* 스크롤바 완전히 숨기기 */
+                     border border-slate-200 dark:border-slate-700
-            .no-scrollbar::-webkit-scrollbar {
+                     bg-slate-50 dark:bg-slate-800
-                display: none;
+                     text-slate-700 dark:text-slate-300;
-            }
-            .no-scrollbar {
-                -ms-overflow-style: none; /* IE and Edge */
-                scrollbar-width: none; /* Firefox */
             }
 
-            #modal-main-carousel-container {
+            .filter-chip.active,
-  scroll-snap-type: none;
+            .status-chip.active {
-  overflow-x: hidden;
+              @apply bg-primary text-white border-primary;
-}
+            }
-.filter-chip,
-.status-chip {
-  @apply px-4 py-2 rounded-full text-sm font-medium transition
-         border border-slate-200 dark:border-slate-700
-         bg-slate-50 dark:bg-slate-800
-         text-slate-700 dark:text-slate-300;
-}
-
-.filter-chip.active,
-.status-chip.active {
-  @apply bg-primary text-white border-primary;
-}
         </style>
     </head>
     <body class="bg-background-light dark:bg-background-dark transition-colors duration-200">
@@ -81,7 +81,7 @@
                             <div class="flex items-center justify-center size-8 bg-primary rounded-lg text-white">
                                 <span class="material-symbols-outlined text-xl">inventory_2</span>
                             </div>
-                            <h2 class="text-lg font-bold leading-tight tracking-tight">Studio Archive</h2>
+                            <h2 class="text-lg font-bold leading-tight tracking-tight">sori.inventory</h2>
                         </div>
                         <!-- <nav class="hidden md:flex items-center gap-8">
                             <a class="text-slate-900 dark:text-slate-100 text-sm font-medium hover:text-primary transition-colors" href="#">Collection</a>
@@ -95,7 +95,7 @@
                                 <div class="text-slate-400 flex items-center justify-center pl-3">
                                     <span class="material-symbols-outlined text-[20px]">search</span>
                                 </div>
-                                <input id="search-input" class="form-input flex w-full min-w-0 flex-1 border-none bg-transparent focus:outline-0 focus:ring-0 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 px-3 text-sm font-normal" placeholder="Search items..." value="" />
+                                <input id="search-input" class="form-input flex w-full min-w-0 flex-1 border-none bg-transparent focus:outline-0 focus:ring-0 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 px-3 text-sm font-normal" placeholder="검색어 입력..." value="" />
                             </div>
                         </label>
                         <!-- <div
@@ -107,34 +107,32 @@
                 <main class="flex-1">
                     <!-- Headline Section -->
                     <div class="px-6 md:px-40 py-12 flex flex-col items-center">
-                        <h1 class="text-slate-900 dark:text-white tracking-tight text-3xl md:text-5xl font-bold leading-tight text-center max-w-3xl">Curated quality items for your creative workspace.</h1>
+                        <h2 class="text-slate-900 dark:text-white tracking-tight text-3xl md:text-5xl font-bold leading-tight text-center max-w-3xl">
-                        <p class="mt-4 text-slate-500 dark:text-slate-400 text-center text-lg max-w-xl">A personal collection of tech, furniture, and tools, looking for their next home.</p>
+                            일상의 조각들,
+                            <br />
+                            그리고 취향의 공유.
+                        </h2>
+                        <p class="mt-4 text-slate-500 dark:text-slate-400 text-center text-lg max-w-xl break-keep">현재 제 곁에서 일상을 채우고 있는 도구와 물건들입니다. 때로는 기록으로, 때로는 누군가를 위한 제안으로 이 공간을 채워갑니다.</p>
                     </div>
                     <!--  -->
-                    
-<section class="mb-8 px-6 md:px-40">
-  <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 flex flex-col gap-4">
 
-    <!-- 카테고리 -->
+                    <section class="mb-8 px-6 md:px-40">
-    <div class="flex flex-col gap-2">
+                        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 flex flex-col gap-4">
-      <h4 class="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                            <!-- 카테고리 -->
-        Category
+                            <div class="flex flex-col gap-2">
-      </h4>
+                                <h4 class="text-xs font-semibold uppercase tracking-wider text-slate-500">Category</h4>
-      <div id="filter-chips" class="flex flex-wrap gap-2"></div>
+                                <div id="filter-chips" class="flex flex-wrap gap-2"></div>
-    </div>
+                            </div>
 
-    <div class="h-px bg-slate-100 dark:bg-slate-700"></div>
+                            <div class="h-px bg-slate-100 dark:bg-slate-700"></div>
 
-    <!-- 상태 -->
+                            <!-- 상태 -->
-    <div class="flex flex-col gap-2">
+                            <div class="flex flex-col gap-2">
-      <h4 class="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                                <h4 class="text-xs font-semibold uppercase tracking-wider text-slate-500">Status</h4>
-        Status
+                                <div id="status-chips" class="flex flex-wrap gap-2"></div>
-      </h4>
+                            </div>
-      <div id="status-chips" class="flex flex-wrap gap-2"></div>
+                        </div>
-    </div>
+                    </section>
-
-  </div>
-</section>
                     <!-- Filters/Chips Section -->
 
                     <div class="px-6 md:px-40 flex justify-center">
@@ -160,9 +158,9 @@
                     </div>
                     <!-- Product Grid -->
                     <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 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">
                             <!-- Product Item -->
-                            <div class="group flex flex-col gap-4">
+                            <!-- <div class="group flex flex-col gap-4">
                                 <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="w-full h-full bg-center bg-no-repeat bg-cover transform group-hover:scale-105 transition-transform duration-500"
@@ -179,20 +177,19 @@
                                     </div>
                                     <p class="text-slate-500 dark:text-slate-400 text-sm font-normal">Sierra Blue, 256GB, Pristine</p>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                     </div>
                     <!-- Pagination -->
                     <div class="px-6 md:px-40 py-12">
-                        <div id="pagination" class="flex items-center justify-center gap-2">
+                        <div id="pagination" class="flex items-center justify-center gap-2"></div>
-                        </div>
                     </div>
                 </main>
                 <!-- Modal -->
                 <!-- Backdrop Overlay -->
                 <div id="product-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4 md:p-10 hidden" onclick="if(event.target === this) closeModal()">
                     <!-- Modal Container -->
-                    <div class="relative w-full max-w-6xl max-h-[90vh] bg-white dark:bg-background-dark rounded-xl shadow-2xl overflow-hidden flex flex-col md:flex-row border border-gray-200 dark:border-gray-800">
+                    <div class="relative w-full max-w-6xl max-h-[90vh] min-h-[60vh] bg-white dark:bg-background-dark rounded-xl shadow-2xl overflow-hidden flex flex-col md:flex-row border border-gray-200 dark:border-gray-800">
                         <!-- Close Button -->
                         <button onclick="closeModal()" class="absolute top-4 right-4 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-white/80 dark:bg-gray-800/80 backdrop-blur hover:bg-white dark:hover:bg-gray-700 transition-colors shadow-sm">
                             <span class="material-symbols-outlined text-gray-900 dark:text-white">close</span>
@@ -219,26 +216,15 @@
                             </div>
                             <!-- Side Thumbnails (Visible on Large Screens) -->
                             <div id="modal-thumbnails" class="hidden lg:flex absolute left-4 top-1/2 -translate-y-1/2 flex-col gap-3 max-h-[70vh] overflow-y-auto no-scrollbar pr-1">
-                                <div
-                                    class="size-16 rounded-lg border-2 border-primary bg-cover bg-center overflow-hidden cursor-pointer"
-                                    data-alt="Thumbnail front view"
-                                    style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBFrW2dPhArwFKxHL3LH03GD_jG31BBbMo0Dfkz7QOOhw7j5e-11atdSMyIhfiQiILtIulqm20x3fMcXr50IbtwKu3cZLMwpPbNqsnHyZiIB1jZL3a-Fvaq95WLPmyWZU82rrpFZozX2ICjWK4H1oO0Q1VuyIksmBoKaXce3-HxGY_pD8HuO1ua_PgT_ZGTTVagbUpcDDuUjbqEZ_Xd9XY74NyYBP-CwuG0ab_rvav-c9DFrkxQ1PKe-TLvJf-lXAA1iuEkhdKGVDQ");'></div>
-                                <div
-                                    class="size-16 rounded-lg border border-transparent bg-cover bg-center overflow-hidden cursor-pointer opacity-70 hover:opacity-100"
-                                    data-alt="Thumbnail side view"
-                                    style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAq1q1Tdi4V77S-ZpUxbkru_BT1vkcqXqQELpgawTTZ-iNZEM2VRXChC2bpa38TSAGt8TCyZ1exgHFPCwaswHv4d4SS-8EfpDv3hYwyvYWbl6j9-gSpmTsaRQE2Sn86yRkrABWZSA68TMtZaI138Q440vVOS52qd_cINWShrdv-rM-DgW2q15sWcWToiqLtiDnpGiQMHOK8BU97VOLd-9WPP-WQSUqf8FCuho2PvmupnqrYvrBWjN83upohCeer5xMQWpMGoIbZztg");'></div>
-                                <div
-                                    class="size-16 rounded-lg border border-transparent bg-cover bg-center overflow-hidden cursor-pointer opacity-70 hover:opacity-100"
-                                    data-alt="Thumbnail case view"
-                                    style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDvRgvsYOJNQ2ow1S9CIvQ20TEk6U75hkG-ZNfwYk_htB6pRZNw87XJvXZGtRIva58DthJxX_yPNsbUPwntguucSfqBdeFERyYx_sH0Ta-KqZhwKpnCpCLUdFli_JgSzg2L-s5UsYPadChOKdsiV2iieblFwRFkB_0_Qap99PY7W6mZ5KFzpyx3M4LhBJnq06MQlJF6_P5NSBUbMy2VxveNFQWb8wMuJVTK8GC_XeVvC9wdxuf9fZOLAMc6wB_vY_LgBBRsfCb-8Tw");'></div>
                             </div>
                         </div>
                         <!-- Right: Details Section -->
                         <div class="w-full md:w-2/5 flex flex-col h-full bg-white dark:bg-background-dark p-6 md:p-10 overflow-y-auto">
                             <!-- Category/Badge -->
                             <div class="flex items-center gap-2 mb-4">
-                                <span id="modal-category" class="px-2.5 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs font-bold uppercase tracking-wider">Audio &amp; Tech</span>
+                                <span id="modal-category" class="px-2.5 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs font-bold uppercase tracking-wider"></span>
-                                <span id="modal-status" class="px-2.5 py-1 rounded-lg bg-green-100 text-green-700 text-xs font-bold uppercase tracking-wider">Available</span>
+                                <span id="modal-status" class="px-2.5 py-1 rounded-lg bg-green-100 text-green-700 text-xs font-bold uppercase tracking-wider"></span>
+                                <span id="modal-custom-tag" class="hidden px-2.5 py-1 rounded-lg text-xs font-bold uppercase tracking-wider"></span>
                             </div>
                             <!-- Title -->
                             <h1 id="modal-title" class="text-[#111418] dark:text-white text-3xl font-black leading-tight tracking-tight mb-2">Sony WH-1000XM5 Noise Canceling Headphones</h1>
@@ -246,24 +232,27 @@
                             <p id="modal-price" class="text-[#111418] dark:text-white text-4xl font-bold mb-8">₩320,000</p>
                             <!-- Spec List -->
                             <div class="space-y-0 mb-8">
-                                <div class="flex items-center justify-between py-4 border-t border-gray-100 dark:border-gray-800">
+                                <div id="modal-date-row" class="flex items-center justify-between py-4 border-t border-gray-100 dark:border-gray-800">
-                                    <span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">Purchase Date</span>
+                                    <span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">구매일자</span>
                                     <span id="modal-date" class="text-[#111418] dark:text-white text-sm font-semibold">October 2023</span>
                                 </div>
                                 <div class="flex items-center justify-between py-4 border-t border-gray-100 dark:border-gray-800">
-                                    <span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">Condition Status</span>
+                                    <span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">제품 상태</span>
-                                    <div class="flex items-center gap-1.5">
+                                    <div id="modal-condition-row" class="flex items-center justify-between border-t border-gray-100 dark:border-gray-800">
-                                        <span class="material-symbols-outlined text-primary text-lg">verified</span>
+                                        <div class="flex items-center gap-1.5">
-                                        <span id="modal-condition" class="text-[#111418] dark:text-white text-sm font-semibold">Mint (S-Grade)</span>
+                                            <svg id="modal-verified-icon" class="w-5 h-5 text-primary hidden" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+                                                <path d="M9 11l3 3L22 4"></path>
+                                                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+                                            </svg>
+                                            <span id="modal-condition" class="text-[#111418] dark:text-white text-sm font-semibold"></span>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                             <!-- Description -->
-                            <div class="mb-10">
+                            <div class="mb-10 min-h-80">
-                                <h3 class="text-[#111418] dark:text-white text-sm font-bold uppercase tracking-widest mb-3">Item Description</h3>
+                                <h3 class="text-[#111418] dark:text-white text-sm font-bold uppercase tracking-widest mb-3">제품 설명</h3>
-                                <p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-base leading-relaxed">
+                                <p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-base leading-relaxed"></p>
-                                    Pristine condition, used for less than 2 months for office work only. No visible scratches or dents. Battery health is at 99%. Comes with original retail box, carrying case, USB-C charging cable, and 3.5mm jack. Selling as I switched to a different setup.
-                                </p>
                             </div>
                             <!-- Footer / CTA -->
                             <div class="mt-auto pt-6 border-t border-gray-100 dark:border-gray-800">
@@ -271,7 +260,7 @@
                                     <span class="material-symbols-outlined">chat_bubble</span>
                                     <span>오픈카톡으로 문의하기</span>
                                 </button>
-                                <p class="text-center text-xs text-gray-400 dark:text-gray-500 mt-4 font-medium">Secure transaction recommended. Ships within 24 hours.</p>
+                                <p class="text-center text-xs text-gray-400 dark:text-gray-500 mt-4 font-medium">입금 확인 후, 24시간 이내 발송</p>
                             </div>
                         </div>
                     </div>

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "zenn-inventory",
+  "name": "zenn.inventory",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

scripts/app.js

@@ -1,6 +1,6 @@
 import products from '/data.js';
 
-const ITEMS_PER_PAGE = 8;
+const ITEMS_PER_PAGE = 20;
 let currentPage = 1;
 let activeCategories = new Set(['All']);
 let visibleProducts = products;
@@ -8,12 +8,12 @@ let searchKeyword = '';
 
 const VISIBILITY_CONFIG = {
     showUnlisted: false, // 🔥 미판매 노출 여부
-    showSold: true,
+    showSold: true, // 🔥 판매완료 노출 여부
 };
 
 const STATUS_META = {
     미판매: {
-        selectable: false, // 기본 필터에 안 뜸
+        selectable: false,
         defaultVisible: false,
         soldOut: false,
     },
@@ -242,7 +242,7 @@ window.openModal = (id) => {
         .map(
             (img) => `
         <div class="flex-shrink-0 w-full h-full snap-center flex items-center justify-center p-4 select-none">
-            <img src="${img}" draggable="false" class="max-w-full max-h-full object-contain pointer-events-none shadow-sm">
+            <img src="${img}" draggable="false" class="max-w-full max-h-full object-contain pointer-events-none shadow-sm rounded-lg">
         </div>
     `,
         )
@@ -270,11 +270,112 @@ window.openModal = (id) => {
         )
         .join('');
 
+    const customTagElement = document.getElementById('modal-custom-tag');
+    const tagText = product.customTag;
+
+    if (tagText && tagText.trim() !== '') {
+        customTagElement.textContent = tagText;
+        customTagElement.classList.remove('hidden');
+
+        // 키워드별 색상 스타일 정의
+        const tagStyles = {
+            완전생산한정판: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
+            특전포함: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400',
+            미개봉: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
+            무료배송: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+        };
+
+        // 기본 스타일 (정의되지 않은 텍스트일 경우)
+        const defaultStyle = 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400';
+
+        // 기존 스타일 클래스 초기화 후 적용
+        customTagElement.className = `px-2.5 py-1 rounded-lg text-xs font-bold uppercase tracking-wider ${tagStyles[tagText] || defaultStyle}`;
+    } else {
+        customTagElement.classList.add('hidden');
+    }
+
+    const modalCategory = document.getElementById('modal-category');
+    if (modalCategory) {
+        modalCategory.textContent = product.category;
+    }
+
+    // 2. 상태값 업데이트 (상태에 따른 디자인 변경 포함)
+    const modalStatus = document.getElementById('modal-status');
+    if (modalStatus) {
+        modalStatus.textContent = product.status;
+
+        // 상태별 스타일 정의 (배경색, 글자색)
+        const statusStyles = {
+            판매중: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+            판매예정: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+            판매완료: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+            미판매: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400',
+        };
+
+        // 기존 클래스 제거 후 해당 상태의 스타일 추가
+        modalStatus.className = 'px-2.5 py-1 rounded-lg text-xs font-bold uppercase tracking-wider ' + (statusStyles[product.status] || statusStyles['미판매']);
+    }
+
     // HTML 주입
     document.getElementById('modal-main-carousel').innerHTML = mainImagesHtml;
     document.getElementById('modal-thumbnails').innerHTML = thumbnailsHtml;
     document.getElementById('modal-dots').innerHTML = dotsHtml;
 
+    // 1. 제품 상태 (specs.condition) 업데이트
+    const conditionText = product.specs?.condition;
+    const isVerified = product.specs?.isVerified;
+
+    const conditionRow = document.getElementById('modal-condition-row');
+    const conditionValue = document.getElementById('modal-condition');
+    const verifiedIcon = document.getElementById('modal-verified-icon');
+
+    // 1. 그레이드(condition) 값이 있는지 체크하여 라인 노출 결정
+    if (conditionText && conditionText.trim() !== '') {
+        conditionValue.textContent = conditionText;
+        conditionRow.classList.remove('hidden');
+        conditionRow.classList.add('flex');
+
+        // 2. 인증 여부에 따라 SVG 아이콘 노출 결정
+        if (isVerified) {
+            verifiedIcon.classList.remove('hidden');
+        } else {
+            verifiedIcon.classList.add('hidden');
+        }
+    } else {
+        // 값이 없으면 라인 전체 숨김
+        conditionRow.classList.add('hidden');
+        conditionRow.classList.remove('flex');
+    }
+
+    // 2. 제품 설명 (fullDescription) 업데이트
+    const modalDesc = document.getElementById('modal-desc');
+    if (modalDesc) {
+        const descData = product.fullDescription;
+
+        if (Array.isArray(descData)) {
+            // 배열을 <br> 태그로 합쳐서 HTML로 주입
+            modalDesc.innerHTML = descData.join('<br>');
+        } else {
+            modalDesc.textContent = descData || '';
+        }
+    }
+
+    // 구매일자 처리 (경로 수정: product.specs?.purchaseDate)
+    const modalDate = document.getElementById('modal-date');
+    const modalDateRow = document.getElementById('modal-date-row');
+
+    // specs 객체 안의 purchaseDate를 가져옴
+    const pDate = product.specs?.purchaseDate;
+
+    if (pDate && pDate.trim() !== '' && pDate !== 'null') {
+        modalDate.textContent = pDate;
+        modalDateRow.classList.remove('hidden');
+        modalDateRow.classList.add('flex');
+    } else {
+        modalDateRow.classList.add('hidden');
+        modalDateRow.classList.remove('flex');
+    }
+
     // 텍스트 정보 주입 (ID들 맞춰주세요)
     document.getElementById('modal-title').textContent = product.title;
     document.getElementById('modal-price').textContent = `${product.currency}${product.price.toLocaleString()}`;
@@ -485,52 +586,48 @@ function getCategories(products) {
 }
 
 function renderCategoryChips(products) {
-  const container = document.getElementById('filter-chips');
+    const container = document.getElementById('filter-chips');
-  if (!container) return;
+    if (!container) return;
 
-  const categories = ['All', ...new Set(products.map((p) => p.category))];
+    const categories = ['All', ...new Set(products.map((p) => p.category))];
 
-  container.innerHTML = '';
+    container.innerHTML = '';
 
-  categories.forEach((cat) => {
+    categories.forEach((cat) => {
-    const isActive = activeCategories.has(cat);
+        const isActive = activeCategories.has(cat);
 
-    const chip = document.createElement('button');
+        const chip = document.createElement('button');
-    chip.className = `
+        chip.className = `
       filter-chip px-4 py-2 rounded-full text-sm font-medium transition
       border
-      ${isActive
+      ${isActive ? 'bg-primary text-white border-primary' : 'bg-slate-50 text-slate-600 border-slate-200'}
-        ? 'bg-primary text-white border-primary'
-        : 'bg-slate-50 text-slate-600 border-slate-200'}
     `;
-    chip.textContent = cat;
+        chip.textContent = cat;
-    chip.dataset.category = cat;
+        chip.dataset.category = cat;
 
-    chip.onclick = () => {
+        chip.onclick = () => {
-      toggleCategory(cat);
+            toggleCategory(cat);
-    };
+        };
 
-    container.appendChild(chip);
+        container.appendChild(chip);
-  });
+    });
 }
 
 function toggleCategory(category) {
-  if (category === 'All') {
+    if (category === 'All') {
-    activeCategories.clear();
+        activeCategories.clear();
-    activeCategories.add('All');
+        activeCategories.add('All');
-  } else {
+    } else {
-    activeCategories.delete('All');
+        activeCategories.delete('All');
-    activeCategories.has(category)
+        activeCategories.has(category) ? activeCategories.delete(category) : activeCategories.add(category);
-      ? activeCategories.delete(category)
-      : activeCategories.add(category);
 
-    if (activeCategories.size === 0) {
+        if (activeCategories.size === 0) {
-      activeCategories.add('All');
+            activeCategories.add('All');
+        }
     }
-  }
 
-  renderCategoryChips(products);
+    renderCategoryChips(products);
-  applyFilters();
+    applyFilters();
 }
 
 function bindCategoryFilter(products) {
@@ -563,7 +660,6 @@ function bindCategoryFilter(products) {
     });
 }
 
-
 // 카테고리 필터
 renderCategoryChips(products);
 bindCategoryFilter(products);

style/tailwind.css

@@ -9,12 +9,36 @@
       "Courier New", monospace;
     --color-red-100: oklch(93.6% 0.032 17.717);
     --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-orange-100: oklch(95.4% 0.038 75.164);
+    --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-700: oklch(55.3% 0.195 38.402);
+    --color-orange-900: oklch(40.8% 0.123 38.172);
     --color-amber-400: oklch(82.8% 0.189 84.429);
     --color-amber-600: oklch(66.6% 0.179 58.318);
     --color-green-100: oklch(96.2% 0.044 156.743);
+    --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-green-900: oklch(39.3% 0.095 152.535);
+    --color-blue-100: oklch(93.2% 0.032 255.585);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-900: oklch(37.9% 0.146 265.522);
+    --color-indigo-100: oklch(93% 0.034 272.788);
+    --color-indigo-400: oklch(67.3% 0.182 276.935);
+    --color-indigo-700: oklch(45.7% 0.24 277.023);
+    --color-indigo-900: oklch(35.9% 0.144 278.697);
+    --color-purple-100: oklch(94.6% 0.033 307.174);
+    --color-purple-400: oklch(71.4% 0.203 305.504);
+    --color-purple-700: oklch(49.6% 0.265 301.924);
+    --color-purple-900: oklch(38.1% 0.176 304.987);
+    --color-pink-100: oklch(94.8% 0.028 342.258);
+    --color-pink-400: oklch(71.8% 0.202 349.761);
+    --color-pink-700: oklch(52.5% 0.223 3.958);
+    --color-pink-900: oklch(40.8% 0.153 2.432);
     --color-slate-50: oklch(98.4% 0.003 247.858);
     --color-slate-100: oklch(96.8% 0.007 247.896);
     --color-slate-200: oklch(92.9% 0.013 255.508);
@@ -258,6 +282,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -270,36 +297,30 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
-  .bottom-4 {
+  .bottom-2 {
-    bottom: calc(var(--spacing) * 4);
+    bottom: calc(var(--spacing) * 2);
   }
   .bottom-6 {
     bottom: calc(var(--spacing) * 6);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
+  .left-3\/5 {
+    left: calc(3/5 * 100%);
+  }
   .left-4 {
     left: calc(var(--spacing) * 4);
   }
-  .left-6 {
-    left: calc(var(--spacing) * 6);
-  }
-  .z-10 {
-    z-index: 10;
-  }
   .z-50 {
     z-index: 50;
   }
-  .z-\[60\] {
-    z-index: 60;
-  }
-  .z-\[70\] {
-    z-index: 70;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -345,12 +366,6 @@
   .ml-0 {
     margin-left: calc(var(--spacing) * 0);
   }
-  .ml-12 {
-    margin-left: calc(var(--spacing) * 12);
-  }
-  .ml-20 {
-    margin-left: calc(var(--spacing) * 20);
-  }
   .block {
     display: block;
   }
@@ -363,16 +378,15 @@
   .hidden {
     display: none;
   }
+  .table {
+    display: table;
+  }
   .aspect-\[4\/5\] {
     aspect-ratio: 4/5;
   }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
-  .size-1\.5 {
-    width: calc(var(--spacing) * 1.5);
-    height: calc(var(--spacing) * 1.5);
-  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -392,9 +406,6 @@
   .\!h-10 {
     height: calc(var(--spacing) * 10) !important;
   }
-  .h-1\.5 {
-    height: calc(var(--spacing) * 1.5);
-  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -407,14 +418,8 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
-  .h-\[400px\] {
+  .h-\[80vh\] {
-    height: 400px;
+    height: 80vh;
-  }
-  .h-\[450px\] {
-    height: 450px;
-  }
-  .h-\[500px\] {
-    height: 500px;
   }
   .h-auto {
     height: auto;
@@ -425,9 +430,6 @@
   .h-px {
     height: 1px;
   }
-  .max-h-\[70\%\] {
-    max-height: 70%;
-  }
   .max-h-\[70vh\] {
     max-height: 70vh;
   }
@@ -437,12 +439,15 @@
   .max-h-full {
     max-height: 100%;
   }
+  .min-h-80 {
+    min-height: calc(var(--spacing) * 80);
+  }
+  .min-h-\[60vh\] {
+    min-height: 60vh;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
-  .w-1\.5 {
-    width: calc(var(--spacing) * 1.5);
-  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -452,9 +457,6 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
-  .w-6 {
-    width: calc(var(--spacing) * 6);
-  }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -482,25 +484,39 @@
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
-  .min-w-full {
-    min-width: 100%;
-  }
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .-translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -508,24 +524,15 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
-  .cursor-grab {
-    cursor: grab;
-  }
   .cursor-pointer {
     cursor: pointer;
   }
-  .snap-x {
+  .resize {
-    scroll-snap-type: x var(--tw-scroll-snap-strictness);
+    resize: both;
-  }
-  .snap-mandatory {
-    --tw-scroll-snap-strictness: mandatory;
   }
   .snap-center {
     scroll-snap-align: center;
   }
-  .grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -581,13 +588,6 @@
       margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -631,10 +631,6 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-l {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 1px;
-  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -643,11 +639,8 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .border-amber-400\/20 {
+  .border-amber-400 {
-    border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent);
+    border-color: var(--color-amber-400);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
-    }
   }
   .border-amber-400\/30 {
     border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent);
@@ -661,23 +654,20 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
-  .border-red-200 {
-    border-color: var(--color-red-200);
-  }
   .border-slate-200 {
     border-color: var(--color-slate-200);
   }
+  .border-slate-300 {
+    border-color: var(--color-slate-300);
+  }
   .border-slate-300\/30 {
     border-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-slate-300) 30%, transparent);
     }
   }
-  .border-slate-400\/20 {
+  .border-slate-400 {
-    border-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 20%, transparent);
+    border-color: var(--color-slate-400);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-slate-400) 20%, transparent);
-    }
   }
   .border-slate-400\/30 {
     border-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 30%, transparent);
@@ -685,26 +675,20 @@
       border-color: color-mix(in oklab, var(--color-slate-400) 30%, transparent);
     }
   }
-  .border-slate-900\/20 {
-    border-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-slate-900) 20%, transparent);
-    }
-  }
   .border-transparent {
     border-color: transparent;
   }
+  .bg-amber-400 {
+    background-color: var(--color-amber-400);
+  }
   .bg-amber-400\/10 {
     background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
     }
   }
-  .bg-black\/20 {
+  .bg-black {
-    background-color: color-mix(in srgb, #000 20%, transparent);
+    background-color: var(--color-black);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
-    }
   }
   .bg-black\/40 {
     background-color: color-mix(in srgb, #000 40%, transparent);
@@ -712,6 +696,9 @@
       background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
     }
   }
+  .bg-blue-100 {
+    background-color: var(--color-blue-100);
+  }
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
@@ -724,6 +711,18 @@
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
+  .bg-indigo-100 {
+    background-color: var(--color-indigo-100);
+  }
+  .bg-orange-100 {
+    background-color: var(--color-orange-100);
+  }
+  .bg-pink-100 {
+    background-color: var(--color-pink-100);
+  }
+  .bg-purple-100 {
+    background-color: var(--color-purple-100);
+  }
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
@@ -733,18 +732,27 @@
   .bg-slate-100 {
     background-color: var(--color-slate-100);
   }
+  .bg-slate-200 {
+    background-color: var(--color-slate-200);
+  }
   .bg-slate-200\/10 {
     background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-slate-200) 10%, transparent);
     }
   }
+  .bg-slate-400 {
+    background-color: var(--color-slate-400);
+  }
   .bg-slate-400\/10 {
     background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-slate-400) 10%, transparent);
     }
   }
+  .bg-slate-900 {
+    background-color: var(--color-slate-900);
+  }
   .bg-slate-900\/10 {
     background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -757,12 +765,6 @@
   .bg-white {
     background-color: var(--color-white);
   }
-  .bg-white\/50 {
-    background-color: color-mix(in srgb, #fff 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
-    }
-  }
   .bg-white\/80 {
     background-color: color-mix(in srgb, #fff 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -784,9 +786,6 @@
   .object-contain {
     object-fit: contain;
   }
-  .object-cover {
-    object-fit: cover;
-  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -796,12 +795,6 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
-  .p-8 {
-    padding: calc(var(--spacing) * 8);
-  }
-  .px-1 {
-    padding-inline: calc(var(--spacing) * 1);
-  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -820,15 +813,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .px-40 {
-    padding-inline: calc(var(--spacing) * 40);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
-  .py-1\.5 {
-    padding-block: calc(var(--spacing) * 1.5);
-  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -838,17 +825,14 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
-  .py-6 {
-    padding-block: calc(var(--spacing) * 6);
-  }
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
-  .pt-4 {
+  .py-40 {
-    padding-top: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 40);
   }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
@@ -856,19 +840,12 @@
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
-  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
   .text-center {
     text-align: center;
   }
-  .text-2xl {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-  }
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
@@ -900,6 +877,9 @@
   .text-\[10px\] {
     font-size: 10px;
   }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .text-\[20px\] {
     font-size: 20px;
   }
@@ -946,11 +926,17 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
+  .text-wrap {
+    text-wrap: wrap;
+  }
+  .break-keep {
+    word-break: keep-all;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .whitespace-pre-line {
+  .whitespace-pre-wrap {
-    white-space: pre-line;
+    white-space: pre-wrap;
   }
   .text-\[\#111418\] {
     color: #111418;
@@ -958,8 +944,8 @@
   .text-amber-600 {
     color: var(--color-amber-600);
   }
-  .text-black {
+  .text-blue-700 {
-    color: var(--color-black);
+    color: var(--color-blue-700);
   }
   .text-gray-400 {
     color: var(--color-gray-400);
@@ -979,12 +965,21 @@
   .text-green-700 {
     color: var(--color-green-700);
   }
+  .text-indigo-700 {
+    color: var(--color-indigo-700);
+  }
+  .text-orange-700 {
+    color: var(--color-orange-700);
+  }
+  .text-pink-700 {
+    color: var(--color-pink-700);
+  }
+  .text-purple-700 {
+    color: var(--color-purple-700);
+  }
   .text-red-700 {
     color: var(--color-red-700);
   }
-  .text-slate-300 {
-    color: var(--color-slate-300);
-  }
   .text-slate-400 {
     color: var(--color-slate-400);
   }
@@ -1032,28 +1027,21 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-md {
-    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .drop-shadow-lg {
+  .outline {
-    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
+    outline-style: var(--tw-outline-style);
-    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
+    outline-width: 1px;
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .drop-shadow-xl {
-    --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1)));
-    --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl));
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
   .grayscale {
     --tw-grayscale: grayscale(100%);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .backdrop-blur {
     --tw-backdrop-blur: blur(8px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1069,6 +1057,10 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1098,10 +1090,6 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
-  .duration-300 {
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
-  }
   .duration-500 {
     --tw-duration: 500ms;
     transition-duration: 500ms;
@@ -1133,16 +1121,6 @@
       color: var(--color-slate-400);
     }
   }
-  .first\:pt-8 {
-    &:first-child {
-      padding-top: calc(var(--spacing) * 8);
-    }
-  }
-  .last\:pb-8 {
-    &:last-child {
-      padding-bottom: calc(var(--spacing) * 8);
-    }
-  }
   .hover\:bg-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -1150,13 +1128,6 @@
       }
     }
   }
-  .hover\:bg-slate-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-slate-100);
-      }
-    }
-  }
   .hover\:bg-white {
     &:hover {
       @media (hover: hover) {
@@ -1200,16 +1171,6 @@
       outline-width: 0px;
     }
   }
-  .active\:scale-\[0\.98\] {
-    &:active {
-      scale: 0.98;
-    }
-  }
-  .active\:cursor-grabbing {
-    &:active {
-      cursor: grabbing;
-    }
-  }
   .sm\:flex {
     @media (width >= 40rem) {
       display: flex;
@@ -1220,22 +1181,11 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .md\:ml-16 {
-    @media (width >= 48rem) {
-      margin-left: calc(var(--spacing) * 16);
-    }
-  }
   .md\:flex {
     @media (width >= 48rem) {
       display: flex;
     }
   }
-  .md\:size-20 {
-    @media (width >= 48rem) {
-      width: calc(var(--spacing) * 20);
-      height: calc(var(--spacing) * 20);
-    }
-  }
   .md\:h-full {
     @media (width >= 48rem) {
       height: 100%;
@@ -1256,45 +1206,11 @@
       flex-direction: row;
     }
   }
-  .md\:border-t-0 {
-    @media (width >= 48rem) {
-      border-top-style: var(--tw-border-style);
-      border-top-width: 0px;
-    }
-  }
-  .md\:border-r {
-    @media (width >= 48rem) {
-      border-right-style: var(--tw-border-style);
-      border-right-width: 1px;
-    }
-  }
-  .md\:border-b-0 {
-    @media (width >= 48rem) {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 0px;
-    }
-  }
-  .md\:border-l {
-    @media (width >= 48rem) {
-      border-left-style: var(--tw-border-style);
-      border-left-width: 1px;
-    }
-  }
-  .md\:p-8 {
-    @media (width >= 48rem) {
-      padding: calc(var(--spacing) * 8);
-    }
-  }
   .md\:p-10 {
     @media (width >= 48rem) {
       padding: calc(var(--spacing) * 10);
     }
   }
-  .md\:p-12 {
-    @media (width >= 48rem) {
-      padding: calc(var(--spacing) * 12);
-    }
-  }
   .md\:px-40 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 40);
@@ -1306,26 +1222,21 @@
       line-height: var(--tw-leading, var(--text-5xl--line-height));
     }
   }
+  .lg\:left-\[calc\(50\%\+3rem\)\] {
+    @media (width >= 64rem) {
+      left: calc(50% + 3rem);
+    }
+  }
   .lg\:ml-24 {
     @media (width >= 64rem) {
       margin-left: calc(var(--spacing) * 24);
     }
   }
-  .lg\:ml-28 {
-    @media (width >= 64rem) {
-      margin-left: calc(var(--spacing) * 28);
-    }
-  }
   .lg\:flex {
     @media (width >= 64rem) {
       display: flex;
     }
   }
-  .lg\:hidden {
-    @media (width >= 64rem) {
-      display: none;
-    }
-  }
   .lg\:grid-cols-3 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1336,6 +1247,16 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .\32 xl\:grid-cols-5 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .\32 xl\:grid-cols-6 {
+    @media (width >= 96rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
   .dark\:border-gray-800 {
     @media (prefers-color-scheme: dark) {
       border-color: var(--color-gray-800);
@@ -1351,6 +1272,19 @@
       border-color: var(--color-slate-800);
     }
   }
+  .dark\:bg-\[\#111418\] {
+    @media (prefers-color-scheme: dark) {
+      background-color: #111418;
+    }
+  }
+  .dark\:bg-blue-900\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-gray-700 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-700);
@@ -1374,6 +1308,54 @@
       background-color: var(--color-gray-900);
     }
   }
+  .dark\:bg-green-900\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
+      }
+    }
+  }
+  .dark\:bg-indigo-900\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-indigo-900) 30%, transparent);
+      }
+    }
+  }
+  .dark\:bg-orange-900\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-orange-900) 30%, transparent);
+      }
+    }
+  }
+  .dark\:bg-pink-900\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(40.8% 0.153 2.432) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-pink-900) 30%, transparent);
+      }
+    }
+  }
+  .dark\:bg-purple-900\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-purple-900) 30%, transparent);
+      }
+    }
+  }
+  .dark\:bg-red-900\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-slate-700 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-slate-700);
@@ -1389,9 +1371,9 @@
       background-color: var(--color-slate-900);
     }
   }
-  .dark\:text-black {
+  .dark\:text-blue-400 {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-black);
+      color: var(--color-blue-400);
     }
   }
   .dark\:text-gray-300 {
@@ -1409,6 +1391,36 @@
       color: var(--color-gray-500);
     }
   }
+  .dark\:text-green-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-green-400);
+    }
+  }
+  .dark\:text-indigo-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-indigo-400);
+    }
+  }
+  .dark\:text-orange-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-orange-400);
+    }
+  }
+  .dark\:text-pink-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-pink-400);
+    }
+  }
+  .dark\:text-purple-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-purple-400);
+    }
+  }
+  .dark\:text-red-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-red-400);
+    }
+  }
   .dark\:text-slate-100 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-slate-100);
@@ -1455,15 +1467,6 @@
       }
     }
   }
-  .dark\:hover\:bg-slate-800 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-slate-800);
-        }
-      }
-    }
-  }
 }
 @property --tw-translate-x {
   syntax: "*";
@@ -1500,11 +1503,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-scroll-snap-strictness {
-  syntax: "*";
-  inherits: false;
-  initial-value: proximity;
-}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -1592,6 +1590,11 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1700,11 +1703,6 @@
   inherits: false;
   initial-value: 1;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -1716,7 +1714,6 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-scroll-snap-strictness: proximity;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
@@ -1736,6 +1733,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
@@ -1762,7 +1760,6 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-outline-style: solid;
     }
   }
 }