Apply glassmorphism effect to overlays and panels

- Header: semi-transparent white with backdrop blur
- Visit counter: frosted glass instead of dark overlay
- Mobile filter panel: translucent with blur
- BottomSheet: frosted glass background
- Footer: subtle glass effect

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
2026-03-09 16:08:21 +09:00
parent d1ef156f44
commit 99660bf07b
2 changed files with 8 additions and 8 deletions

View File

@@ -420,7 +420,7 @@ export default function Home() {
return ( return (
<div className="h-screen flex flex-col"> <div className="h-screen flex flex-col">
{/* ── Header row 1: Logo + User ── */} {/* ── Header row 1: Logo + User ── */}
<header className="bg-white border-b shrink-0"> <header className="bg-white/80 backdrop-blur-md border-b shrink-0">
<div className="px-5 py-3 flex items-center justify-between"> <div className="px-5 py-3 flex items-center justify-between">
<button onClick={handleReset} className="text-lg font-bold whitespace-nowrap"> <button onClick={handleReset} className="text-lg font-bold whitespace-nowrap">
Tasteby Tasteby
@@ -656,7 +656,7 @@ export default function Home() {
{/* Collapsible filter panel */} {/* Collapsible filter panel */}
{showMobileFilters && ( {showMobileFilters && (
<div className="bg-gray-50 rounded-xl p-3.5 space-y-3 border"> <div className="bg-white/70 backdrop-blur-md rounded-xl p-3.5 space-y-3 border border-white/50 shadow-sm">
{/* Dropdown filters */} {/* Dropdown filters */}
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<select <select
@@ -769,7 +769,7 @@ export default function Home() {
flyTo={regionFlyTo} flyTo={regionFlyTo}
/> />
{visits && ( {visits && (
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded"> <div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm">
{visits.today} · {visits.total.toLocaleString()} {visits.today} · {visits.total.toLocaleString()}
</div> </div>
)} )}
@@ -789,7 +789,7 @@ export default function Home() {
flyTo={regionFlyTo} flyTo={regionFlyTo}
/> />
{visits && ( {visits && (
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded"> <div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm">
{visits.today} · {visits.total.toLocaleString()} {visits.today} · {visits.total.toLocaleString()}
</div> </div>
)} )}
@@ -811,7 +811,7 @@ export default function Home() {
flyTo={regionFlyTo} flyTo={regionFlyTo}
/> />
{visits && ( {visits && (
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded z-10"> <div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm z-10">
{visits.today} · {visits.total.toLocaleString()} {visits.today} · {visits.total.toLocaleString()}
</div> </div>
)} )}
@@ -836,7 +836,7 @@ export default function Home() {
flyTo={regionFlyTo} flyTo={regionFlyTo}
/> />
{visits && ( {visits && (
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded z-10"> <div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm z-10">
{visits.today} · {visits.total.toLocaleString()} {visits.today} · {visits.total.toLocaleString()}
</div> </div>
)} )}
@@ -853,7 +853,7 @@ export default function Home() {
</div> </div>
{/* Footer */} {/* Footer */}
<footer className="shrink-0 border-t bg-gradient-to-r from-gray-50 via-white to-gray-50 py-2.5 flex items-center justify-center gap-2 text-[11px] text-gray-400 group"> <footer className="shrink-0 border-t bg-white/60 backdrop-blur-sm py-2.5 flex items-center justify-center gap-2 text-[11px] text-gray-400 group">
<div className="relative"> <div className="relative">
<img <img
src="/icon.jpg" src="/icon.jpg"

View File

@@ -89,7 +89,7 @@ export default function BottomSheet({ open, onClose, children }: BottomSheetProp
{/* Sheet */} {/* Sheet */}
<div <div
ref={sheetRef} ref={sheetRef}
className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-white rounded-t-2xl shadow-2xl" className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-white/85 backdrop-blur-xl rounded-t-2xl shadow-2xl"
style={{ style={{
height: `${height * 100}vh`, height: `${height * 100}vh`,
transition: dragging ? "none" : "height 0.3s cubic-bezier(0.2, 0, 0, 1)", transition: dragging ? "none" : "height 0.3s cubic-bezier(0.2, 0, 0, 1)",