#123 프로필 편집 모달 UI 구현

src/app/@modal/(.)modal/profileEdit/page.tsx

@@ -0,0 +1,12 @@
+import EditModal from '@/components/Profile/modal/EditModal';
+import { Modal } from '@/shared/ui/Modal';
+
+const ProfileEdit = () => {
+  return (
+    <Modal size="xsmall" closeIcon>
+      <EditModal />
+    </Modal>
+  );
+};
+
+export default ProfileEdit;

src/app/modal/profileEdit/page.tsx

@@ -0,0 +1,12 @@
+import EditModal from '@/components/Profile/modal/EditModal';
+import { Modal } from '@/shared/ui/Modal';
+
+const ProfileEdit = () => {
+  return (
+    <Modal size="large" closeIcon>
+      <EditModal />
+    </Modal>
+  );
+};
+
+export default ProfileEdit;

src/components/Profile/ProfileCard.tsx

@@ -6,7 +6,7 @@ import { ImageComponent } from '@/shared/ui/Img';
 import useFollowMutation from '@/components/Profile/hooks/useFollowMutation';
 import useUnFollowMutation from '@/components/Profile/hooks/useUnFollowMutation';
 import { PROFILE_DEFAULT_IMAGE } from '@/components/Profile/constants/profileDefaultImage';
-import { useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { profileOptions } from '@/app/profile/queryOptions';
 
@@ -16,6 +16,7 @@ interface ProfileCardProps {
 }
 
 export const ProfileCard = ({ loginedId, accessToken }: ProfileCardProps) => {
+  const router = useRouter();
   const userId = useSearchParams().get('userId');
   const currentProfileId = Number(userId) || Number(loginedId);
   const isMyProfile = Number(userId) === Number(loginedId) || !userId;
@@ -92,7 +93,11 @@ export const ProfileCard = ({ loginedId, accessToken }: ProfileCardProps) => {
       <div className="flex flex-col gap-[20px] mobile:w-full md:w-full">
         {isMyProfile ? (
           <>
-            <Button kind={ButtonKind.primary} customSize={buttonCustomSize}>
+            <Button
+              onClick={() => router.push('/modal/profileEdit')}
+              kind={ButtonKind.primary}
+              customSize={buttonCustomSize}
+            >
               프로필 편집
             </Button>
             <Button

src/components/Profile/modal/EditModal.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { FormValues } from '@/shared/@common/types/input';
+import { Button, ButtonKind } from '@/shared/ui/Button/Button';
+import { Input } from '@/shared/ui/Input';
+import { TextBoxInput } from '@/shared/ui/Input/TextBox';
+import { ImageInput } from '@/shared/ui/Input/image';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+const EditModal = () => {
+  const { register, watch } = useForm<FormValues>({ mode: 'onChange' });
+  const text = watch('textarea', '');
+  const [image, setImage] = useState('');
+
+  const handleDeleteButton = () => {
+    console.log('이미지 인풋 삭제');
+    // TODO 진짜 작동하게 할 예정임
+  };
+
+  const handleImageUpload = () => {
+    // TODO 진짜 작동하게 할 거임
+    setImage('');
+  };
+  return (
+    <form className="flex flex-col gap-[40px] mobile:gap-[20px]">
+      <h1 className="lg:text-[24px] text-[20px] text-white">프로필 편집</h1>
+      <div className="flex flex-col lg:gap-[20px] md:gap-[15px] mobile:gap-[10px]">
+        <ImageInput
+          image={image}
+          handleDeleteButton={handleDeleteButton}
+          handleImageUpload={handleImageUpload}
+        />
+        <Input inputSize="medium" placeholder="닉네임을 입력해 주세요" />
+        <TextBoxInput
+          register={register}
+          text={text}
+          placeholder="본인을 소개해 주세요"
+        />
+      </div>
+      <Button
+        kind={ButtonKind.primary}
+        customSize="w-[540px] h-[65px] md:w-[510px] md:h-[55px] mobile:w-[295px] mobile:h-[50px] lg:text-[18px]"
+      >
+        저장하기
+      </Button>
+    </form>
+  );
+};
+
+export default EditModal;