[Project] 책갈피 기능

프로젝트로 독서 관련해서 진행하고 있다. 

현재 사용자가 책을 읽고 다시 그 책에 들어가게 되면 그 부분부터 읽을 수 있도록 하는 기능을 만들고 있다.

그래서 어떻게 프론트에서 기능을 구현했는지 알아보겠습니다.

 

책을 보러 가기 위해선 이미지처럼 눈과 귀로 읽으러 가기 버튼을 클릭해야 한다. 

Detail.js에서 미리 계정에 대한 책갈피가 등록되어 있는지 확인 한다.

 const fetchPage = async () => {

        axios.get(`${serverIP}/book/bookmark/page/${nickname}/${bookId}`)
            .then((response) => {
                console.log("책갈피 데이터:", response.data);

                setUserPage(response.data);
            })
            .catch((error) => {
                console.error("페이지 조회 오류:", error);
                
            });
    };
    fetchPage();

이를 통해 책갈피가 있으면 그 데이터를 가져오고 없으면 새롭게 DB에 저장을 한다.

<button className={styles.purpleButton} onClick={() => navigate("/read", { state: 
                        { props: bookId,
                          lastpage:bookpage,
                          userpage:userpage  
                        } 
                        })}>

버튼에 navigate를 이용해서 /read 페이지로 이동할 때 props, lastpage, userpage 등의 데이터를 함께 보내준다.

 

리액트에서는 페이지를 이동하는데 여러 가지 방법이 있는데 이중에 navigate 방식으로 데이터를 넘겨주고 이동한다.

 const navigate = useNavigate();

이런 식으로 선언을 하고 사용하면 된다.

 

그렇게 read 페이지로 넘어오게 되면 전달한 데이터를 받아야 하는데 

 const lastPage = location.state ? location.state.lastpage : null;
 const userPage = location.state ? location.state.userpage : null;

이런식으로 데이터를 받으면 된다. 

 

 

이제 책 페이지를 이동할 때마다 백엔드 서버에 api 요청하는 기능을 만들면 된다.

 

const handleNextPage = () => {
        setBookPage(prevPage => isOn ? prevPage + 2 : prevPage + 1);
        const bookMark = {
            bookid: bookId,
            nickname : nickname,
            page : bookPage

        }
        console.log(bookPage,bookId+"책 api 보내는 정보 확인 ")
        axios.post(`${serverIP}/book/bookmark/${lastPage}/${bookId}`, bookMark)
        .then((res) => {
            console.log("저장됐을 거임:", res);
        })
        .catch((err) => {
            console.error("북마크 오류:", err);
        });

    };

이런 식으로 api를 요청하여 DB에 들어가는 모습을 확인했다.