Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

댓글 및 게시글에 대한 중복 Mutation 방지 처리, 가공된 에러 메시지를 Toast로 띄우도록 수정 #660

Merged
merged 8 commits into from
Sep 21, 2023

Conversation

inyeong-kang
Copy link
Member

🔥 연관 이슈

close: #473
close: #611
close: #646
close: #648

📝 작업 요약

  • 마감된 게시글에 투표하는 경우 code 등 불필요한 정보까지 Toast에 뜨지 않도록 에러 메시지를 가공했습니다.
  • 삭제된 게시글에 투표하는 경우에도 마찬가지로, message만 Toast에 뜨도록 하였습니다. (현재 알 수 없는 서버 에러입니다 라는 이슈는 [FIX] 투표 관련 예외처리 전환 #658 에서 해결 중입니다!)
  • 댓글에 빈 문자열이나 공백, 개행만 입력하고 저장하는 것을 방지하였습니다.
  • 기존의 Mutation이 로딩 중인데, 중복으로 Mutation 하는 경우를 방지하였습니다.
    • 기존의 Mutation이 로딩 중이라면, SquareButton이 gray이고 disabled 되도록 하였습니다.

⏰ 소요 시간

4시간

🔎 작업 상세 설명

useMutation이 사용되는 기능은 아래와 같습니다. (✅는 이 pr에서 적용한 부분입니다.)

  • 댓글 생성/수정 (POST/PATCH) ✅

  • 댓글 삭제 (DELETE) ✅ -> DeleteModal이 열고 닫히는 텀이 있음 (이벤트 핸들러만 작동 못하게 제어할 것)

  • 게시글 생성/수정 (POST/PATCH) ✅

  • 게시글 삭제 (DELETE) ✅ -> DeleteModal이 열고 닫히는 텀이 있음 (이벤트 핸들러만 작동 못하게 제어할 것, 단 데스크탑에서는 '게시글 삭제' 버튼이 disabled, 회색으로 되도록 함)


남은 기능 중 Mutation은 아래와 같습니다.

  • 닉네임 변경 (PUT)

  • 개인정보 등록 (POST)

  • 탈퇴 (DELETE)

  • 투표 생성 (POST)

  • 투표 수정 (PATCH)

  • 카테고리 즐겨찾기 (POST)

  • 조기 마감 (POST)

🌟 논의 사항

남은 기능들 중 중복 Mutation을 필수로 꼭 막아줬으면 하는 기능이 있나요?!
여러분의 의견이 궁금합니다🤔😃

@github-actions
Copy link

github-actions bot commented Sep 20, 2023

⚡️ Lighthouse report!

Category Score
🟠 Performance 56
🟠 Accessibilty 89
🟢 SEO 100
🟠 PWA 89
Category Score
🟢 First Contentful Paint 0.7 s
🔴 Largest Contentful Paint 4.2 s
🔴 Total Blocking Time 2,270 ms
🟢 Cumulative Layout Shift 0
🟠 Speed Index 3.6 s

Copy link
Collaborator

@chsua chsua left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전체적으로 state가 많이 늘어나서 걱정이 되지만 수용가능한 선이라고 생각합니다!
오히려 무리하게 줄이려 객체형태로 바꾸다가 더 문제가 생길 수도 있을 것 같아요.

글을 작성하는 것 외에도 발생할 수 있는 여러 api 연속호출 버그를 잡을 수 있어서 너무 좋네요.
더불어 클릭했을때 반응이 없어 아쉬웠는데, 이를 보완하면서 사용성을 높일 수 있을 것 같아요!
최고입니다!!

고생하셨어요 제로

fe-리뷰완

@@ -58,11 +62,15 @@ export default function CommentItem({ comment, userType }: CommentItemProps) {
return;
}
openToast('댓글 신고가 실패했습니다.');
})
.finally(() => {
setIsReportCommentLoading(false);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍👍👍👍

@@ -65,11 +71,19 @@ export default function CommentTextForm({
}, [isEditSuccess]);

useEffect(() => {
isCreateError && createError instanceof Error && openToast(createError.message);
if (isCreateError && createError instanceof Error) {
const errorResponse = JSON.parse(createError.message);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍👍👍

@@ -96,20 +108,23 @@ export default function BottomButtonPart({
target="POST"
handleCancelClick={handleCancelClick}
handleDeleteClick={deletePost}
isDeleting={isEventLoading.isDeletePostLoading}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

옹 요건 왜 분해되어있는거 사용 안하셨어요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

예리하시군요👍👍

onClick={() => handleMenuClick('DELETE')}
disabled={isDeletePostLoading}
>
{isDeletePostLoading ? '삭제 중...' : '삭제'}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

헤더 안 컨텐츠가 바뀌는 경우는 거의 없는것같은데 요것도 다른 컴포넌트처럼 색을 회색으로 바꾸는 등의 처리를 하는건 어떠신가요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HeaderTextButton에 로딩여부에 대한 props를 추가해서, 로딩 중(삭제 중)이면 회색으로 바꾸는게 좋다는 말씀이신가요??
image

Copy link
Collaborator

@Gilpop8663 Gilpop8663 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

꼭 필요한 기능 구현해주셔서 감사합니다 👍👍👍

@inyeong-kang inyeong-kang merged commit e048867 into dev Sep 21, 2023
1 check passed
@inyeong-kang inyeong-kang deleted the fix/#648 branch September 21, 2023 01:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment