fix: 반려동물 프로필 이미지 추가, 수정 시 이미지 업로드 도중 폼 제출 못하도록 수정

[HyeryongChoi]

📄 Summary

문제점

RPReplay_Final1700178989-1.mov

반려동물 프로필 이미지를 추가하거나 수정할 때 아래와 같은 단계를 거칩니다.

• 이미지 파일 압축 > 압축된 이미지 파일 서버에 업로드 > 서버로부터 이미지 URL을 응답받음

네트워크 상태를 slow 3g로 설정한 후 테스트해보니, 이미지가 업로드 되기 전에 등록 버튼을 누르면 프로필 이미지가 제대로 등록되지 않더라구요!

주요 작업내용

• 압축 중인 경우 > 압축 진행률을 보여줍니다.
• 업로드 중인 경우 > 로딩 스피너를 보여줍니다.
• 이미지 압축 중이거나 업로드 중인 경우 > 버튼을 비활성화합니다.

기타 작업내용

• 반려동물 이미지 최대 가로, 세로 너비를 200 -> 1000px로 수정(압축 라이브러리 설정 중 maxWidthOrHeight 값 변경)
  • 문제: 만약 1:9 비율의 이미지라고 하면 가로 약22px, 세로 200px이 되는데 이 이미지를 프로필 사이즈(55x55)로 늘리게 되면 이미지가 심하게 깨짐
  • 해결: 110px(55x2)을 기준으로 하면 990px을 최대 너비로 설정하면 됨 -> 조금 더 넉넉하게 1000px로 설정

실행화면(5MB 이미지 업로드 테스트)

default.mov

default.mov

🙋🏻 More

• close [FE] 반려동물 프로필 이미지 추가, 수정 시 이미지 업로드 도중 폼 제출 막기 #537

[ksone02]

오... 첵스 최고...

고생하셨습니다~

[n0eyes]

UX가 훨씬 좋아졌네용

고생하셨어요 😄