파이어베이스로 좋아요 기능 구현

🧐 파이어베이스로 좋아요 기능 구현

좋아요 기능 구현

 

1.   찜을 누르는순간 likedby 필드 가 생기고 "내가 로그인한 uid : Boolean" 형식으로 추가 됩니다 .

 

 

                                                                                           🔽

 

 

 깃헙으로 로그인한 내 uid

 

2.   meetups collection에서 likedBy 필드 중 현재 사용자가 좋아요를 누른 Meetup을 검색

     const likedMeetupsQuery = query(
          collection(db, 'meetups'),
          where('likedBy.' + currentUser.uid, '==', true)
        );

 

3. getDocs 함수를 사용하여 쿼리의 결과를 가져옵니다.

const likedMeetupsSnapshot = await getDocs(likedMeetupsQuery);

 

4. 가져온 데이터의 배열에서 각 문서의 데이터를 추출합니다.

const likedMeetupsData = likedMeetupsSnapshot.docs.map((doc) =>
          doc.data() 
        );

---

✅ 전체 코드 

function Liked() {
  useDocumentTitle('좋아요 한 후기들');

  const navigate = useNavigate();

  const [isLoading, setIsLoading] = useState(true);
  const [likedMeetups, setLikedMeetups] = useState([]);
  const [selectedMeetup, setSelectedMeetup] = useState(null);
  const { currentUser } = useContext(AuthContext);

  useEffect(() => {
    const fetchLikedMeetups = async () => {
      try {
        if (!currentUser) {
          alert('로그인이 필요합니다.');
          navigate('/signup');
          return;
        }

        const likedMeetupsQuery = query(
          collection(db, 'meetups'),
          where('likedBy.' + currentUser.uid, '==', true)
        );

        const likedMeetupsSnapshot = await getDocs(likedMeetupsQuery);
        const likedMeetupsData = likedMeetupsSnapshot.docs.map((doc) =>
          doc.data()
        );

        setIsLoading(false);
        setLikedMeetups(likedMeetupsData);
      } catch (error) {
        console.error('Error fetching liked meetups: ', error);
        setIsLoading(true);
      }
    };

    fetchLikedMeetups();
  }, [currentUser, navigate]);

  const handleCardClick = (meetupTitle, meetup) => {
    setSelectedMeetup(meetup);
    navigate(`/community/${meetupTitle}`);
  };

  return (
    <LikedWrapper>
      {isLoading && <LoadingSpinner src={loading} alt="로딩 중" />}
      <h2>좋아요 한 후기들</h2>
      <LikedContent>내가 찜한 후기들 😎</LikedContent>
      {likedMeetups.length > 0 ? (
        likedMeetups.map((meetup) => (
          <Card
            key={uuidv4()}
            imageUrl={meetup.photoURL}
            title={meetup.title}
            children={meetup.description}
            onClick={() => handleCardClick(meetup.title, meetup)}
          />
        ))
      ) : (
        <LikedNoContent>찜한 목록이 없습니다.🤨</LikedNoContent>
      )}
    </LikedWrapper>
  );
}

export default Liked;