[React-BookStore] 마이페이지 - 관심 도서

 

 

현재 대강 마이페이지 틀은 잡아놨다. 

 

 

요런 느낌인데,

 

관심 도서의 경우에는 아직 어케 꾸며야 할지 고민중

 

그래서 이번 포스팅은 관심도서 DB를 어떻게 가져와서 사용했는지 작성할거임

 

 

현재 상태는 검색창에서 마음에 드는 도서가 있으면 오른쪽 하트 아이콘으로 관심 목록에 추가할 수 있다.

 

 

그리고 저장된 DB는

 

이런식으로 저장된다. 

 

그래서 관심 도서 목록에서는

 

위의 DB를 현재 로그인한 유저에 맞게 전체 가져와서 반복문으로 배치하면 되겠다. 

 

 

1. 가져오기 

const InterestedBook = () => {

  const user = auth.currentUser;

  const [getInterestBook, setGetInterestBook] = useState([]);

  useEffect(() => {

    //관심목록 가져오는 함수

    const fetchInterestBooks = async () => {

      if (user) {

        //유저가 있을 경우

        const q = query(

          collection(db, "interestBooks"),

          where("userId", "==", user.uid) //로그인 한 유저와 동일한 데이터만

        );

        //실시간 가져오기

        onSnapshot(q, (snapshot) => {

          const userInterestBooks = snapshot.docs.map((doc) => doc.data());

          setGetInterestBook(userInterestBooks);

        });

      }

    };

    fetchInterestBooks();

  }, [user]); // 로그인 유저가 변경 될 때마다 실행

 

 

2. 관심목록 삭제하기

const handleRemove = async (value) => {

    if (confirm("관심 도서에서 제거하겠습니까?")) {

      //2-1)유저가 있으면(로그인)

      if (user) {

        try {

          //쿼리문 작성

          const q = query(

            collection(db, "interestBooks"), // 삭제할 컬렉션 지정

            where("userId", "==", user.uid), // 현재 로그인되어있는 유저와 같은 것

            where("interestBook", "==", value) //book.isbn 으로 찾음

          );

          const querySnapshot = await getDocs(q);

          querySnapshot.forEach(async (doc) => {

            try {

              await deleteDoc(doc.ref); //삭제한다.

              console.log("관심 도서 삭제 성공!");

            } catch (error) {

              console.error("Error deleting document:", error);

            }

          });

        } catch (error) {

          console.error("Error querying document:", error);

        }

      }

    } else {

      return;

    }

  };

 

 

위에서 DB로 받은 값은 map 반목분으로 모두 나열한다. 

그리고 아이콘을 클릭하면 handleRemove 함수가 실행되고 해당 함수에는 book의 ISBN값이 들어간다. 

그래서 그 값으로 문서를 찾아서 삭제를 하게끔 만들었다. 

 {getInterestBook.map((book, index) => (

        <div className="interestBook" key={index}>

          <div className="interestBookContent">

            <img src={book.bookCover} alt="관심도서" />

            <span className="removeBook">

              <MdBookmarkRemove

                onClick={() => handleRemove(book.interestBook)}

              />

            </span>

          </div>

          <a href={book.bookLink}>{book.bookTitle.trim().slice(0, 15)}</a>

          <p></p>

        </div>

      ))}

 

 

 

 

---

그리고 현재 발생하는 문제는 

 

마이페이지에 처음 접속할 때는 아까와 같이 유저의 모든 관심 도서를 가져오는데 ,

 

그 상태 그대로 새로고침을 하게되면 가져오지 않음..

 

유저 정보가 초기화 된것도 아닌데 안가져와짐 ㅠ

 

이 부분에 대해서는 방법을 찾아봐야 할거같다.