57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import ModalCloseSvg from "../svgs/closexsvg";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
open: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function PasswordChangeDoneModal({ open, onClose }: Props) {
|
||
|
|
if (!open) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[2px]"
|
||
|
|
role="dialog"
|
||
|
|
aria-modal="true"
|
||
|
|
>
|
||
|
|
<div className="w-[480px] h-[437px] rounded-[12px] border border-[#dee1e6] bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)] flex flex-col justify-between">
|
||
|
|
<div className="flex h-[80px] items-center justify-end p-6">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
aria-label="닫기"
|
||
|
|
onClick={onClose}
|
||
|
|
className="inline-flex size-6 items-center justify-center text-[#333c47] hover:opacity-80 cursor-pointer"
|
||
|
|
>
|
||
|
|
<ModalCloseSvg />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="px-6 pb-0 ">
|
||
|
|
<div className="w-full mx-auto flex flex-col items-center gap-4">
|
||
|
|
<h2 className="text-[24px] font-extrabold leading-[1.45] text-[#333c47]">
|
||
|
|
비밀번호 변경이 완료됐습니다.
|
||
|
|
</h2>
|
||
|
|
<p className="text-[18px] leading-[1.5] text-[#6c7682] text-center">
|
||
|
|
새로운 비밀번호로 다시 로그인 해주세요.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center justify-center p-6">
|
||
|
|
<Link
|
||
|
|
href="/login"
|
||
|
|
className="h-12 w-[284px] rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white inline-flex items-center justify-center cursor-pointer"
|
||
|
|
>
|
||
|
|
로그인
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|