[fix] solution/frontend: 비로그인 상태의 사이드바 — 눌러도 아무 일 없는 [로그아웃] 제거

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

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

브라우저 확인: 비로그인 위저드에서 안내와 [로그인] 노출 → 로그인 후 '김사장 · 달빛스테이' →
[로그아웃] 클릭 시 /login 이동. tsc·eslint·vite build 통과.
This commit is contained in:
Mina Choi 2026-09-02 21:38:43 +09:00
parent cfec47230c
commit e1423418ae

View File

@ -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>