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>