[FE] feat: 친구 관련 및 DM api 연동 #105
Conversation
chysis
requested review from
bianbbc87,
onegood07,
toychip and
zelkovaria
as code owners
| const [friends, sentRequests, receivedRequests] = await Promise.all([ | ||
| getFriendsList(), | ||
| getSentRequest(), | ||
| getReceivedRequest(), | ||
| ]); |
There was a problem hiding this comment.
친구 검색 버튼을 누르기 전에 불필요한 요청이 가지 않도록 Promise.all을 사용했어요.
chysis
force-pushed
the
fe/feat/89-friends-dm
branch
from
134c8a6 to
3360d6e
Compare
| try { | ||
| createDirectMessageMutation.mutate({ bodyRequest: { memberIds: selectedFriends } }); | ||
| } catch (error) { | ||
| console.log('DM 생성 실패', error); |
There was a problem hiding this comment.
usePostDirect 훅에서 onError 콜백으로도 처리가 가능할 것 같아요!
There was a problem hiding this comment.
에러 처리도 mutation에서 하도록 수정했습니다!
|
|
||
| const handleCreateDirectMessage = async () => { | ||
| try { | ||
| createDirectMessageMutation.mutate({ bodyRequest: { memberIds: selectedFriends } }); |
There was a problem hiding this comment.
usePostDirect 훅에서는 createDirectMessage를 제공하는데, 해당 모달 컴포넌트에서는 이 훅을 사용할 때 createDirectMessageMutation.mutate()를 쓰시는 이유가 궁금해요!
const handleCreateDirectMessage = () => {
createDirectMessage(selectedFriends);
};이런 방식은 비효율적일까요?-?
There was a problem hiding this comment.
mutate 기능만 수행하는 함수를 뒤늦게 만들고, 이 부분을 다시 수정하질 않았네요😅
mutate 기능은 함수로 분리하고, mutation의 필요한 속성들은 따로 반환하도록 수정했어요!
| {friends.map((friend) => ( | ||
| <S.FriendItem key={friend.userId} onClick={() => handleCheckboxClick(friend.userId)}> | ||
| <S.FriendProfileImage $imageUrl={friend.profileImageUrl}> | ||
| <S.FriendStatusMark $isOnline={true} /> |
There was a problem hiding this comment.
$isOnline은 테스트를 위해 임시로 true로 고정해두신거죵??
There was a problem hiding this comment.
네 맞아요! 상태 관리가 도입되면 수정할 예정이에요
| const handleDeleteFriend = async () => { | ||
| try { | ||
| await deleteFriend({ friendId }); | ||
| queryClient.invalidateQueries({ queryKey: ['friendsList'] }); | ||
| } catch (error) { | ||
| console.error('친구 삭제 실패', error); | ||
| } | ||
| }; |
There was a problem hiding this comment.
갑자기 든 생각인데 나중에 해당 부분은 useMutation을 사용해보는건 어떨까요? 사실 뭐가 더 나은지 저도 잘 몰라서 같이 고민해보고 싶었어요 헤헿
const deleteFriendMutation = useMutation({
mutationFn: () => deleteFriend({friendId});
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['friendsList']});
},
onError: (error) => {
console.error('친구 삭제 실패', error);
}
})당장은 이런 생각이긴 했던 것 같아요!
There was a problem hiding this comment.
deleteFriend도 useMutation을 사용하여 분리했어요 :)
| const directMessageName = members.responses | ||
| .filter((member) => member.userId !== userInfo?.userId) | ||
| .map((member) => member.nickname) | ||
| .join(', '); |
There was a problem hiding this comment.
userImageUrl 에서도 filter((member) => member.userId !== userInfo?.userId) 가 반복되는 부분은 otherMembers = ~ 와같이 빼볼 수도 있을 것 같다는 생각이 들었어요 😃 물론 지금도 반복되는 부분이 많이 없어서 크게 상관없는 부분이긴한 것 같아요 ㅎㅎ
There was a problem hiding this comment.
반복되는 코드도 줄일 수 있고, 무엇보다도 '나를 제외한 다른 멤버 리스트'에서 무언가를 한다는 것이 더 명확히 보이는 것 같아서 변수로 분리했어요! 꼼꼼하게 봐주셔서 감사해요👍👍
|
|
||
| import usePostDirect from '../../CreateDirectMessageModal/hooks/usePostDirect'; | ||
|
|
||
| const useHandleFriendRequest = () => { |
| useEffect(() => { | ||
| if (queryResult.data) setUserInfo({ userId: queryResult.data.result.userId }); | ||
| }, [queryResult.data, setUserInfo]); | ||
|
|
||
| useEffect(() => { | ||
| if (queryResult.isError) clearUserInfo(); | ||
| }, [queryResult.isError, clearUserInfo]); |
There was a problem hiding this comment.
useEffect를 사용해서 값이 변할 때마다 store를 업데이트하면 불필요한 렌더링이 생길 수 있지 않을까 하는 고민이 들었던 것 같아요,,! onSuccess시 setUserInfo를 하고, onError시 closeUserInfo를 해보는건 별로일까요? 🤔(쿼리 알못)
There was a problem hiding this comment.
TanStack Query가 v5로 업데이트 되면서 useQuery의 onSuccess, onError가 없어졌어요. 관련 글
그래서 필요한 경우에 onError의 경우에는 queryClient에서 일괄 적용이 가능한데, useGetUserInfo에 특화된 에러 처리를 해야 하기 때문에 useEffect를 사용했어요.
onSuccess의 경우에도 useEffect를 사용했어요.
staleTime을 14일로 설정했기 때문에 그 동안은 새로 요청하지 않고, useEffect도 실행되지 않아요. 하지만 로그아웃/재로그인 등의 이유로 이 쿼리가 무효화 또는 삭제될 수 있기 때문에, 성공했을 때 매번 setUserInfo를 수행하지 않고 기존의 데이터와 비교해서 다를 때만 set 하는 것으로 수정했어요 :) 안전 장치라고 생각해주시면 될 것 같아요!
chysis
force-pushed
the
fe/feat/89-friends-dm
branch
from
cd03dda to
d532252
Compare
이슈번호
요약(개요)
로그인 한 사용자의 정보 조회 api를 연동했습니다.
친구 목록, 보낸/받은 친구 요청 목록, 받은 요청에 대한 수락/거절 api를 연동했습니다.
DM 목록 조회 및 DM 생성 api를 연동했습니다.
친구 삭제 api를 연동했습니다.
계정 탈퇴 api를 연동했습니다.
기타 코드 컨벤션 관련 또는 디자인 수정이 있습니다.
작업 내용
▲ 길드 리스트에서 DM을 선택한 경우
▲ 대기 중(받은, 보낸 친구 요청 목록)인 목록
▲ DM 생성 모달
집중해서 리뷰해야 하는 부분
기타 전달 사항 및 참고 자료(선택)