[Fix] toggle button error matching list#141
Conversation
| <Modal.Root open={open} onOpenChange={setOpen}> | ||
| <Modal.Trigger asChild>{trigger}</Modal.Trigger> | ||
|
|
||
| {open && ( |
There was a problem hiding this comment.
음 원래는 OPEN을 쓰지 않고, 개발을 진행했는데
이게 스터디 신청 리스트를 불러올 때부터 모든 유저의 프로필을 불러오게 되더라구요
그래서 클릭 시 프로필 모달을 열리게 하려고 했는데, 방법이 USER-PROFILE-MODAL만 변경하는 것과, 입력 받는 값을 변경하는 것 두 가지가 있었는데
아무래도 유저 모달이 다른 곳에서 쓰인다.....고 생각을 했는데 생각해보니 지금 당장은 신청 리스트에서 밖에 안쓰이는 것 같네요...
아무튼 입력 값을 바꾸기보다 모달 파일 하나만 수정하기 위해 여기 OPEN을 넣는 쪽으로 수정했습니다.
이 부분은 일단 동작되는 방식을 바꾸고, 나중에 더 좋은 방식으로 리팩토링을 하면 될 것 같슴다
| ); | ||
| } | ||
|
|
||
| function UserProfileBody({ |
There was a problem hiding this comment.
UserProfileBody로 분리하신 이유가 궁금해요!
There was a problem hiding this comment.
위 이유와 비슷합니다!
그리고 추가적으로 HEADER와 BODY 이런식으로 나눴는데
아무래도 제가 테스트 할때는 API가 너무 느려서...ㅜㅜㅜ 계속 데이터 가져오는데 지연이 생기길래
로딩 중이라는 걸 보여주기 위해 HEAER, BODY 이런 식으로 나눴습니다.
| await qc.cancelQueries({ queryKey: ['userProfile', memberId] }); | ||
| const prev = qc.getQueryData(['userProfile', memberId]); | ||
| if (prev && typeof prev === 'object') { | ||
| qc.setQueryData(['userProfile', memberId], { | ||
| ...(prev as any), | ||
| autoMatching, | ||
| }); | ||
| } | ||
|
|
||
| return { prev }; | ||
| }, |
| const prev = qc.getQueryData(['userProfile', memberId]); | ||
| if (prev && typeof prev === 'object') { | ||
| qc.setQueryData(['userProfile', memberId], { | ||
| ...(prev as any), |
There was a problem hiding this comment.
any 대신 GetUserProfileResponse 타입을 이용하는건 어떨까요?!
There was a problem hiding this comment.
좋습니다...이 부분은...나중에 리뷰 확인하면서 고치도록 하겠습니다..ㅜㅜ
| interface ReservationCardProps { | ||
| participant: Participant; | ||
| isCurrentUser?: boolean; | ||
| currentMemberId?: number; |
There was a problem hiding this comment.
ReservationCard가 한 곳에서만 사용되는데, 거기에선 currentMemberId 타입이 number더라구요!
혹시 undefined일 경우가 있을까요?
There was a problem hiding this comment.
앗 제가 잘 이해를 못했는데,
일단 저 부분을 설명드리자면 현재 들어온 참가자의 아이디가 유저의 id와 동일한지 확인하는 코드입니다.
기존에는 boolean 값으로 넘겨줬는데
바꾼 상황에서는 currentMemberId가 reservationList에서 firstmemberId 값입니다.
이 값이 만약 유저가 참여한 상태면 멤버 아이디가 있고, 참여하지 않을 경우는 null이기 때문에 위와같이 멤버 아이디를 받고, 카드 내에서 구별하는 형식으로 변경했습니다.
| useEffect(() => { | ||
| if (!memberId || isParticipation || !userProfile) return; | ||
|
|
||
| const { studyApplied, autoMatching } = userProfile; | ||
|
|
||
| if (studyApplied && !autoMatching && !calledRef.current) { | ||
| calledRef.current = true; | ||
| patchAutoMatching( | ||
| { memberId, autoMatching: true }, | ||
| { | ||
| onError: () => { | ||
| calledRef.current = false; | ||
| }, | ||
| }, | ||
| ); | ||
| } | ||
| }, [memberId, isParticipation, userProfile, patchAutoMatching]); |
There was a problem hiding this comment.
여기 로직이 강제로 토글 상태를 true로 바꾸는 곳이었나요 😢
There was a problem hiding this comment.
그렇습니다....😥 문제의 코드.....
| const { data: userProfile } = useUserProfileQuery(memberId ?? 0); | ||
| const autoMatching = userProfile?.autoMatching ?? false; | ||
|
|
||
| const applied = autoMatching || isParticipation; |
There was a problem hiding this comment.
주말에 조회했을 때 autoMatching이 true이고 isParticipation가 false인 경우는 어떻게 되나요?!
토요일을 기준으로 그 주차에 스터디 참여를 안했는데 (isParticipation = false)
매칭 토글을 on으로 했을 경우요!
There was a problem hiding this comment.
앗 생각해보니 isParticipation값 자체가 아예 필요 없을 것 같습니다.
매칭 토글인 autoMatching 기반으로 작동하도록 하는 게 맞을 것 같아 수정하도록 하겠습니다!
2 participants
☘️ 작업 내용
토글 버튼 오류를 수정했습니다.
강제로 토글 상태를 true로 바꾸는 코드가 있는 것 같아 해당 코드 삭제 후,
쿼리를 재요청해서 토글 상태에 따라 바뀌도록 수정했습니다.
추가적으로 본인 여부 확인 코드도 수정할 부분이 필요해 반영하였습니다!
테스트를 완벽하게 한 게 아니라 또 오류가 발견될 수도 있다고 생각합니다....
찾아주시면 바로 고치도록 해보겠습니다.