[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 type {ComponentType, ReactNode} from 'react';
|
||||||
import {Link, NavLink, useLocation} from 'react-router';
|
import {Link, NavLink, useLocation, useNavigate} from 'react-router';
|
||||||
import {LayoutGrid, LogOut, Search, Wand2} from 'lucide-react';
|
import {LayoutGrid, LogIn, LogOut, Search, Wand2} from 'lucide-react';
|
||||||
import {cn} from '@/lib/utils';
|
import {cn} from '@/lib/utils';
|
||||||
import {userLabel, useAuthStore} from '@/stores/auth';
|
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 user = useAuthStore((s) => s.user);
|
||||||
const signOut = useAuthStore((s) => s.signOut);
|
const signOut = useAuthStore((s) => s.signOut);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-screen overflow-hidden bg-background text-foreground">
|
<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>
|
</nav>
|
||||||
|
|
||||||
|
{/* ★ 위저드는 로그인 없이도 열린다(관문은 에디터 진입이다) — 그래서 이 자리는
|
||||||
|
**비로그인 상태를 반드시 그려야 한다.** 예전엔 이름이 빈 줄로 나오고 [로그아웃]만
|
||||||
|
남아서, 로그인한 적 없는 사람이 눌러도 아무 일이 안 일어났다(지울 세션이 없다). */}
|
||||||
<div className="border-t border-sidebar-border p-3">
|
<div className="border-t border-sidebar-border p-3">
|
||||||
<div className="mb-2 truncate text-[11px] text-sidebar-foreground">
|
<div className="mb-2 truncate text-[11px] text-sidebar-foreground">
|
||||||
{user ? userLabel(user) : ''}
|
{user ? (
|
||||||
{user?.companyName ? ` · ${user.companyName}` : ''}
|
<>
|
||||||
|
{userLabel(user)}
|
||||||
|
{user.companyName ? ` · ${user.companyName}` : ''}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<span className="opacity-60">로그인하지 않았습니다</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{user ? (
|
||||||
<button
|
<button
|
||||||
type="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"
|
// 눌러도 아무 일이 없는 것처럼 보인다 — 로그인 화면으로 보낸다.
|
||||||
|
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" />
|
<LogOut className="size-3.5" />
|
||||||
<span>로그아웃</span>
|
<span>로그아웃</span>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user