From 99660bf07b48c84ce03a1cecfa7719025fdf44fc Mon Sep 17 00:00:00 2001
From: joungmin <joungmin@joungmins-Mac-mini.local>
Date: Mon, 9 Mar 2026 16:08:21 +0900
Subject: [PATCH] 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>
---
 frontend/src/app/page.tsx               | 14 +++++++-------
 frontend/src/components/BottomSheet.tsx |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index eaec0e6..1292f25 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -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"
diff --git a/frontend/src/components/BottomSheet.tsx b/frontend/src/components/BottomSheet.tsx
index aa5467e..2caac69 100644
--- a/frontend/src/components/BottomSheet.tsx
+++ b/frontend/src/components/BottomSheet.tsx
@@ -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)",