글 작성 모달과 글 수정 모달 통합하기

프로젝트 초기에 글 작성을 위한 모달과 글 수정을 위한 모달을 분리하여 구현했습니다.
막상 구현하고 나서는 글 작성기능, 글 로드기능을 제외하고는 같은 로직을 이루고 있기 때문에 하나의 컴포넌트로 통합해서 사용하도록 수정했습니다.

글 작성과 글 수정을 구분하는 기준

• 새로운 상태인 postModalStatus를 추가해 현재 모달의 상태를 구분했습니다.
• 초기 상태는 'idle', 글 작성인 경우 'new', 글 수정인 경우 'update'로 구분하여 상태를 표시했습니다.
• 해당 상태변수를 이용해서 변화하는 로직에 대해 분기를 구분했습니다.
  

분기에 따라 달라지는 로직들

글 수정시 초기내용에 대한 로드

useEffect와 postModalStatus를 이용해 제목, 본문, 이미지를 로드합니다.

글 작성/수정 완료에 따른 분기

글 작성인 경우에는 제목, 본문, 이미지 파일을 formData에 넣어 백엔드로 요청하고, 글 수정인 경우에는 formData에 추가적으로 현재 글의 id값을 넣고 수정 요청을 하도록 합니다.