안녕하세요 선배님들

취업 포폴용프로젝트 1인으로 진행중인데 구현하다가 막힌곳이 있어서

혹시나 다른분의 조언이나 힌트를 얻을수 있을까 싶어서 질문드립니다. 최대한 구글링과

혼자서 그림판으로 로직을 그리면서 해봤는데 도저히 모르겠어서 질문드려요 ㅠㅠ

제가 구현하고자 하는 기능은 책을 검색하면 해당책 정보들이 나오고 사용자는 원하는 책을 대출하기 버튼을클릭합니다. 대출된 책은 내서재 대출이력을 통해서 조회하는 기능입니다.

대출하기 버튼을 클릭하면 해당 책의 제목 지은이 출판사 도서관 정보를 담아서 해당 테이블에 insert 시키려고합니다. 어떤 사용자가 대출했는지 알기 위해 사용자 아이디의 기본키를 해당 대출하는 정보에 같이 넣어서 insert 시킵니다. 아래 사진으로 자세히 설명드리겠습니다.

DB 에서 대출이력을 조회할때 해당 유저의 아이디값과 일치하는 데이터만 조회가 되도록 SELECT 하였습니다. tdc2428 이라는 사용자가 내서재 - 대출이력을 들어갔을때 해당 유저가 대출한 책만 조회가 가능합니다.

req 클래스 파일에서는 해당사용자가 빌린 책 정보를 담아서 entity 객체로 변환 시키고 현재 로그인된

유저정보의 key 값을 들고와서 해당 테이블의 user_key 변수에 유저키값을 저장하게 됩니다.

문제는 여기서 부터입니다. 다음과같이 책을 검색하면  DB에 해당 키워드에 맞는 책들이 검색되어서

리스트가 나오게 됩니다. 여기서 사용자는 원하는 책을 대출하기를 클릭하게 되는데 대출한 책의 정보를

req에 담아서 보내야 하는데 

jquery 문법으로 해당 클래스의 값을 가져오면 전부다 들고와버립니다.

저의 생각은 현재 사용자가 대출하기 클릭한것만 값을 가져와서 컨트롤러에 값을 넘겨주고

req에 데이터를 담아야지 라고 생각했는데 어떻게 사용자가 선택한것만 값을 들고오게 처리해야할지 

도저히 제머리로 생각이 안나는거같습니다. 

Req 도 값찍어 보니 해당 책 전체 리스트가 다담겨버립니다.

해당 책정보가 나오는 jsp 코드 입니다.

<!-- 책정보 Start-->

                <ul class ="book-result">
              	   <c:forEach var = "book" items = "${Serch }">
                    <li>
                        <span class = "chk">
                            <input type="checkbox" title="선택" name = "chk">
                        </span>
                        <div class="thmb">
                            <span class = "book-cover-img">
                                <img src="/image/ready_img.png" alt="">
                            </span>
                        </div>
                        <div class = "book-clip">
                           <a href = "#"> <p class = "book-name">제목 : "${book.BOOK_NAME }"</p></a>
                            <p class = "book-author">저자 : "${book.AUTHOR }"</p>
                            <p class = "book-publisher">출판사 : "${book.PUBLISHER }"</p>
                            <p class = "book-location">도서관 : "${book.LOCATION }"</p>                                             
                            <p>코드 : "${book.CALL_SIGN }"</p>
                        </div>
                        <div class = "brow-book-view">
                            <span>
                                <a href="#" style= "color : #0459d7; font-weight: bold;">대출가능</a>
                            </span>
                            <p style = "display: none;">대출 불가</p>
                            <div class = "brow-book-btn">
                            <span>
                              	<button class = "brow-bt" onclick =  "BookBorrow()">대출하기</button>
                            </span>
                            </div>
                        </div>
                    </li>
                 </c:forEach>             
                </ul>

ajax 요청한 js 코드입니다.

let Book_Name = $('.book-name').text();
let Book_Author = $('.book-author').text();
let Book_Publisher = $('.book-publisher').text();
let Book_Loction = $('.book-location').text();

function BookBorrow() {
	
	console.log(Book_Name);
	console.log(Book_Author);
	console.log(Book_Publisher);
	console.log(Book_Loction);	
	
	let BookObj = {
		bookname : Book_Name,
		bookauthor : Book_Author,
		bookpublisher : Book_Publisher,
		bookloction : Book_Loction
	}
	
	$.ajax({
		type : "post",
		url : "book-search/borrow",
		data : BookObj,
		dataType : "text",
		success : function(data) {
			alert('대출이 완료되었습니다.');
		},
		error : function () {
			alert('에러');
		}	
	});
	
	
	
}

사용자가 대출하면 위와같이 나오도록 하는게 제 목표입니다. 위는 테스트로 인해 임시로 넣은 임의의 값

테이블 태그안에 값을 넣어놓았습니다.

개발방향이나 힌트 조언주시면 열심히 구현해보겠습니다 ㅠㅠㅠ