diff --git a/components/ProfileCard/index.tsx b/components/ProfileCard/index.tsx index 4189b2e..54bcbed 100644 --- a/components/ProfileCard/index.tsx +++ b/components/ProfileCard/index.tsx @@ -45,7 +45,7 @@ export default function ProfileCard({ imageSrc, userInfo }: ProfileCard) { const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); const age = formatAge(userInfo?.birthDate || ''); const router = useRouter(); - const { openModal } = useModal(); + const { openModal, closeModal } = useModal(); const handleRouting = (route: string) => { if (route === '/') { @@ -95,16 +95,26 @@ export default function ProfileCard({ imageSrc, userInfo }: ProfileCard) { </div> ); - const handleLogout = () => { - setShowModal(true); - }; - const doLogout = () => { signOut({ callbackUrl: '/', }); }; + const handleLogout = () => { + openModal({ + props: { + title: 'Log out of Ko-Living?', + content: 'You can log back in at anytime.', + buttonType: 'both', + buttonName: 'Cancel', + buttonName2: 'Log out', + handleClose: () => closeModal(), + handleSecondButton: () => doLogout(), + }, + }); + }; + const items = [ { IconComponent: MyPosting, text: 'My postings', route: '/userInfo/myPostings' }, { IconComponent: ChangePassword, text: 'Change password', route: '/resetPassword/step1' }, @@ -149,18 +159,6 @@ export default function ProfileCard({ imageSrc, userInfo }: ProfileCard) { className="bg-r1 mb-[20px] h-[120px] text-[14px]" readonly /> - - {showModal && ( - <ModalBox - title="Log out of Ko-Living?" - content="You can log back in at anytime." - buttonType="both" - buttonName="Cancel" - buttonName2="Log out" - handleClose={() => setShowModal(false)} - handleSecondButton={() => doLogout()} - /> - )} </div> <ListContainer /> <hr className="mt-[345px]" />