[fix] solution/frontend: 비로그인 상태의 사이드바 — 눌러도 아무 일 없는 [로그아웃] 제거
위저드는 로그인 없이 열린다(관문은 에디터 진입이다). 그런데 사이드바는 로그인 여부와 무관하게 [로그아웃]만 그렸다 — 로그인한 적 없는 사람에게는 **이름이 빈 줄로 나오고, 버튼을 눌러도 지울 세션이 없어 아무 일도 일어나지 않았다.** "유저 정보가 어디에도 안 보인다"가 이것이다. - 비로그인: '로그인하지 않았습니다' + [로그인] 링크 - 로그인: 이름 · 상호 + [로그아웃]. 로그아웃은 스토어만 비우면 화면이 그대로라 눌러도 아무 일이 없는 것처럼 보인다 — /login 으로 보낸다 브라우저 확인: 비로그인 위저드에서 안내와 [로그인] 노출 → 로그인 후 '김사장 · 달빛스테이' → [로그아웃] 클릭 시 /login 이동. tsc·eslint·vite build 통과.
This commit is contained in:
parent
cfec47230c
commit
e1423418ae
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user