작업 방식

• 하나의 페이지에 Client/Mover로 분기 처리해서 각각 코드 작성
• 오류 메시지 출력부는 객체로 구현함
• 버튼 클릭 부분과 이미지는 따로 빼서 구현(해야 했음)
• 사용자 데이터의 “일부”를 바꾸는 것이므로 프로필 등록/수정 모두 PATCH 메소드로 구현

(삭제한 기능) “취소” 버튼을 누르면 입력/변경했던 값을 초깃값으로 되돌리기

const initialValues = useMemo<ClientProfileUpdateValue>(() => {
  if (user?.userType === "client") {
     const client = user as Client;

     return {
        name: client.name ?? "",
        email: client.email ?? "",
        phone: client.phone ?? "",
        profileImage: client.profileImage ?? "",
        serviceType: client.serviceType ?? [],
        livingArea: client.livingArea ?? [],
     };
  }

  return {
     name: "",
     email: "",
     phone: "",
     profileImage: "",
     serviceType: [],
     livingArea: [],
  };
}, [user]);

// ✅ react-hook-form
const {
  register,
  handleSubmit,
  setError,
  setValue,
  watch,
  control,
  formState: { errors, isValid },
  reset,
} = useForm<ClientProfileUpdateValue>({
  mode: "onChange",
  resolver: zodResolver(updateClientProfileSchema(user?.provider)),
  defaultValues: initialValues, // 새로고침 해야 나옴 (취소 버튼은 상관x)
});

// ✅ 기본값 초기화 설정333 = 이름 등을 보존하려면 현재 값 기준으로 써야 함 (취소 버튼으로 연결)
const handleCancel = () => {
  reset({ ...initialValues });
  reset(initialValues);
};

[배운 점] 버튼 type=”reset”으로 설정하면, react-hook-form 초깃값 설정이 안 먹히고 입력창의 전체 값을 지워버린다. 초깃값을 보존해야 하는 경우는 button type="button"으로 설정해야 한다.

문제 및 해결책 : 함수 실행 순서 충돌로 기능이 사라짐

• 문제: PATCH 시, refreshUser (사용자 정보를 부르면서 바꿈), 토스트 알림, 삭제한 초깃값 코드, 페이지 이동 기능이 충돌해 하나가 되면 하나가 안 됨.
• 해결: (1) setTimeout을 걸어서 각각 함수가 수행될 시간을 확보하고, (2) 사실 초깃값이 아닌 페이지 이동 기능이 필요했던 것이라(요구사항 잘못 파악), 초깃값 코드를 삭제해서 해결.

js의 비동기 함수는 “스택” 자료형이라 후입선출로 출력됨. 경로 이동 코드와 겹치면 알림 적용 or 상태 변경을 못할 확률이 있음.

→ 나중에 setTimeout 없이 User 상태 변경 + 알림 + 경로 이동이 되도록 구현해볼 것.

소셜 로그인 시 프로필 수정 페이지에서 비밀번호 유효성 검사 제거

(코드가 똑같아서 BE에서 다룸)