[Feat] 편지 등록, 쓰기 이미지 업로드 지연 문제 해결

[yyypearl]

연관 이슈

close #96

개요

편지 등록, 쓰기 이미지 업로드 지연 문제 해결

✅ 작업 내용

• 미리보기용 이미지와 서버로 전달하는 이미지를 별개로 분리해 사용자 입장에서 화면에 나오는 이미지의 지연을 줄임

(자세한 설명)

• 기존에 서버로부터 받아오는 images와 별개의 미리보기용 previewImages 상태를 만든다. (클라이언트에서 파일 객체를 url로 변경한 blob:~ 형태)
• 파일을 선택한 즉시 previewImages를 할당해 미리보기로 보여주고, 서버로 요청해 받아온 S3 url은 images에 담아둔다. (이 images는 서버로 편지 등록, 편지 쓰기, 임시저장하기 등 요청을 보낼 때 사용된다.)
• 임시저장 글을 저장할 때는 위에서 언급한 대로 images를 보내고, 임시저장 글을 불러올 때는 previewImages를 임시저장 글에서 가져온 images로 할당한다. (즉, 화면에 보이는 이미지를 담아두는 변수가 previewImages이다. 이때는 S3 url이 저장되는 것)
• 추가로, 기존에는 편지 등록에서의 각 페이지가 바뀔 때 전역 상태를 저장하였으나(이때는 새로고침하면 현재 정보가 아닌 이전에 내가 템플릿 선택으로 넘어갔을 떄의 정보로 갑자기 바뀐다.), 이제는 input이 변경되면 바로바로 바뀌도록 수정하였다.
• 서버로부터 s3 이미지 url을 받아오기 전에는 페이지가 이동하거나 임시저장 등이 이루어지면 안되므로 (이 과정들에서는 previewImages가 아닌 images가 필요) isImageUploadLoading 상태로 로딩을 적용하였다.

• 이미지가 4개일 경우 + 버튼을 누르면 바로 토스트가 나오는 것이 아니라, 파일 선택창이 나온 후에 토스트 메세지가 나오는 문제 해결

• 임시 저장 목록에서의 저장 시간 이상 해결

  • 서버에 저장되는 시간은 UTC, 한국 시간은 KST로 차이가 존재한다. 9시간 차이를 고려하여 formatDate 함수를 수정하였다.

• 행성 추가 시 행성명 10자 제한 설정

🖥 구현 결과

• 첫 번째 영상은 뒤에 와이파이 이슈가 있어서 갑자기 끊겼습니다! 아래 두 번째 영상 이어서 참고해주세요~!!

20241120_175059.mp4

20241120_175518.mp4

리뷰 요구사항

📝 기타 사항

• 압축은 좀 더 사이즈 줄여서 0.1MB로 했는데도 서버로 요청해서 받아와야 하니 로딩이 생기더라구요! 그래서 미리보기와 서버에서 받은 이미지로 구분하였습니다. 저는 이 방법밖에 안 떠올라서 좋은 것인지는 잘 모르겠지만..😮 괜찮은지 피드백 주시면 좋을 거 같습니다.

• 와이파이 상황에 따라서도 속도가 좀 차이가 있는 거 같아서 전에 얘기해준 스켈레톤 UI도 같이 넣으면 좋을 거 같다 생각했습니다! 이거는 뒤에 작업하면서 넣어볼게요.

[github-actions]

🎉 Deploy Preview

https://lettering-5txc8coh5-yyypearls-projects.vercel.app
여기에서 배포 결과 확인하기

[github-actions]

🎉 Deploy Preview

https://lettering-1uhyu3zsc-yyypearls-projects.vercel.app
여기에서 배포 결과 확인하기

[hyo-4]

아하 그냥 미리보기용 사진 배열을 따로 만들었구나 사진 서버 업로드 전까지 로딩 처리한거면 괜찮을거같아! 서버에 사진올리기가 실패한다거나 이런 예외처리했다면 나쁘지 않은듯!!