joungmin/tasteby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply glassmorphism effect to overlays and panels

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/app/page.tsx
View File

@@ -420,7 +420,7 @@ export default function Home() {
return (
<div className="h-screen flex flex-col">
{/* ── 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">
<button onClick={handleReset} className="text-lg font-bold whitespace-nowrap">
Tasteby
@@ -656,7 +656,7 @@ export default function Home() {
{/* Collapsible filter panel */}
{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 */}
<div className="flex items-center gap-2 flex-wrap">
<select
@@ -769,7 +769,7 @@ export default function Home() {
flyTo={regionFlyTo}
/>
{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()}
</div>
)}
@@ -789,7 +789,7 @@ export default function Home() {
flyTo={regionFlyTo}
/>
{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()}
</div>
)}
@@ -811,7 +811,7 @@ export default function Home() {
flyTo={regionFlyTo}
/>
{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()}
</div>
)}
@@ -836,7 +836,7 @@ export default function Home() {
flyTo={regionFlyTo}
/>
{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()}
</div>
)}
@@ -853,7 +853,7 @@ export default function Home() {
</div>
{/* 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">
<img
src="/icon.jpg"

2
frontend/src/components/BottomSheet.tsx
View File

@@ -89,7 +89,7 @@ export default function BottomSheet({ open, onClose, children }: BottomSheetProp
{/* Sheet */}
<div
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={{
height: `${height * 100}vh`,
transition: dragging ? "none" : "height 0.3s cubic-bezier(0.2, 0, 0, 1)",