zenn/zenn.inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[260204] 샘플 파일 적용

Browse Source
This commit is contained in:
zenn
2026-02-04 01:43:58 +09:00
parent b0e5fec03e
commit c185fd1cef
7 changed files with 609 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.prettierrc Normal file
View File

@@ -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"
}

268
data.js
View File

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

BIN
images/games/20260204_002254.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

159
index.html
View File

@@ -38,37 +38,37 @@
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
.material-symbols-outlined {
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 {
font-family: 'Inter', sans-serif;
}
/* 스크롤바 완전히 숨기기 */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
.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;
}
#modal-main-carousel-container {
scroll-snap-type: none;
overflow-x: hidden;
}
.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;
}
.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>
<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>
<h2 class="text-slate-900 dark:text-white tracking-tight text-3xl md:text-5xl font-bold leading-tight text-center max-w-3xl">
일상의 조각들,
<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="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 flex flex-col gap-4">
<!-- 카테고리 -->
<div class="flex flex-col gap-2">
<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>
<!-- 카테고리 -->
<div class="flex flex-col gap-2">
<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>
<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">
<h4 class="text-xs font-semibold uppercase tracking-wider text-slate-500">
Status
</h4>
<div id="status-chips" class="flex flex-wrap gap-2"></div>
</div>
</div>
</section>
<!-- 상태 -->
<div class="flex flex-col gap-2">
<h4 class="text-xs font-semibold uppercase tracking-wider text-slate-500">Status</h4>
<div id="status-chips" class="flex flex-wrap gap-2"></div>
</div>
</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>
<div id="pagination" class="flex items-center justify-center gap-2"></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-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-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"></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">
<span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">Purchase Date</span>
<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">구매일자</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>
<div class="flex items-center gap-1.5">
<span class="material-symbols-outlined text-primary text-lg">verified</span>
<span id="modal-condition" class="text-[#111418] dark:text-white text-sm font-semibold">Mint (S-Grade)</span>
<span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">제품 상태</span>
<div id="modal-condition-row" class="flex items-center justify-between border-t border-gray-100 dark:border-gray-800">
<div class="flex items-center gap-1.5">
<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">
<h3 class="text-[#111418] dark:text-white text-sm font-bold uppercase tracking-widest mb-3">Item Description</h3>
<p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-base leading-relaxed">
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 class="mb-10 min-h-80">
<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>
</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>

2
package-lock.json generated
View File

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

168
scripts/app.js
View File

@@ -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');
if (!container) return;
const container = document.getElementById('filter-chips');
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) => {
const isActive = activeCategories.has(cat);
categories.forEach((cat) => {
const isActive = activeCategories.has(cat);
const chip = document.createElement('button');
chip.className = `
const chip = document.createElement('button');
chip.className = `
filter-chip px-4 py-2 rounded-full text-sm font-medium transition
border
${isActive
? 'bg-primary text-white border-primary'
: 'bg-slate-50 text-slate-600 border-slate-200'}
${isActive ? 'bg-primary text-white border-primary' : 'bg-slate-50 text-slate-600 border-slate-200'}
`;
chip.textContent = cat;
chip.dataset.category = cat;
chip.textContent = cat;
chip.dataset.category = cat;
chip.onclick = () => {
toggleCategory(cat);
};
chip.onclick = () => {
toggleCategory(cat);
};
container.appendChild(chip);
});
container.appendChild(chip);
});
}
function toggleCategory(category) {
if (category === 'All') {
activeCategories.clear();
activeCategories.add('All');
} else {
activeCategories.delete('All');
activeCategories.has(category)
? activeCategories.delete(category)
: activeCategories.add(category);
if (category === 'All') {
activeCategories.clear();
activeCategories.add('All');
} else {
activeCategories.delete('All');
activeCategories.has(category) ? activeCategories.delete(category) : activeCategories.add(category);
if (activeCategories.size === 0) {
activeCategories.add('All');
if (activeCategories.size === 0) {
activeCategories.add('All');
}
}
}
renderCategoryChips(products);
applyFilters();
renderCategoryChips(products);
applyFilters();
}
function bindCategoryFilter(products) {
@@ -563,7 +660,6 @@ function bindCategoryFilter(products) {
});
}
// 카테고리 필터
renderCategoryChips(products);
bindCategoryFilter(products);

507
style/tailwind.css
View File

@@ -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: calc(var(--spacing) * 4);
.bottom-2 {
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\] {
height: 400px;
}
.h-\[450px\] {
height: 450px;
}
.h-\[500px\] {
height: 500px;
.h-\[80vh\] {
height: 80vh;
}
.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 {
scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
--tw-scroll-snap-strictness: mandatory;
.resize {
resize: both;
}
.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-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
}
.border-amber-400 {
border-color: var(--color-amber-400);
}
.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-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-slate-400) 20%, transparent);
}
.border-slate-400 {
border-color: var(--color-slate-400);
}
.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 {
background-color: color-mix(in srgb, #000 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
}
.bg-black {
background-color: var(--color-black);
}
.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 {
padding-top: calc(var(--spacing) * 4);
.py-40 {
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 {
white-space: pre-line;
.whitespace-pre-wrap {
white-space: pre-wrap;
}
.text-\[\#111418\] {
color: #111418;
@@ -958,8 +944,8 @@
.text-amber-600 {
color: var(--color-amber-600);
}
.text-black {
color: var(--color-black);
.text-blue-700 {
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 {
--tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
--tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
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,);
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.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;
}
}
}