fix: 바텀시트가 하단 네비에 가려지는 문제 — z-index 1010 + padding-bottom 확대

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-01 13:26:47 +09:00
parent 708beb7fe5
commit 30222df0ef
2 changed files with 4 additions and 4 deletions

View File

@@ -105,7 +105,7 @@
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0,0,0,0.4); background: rgba(0,0,0,0.4);
z-index: 100; z-index: 1005;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.25s; transition: opacity 0.25s;
@@ -119,12 +119,12 @@
right: 0; right: 0;
background: white; background: white;
border-radius: 16px 16px 0 0; border-radius: 16px 16px 0 0;
z-index: 101; z-index: 1010;
max-height: 92vh; max-height: 92vh;
overflow-y: auto; overflow-y: auto;
transform: translateY(100%); transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: calc(20px + env(safe-area-inset-bottom));
} }
.pm-sheet.open { transform: translateY(0); } .pm-sheet.open { transform: translateY(0); }
.pm-sheet-handle { .pm-sheet-handle {

View File

@@ -7,7 +7,7 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026040105"> <link rel="stylesheet" href="/static/css/tkfb.css?v=2026040105">
<link rel="stylesheet" href="/css/purchase-mobile.css?v=2026040105"> <link rel="stylesheet" href="/css/purchase-mobile.css?v=2026040106">
<script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js"></script>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">