From eb67177ec678c351ee30123c3442250244d241e3 Mon Sep 17 00:00:00 2001
From: JAEMOONLEE <leejaemoon@lotte.net>
Date: Tue, 26 Sep 2023 13:53:55 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20User=20Profile=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Modal/ModalBox.tsx    |  2 +-
 components/ProfileCard/index.tsx | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/components/Modal/ModalBox.tsx b/components/Modal/ModalBox.tsx
index e21753b..780c987 100644
--- a/components/Modal/ModalBox.tsx
+++ b/components/Modal/ModalBox.tsx
@@ -82,7 +82,7 @@ function Modal({
     let result = <Header type="title" title={title} right="close" logoColor="black" handleButtonClick={goBack} />;
     // TODO 나중에 여기 layoutHeader쪽 Component를 받는 거로 변경
     if (customHeader) {
-      result = <Header type="back" logoColor="black" bgColor="white" title="Add rooms" handleButtonClick={goBack} />;
+      result = <Header type="back" logoColor="black" bgColor="white" title={title} handleButtonClick={goBack} />;
     }
     return result;
   };
diff --git a/components/ProfileCard/index.tsx b/components/ProfileCard/index.tsx
index dee5dde..23e9610 100644
--- a/components/ProfileCard/index.tsx
+++ b/components/ProfileCard/index.tsx
@@ -7,6 +7,8 @@ import Logout from '@/public/icons/LogOut.svg';
 import Vector from '@/public/icons/Vector 115.svg';
 import { useRouter } from 'next/router';
 
+import useModal from '@/hooks/useModal.ts';
+
 interface ProfileCardProps {
     name : string;
     age: number;
@@ -25,11 +27,24 @@ export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCard
     const { register } = useForm({ mode: 'onChange' });
     const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
     const router = useRouter();
+    const { openModal, closeModal } = useModal();
 
     const handleRouting = (route: string) => {
         router.push(route);
     }
 
+    const handleProfileEdit = () => {
+        openModal({
+            props: {
+              title: 'Edit profile',
+              size: 'full',
+              custom: true,
+              customHeader: true,
+            },
+            children: <div>hi</div>,
+          });
+    }
+
     const ListItem = ({ IconComponent, text, route, index }: ListItemProps) => (
         <div 
             className="flex justify-between items-center border border-gray-300 p-[10px]"
@@ -75,7 +90,7 @@ export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCard
                         <div className="text-base">{age} years old | {gender}</div>
                     </div>
                     <div className="ml-auto flex items-center pr-4">
-                        <button className="text-sm text-r5 border border-r5 rounded-full w-[50px] h-[24px]">Edit</button>
+                        <button className="text-sm text-r5 border border-r5 rounded-full w-[50px] h-[24px]" onClick={handleProfileEdit}>Edit</button>
                     </div>
                 </div>
                 <Textarea