대여가능 추천가능 추천 취소 반납가능 대여중 버튼

 loadSearchBooks() {
        const responseData = SearchApi.getInstance().searchBook();
        const contentFlex = document.querySelector(".content-flex");
        const principal = PrincipalApi.getInstance().getPrincipal();

        const _bookButtons = document.querySelectorAll(".book-buttons");
        const bookButtonsLength = _bookButtons == null ? 0 : _bookButtons.length;

        console.log(responseData)
        responseData.forEach((data, index) => {
            contentFlex.innerHTML += `
                <div class="info-container">
                    <div class="book-desc">
                        <div class="img-container">
                            <img src="http://localhost:8000/image/book/${data.saveName != null ? data.saveName : "no_img.png"}" class="book-img">
                        </div>
                        <div class="like-info"><i class="fa-regular fa-thumbs-up"></i> <span class="like-count">${data.likeCount != null ? data.likeCount : 0}</span></div>
                    </div>
                    
                    <div class="book-info">
                        <input type="hidden" class="book-id" value="${data.bookId}">
                        <div class="book-code">${data.bookCode}</div>
                        <h3 class="book-name">${data.bookName}</h2>
                        <div class="info-text book-author"><b>저자: </b>${data.author}</div>
                        <div class="info-text book-publisher"><b>출판사: </b>${data.publisher}</div>
                        <div class="info-text book-publicationdate"><b>출판일: </b>${data.publicationDate}</div>
                        <div class="info-text book-category"><b>카테고리: </b>${data.category}</div>
                        <div class="book-buttons">
                            
                        </div>
                    </div>
                </div>
            `;
            const bookButtons = document.querySelectorAll(".book-buttons");
            if(principal == null) {
                if(data.rentalDtlId != 0 && data.returnDate == null){
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-button" disabled>대여중</button>
                    `;
                }else {
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-button" disabled>대여가능</button>
                    `;
                }

                bookButtons[bookButtonsLength + index].innerHTML += `
                    <button type="button" class="like-button" disabled>추천</button>
                `;
            }else {
                if(data.rentalDtlId != 0 && data.returnDate == null && data.userId != principal.user.userId){
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-buttons rental-button" disabled>대여중</button>
                    `;
                }else if(data.rentalDtlId != 0 && data.returnDate == null && data.userId == principal.user.userId) {
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-buttons return-button">반납하기</button>
                    `;
                }else {
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-buttons rental-button">대여하기</button>
                    `;
                }
                if(data.likeId != 0){
                    bookButtons[bookButtonsLength + index].innerHTML += `
                        <button type="button" class="like-buttons dislike-button">추천취소</button>
                    `;
                }else {
                    bookButtons[bookButtonsLength + index].innerHTML += `
                        <button type="button" class="like-buttons like-button">추천</button>
                    `;
                }

                ComponentEvent.getInstance().addClickEventRentalButtons();
                ComponentEvent.getInstance().addClickEventLikeButtons();
            }
        })
    }
}

 loadSearchBooks() {
        const responseData = SearchApi.getInstance().searchBook();
        const contentFlex = document.querySelector(".content-flex");
        const principal = PrincipalApi.getInstance().getPrincipal();

loadSearchBooks에서 

     const principal = PrincipalApi.getInstance().getPrincipal();

 

principal= 로그인 여부 ajax요청을 하고 로그인 여부의 결과를 principal에 넣는다

 

 

  responseData.forEach((data, index) => {

responseData.forEach에서 data와 index를 가져온다

   const bookButtons = document.querySelectorAll(".book-buttons");

book-button전부(대여하기버튼, 추천 버튼)를 가져와서 bookButtons안에 넣어준다

if(principal == null) {
                if(data.rentalDtlId != 0 && data.returnDate == null){
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-button" disabled>대여중</button>
                    `;
                }else {
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-button" disabled>대여가능</button>
                    `;
                }

principal == null 로그인이 되어 있지 않으면서

rentalDtlId !=0 빌려간사람이 있고 returnDate == null 아직 반납을 하지 않은경우 해당 버튼위치에 대여중이라고 바꾸고 버튼을 비활성화 시킨다

 const _bookButtons = document.querySelectorAll(".book-buttons");
        const bookButtonsLength = _bookButtons == null ? 0 : _bookButtons.length;

 const _bookButtons = document.querySelectorAll(".book-buttons"); for문이 돌기전에는 bookButtons배열안에 버튼이 없으므로 배열은 null이다 즉 처음에 데이터를 들고오기전에 bookButtonsLength가 null이므로 0으로 하고 응답된 데이터가 있다면 그 데이터 길이를 bookButtonsLength에 넣는다

 

    loadSearchBooks() {
        const responseData = SearchApi.getInstance().searchBook();
        const contentFlex = document.querySelector(".content-flex");
        const principal = PrincipalApi.getInstance().getPrincipal();

        const _bookButtons = document.querySelectorAll(".book-buttons");
        const bookButtonsLength = _bookButtons == null ? 0 : _bookButtons.length;

        console.log(responseData)
        responseData.forEach((data, index) => {
            contentFlex.innerHTML += `

데이터가 들고 올때 첫페이지의 index는 0~9번까지 들고온다 하지만 두번째 페이지도 index가 10에서 시작하는게 아니라 0~9로 들고 옴으로 첫페이지의 index에 버튼이 계속들어가버리게된다. 그래서 페이지가 바뀌고 나서의 게시물에 버튼이 들어가지 않는다.  이를 방지 하기 위하여 버튼이 있는 book-buttons를 for문이 돌기전 필드에 정의한다

  const _bookButtons = document.querySelectorAll(".book-buttons");
        const bookButtonsLength = _bookButtons == null ? 0 : _bookButtons.length;

첫페이지에서는 bookButtonsLength안에 null이므로 0을 준다 그리고 게시글10개를 사용자에게 보여준다. 

addScrollEventPaging() {
        const html = document.querySelector("html");
        const body = document.querySelector("body");

        body.onscroll = () => {
            const scrollPosition = body.offsetHeight - html.clientHeight - html.scrollTop;

            if(scrollPosition < 250 && searchObj.page < maxPage) {
                searchObj.page++;
                SearchService.getInstance().loadSearchBooks();
            }
        }
    }

            if(scrollPosition < 250 && searchObj.page < maxPage) {
                searchObj.page++;
                SearchService.getInstance().loadSearchBooks();
            }
        }
    }

 

스크롤 이벤트가 일어나면 loadSearchBooks를 다시 호출한다

 

  const _bookButtons = document.querySelectorAll(".book-buttons");
        const bookButtonsLength = _bookButtons == null ? 0 : _bookButtons.length;

다시 호출했을때 bookButtons배열의 크기는 10이다 왜냐하면 한 게시글당 book_buttons은 1개이고 한페이지당 게시글을10개씩들고 옮으로 bookButtonsLength의 배열 크기는 10이다

bookButtons[bookButtonsLength + index].innerHTML =

첫페이지에서 bookButtonsLength는 0이다 그러므로 bookButtons[0~9].innerHTML에 버튼이 추가된다. 스크롤이벤트가 한번일어나 페이지가 바뀌는 경우 bookButtons배열안에는 1페이지 안에 10개의 게시물이 있기 때문에 bookButtons의 배열의 크기는 10이된다 고로 2번째 페이지는 10+0~9가된다 세번쨰 페이지는 20 + 0~9가 되므로 이런식으로 조건문을 넣어서 모든게시물에 해당 조건에 맞는 버튼을 보여주도록 한다

 

 

else {
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-button" disabled>대여가능</button>
                    `;
                }

그렇지 않은경우 대여가능이라고 표시를 하되 로그인이 되어있지않았음으로 마찬가지로 버튼을 비활성화 시킨다

 

  bookButtons[bookButtonsLength + index].innerHTML += `
                    <button type="button" class="like-button" disabled>추천</button>
                `;

로그인되어있지 않으면 추천 버튼만 보여주고 버튼은 비활성화시킨다

else {
                if(data.rentalDtlId != 0 && data.returnDate == null && data.userId != principal.user.userId){
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-buttons rental-button" disabled>대여중</button>
                    `;
                }else if(data.rentalDtlId != 0 && data.returnDate == null && data.userId == principal.user.userId) {
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-buttons return-button">반납하기</button>
                    `;
                }else {
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-buttons rental-button">대여하기</button>
                    `;
                }
                if(data.likeId != 0){
                    bookButtons[bookButtonsLength + index].innerHTML += `
                        <button type="button" class="like-buttons dislike-button">추천취소</button>
                    `;
                }else {
                    bookButtons[bookButtonsLength + index].innerHTML += `
                        <button type="button" class="like-buttons like-button">추천</button>
                    `;
                }

else (principal != null)로그인이 되어있다면 대여중을 제외한 나머지 버튼을 모두 활성화 시킨다

 if(data.rentalDtlId != 0 && data.returnDate == null && data.userId != principal.user.userId)

rentalDtlId != 0 누군가 책을 대출해가고 returnDate == null 반납을 하지 않고 data.userId != principal.user.userId =>현재 로그인한 유저가 현재 해당책을 빌린 유저가 아니라면 

bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-buttons rental-button" disabled>대여중</button>
                    `;

대여중 버튼을 보여주고 버튼 비활성화

else if(data.rentalDtlId != 0 && data.returnDate == null && data.userId == principal.user.userId) {
                    bookButtons[bookButtonsLength + index].innerHTML = `
                        <button type="button" class="rental-buttons return-button">반납하기</button>
                    `;

책을 빌린유저와 현재로그인한 유저가 같다면 반납하기 버튼 활성화

 if(data.likeId != 0){
                    bookButtons[bookButtonsLength + index].innerHTML += `
                        <button type="button" class="like-buttons dislike-button">추천취소</button>
                    `;
                }else {
                    bookButtons[bookButtonsLength + index].innerHTML += `
                        <button type="button" class="like-buttons like-button">추천</button>
                    `;
                }

 현재유저가 해당책에 대해서 추천버튼을 눌렀다면(data.likeId !=0) 추천취소를 하고 아니면 추천버튼을 보여준다

 

결과

 

녹화_2023_08_01_12_26_20_697.mp4

2.29MB