[Fix] 프로필 사진 undefined로 서버에 전송되는 이슈 해결

[lydiacho]

Related Issue : Closes #365

---

🧑‍🎤 Summary

사용자가 정상적으로 사진을 제출했으나, 서버에 undefined로 저장되고 사진이 제출이 안되었던 이슈
-> input file 첨부 취소 처리가 되어있지 않아 발생한 문제

🧑‍🎤 Screenshot

문제 상황

i.e.e.e.2024-08-08.i.i.5.28.10.mov

해결 완료

i.e._e.e._2024-08-08_i.i._6.43.18.mov

🧑‍🎤 Comment

⚠️ form value update와 관련된 문제라고 추측되어서 디버깅을 위해 react-hook-form의 devTool 의존성을 추가로 설치하였습니다!

pull 받으신 후 yarn 한번 해주세요
우선 모든 페이지에서 사용하진 않고, ApplyPage에만 적용시켜주었습니다. 추후 필요에 따라 다른 페이지에도 넣어주면 될 것 같아요

원인 파악은 오래걸렸으나, 사실 해결 코드는 몇줄 되지 않습니다!

주요 원인은
사용자가 사진을 첨부했다가, 다시 첨부하기를 누른 후 이를 취소했을 경우,
form value 값은 undefined로 초기화가 되지만,
지원서 상의 이미지 미리보기와, form validation을 위한 required 조건에서는 별도의 image state를 사용해주고 있어서
두 데이터 사이의 싱크가 맞지 않아 발생한 문제였습니다!

사용자가 첨부 취소를 할 경우, 이전에 첨부한 이미지를 form value에 그대로 유지시켜서 해결하는 방법도 있지만
해당 방식은 효과 대비 비용이 크다고 생각하여
그냥 첨부 취소할 경우, 첨부되어있는 사진이 삭제되도록 (즉 form value에 값이 초기화되면서 동시에 이미지 미리보기와 required validation도 함께 동작하도록) 처리해주었습니다!

const handleChangeImage = (e: ChangeEvent<HTMLInputElement>) => {
  const imageFile = e.target.files?.[0];

  // if (!imageFile) return; 기존 코드 
  if (!imageFile) {
    setImage(null);
    return;
  }
  ...
}

TMI일지도 몰라서 구체적인 고민 과정에 대한 기록은 노션 링크로 첨부해놓겠습니다 :) ⬇️
트러블 슈팅 과정 기록 (러프함 주의)

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[eonseok-jeon]

데브툴 꽤나 무겁네요ㅜ 로컬 돌리는데 렉이 좀 걸리더라고용?

원인 찾아주세여 완전 감사합니다~~~!~
천재만재개발자 :) 🚀🚀🚀🚀🚀