45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
/** 사이드바 맨 아래 계정 카드. 누구로 들어와 있는지, 남은 크레딧, 나가는 길 */
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { signOut, useMe } from "@/lib/auth";
|
|
|
|
export default function AccountBadge() {
|
|
const router = useRouter();
|
|
const { me, setMe } = useMe();
|
|
|
|
if (me === null) return null;
|
|
|
|
if (me === false) {
|
|
return (
|
|
<div className="account-card">
|
|
<button type="button" className="account-link" onClick={() => router.push("/login")}>
|
|
로그인
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="account-card">
|
|
{me.picture ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img className="account-photo" src={me.picture} alt="" referrerPolicy="no-referrer" />
|
|
) : (
|
|
<span className="account-photo account-photo--blank">
|
|
{(me.name || me.email).slice(0, 1)}
|
|
</span>
|
|
)}
|
|
<div className="account-body">
|
|
<p className="account-name" title={me.email}>{me.name || me.email}</p>
|
|
<p className="account-credit">보유 크레딧: {me.jobs_left}</p>
|
|
</div>
|
|
<button type="button" className="account-link"
|
|
onClick={() => { signOut().then(() => setMe(false)).then(() => router.push("/")); }}>
|
|
나가기
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|