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

- 테일윈드 경고 문구 수정

Browse Source 
- 데스크탑: 모달 가운데 정렬
This commit is contained in:
zenn
2026-02-04 17:31:14 +09:00
parent f15fcfbcf8
commit 2a69fdee42
3 changed files with 26 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@@ -93,7 +93,7 @@
</div>
</div>
<div class="flex flex-1 justify-end gap-4 items-center">
<label class="flex flex-col min-w-40 !h-10 max-w-64">
<label class="flex flex-col min-w-40 h-10 max-w-64">
<div class="flex w-full flex-1 items-stretch rounded-lg h-full border border-slate-200 dark:border-slate-700">
<div class="text-slate-400 flex items-center justify-center pl-3">
<span class="material-symbols-outlined text-[20px]">search</span>
@@ -146,9 +146,9 @@
</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()">
<div id="product-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 backdrop-blur-sm p-4 md:p-10" onclick="if(event.target === this) closeModal()">
<!-- Modal Container: 모바일에서 화면 안에 맞춤 (dvh), 이미지 영역 높이 제한 -->
<div class="relative w-full max-w-6xl max-h-[calc(100dvh-2rem)] md:max-h-[90vh] min-h-0 md: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">
<div class="relative w-full max-w-6xl max-h-[calc(100dvh-2rem)] md: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 mx-auto">
<!-- 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>
@@ -160,7 +160,7 @@
<div id="modal-main-carousel-container" class="flex-1 min-h-0 overflow-x-auto no-scrollbar flex items-center justify-center">
<div id="modal-main-carousel" class="flex h-full w-full">
<!-- Image -->
<div class="flex-shrink-0 w-full h-full snap-center flex items-center justify-center p-4">
<div class="shrink-0 w-full h-full snap-center flex items-center justify-center p-4">
<div
class="w-full h-full bg-center bg-no-repeat bg-contain rounded-lg"
data-alt="Front view of Sony WH-1000XM5 headphones in black"
@@ -188,17 +188,17 @@
id="modal-category"
class="inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap"></span>
<span id="modal-status" class="inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg bg-green-100 text-green-700 text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap"></span>
<span id="modal-custom-tag" class="hidden inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap"></span>
<span id="modal-custom-tag" class="inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap"></span>
</div>
<!-- Title: 중간 사이즈까지 단계별 크기 + 자연스러운 줄바꿈 -->
<h1 id="modal-title" class="text-[#111418] dark:text-white text-lg sm:text-xl md:text-2xl lg:text-3xl font-black leading-tight tracking-tight mb-2 break-words hyphens-auto">Sony WH-1000XM5 Noise Canceling Headphones</h1>
<h1 id="modal-title" class="text-[#111418] dark:text-white text-lg sm:text-xl md:text-2xl lg:text-3xl font-black leading-tight tracking-tight mb-2 wrap-break-word hyphens-auto">Sony WH-1000XM5 Noise Canceling Headphones</h1>
<!-- Price: 중간 사이즈 대응 -->
<p id="modal-price" class="text-[#111418] dark:text-white text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-6 sm:mb-8">₩320,000</p>
<!-- Spec List: 라벨/값 줄바꿈 정리 -->
<div class="space-y-0 mb-6 sm:mb-8">
<div id="modal-date-row" class="flex items-center justify-between gap-3 py-3 sm:py-4 border-t border-gray-100 dark:border-gray-800">
<span class="shrink-0 text-gray-500 dark:text-gray-400 text-xs sm:text-sm font-medium uppercase tracking-tight">구매일자</span>
<span id="modal-date" class="text-[#111418] dark:text-white text-xs sm:text-sm font-semibold text-right break-words min-w-0">October 2023</span>
<span id="modal-date" class="text-[#111418] dark:text-white text-xs sm:text-sm font-semibold text-right wrap-break-word min-w-0">October 2023</span>
</div>
<div class="flex items-start sm:items-center justify-between gap-3 py-3 sm:py-4 border-t border-gray-100 dark:border-gray-800">
<span class="shrink-0 text-gray-500 dark:text-gray-400 text-xs sm:text-sm font-medium uppercase tracking-tight">제품 상태</span>
@@ -207,18 +207,18 @@
<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-xs sm:text-sm font-semibold text-right break-words"></span>
<span id="modal-condition" class="text-[#111418] dark:text-white text-xs sm:text-sm font-semibold text-right wrap-break-word"></span>
</div>
</div>
</div>
<!-- Description -->
<div class="mb-6">
<h3 class="text-[#111418] dark:text-white text-xs sm:text-sm font-bold uppercase tracking-widest mb-2 sm:mb-3">제품 설명</h3>
<p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed break-words"></p>
<p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed wrap-break-word"></p>
</div>
</div>
<!-- Footer / CTA: 항상 하단 고정, 버튼이 설명 위로 겹치지 않음 -->
<div class="flex-shrink-0 pt-4 pb-6 px-4 sm:px-6 md:px-8 lg:px-10 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-background-dark">
<div class="shrink-0 pt-4 pb-6 px-4 sm:px-6 md:px-8 lg:px-10 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-background-dark">
<button id="copy-link-btn" class="w-full flex items-center justify-center gap-2 bg-slate-900 dark:bg-white dark:text-slate-900 text-white font-bold py-4 px-6 rounded-xl transition-all shadow-lg">
<span class="material-symbols-outlined">link</span>
<span id="copy-btn-text">상품 링크 복사하기</span>

8
scripts/modal.js
View File

@@ -8,13 +8,17 @@ export function openModal(id) {
if (!product) return;
const modal = document.getElementById('product-modal');
modal.classList.remove('hidden');
modal.classList.add('flex');
const images = product.images;
const loopImages = [images[images.length - 1], ...images, images[0]];
const mainImagesHtml = loopImages
.map(
(img) => `
<div class="flex-shrink-0 w-full h-full snap-center flex items-center justify-center p-0 md:p-4 select-none">
<div class="shrink-0 w-full h-full snap-center flex items-center justify-center p-0 md:p-4 select-none">
<div class="w-full h-full max-w-full max-h-full rounded-xl md:rounded-2xl overflow-hidden flex items-center justify-center">
<img src="${img}" draggable="false" class="max-w-full max-h-full w-auto h-auto object-contain sm:object-cover pointer-events-none rounded-md">
</div>
@@ -29,7 +33,7 @@ export function openModal(id) {
<div onclick="scrollToImage(${idx})"
class="modal-thumb-item size-16 rounded-lg border-2 ${idx === 0 ? 'border-primary' : 'border-transparent'}
bg-cover bg-center overflow-hidden cursor-pointer ${idx === 0 ? 'opacity-100' : 'opacity-70'}
hover:opacity-100 transition-all flex-shrink-0"
hover:opacity-100 transition-all shrink-0"
style="background-image: url('${img}');"></div>
`,
)

29
style/tailwind.css
View File

@@ -63,7 +63,6 @@
--color-slate-700: oklch(37.2% 0.044 257.287);
--color-slate-800: oklch(27.9% 0.041 260.031);
--color-slate-900: oklch(20.8% 0.042 265.755);
--color-gray-50: oklch(98.5% 0.002 247.839);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
@@ -76,7 +75,6 @@
--color-black: #000;
--color-white: #fff;
--spacing: 0.25rem;
--container-xl: 36rem;
--container-3xl: 48rem;
--container-6xl: 72rem;
--text-xs: 0.75rem;
@@ -95,8 +93,6 @@
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
@@ -325,6 +321,9 @@
.z-50 {
z-index: 50;
}
.z-\[60\] {
z-index: 60;
}
.container {
width: 100%;
@media (width >= 40rem) {
@@ -343,6 +342,9 @@
max-width: 96rem;
}
}
.mx-auto {
margin-inline: auto;
}
.mt-4 {
margin-top: calc(var(--spacing) * 4);
}
@@ -395,9 +397,6 @@
width: calc(var(--spacing) * 16);
height: calc(var(--spacing) * 16);
}
.\!h-10 {
height: calc(var(--spacing) * 10) !important;
}
.h-2 {
height: calc(var(--spacing) * 2);
}
@@ -476,9 +475,6 @@
.flex-1 {
flex: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink-0 {
flex-shrink: 0;
}
@@ -653,10 +649,10 @@
background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
}
}
.bg-black\/40 {
background-color: color-mix(in srgb, #000 40%, transparent);
.bg-black\/60 {
background-color: color-mix(in srgb, #000 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
}
}
.bg-blue-100 {
@@ -899,7 +895,7 @@
.text-nowrap {
text-wrap: nowrap;
}
.break-words {
.wrap-break-word {
overflow-wrap: break-word;
}
.break-keep {
@@ -1269,11 +1265,6 @@
max-height: none;
}
}
.md\:min-h-\[60vh\] {
@media (width >= 48rem) {
min-height: 60vh;
}
}
.md\:w-2\/5 {
@media (width >= 48rem) {
width: calc(2/5 * 100%);