school eats) Bookmark 기능 구현

맛집 상세페이지에서 북마크 버튼을 누르면 마이페이지 또는 상단의 북마크 버튼을 통해 북마크한 맛집들을 한눈에 볼 수 있습니다.

interface Bookmark {
  id: string;
  placeId?: string;
  email?: string;
}

export const useBookmark = () => {
  const [login] = useRecoilState(isLoggedIn);
  const email = useRecoilValue(userEmail);
  const router = useRouter();
  const data = JSON.stringify(router.query);
  const jsonObject = JSON.parse(data);
  const postId = jsonObject.placeid;
  const [bookmark, setBookmark] = useState<Bookmark[]>([]);

  const getBookmark = async () => {
    let q;

    q = query(collection(db, 'bookmark'), where('placeId', '==', postId));
    const snapshot = await getDocs(q);
    const bookmarkArr = snapshot.docs.map((doc: QueryDocumentSnapshot<DocumentData>) => ({
      ...doc.data(),
      id: doc.id,
    }));

    setBookmark(bookmarkArr);
  };

  const addBookmark = async () => {
    if (login) {
      const bookmarkRef = collection(db, 'bookmark');
      await addDoc(bookmarkRef, {
        placeId: postId,
        email,
      });
    } else {
      Modal.error({
        title: '로그인이 필요합니다!',
      });
    }
  };

  const deleteBookmark = async (bookmarkId: string) => {
    const comments = doc(db, 'bookmark', bookmarkId);

    await deleteDoc(comments);
  };

  const [isBookmarked, setIsBookmarked] = useState(false);

  useEffect(() => {
    (async () => {
      if (postId) {
        await getBookmark();
        setIsBookmarked(bookmark.some((b) => b.email === email));
      }
    })();
  }, [postId, bookmark]);

  const handleBookmark = async () => {
    if (isBookmarked) {
      const bookmarkId = bookmark.find((b) => b.email === email)?.id;
      if (bookmarkId) await deleteBookmark(bookmarkId);
    } else {
      await addBookmark();
    }
    await getBookmark();
    setIsBookmarked(!isBookmarked);
  };

  return { addBookmark, deleteBookmark, getBookmark, bookmark, handleBookmark, isBookmarked };
};