From 44c7313debf4c5c269988772c496d0c188860cf4 Mon Sep 17 00:00:00 2001
From: "Claude (gbpark)" <noreply@anthropic.com>
Date: Thu, 23 Apr 2026 06:54:41 +0900
Subject: [PATCH] =?UTF-8?q?responsive:=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B0=94=20=ED=86=A0=EA=B8=80=20=ED=95=AD=EC=83=81=20=EB=85=B8?=
 =?UTF-8?q?=EC=B6=9C=20+=20breakpoint=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- JS isMobile breakpoint 1024→768 (CSS @media 와 정렬)
  기존에 768~1023px 구간에서 사이드바는 숨고 햄버거는 display:none 이라
  사이드바를 열 방법이 없던 버그 수정.
- v5-mobile-toggle 기본 display:flex (모든 화면에서 표시)
  borderless 헤더 아이콘 스타일(32px)과 정합
- 햄버거 onClick 분기: 모바일=sidebarOpen / 데스크톱=sidebarCollapsed
  desktop 에서는 narrow(56px) ↔ full(220px) 토글로 동작
- title/aria-label 다국어 (열기/닫기/펼치기/접기)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/components/layout/AppLayout.tsx | 12 ++++++++++--
 frontend/styles/v5-layout.css            |  9 ++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/components/layout/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 688ab6eb..d3081c6b 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -385,7 +385,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   // 화면 크기 감지 및 사이드바 초기 상태 설정
   useEffect(() => {
     const checkIsMobile = () => {
-      const mobile = window.innerWidth < 1024;
+      const mobile = window.innerWidth < 768;
       setIsMobile(mobile);
       if (mobile) {
         setSidebarOpen(false);
@@ -828,7 +828,15 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         <header className="v5-hdr">
           <div className="v5-hdr-l">
             {/* Mobile hamburger */}
-            <button className="v5-mobile-toggle" onClick={() => setSidebarOpen(!sidebarOpen)}>
+            <button
+              className="v5-mobile-toggle"
+              onClick={() => {
+                if (isMobile) setSidebarOpen(!sidebarOpen);
+                else setSidebarCollapsed(!sidebarCollapsed);
+              }}
+              title={isMobile ? (sidebarOpen ? "사이드바 닫기" : "사이드바 열기") : (sidebarCollapsed ? "사이드바 펼치기" : "사이드바 접기")}
+              aria-label="사이드바 토글"
+            >
               <Menu size={16} />
             </button>
             <div className="v5-hdr-logo">Invy.one</div>
diff --git a/frontend/styles/v5-layout.css b/frontend/styles/v5-layout.css
index 253cad6a..76644ec2 100644
--- a/frontend/styles/v5-layout.css
+++ b/frontend/styles/v5-layout.css
@@ -823,17 +823,16 @@ html:not(.dark) .v5-side{
 .v5-avatar-dd-content [role="menuitem"]:hover{background:var(--v5-surface-hover) !important;transform:translateX(2px);}
 
 /* ===== MOBILE RESPONSIVE ===== */
-.v5-mobile-toggle{display:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--v5-border);
-  background:var(--v5-surface-solid);color:var(--v5-text-muted);cursor:pointer;
-  align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
-.v5-mobile-toggle:hover{border-color:var(--v5-primary);color:var(--v5-primary);}
+.v5-mobile-toggle{display:flex;width:32px;height:32px;border-radius:10px;border:1px solid transparent;
+  background:transparent;color:var(--v5-text-sec);cursor:pointer;
+  align-items:center;justify-content:center;transition:all .2s var(--v5-ease-move);flex-shrink:0;}
+.v5-mobile-toggle:hover{background:var(--v5-surface-hover);color:var(--v5-text);}
 
 .v5-side-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:25;
   opacity:0;transition:opacity .3s;pointer-events:none;}
 .v5-side-overlay.open{opacity:1;pointer-events:auto;}
 
 @media(max-width:768px){
-  .v5-mobile-toggle{display:flex;}
   .v5-side{position:fixed;left:0;top:0;bottom:0;z-index:30;
     transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
     width:260px;padding-top:60px;}