[1.5차 QA] 선물 등록 완료 버튼 관련 버그 수정(기본 이미지 문제, 로딩 뷰 처리) #393

urjimyu · 2024-02-22T08:35:56Z

이슈 넘버

close [1.5차 QA] 선물 등록 완료 버그 수정 #366

구현 사항

선물 등록 안 되는 문제 해결
선물 등록 끝내기 버튼 미작동 해결
기본 이미지로 등록되어 버리는 문제 해결
선물 등록 시 지연이 생기는 화면에 로딩뷰 추가

Need Review

1️⃣ 선물 등록 이미지 url이 제대로 등록되지 않는 이슈

이미지 url의 형식이 사이트마다 정말 다양하더라고요..! 그로 인해서 CORS 에러가 생기는 경우 빈 배열로 들어가 기본 이미지가 나타나는데, 정해진 기한 내에 모든 형식을 예외처리 하는 것은 한계가 있다고 판단해서(+얼마나 다양한 예외들이 있는지 전부 파악하는 것은 어려우므로) 일단 파일 변환 시 에러를 발생시키는 url들은 모두 직접 입력 화면으로 이동되도록 수정했습니다.
이미지 -> 파일 변환까지는 잘 되지만 파일이름 길이 문제 등으로 500에러가 뜨는 이슈는 추후 서버쌤들과의 논의 후에 새로운 PR로 올리겠습니다.

2️⃣ 로딩뷰 추가

현재 이미지 용량 때문에 선물 등록에 시간이 조금 걸리는 것 같은데, 지연이 생길 때 등록하기를 여러 번 누르면 여러 번 등록이 되어버리는 이슈가 있어서 서버통신 중일 때 로딩뷰가 뜨도록 추가했습니다. 나중에 리팩토링할 때 지연을 줄일 수 있는 방법을 더 찾아봐야 할 것 같습니다.

const onClick = async () => {
    setIsLoading(true);
    const { imageUrlS3 } = await putImageUrlToS3({ fileName, file, roomId, setImageUrl });
    if (isActivated) {
      mutation.mutate({
        roomId: roomId,
        name: name,
        cost: cost,
        imageUrl: imageUrlS3,
        url: link,
      });
    }
    setIsLoading(false);
  };

📸 스크린샷

링크 입력했으나 CORS 뜨는 경우

Screen.Recording.2024-02-22.at.5.32.19.PM.mov

직접 입력 플로우
(스샷에서는 선물 등록 홈으로 갈 때 살짝 버벅이는데 수정해서 나머지 스샷처럼 바로 선물등록록 홈으로 가도록 되어 있습니다)

Screen.Recording.2024-02-22.at.5.21.06.PM.mov

오픈그래프 이용 플로우

Screen.Recording.2024-02-22.at.5.31.45.PM.mov

Reference

github-actions · 2024-02-22T08:37:24Z

PR Preview Action v1.4.6
🚀 Deployed preview to https://SWEET-DEVELOPERS.github.io/sweet-client/pr-preview/pr-393/
on branch `gh-pages` at 2024-02-22 16:13 UTC

hoeun0723 · 2024-02-22T15:31:52Z

선물 등록 이미지 url이 제대로 등록되지 않는 이슈
모든 예외에 대한 처리를 일주일 내로 하는건 저 역시 마찬가지로 다 할 수 없다는 판단이 듭니다.
그렇기에, qa 가 있는것이고 초반 유저 받아서 테스트 기간이 있는것이죠

그럼에도 불구하고 스프린트가 끝나는 기간동안 저희가 발견한 모든 케이스에 대해서 예외처리는 필요하다고 생각합니다. 그를 하기 위해 열심히 반영해주신거 같아 넘 좋았습니다. 또한 지금 당장 안 되는 이슈들은 유저가 사용하는데 있어서 불편함을 느끼지 않을정도로 수정해주신 부분도 좋은 대처라는 판단이 듭니다.

해당 500에러 뜨는 부분은 말씀해주신대로 issue를 새롭게 파서 해주신다면 바로 확인하도록 하겠습니다!

로딩뷰 추가
넘 좋은 거 같습니다 !! 필요한 부분이었네요. 해당 코드 살펴보도록 할게요 !!

pr 내용에 대한 답변입니다. 코드리뷰는 이어서 해보도록 하겠습니다!

hoeun0723

고생 많으셨습니다 !!

useEffect 사용을 보고 코드를 살펴 봤는데, 서버 요청으로 받은 값이 아닌, 클라에서의 값 상태를 관리 하는 코드더군요..

저는 보통 최대한 useEffect사용을 줄이려고 하는 편인데, 지금 현재 코드에서 useEffect사용을 안 할 수 있는 방법이 있을까?에 대한 해답이 떠오르지 않아 approve 리뷰 남깁니다 ㅎㅎ ㅠㅠㅜㅠ 너무 고생 많으셨어요!!

imeureka

고생하셨습니다!

이미지 파일 지정도 넘 좋습니다. 이미지 url의 형식이 사이트마다 정말 다양하군요..!! 이런 이유가 빈 배열로 들어가 기본 이미지가 나타난다는 pr 읽고 와우 했답니다! 좋습니다 확실히 다양한 예외들이 있는지는 계속 테스트 해봐야 될 것 같습니다 ㅎㅎ!
일단 파일 변환 시 에러를 발생시키는 url들은 모두 직접 입력 화면으로 이동되도록 수정했습니다. => 너무 좋아요!! 감사합니다 ☺️
서버통신 중일 때 로딩뷰가 뜨도록 추가한 것 너무 좋습니다! 사용자 경험 개선 넘 멋진 개발자...

imeureka · 2024-02-23T02:49:56Z

src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.tsx

@@ -37,7 +37,7 @@ const AddGiftImg = ({
          <S.IcEmptyThumbnailWrapper>
            <input
              type='file'
-              accept='image/*'
+              accept='image/jpeg, image/png, image/gif, image/heic '


accept가 다양해졌네요..! 이미지에 heic도 있군요.!

오 저도 이렇게 heic도 추가하겠습니다 !! 감사합니다

넵 폰 이미지 때문에 추가했어요!

imeureka · 2024-02-23T02:50:54Z

src/context/AddGift/AddGiftContext.tsx

@@ -10,7 +10,7 @@ const initialAddGiftInfo: AddGiftInfo = {
  name: '',
  cost: 0,
  imageUrl: '',
-  url: ',',
+  url: '',


앗! 여기있었군요 ㅋㅋㅋㅋ쉼표 고친 것 너무 좋습니다!

ㅋㅋㅋ숨겨져 있던 오타 드디어 해결~!

imeureka · 2024-02-23T02:54:09Z

src/hooks/useConvertURLtoFile.tsx

+    const data = await response.blob();
+    // const extensions = url.split('.').pop();
+    const filename = url.split('/').pop();
+    const metadata = { type: `image/*` };


여기서는 위에 예외처리 해준 이미지 파일들처럼 지정안해줘도 되나요~?! 왜 위에 except 제가 리뷰남긴 부분은 이미지 타입을 4가지로 지정한 이유는 에러 발생하지 않는 유형이겠죠?!

두 가지 이유 때문에 이 부분은 따로 변경하지 않았습니다!

이미 input accept 지정으로 한 번 걸러진 아이들이 들어오는 거라서

추후 다른 확장자를 가졌더라도 예외처리를 통해 해결이 될까봐 일단 유지했습니다!

ExceptAnyone · 2024-02-23T04:23:41Z

src/hooks/queries/gift/usePostGift.tsx

@@ -12,6 +12,8 @@ export const usePostGift = (
  roomId: number,
  targetDate: string,
  setStep: React.Dispatch<React.SetStateAction<number>>,
+  updateAddGiftInfo: (newInfo: Partial<AddGiftInfo>) => void,


추후에는 props로 받는 방법 이외에,

Suggested change

updateAddGiftInfo: (newInfo: Partial<AddGiftInfo>) => void,

const { updateAddGiftInfo } = use뭐시기Context;

이렇게 불러와서

updateAddGiftInfo({ name: '', cost: 0, imageUrl: '', url: '' });

바로 사용해도 좋을 것 같습니다! 아무래도 props type까지 설정해줘야하고 살짝 귀찮을 수 있으니 :)

피드백 감사합니다~! 큐에이 하면서도 저 부분 때문에 귀찮아지더라고요ㅠ 그래서 giftee name 관련 context를 추가할 때는 제안해주신 방식과 같은 방식으로 직접 불러오는 방식으로 구현했습니다. 이 부분은 나중에 싹 리팩토링 하겠습니다~!

ExceptAnyone

context 사용 관련 자잘한 리뷰 남겼습니다!
나중에 리팩토링할 때 같이 이야기 해봐여 :)

너무너무 고생많으셨습니다 ㅎㅎ

urjimyu added 7 commits February 20, 2024 15:09

fix: 링크 없이 등록 시 모달 안 뜨도록 수정

8c9dac4

fix: 기본 링크 설정에 쉼표 오타 제거

adbd6bd

refactor: 이미지 링크 빈 값 들어가는 에러 해결

d24965c

Merge branch 'develop' into refactor/#366-fix-buttons

a5ef882

fix: CORS 에러 나면 바로 직접 입력으로 전환

a3514f1

refactor: onSuccess 중복 제거

4152d15

feat: 선물 등록 시 지연 생길 때 로딩뷰 추가

0408000

urjimyu added fix 🛠️ Something isn't working refactor ⚙️ 개선 사항 선물등록 🎁 선물 등록 페이지 labels Feb 22, 2024

urjimyu requested review from hoeun0723, imeureka and ExceptAnyone February 22, 2024 08:35

urjimyu self-assigned this Feb 22, 2024

urjimyu changed the title ~~Refactor/#366 fix buttons~~ [1.5차 QA] 선물 등록 완료 버튼 관련 버그 수정(기본 이미지 문제, 로딩 뷰 처리) Feb 22, 2024

fix: 로딩 완료 후 바로 선물등록 홈으로 이동되도록 수정

d103556

hoeun0723 approved these changes Feb 22, 2024

View reviewed changes

fix: svg 막고 핸드폰 사진 허용

936faa6

imeureka approved these changes Feb 23, 2024

View reviewed changes

ExceptAnyone reviewed Feb 23, 2024

View reviewed changes

ExceptAnyone approved these changes Feb 23, 2024

View reviewed changes

urjimyu merged commit 746ed91 into develop Feb 23, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1.5차 QA] 선물 등록 완료 버튼 관련 버그 수정(기본 이미지 문제, 로딩 뷰 처리) #393

[1.5차 QA] 선물 등록 완료 버튼 관련 버그 수정(기본 이미지 문제, 로딩 뷰 처리) #393

urjimyu commented Feb 22, 2024

github-actions bot commented Feb 22, 2024 •

edited

Loading

hoeun0723 commented Feb 22, 2024

hoeun0723 left a comment

imeureka left a comment

imeureka Feb 23, 2024

ExceptAnyone Feb 23, 2024

urjimyu Feb 23, 2024

imeureka Feb 23, 2024

urjimyu Feb 23, 2024

imeureka Feb 23, 2024

urjimyu Feb 23, 2024

ExceptAnyone Feb 23, 2024

urjimyu Feb 23, 2024

ExceptAnyone left a comment

-  updateAddGiftInfo: (newInfo: Partial<AddGiftInfo>) => void,
+ const { updateAddGiftInfo } = use뭐시기Context;
+  이렇게 불러와서
+  updateAddGiftInfo({ name: '', cost: 0, imageUrl: '', url: '' });
+  바로 사용해도 좋을 것 같습니다! 아무래도 props type까지 설정해줘야하고 살짝 귀찮을 수 있으니 :)

[1.5차 QA] 선물 등록 완료 버튼 관련 버그 수정(기본 이미지 문제, 로딩 뷰 처리) #393

[1.5차 QA] 선물 등록 완료 버튼 관련 버그 수정(기본 이미지 문제, 로딩 뷰 처리) #393

Conversation

urjimyu commented Feb 22, 2024

이슈 넘버

구현 사항

Need Review

1️⃣ 선물 등록 이미지 url이 제대로 등록되지 않는 이슈

2️⃣ 로딩뷰 추가

📸 스크린샷

Reference

github-actions bot commented Feb 22, 2024 • edited Loading

hoeun0723 commented Feb 22, 2024

hoeun0723 left a comment

Choose a reason for hiding this comment

imeureka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ExceptAnyone left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 22, 2024 •

edited

Loading