From a8abcdd06a680d4fab2a88ed4ea1c6d262a6b1c5 Mon Sep 17 00:00:00 2001
From: hjy0951 <hjy0951@gmail.com>
Date: Thu, 21 Nov 2024 17:36:32 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=94=84=EB=A1=9C=ED=95=84=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=91=20=EC=8B=9C=20=EB=B3=80=EA=B2=BD=EC=A0=90=EC=9D=B4=20?=
 =?UTF-8?q?=EC=97=86=EB=8B=A4=EB=A9=B4=20=EB=B2=84=ED=8A=BC=20=EB=B9=84?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../organisms/profile-edit-form.tsx           | 53 ++++++++++++++++---
 1 file changed, 45 insertions(+), 8 deletions(-)

diff --git a/features/profile/components/organisms/profile-edit-form.tsx b/features/profile/components/organisms/profile-edit-form.tsx
index d1889f30..f18aff7c 100644
--- a/features/profile/components/organisms/profile-edit-form.tsx
+++ b/features/profile/components/organisms/profile-edit-form.tsx
@@ -1,10 +1,17 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { useEffect } from 'react';
+import {
+  FormProvider,
+  SubmitHandler,
+  useForm,
+  useWatch,
+} from 'react-hook-form';
 
 import { useImagePresignUrl } from '@/apis';
 import { Button } from '@/components/atoms';
+import { FormTextArea, FormTextField } from '@/components/molecules';
 import { useCurrentMemberInfo, useToast } from '@/hooks';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
@@ -17,7 +24,6 @@ import {
 } from '../../apis';
 import { useProfileData, useProfileEditForm } from '../../hooks';
 import { ProfileEditImageSection } from './profile-edit-image-section';
-import { ProfileEditTextInfoSection } from './profile-edit-text-info-section';
 
 interface ProfileEditFormProps {
   nickname: string;
@@ -147,7 +153,32 @@ export function ProfileEditForm() {
     }
   };
 
+  const nickname = useWatch({ control: methods.control, name: 'nickname' });
+  const introduction = useWatch({
+    control: methods.control,
+    name: 'introduction',
+  });
+
+  useEffect(() => {
+    if (!profileData) return;
+
+    const { nickname: currentNickname, introduction: currentIntroduction } =
+      profileData;
+
+    if (currentNickname) methods.setValue('nickname', currentNickname);
+    if (currentIntroduction)
+      methods.setValue('introduction', currentIntroduction);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [profileData]);
+
   if (!profileData) return null;
+
+  const isDirty = () => {
+    const { nickname: prevNickname, introduction: prevIntroduction } =
+      profileData;
+    return !(nickname === prevNickname && introduction === prevIntroduction);
+  };
+
   return (
     <FormProvider {...methods}>
       <ProfileEditImageSection
@@ -161,12 +192,17 @@ export function ProfileEditForm() {
         onSubmit={methods.handleSubmit(onSubmit)}
         className={layoutStyles.form}
       >
-        <ProfileEditTextInfoSection
-          nickNameLabel="닉네임"
-          nickNameSubText="14자까지 입력할 수 있어요"
-          introductionPlaceholder="한 줄 소개를 입력해주세요 (수린이 1년차 / 접영 드릴 연습중)"
-          currentNickname={profileData?.nickname.trim()}
-          currentIntroduction={profileData?.introduction?.trim()}
+        <FormTextField
+          {...methods.register('nickname')}
+          registerdFieldValue={nickname}
+          label="닉네임"
+          subText="14자까지 입력할 수 있어요"
+          maxLength={14}
+          wrapperClassName={css({ marginBottom: '24px' })}
+        />
+        <FormTextArea
+          {...methods.register('introduction')}
+          placeholder="한 줄 소개를 입력해주세요 (수린이 1년차 / 접영 드릴 연습중)"
         />
         <div className={buttonStyles.layout}>
           <Button
@@ -176,6 +212,7 @@ export function ProfileEditForm() {
             label="저장하기"
             size="large"
             className={buttonStyles.content}
+            disabled={isDirty() === false}
           />
         </div>
       </form>