Merge pull request #165 from bsideproject/moon

[feat] User Profile 수정
bsideproject · Sep 26, 2023 · 6f3fa51 · 6f3fa51
2 parents 4f2726f + eb67177
commit 6f3fa51
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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