장소 수정 폼(HostEditForm) 리팩토링

[hyeone22]

장소 수정 폼(HostEditForm) 리팩토링

문제 상황

1. 하나의 컴포넌트에서 모든 폼 로직을 처리하여 코드가 복잡함
2. 이미지 처리, 폼 데이터 관리, 유효성 검사 등 여러 책임이 혼재
3. 폼 제출 로직이 너무 길고 복잡함
4. 컴포넌트의 재사용성과 테스트가 어려움

원인 분석

1. 관심사 분리가 되어있지 않음

   • 이미지 처리 로직
   • 폼 데이터 관리
   • 유효성 검사
   • API 호출

2. 상태 관리가 복잡함

   • 이미지 상태
   • 폼 데이터 상태
   • 수정 모드 상태

3. 에러 처리가 일관되지 않음

   • 단순 alert 사용
   • 에러 로깅 부족

해결 방법

1. 커스텀 훅으로 로직 분리

   • useImageHandler: 이미지 관련 로직 처리
   • usePlaceForm : Form 관련 로직 처리
     • useEditHandler : 수정/저장 버튼에 관련된 로직 처리
     • useFormHandler : Form 입력 변경에 대한 로직 처리
     • useInitHandler : Form 초기화 관련 로직 처리

2. 컴포넌트 분리

   • PlaceEditButton: 수정/취소 버튼
   • ImageSlider: 이미지 슬라이더
   • FormInput: 입력 필드들
   • SaveButton: 저장 버튼
   • PlaceAddressModal: 주소 선택 모달

3. 상태 관리 개선

   • Zustand를 사용한 전역 상태 관리
   • 이미지 상태와 폼 데이터 분리

컴포넌트 분리 근거

1. 단일 책임 원칙(SRP)

   • 각 컴포넌트가 하나의 책임만 가짐
   • 코드의 응집도 향상

2. 재사용성

   • 분리된 컴포넌트들의 독립적 사용 가능
   • 다른 폼에서도 재사용 가능

3. 유지보수성

   • 각 기능별 수정이 용이
   • 버그 수정이 쉬워짐

개선 효과

1. 코드 가독성 향상

   • 각 컴포넌트의 역할이 명확
   • 로직의 흐름 파악이 쉬움

2. 유지보수성 개선

   • 기능별 수정이 용이
   • 테스트 작성이 쉬워짐

3. 성능 최적화 가능성

   • 컴포넌트별 렌더링 최적화 가능
   • 상태 업데이트 최적화 가능

4. 버그 발생 가능성 감소

   • 책임이 명확히 분리됨
   • 상태 관리가 단순해짐