팀원소개서 메인 페이지 초대 관련 기획 수정 #236
Conversation
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
| @@ -12,12 +13,13 @@ interface TeamInvitationProps { | |||
| function TeamInvitation(props: TeamInvitationProps) { | |||
| const { id, name } = props; | |||
| const navigate = useNavigate(); | |||
| const { fireToast } = useToast(); | |||
| const [isAccepted, setIsAccepted] = useState(false); | |||
| const [isRejected, setIsRejected] = useState(false); | |||
|
|
|||
| const onAcceptClick = async () => { | |||
| const response = await privateAPI.put({ url: `/team/invite/accept`, data: { teamId: id } }); | |||
There was a problem hiding this comment.
요거 원래 api로 추상화 안하고 한방에 put 쏘는 방식이었구나..
혹시 TeamService에 추상화해줄 수 있을까..? acceptInvite랑 rejectInvite로!!
그리고 상태 코드를 컴포넌트에서 직접 보는 대신에 isSuccess라는 값만 와도 괜찮을 것 같아!!
그리고 accept한 다음에는 팀 목록에 갱신이 필요한데,
원래는 막 setTimeout 쓰고 navigate(0) 해서 새로고침 했지만,
리액트 쿼리를 도입한 지금은 invalidateQueries를 해주면 될 것 같아!!
invalidateQueries가 먹여지면 지금 있는 데이터들이 stale한(오래된) 값들이 되어서 다시 fetch하는 함수를 호출하게 되어!
즉, 팀 초대를 수락하면
=> 팀 수락 이전에 받은 데이터는 최신 값이 아니게 되고 (=stale해지고)
=> 이 사실을 리액트 쿼리한테 알려주면
=> 리액트 쿼리가 다시 데이터 받아오는 함수를 실행하는겨!!
=> 그러면 방금 가입한 팀을 볼 수 있는겨!
하지만 그걸 하려면 팀소서 메인에서도 리액트 쿼리를 먹여줘야 할 것 같다!!
만약 팀소서 메인에서 정보들 받아오는 쿼리를 짰다고 가정하고 그 쿼리 이름이 teamProfileList라고 가정하면
아래처럼 써주면 될거야!!
const queryClient = useQueryClient();
// 초대 승인 요청이 성공한 이후에
queryClient.invalidateQueries('teamProfileList');참고자료 https://react-query.tanstack.com/guides/query-invalidation
There was a problem hiding this comment.
새로고침 안하는게 좋을 것 같다고 생각했는데 이렇게 하면 되겠다!! 👍
There was a problem hiding this comment.
화면에 보이는 것만 생각하고 다했다고 pr 올린 걸 반성하게 되네 이렇게 자세하게 리뷰 달아주니 넘넘 고맙다 ㅠㅠㅠ
추상화랑 리액트 쿼리 시도해 볼게 !!
There was a problem hiding this comment.
이 부분 수정해봤는데, 리뷰에서 언급한 의도대로 됐는지 한 번만 더 봐주시면 감사하겠습니당 👏
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
⛓ Related Issues
📋 작업 내용
📌 PR Point
버튼 누름 => 텍스트 보여줌 => 페이지 새로고침순서로 작동합니다. (mock api 활용해서 확인했습니다.)👀 스크린샷 / GIF / 링크