From e1423418ae71481a73fbcc05f3866100a5d63ed8 Mon Sep 17 00:00:00 2001
From: Mina Choi <mnchoi@o2o.kr>
Date: Wed, 2 Sep 2026 21:38:43 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20solution/frontend:=20=EB=B9=84=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EC=83=81=ED=83=9C=EC=9D=98=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94=20=E2=80=94=20=EB=88=8C=EB=9F=AC?=
 =?UTF-8?q?=EB=8F=84=20=EC=95=84=EB=AC=B4=20=EC=9D=BC=20=EC=97=86=EB=8A=94?=
 =?UTF-8?q?=20[=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83]=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

위저드는 로그인 없이 열린다(관문은 에디터 진입이다). 그런데 사이드바는 로그인 여부와
무관하게 [로그아웃]만 그렸다 — 로그인한 적 없는 사람에게는 **이름이 빈 줄로 나오고,
버튼을 눌러도 지울 세션이 없어 아무 일도 일어나지 않았다.** "유저 정보가 어디에도 안 보인다"가
이것이다.

- 비로그인: '로그인하지 않았습니다' + [로그인] 링크
- 로그인: 이름 · 상호 + [로그아웃]. 로그아웃은 스토어만 비우면 화면이 그대로라 눌러도
  아무 일이 없는 것처럼 보인다 — /login 으로 보낸다

브라우저 확인: 비로그인 위저드에서 안내와 [로그인] 노출 → 로그인 후 '김사장 · 달빛스테이' →
[로그아웃] 클릭 시 /login 이동. tsc·eslint·vite build 통과.
---
 .../src/components/layout/AppShell.tsx        | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/solution/frontend/src/components/layout/AppShell.tsx b/solution/frontend/src/components/layout/AppShell.tsx
index d1d943c..61a1fe7 100644
--- a/solution/frontend/src/components/layout/AppShell.tsx
+++ b/solution/frontend/src/components/layout/AppShell.tsx
@@ -1,6 +1,6 @@
 import type {ComponentType, ReactNode} from 'react';
-import {Link, NavLink, useLocation} from 'react-router';
-import {LayoutGrid, LogOut, Search, Wand2} from 'lucide-react';
+import {Link, NavLink, useLocation, useNavigate} from 'react-router';
+import {LayoutGrid, LogIn, LogOut, Search, Wand2} from 'lucide-react';
 import {cn} from '@/lib/utils';
 import {userLabel, useAuthStore} from '@/stores/auth';
 
@@ -30,6 +30,7 @@ export function AppShell({children, nav = OWNER_NAV}: {children: ReactNode; nav?
   const user = useAuthStore((s) => s.user);
   const signOut = useAuthStore((s) => s.signOut);
   const location = useLocation();
+  const navigate = useNavigate();
 
   return (
     <div className="flex h-screen w-screen overflow-hidden bg-background text-foreground">
@@ -58,19 +59,43 @@ export function AppShell({children, nav = OWNER_NAV}: {children: ReactNode; nav?
           ))}
         </nav>
 
+        {/* ★ 위저드는 로그인 없이도 열린다(관문은 에디터 진입이다) — 그래서 이 자리는
+            **비로그인 상태를 반드시 그려야 한다.** 예전엔 이름이 빈 줄로 나오고 [로그아웃]만
+            남아서, 로그인한 적 없는 사람이 눌러도 아무 일이 안 일어났다(지울 세션이 없다). */}
         <div className="border-t border-sidebar-border p-3">
           <div className="mb-2 truncate text-[11px] text-sidebar-foreground">
-            {user ? userLabel(user) : ''}
-            {user?.companyName ? ` · ${user.companyName}` : ''}
+            {user ? (
+              <>
+                {userLabel(user)}
+                {user.companyName ? ` · ${user.companyName}` : ''}
+              </>
+            ) : (
+              <span className="opacity-60">로그인하지 않았습니다</span>
+            )}
           </div>
-          <button
-            type="button"
-            onClick={signOut}
-            className="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-sidebar-foreground transition-colors hover:bg-sidebar-accent/60"
-          >
-            <LogOut className="size-3.5" />
-            <span>로그아웃</span>
-          </button>
+          {user ? (
+            <button
+              type="button"
+              // 로그아웃은 **눈에 보이는 결과**가 있어야 한다. 스토어만 비우면 화면은 그대로라
+              // 눌러도 아무 일이 없는 것처럼 보인다 — 로그인 화면으로 보낸다.
+              onClick={() => {
+                signOut();
+                navigate('/login');
+              }}
+              className="flex w-full cursor-pointer items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-sidebar-foreground transition-colors hover:bg-sidebar-accent/60"
+            >
+              <LogOut className="size-3.5" />
+              <span>로그아웃</span>
+            </button>
+          ) : (
+            <Link
+              to="/login"
+              className="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-sidebar-foreground transition-colors hover:bg-sidebar-accent/60"
+            >
+              <LogIn className="size-3.5" />
+              <span>로그인</span>
+            </Link>
+          )}
         </div>
       </aside>