사이드바 수정

src/app/components/AppHeader.tsx

@@ -353,15 +353,15 @@ export function AppHeader() {
           aria-expanded={mobileOpen}
           aria-controls="mobile-menu"
           onClick={() => setMobileOpen((v) => !v)}
-          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-neutral-200 xl:hidden"
+          className="group inline-flex h-8 w-8 items-center justify-center rounded-md border border-neutral-200 hover:border-neutral-300 hover:bg-neutral-100 transition-colors cursor-pointer xl:hidden"
         >
           <span className="flex flex-col items-center justify-center gap-1">
-            <span className="block h-0.5 w-4 bg-neutral-800" />
+            <span className="block h-0.5 w-4 bg-neutral-800 group-hover:bg-[var(--red-50,#F94B37)] transition-colors" />
-            <span className="block h-0.5 w-4 bg-neutral-800" />
+            <span className="block h-0.5 w-4 bg-neutral-800 group-hover:bg-[var(--red-50,#F94B37)] transition-colors" />
-            <span className="block h-0.5 w-4 bg-neutral-800" />
+            <span className="block h-0.5 w-4 bg-neutral-800 group-hover:bg-[var(--red-50,#F94B37)] transition-colors" />
           </span>
         </button>
-        <Link href="/" aria-label="홈" className="shrink-0">
+        <Link href="/" aria-label="홈" className="shrink-0 flex items-center">
           <SinglePageLogo width={120} height={28} className="w-20 xl:w-[120px] h-auto" />
         </Link>
       </div>
@@ -477,9 +477,17 @@ export function AppHeader() {
           </Link>
         </div>
       </nav>
-      {mobileOpen && (
+      <div
-        <div  className="fixed inset-0 h-[100vh] z-40 bg-black/60 backdrop-blur-sm" onClick={() => setMobileOpen(false)}>
+        className={`fixed inset-0 h-[100vh] z-40 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ${mobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`}
-          <div className="absolute left-0 xl:top-0 h-[100vh] w-11/12 max-w-md bg-white p-4 shadow-xl overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+        onClick={() => setMobileOpen(false)}
+        aria-hidden={!mobileOpen}
+      >
+          <div
+            className={`absolute left-0 xl:top-0 h-[100vh] w-11/12 max-w-md bg-white p-4 shadow-xl overflow-y-auto transition-transform duration-300 ${mobileOpen ? "translate-x-0" : "-translate-x-full"}`}
+            onClick={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+          >
             <div className="mb-3 h-10 flex items-center justify-between">
             </div>
             <div className="flex flex-col gap-4">
@@ -497,7 +505,13 @@ export function AppHeader() {
                     </div>
                   </div>
                 ) : (
-                  <div className="text-sm text-neutral-600">로그인 정보를 불러오는 중...</div>
+                  <div className="flex items-center gap-3 animate-pulse">
+                    <div className="w-12 h-12 rounded-full bg-neutral-200" />
+                    <div className="flex-1 min-w-0">
+                      <div className="h-3 w-1/2 bg-neutral-200 rounded" />
+                      <div className="mt-2 h-3 w-1/3 bg-neutral-200 rounded" />
+                    </div>
+                  </div>
                 )}
                 <div className="grid grid-cols-3 gap-2 mt-3">
                   <Link href="/my-page?tab=points" onClick={() => setMobileOpen(false)} className="h-9 rounded-md border border-neutral-300 text-xs flex items-center justify-center hover:bg-neutral-100">포인트 히스토리</Link>
@@ -530,8 +544,7 @@ export function AppHeader() {
               </div>
             </div>
           </div>
-        </div>
+      </div>
-      )}
     </header>
   );
 }