[카우치 코딩]좋아요 기능 구현

트릴로니·2022년 6월 23일
0

카우치코딩

목록 보기
8/8
post-thumbnail


기능: 하트를 누르면 관심스터디 등록/해제

관심스터디의 등록까지는 어렵지 않게 진행되었다. 그런데 관심스터디 해제와 관심스터디를 표시하는데 고려해야 할 부분이 많았다.

 const [like, setLike] = useState(false);
  const [likeId, setLikeId] = useState('');

  const isMember = studyLike => {
    const uid = auth.currentUser?.uid;
    return studyLike.member.uid === uid;
  };

  useEffect(() => {
    const isLike = studyLikes.some(isMember);
    setLike(isLike);
  }, [studyLikes]);

먼저 각 스터디의 studyLikes의 배열에 포함된 모든 유저의 정보와 로그인된 유저의 uid를 some반복문을 돌면서 해당 유저의 uid가 있으면 true를 반환하도록 했다. setState에 boolean를 저장해서 true일 경우 하트에 빨간색으로 칠해지도록 했다.

const submitPostLikeStudy = async event => {
    event.preventDefault();
    const submitPostLikeStudy = {
      likeStatus: true,
      studyId: studyId,
    };

    const res = await postLikeStudy(submitPostLikeStudy, studyId);
    if (res.status === 201) {
      setLike(true);
      setLikeId(res.data.id);
    }
  };

  const submitDeleteLikeStudy = async event => {
    event.preventDefault();
    const member = studyLikes.find(isMember);
    const submitDeleteLikeStudy = {
      id: member?.id || likeId,
      likeStatus: true,
      studyId: studyId,
    };
    console.log(submitDeleteLikeStudy);
    const res = await deleteLikeStudy(submitDeleteLikeStudy, studyId);
    if (res.status === 200) {
      setLike(false);
    }
  };

관심 등록 해제를 어떻게 구현해야 할 지 가장 고민했다. 유저가 하트를 클릭해서 성공했다는 응답을 받으면 바로 하트를 칠해지도록 했는데 관심 등록 해제할 때 delete 요청 body에 들어갈 studyLikes배열에서 객체의 id값이 필요했다.

studyLikes는 페이지가 로딩될 때 받는 데이터이기 때문에 유저가 하트를 클릭했다고 해서 모든 리스트를 재호출 하는 건 비효율적이라고 생각했다.

만약 유저가 좋아요를 클릭하고 새로고침을 해서 좋아요 해제를 한다면 배열에서 find함수를 써서 로그인 된 유저의 uid와 일치하는 객체를 찾고 그 객체의 id값 넣어서 delete요청을 보낼 수 있지만
만약 유저가 좋아요를 클릭하고 바로 해제 요청을 보낸다면 studyLikes에는 이 값이 포함이 안된 상태이기 때문에 오류가 난다.

그러나 좋아요 요청 성공응답으로 id를 받을 수 있어서 setState에 이 값을 저장했다.
이후에 delete요청의 body에 들어갈 id를 만약 studyLikes에서 찾을 수 있으면 해당 id값을 쓰고 없으면 setState로 저장한 id를 쓰도록 구현했다

0개의 댓글