[FE] 전체 참여자 관리: '수정 완료'시, Toast 띄우기 #636

soi-ha · 2024-09-25T15:09:34Z

issue

close [FE] 전체 참여자 관리: '수정 완료'시, Toast 띄우기 #623

🚨612번이 선행되어야 합니다.

구현 사항

웨디가 toast 사용을 매우 간단!하게 개선해줘서 저는 단순하게 api 요청이 완료되면 수정이 완료되었다는 toast를 띄워주는 코드 한 줄만 추가해줬습니다 ~

추가 구현 사항

백엔드 측의 api 요청 형식이 변경되어 프론트 측에서 PUT 요청 형식을 변경했습니다.
기존: 변경된 member 데이터만을 전송
변경: 모든 member 데이터를 전송

🫡 참고사항

github-actions · 2024-09-25T15:11:35Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-cdfuzeoker.chromatic.com/

jinhokim98

고생했습니다 소하!
몇 가지 코멘트 남겨놨는데 참고로 봐주세요.
크리티컬하지는 않아 approve 합니다

jinhokim98 · 2024-09-26T00:22:57Z

client/src/hooks/useEventMember.ts

+    const hasDuplicateMemberName = (): boolean => {
+      const nameSet = new Set(reports.map(member => member.memberName));
+      return nameSet.size !== reports.length;
+    };


이 부분 변경 요청했었는데 바꾸니깐 너무 보기 쉬워진 것 같아요👍👍

jinhokim98 · 2024-09-26T00:24:27Z

client/src/hooks/useEventMember.ts

    if (deleteMembers.length > 0) {
      for (const id of deleteMembers) {
-        deleteMember({memberId: id});
+        await deleteMember({memberId: id});


await 굳입니다. 여기까지 써야 삭제를 기다릴 수 있어요!

jinhokim98 · 2024-09-26T00:25:01Z

client/src/hooks/useEventMember.ts

+
+    // 변경된 사항이 존재한다면 해당 reports만을 PUT api 요청
+    if (changedMembers.length > 0) {
+      await putMember({members: changedMembers});


근데 put도 순서가 보장되어야 할 이유가 있었나요?

delete 요청과 put 요청이 전송된 후에 toast가 띄워져야 하기 때문에 await를 붙어줬어용

아 토스트!!!! 좋아요

jinhokim98 · 2024-09-26T00:25:34Z

client/src/hooks/useEventMember.ts

    }

-    return false; // 중복된 이름이 없으면 false 반환
-  };
+    toast.confirm('수정이 완료되었어요 :)');


진짜 토스트 너무 쓰기 편해졌다..!
근데 개인적인 의견으론 토스트를 띄우는 기능은 훅이 아니라 컴포넌트 단으로 옮겨야 한다고 생각해요.

나중에 테스트 코드를 짤 때 번거로움이 생길 수도 있을 것 같아서요.

toast가 뜨는 기능 자체는 api 요청과는 관계 없으니 훅에서 내보낸 함수를 이용해서 호출이 완료된 뒤에 성공하면 토스트를 띄우는 방식이 좋아보입니다!

마자용.. 그래서 컴포넌트 측에서 하려고 했다가..? 요청이 모두 정상적으로 보내진 후에 toast를 띄워야 하는데.. 그럼 hook에서 요청이 모두 정상적으로 이뤄졌는지에 대한 상태를 만들어서 컴포넌트측으로 넘겨주는 작업이 필요하다고 생각했어요. 근데 toast를 hook에서 띄우면 이런 상태 관리가 추가로 필요하지 않을 것 같아서 hook에서 진행해줬습니당..
흠,.. 뭐가 더 나을지 더 이야기해봐요!

브콜한테 배울 때는 이런 토스트같은 로직을 훅에 묶어두면 이 훅을 다른 곳에서 사용하고 토스트를 띄우기 싫은 경우 대응이 어렵다! 라고 해서 분리하는게 좋다고 생각해왔는데요. 이 훅이 EventMember라는 페이지에 강하게 묶여있고 다른 곳에서 재사용될 가능성이 0에 수렴한다면 ... 그냥 토스트를 이곳에 넣어도 괜찮을 것 같아요.

react-query에서 내보내주는 isSuccess를 이용해도 좋을 것 같아요.

github-actions · 2024-09-26T00:40:31Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-uctjkuguvb.chromatic.com/

pakxe · 2024-09-26T01:17:14Z

client/src/hooks/useEventMember.ts


-    setFilteredChangedMembers(changedMembers);
-  }, [reports, changedMembers, deleteMembers]);
+    // 초기 값과 비교하여 변경된 사항이 존재하는지 확인
+    const hasChanges = reports.some(report =>
+      initialReports.find(
+        initial =>
+          initial.memberId === report.memberId &&
+          (initial.memberName !== report.memberName || initial.isDeposited !== report.isDeposited),
+      ),
+    );

-  const changeMemberName = (memberId: number, newName: string) => {
-    // 유효성 검사 (4글자)
+    // 변경된 사항이 존재 혹은 삭제된 member가 존재한다면 true
+    return hasChanges || deleteMembers.length > 0;


분리하니까 더 가독성이 좋아보여요 😆

pakxe · 2024-09-26T01:22:01Z

client/src/hooks/useEventMember.ts

 import useRequestDeleteMember from './queries/member/useRequestDeleteMember';
 import useRequestPutMembers from './queries/member/useRequestPutMembers';
 import useRequestGetReports from './queries/report/useRequestGetReports';

 interface ReturnUseEventMember {
  reports: Report[];
-  isCanRequest: boolean;
+  isCanSubmit: boolean;


이름이 더 직관적이네요 ! 👍👍

여기도...! canSubmit이 좋아 보여용 하핫

pakxe · 2024-09-26T01:22:52Z

client/src/hooks/useEventMember.ts

+    const hasDuplicateMemberName = (): boolean => {
+      const nameSet = new Set(reports.map(member => member.memberName));
+      return nameSet.size !== reports.length;
+    };

-    // 중복된 이름이 존재할 경우 isCanRequest를 false로 변경
    if (hasDuplicateMemberName()) {
-      setIsCanRequest(false);
-    } else {
-      // 변경된 사항이 존재하거나 삭제한 member가 존재한다면 isCanRequest를 true로 변경
-      setIsCanRequest(changedMembers.length > 0 || deleteMembers.length > 0);
+      // 중복 이름이라면 false
+      return false;
    }

-    // memberName 유효성 검사 (0글자)
-    const hasEmptyName = changedMembers.some(member => member.name.trim().length === 0);
-    if (hasEmptyName) setIsCanRequest(false);
+    // 이름이 공백이라면 false
+    const hasEmptyName = reports.some(report => report.memberName.trim().length === 0);
+    if (hasEmptyName) return false;

-    setFilteredChangedMembers(changedMembers);
-  }, [reports, changedMembers, deleteMembers]);
+    // 초기 값과 비교하여 변경된 사항이 존재하는지 확인
+    const hasChanges = reports.some(report =>
+      initialReports.find(
+        initial =>
+          initial.memberId === report.memberId &&
+          (initial.memberName !== report.memberName || initial.isDeposited !== report.isDeposited),
+      ),
+    );


작은 유틸 함수처럼 나뉘어 있으니까 확실히 이해하기 쉬운 것 같아요. 😆

pakxe

고생많았습니다 !! 👍

Todari

고생 많았습니다~!

Todari · 2024-09-26T01:37:57Z

client/src/hooks/useEventMember.ts

 import useRequestDeleteMember from './queries/member/useRequestDeleteMember';
 import useRequestPutMembers from './queries/member/useRequestPutMembers';
 import useRequestGetReports from './queries/report/useRequestGetReports';

 interface ReturnUseEventMember {
  reports: Report[];
-  isCanRequest: boolean;
+  isCanSubmit: boolean;


여기도...! canSubmit이 좋아 보여용 하핫

github-actions · 2024-09-26T01:50:04Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-awxjkuvpsp.chromatic.com/

github-actions · 2024-09-26T06:32:33Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-fcettnqgde.chromatic.com/

github-actions · 2024-09-26T06:34:41Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-bqvaybzqmr.chromatic.com/

soi-ha added 6 commits September 25, 2024 09:56

refactor: 불필요한 상태(changedMembers) 제거 및 렌더링 성능 개선

c67f915

refactor: isCanRequest의 이름을 isCanSubmit으로 변경

79d325f

rename: EventMemberManage의 파일 이름을 EventMember로 변경

6abbe23

refactor: delete와 put 요청에 await 추가

c30363c

refactor: 중복 이름 확인 로직을 set.length를 활용하여 간단하게 수정

22da5d4

feat: 수정이 완료되었을 경우 수정 완료 toast 띄우기

72dcf02

soi-ha added 🖥️ FE Frontend ⚙️ feat feature labels Sep 25, 2024

soi-ha added this to the v2.0.0 milestone Sep 25, 2024

soi-ha self-assigned this Sep 25, 2024

soi-ha requested review from Todari, jinhokim98 and pakxe September 25, 2024 15:09

jinhokim98 approved these changes Sep 26, 2024

View reviewed changes

fix: 백엔드 api 변경으로 put 요청 변경

a4f9bf2

pakxe reviewed Sep 26, 2024

View reviewed changes

pakxe approved these changes Sep 26, 2024

View reviewed changes

Todari approved these changes Sep 26, 2024

View reviewed changes

refactor: isCanSubmit 이름을 canSubmit으로 변경

9871ba7

Merge branch 'fe-dev' into feature/#623

7313da9

style: lint 적용

842d964

soi-ha merged commit b771c52 into fe-dev Sep 26, 2024
2 checks passed

soi-ha deleted the feature/#623 branch September 26, 2024 06:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 전체 참여자 관리: '수정 완료'시, Toast 띄우기 #636

[FE] 전체 참여자 관리: '수정 완료'시, Toast 띄우기 #636

soi-ha commented Sep 25, 2024 •

edited

Loading

github-actions bot commented Sep 25, 2024

jinhokim98 left a comment

jinhokim98 Sep 26, 2024

jinhokim98 Sep 26, 2024

jinhokim98 Sep 26, 2024

soi-ha Sep 26, 2024

jinhokim98 Sep 26, 2024

jinhokim98 Sep 26, 2024

soi-ha Sep 26, 2024

pakxe Sep 26, 2024

jinhokim98 Sep 26, 2024

github-actions bot commented Sep 26, 2024

pakxe Sep 26, 2024

pakxe Sep 26, 2024

Todari Sep 26, 2024

pakxe Sep 26, 2024

pakxe left a comment

Todari left a comment

Todari Sep 26, 2024

github-actions bot commented Sep 26, 2024

github-actions bot commented Sep 26, 2024

github-actions bot commented Sep 26, 2024

[FE] 전체 참여자 관리: '수정 완료'시, Toast 띄우기 #636

[FE] 전체 참여자 관리: '수정 완료'시, Toast 띄우기 #636

Conversation

soi-ha commented Sep 25, 2024 • edited Loading

issue

🚨612번이 선행되어야 합니다.

구현 사항

추가 구현 사항

🫡 참고사항

github-actions bot commented Sep 25, 2024

jinhokim98 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

github-actions bot commented Sep 26, 2024

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

pakxe left a comment

Choose a reason for hiding this comment

Todari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 26, 2024

github-actions bot commented Sep 26, 2024

github-actions bot commented Sep 26, 2024

soi-ha commented Sep 25, 2024 •

edited

Loading