프론트엔드 개발 포트폴리오 | 국내 여행지 추천 서비스

• 로그인 유저가아닐경우 페이지 자체가 안보이는 오류 발생

{loginUser?.uid === review?.uid ? (
        <button
          onClick={() => {
            handleDelete(review.id, i);
          }}
        >
          {!editBox ? '삭제' : null}
        </button>
      ) : null}
      {loginUser?.uid === review?.uid ? (
        <button
          onClick={() => {
            handleUpdate(review.id);
            setEditBox(!editBox);
          }}

//리뷰 등록
  const creatReview = async () => {
    const loginUser = auth.currentUser;

    if (loginUser) {
      const addRev = await addDoc(usersCollectionRef, {
        review: newReview,
        uid: loginUser?.uid,
        email: loginUser.email,
        displayName: localStorage.getItem('id', auth.currentUser.displayName),
        //loginUser?.displayName
        paramId: params.id,
        date: Date.now(),
        //파이어스토어 db, reviews 에 저장
      });
      setNewReview('');
    } else {
      alert('로그인을 하세요');
    }
  };

//삭제
  const handleDelete = async (id, i) => {
    if (auth.currentUser.uid === reviews[i].uid) {
      const reviewDoc = doc(db, 'reviews', id);
      await deleteDoc(reviewDoc);
    } else {
      alert('작성자가 다릅니다.');
      //작성가 다르거나 비로그인 유저에게 버튼이 보이지 않는다면 필요없어짐.
    }
  };

  //업데이트
  const handleUpdate = async (id) => {
    await updateDoc(doc(usersCollectionRef, id), {
      review: editValue,
    });
  };

//리뷰 등록
  const creatReview = async () => {
    const Kakaologinid = localStorage.getItem('uid');
    const Naverloginid = localStorage.getItem('uid');
    const loginUser = auth.currentUser;

    if (loginUser) {
      const addRev = await addDoc(usersCollectionRef, {
        review: newReview,
        uid: loginUser?.uid,
        email: loginUser.email,
        displayName: localStorage.getItem('id', auth.currentUser.displayName),
        //loginUser?.displayName
        paramId: params.id,
        date: Date.now(),
        //파이어스토어 db, reviews 에 저장
      });
      setNewReview('');
    } else if (Kakaologinid) {
      const addRev = await addDoc(usersCollectionRef, {
        review: newReview,
        uid: localStorage.getItem('uid'),
        displayName: localStorage.getItem('id'),
        //loginUser?.displayName
        paramId: params.id,
        date: Date.now(),
        //파이어스토어 db, reviews 에 저장
      });
      setNewReview('');
    } else if (Naverloginid) {
      const addRev = await addDoc(usersCollectionRef, {
        review: newReview,
        uid: localStorage.getItem('uid'),
        displayName: localStorage.getItem('id'),
        //loginUser?.displayName
        paramId: params.id,
        date: Date.now(),
        //파이어스토어 db, reviews 에 저장
      });
      setNewReview('');
    } else {
      alert('로그인 해주세요');
    }
  };

//삭제
  const handleDelete = async (id, i) => {
    console.log(id);
    if (auth.currentUser?.uid === reviews[i].uid) {
      const reviewDoc = doc(usersCollectionRef, id);
      //파이어스토어, 안에있는 컬렉션 'reviews' 의 문서 id
      await deleteDoc(reviewDoc);
    } else if (KakaoAndNaverLoginid === reviews[i].uid) {
      const reviewDoc = doc(usersCollectionRef, id);
      await deleteDoc(reviewDoc);
    } else {
      alert('작성자가 다릅니다.');
      //작성가 다르거나 비로그인 유저에게 버튼이 보이지 않는다면 필요없어짐.
    }
  };

  //업데이트
  const handleUpdate = async (id) => {
    await updateDoc(doc(usersCollectionRef, id), {
      review: editValue,
    });
  };

auth.currentUser.uid === reviews[i].uid

auth.currentUser?.uid === reviews[i].uid

• 페이지 네이션 페이지수 문제해결

const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(6);


useEffect(() => {
    const getReviews = async () => {
      const q = query(usersCollectionRef, orderBy('date', 'desc'));
      const unsubscrible = onSnapshot(q, (querySnapshot) => {
        const newList = querySnapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setReviews(newList);
      });
      return unsubscrible;
    };
    getReviews();
  }, []);

      </ReviewContainer>

totalItemsCount={reviews.length}

const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(6);
  const [totalReviewCount, setTotalReviewCount] = useState(0);


 useEffect(() => {
    const getReviews = async () => {
      const q = query(usersCollectionRef, orderBy('date', 'desc'));
      const unsubscrible = onSnapshot(q, (querySnapshot) => {
        const newList = querySnapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        const filteredList = newList.filter(
          (review) => review.paramId === params.id,

        );
        setReviews(filteredList);
        setTotalReviewCount(filteredList.length);
      });
      return unsubscrible;
    };
    getReviews();
  }, []);

setTotalReviewCount(filteredList.length);