[GGFE-229] 상점 모달 로딩 처리 #982
Conversation
| const onPurchase = async () => { | ||
| setIsLoading(true); | ||
| try { | ||
| await instance.post(`/pingpong/items/purchases/${itemId}`, null); | ||
| alert(`구매 성공!`); | ||
| } catch (error) { | ||
| setError('HB03'); | ||
| } | ||
| setIsLoading(false); | ||
| resetModal(); |
There was a problem hiding this comment.
setIsLoading(false)는 없어도 될거 같아요! 요청이 빠르게 완료되고 나면 로딩 버튼 애니메이션이랑 아닐 때 버튼 배경이랑 겹치는 것 같아요
| }: { | ||
| setRecipient: Dispatch<SetStateAction<string>>; | ||
| setGiftReqData: Dispatch<SetStateAction<GiftRequest>>; | ||
| }) { | ||
| const { |
There was a problem hiding this comment.
선물하기에서 검색하고 엔터치면 그 사람의 프로필로 이동하네요 😭 useSearchBar에서 가져온 것 handlekeydown에 router.push가 있어서 그런것 같아요.
| export default function LoadingButton() { | ||
| return ( | ||
| <div className={styles.loadingButton}> | ||
| <div className={styles.loading}> | ||
| <span className={styles.span1}>o</span> | ||
| <span className={styles.span2}>o</span> | ||
| <span className={styles.span3}>o</span> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
이 컴포넌트 이름은 버튼인데 사실은 버튼이 아니라 (?) 나중에 보면 헷갈릴수도 있을 것 같아요 🥲
LoadingEffect같이 애니메이션이나 효과를 보여주는 컴포넌트 이름으로 바꾸면 좋을 것 같아요!
There was a problem hiding this comment.
사실 버튼은 아니지만 버튼 모양처럼 생기긴해서 버튼이라고 지었습니다! ㅎㅎ 로딩애니메이션은 따로 컴포넌트로 분리하진 않아서 이것도 시간 되면 분리하면 좋을 것 같긴 하네요!
| const res = await instance.post( | ||
| `/pingpong/items/gift/${itemId}`, | ||
| giftReqData | ||
| ); | ||
| if (res.status === 201) { | ||
| alert(`${giftReqData.ownerId}님께 선물이 전달되었습니다.`); | ||
| } |
There was a problem hiding this comment.
여기 res.status가 201인 경우에는 처리가 되어서 alert가 뜰 것 같은데, 200같은 다른 성공 응답이 혹시라도 온다면 이 부분에 대해서는 처리가 안되어 있어서 바로 모달이 꺼질 것 같아요...!
특별히 res.status 201에 대한 처리가 필요한 게 아니라면 그냥 catch 블록으로 넘어가지 않았을 경우에는 성공이라고 판단하고 alert를 띄우는 것도 괜찮지 않을까 싶습니다 ^_ㅜ
| const res = await instance.post( | |
| `/pingpong/items/gift/${itemId}`, | |
| giftReqData | |
| ); | |
| if (res.status === 201) { | |
| alert(`${giftReqData.ownerId}님께 선물이 전달되었습니다.`); | |
| } | |
| const res = await instance.post( | |
| `/pingpong/items/gift/${itemId}`, | |
| giftReqData | |
| ); | |
| alert(`${giftReqData.ownerId}님께 선물이 전달되었습니다.`); |
There was a problem hiding this comment.
그렇게 하는게 좋을 것 같네요! 수정하겠습니다👍
📌 개요
💻 작업사항
✅ 변경로직