52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
// apps/dm/app/(landing)/reuse/_components/LoginStatus.tsx
|
|
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export default function LoginStatus() {
|
|
const router = useRouter();
|
|
const [userName, setUserName] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
// 예시: 로그인 시 저장한 값
|
|
const name = localStorage.getItem("userName");
|
|
setUserName(name);
|
|
}, []);
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem("accessToken");
|
|
localStorage.removeItem("userName");
|
|
router.refresh(); // 헤더 상태 갱신
|
|
};
|
|
|
|
// 🔹 로그인 전
|
|
if (!userName) {
|
|
return (
|
|
<Link
|
|
href="/reuse/login"
|
|
className="flex items-center gap-2 rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white hover:bg-sky-600"
|
|
>
|
|
로그인
|
|
<span>→</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
// 🔹 로그인 후
|
|
return (
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<span className="text-gray-700">
|
|
<strong>{userName}</strong>님 환영합니다.
|
|
</span>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="rounded-md bg-red-500 px-3 py-2 text-white hover:bg-red-600"
|
|
>
|
|
로그아웃
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|