From 77ea6fd44579674f774cc3fe59d6129f872e831f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=98=81=EC=9A=B0?= <zestlee1106@gmail.com>
Date: Wed, 20 Dec 2023 21:44:05 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ProfileCard/index.tsx | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

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]" />