위와 같이 선택이 가능할때 선택된 항목에만 불이 들어오게 만들계획이다.
간단하게 만들었는데 잊혀지기 전에 기록해둬야 겠다.

이력서 정보 가져오기

지원하는 버튼을 누르지도 않았는데 데이터를 가져오면 자원이 낭비이기 때문에 지원하기 버튼을 눌렀을때만 이력서 정보를 가져오게 만들었다.

우선 지원하기 버튼을 누르면 모달이 열리고 비동기 통신으로 데이터를 가져와야 한다.

<button type="button" class="btn btn-success w-100" 
      data-bs-toggle="modal" data-bs-target="#myModal"
      onclick="requestResume()">지원하기
</button>

#myModal 모달이 열려면서 requestResume()함수가 실행된다.

        function requestResume() {
            $.ajax({
                type: "get",
                url: "/user/request/resume",
                dataType: "json"
            }).done((res) => {
                renderRes(res.data);
            }).fail((err) => {
                alert(err.responseJSON.msg);
            });
        }

선택된 박스만 배경색 넣기

세션에 있는 userId를 조건으로 해당 유저가 작성한 이력서 리스트를 res.data 로 리턴받아서 다시 그린다.

        function renderRes(rDtoss) {
            rDtoss.forEach((rd) => {
                renderResumeOne(rd);
            });
            let resumes = document.querySelectorAll('.resumeList');
            resumes.forEach(function (resume) {
                resume.addEventListener('click', function (evt) {
                    // 모든 탭 버튼에서 active 클래스를 제거
                    resumes = document.getElementsByClassName("resumeList");
                    for (i = 0; i < resumes.length; i++) {
                        resumes[i].classList.remove("selected");
                    }
                    evt.currentTarget.classList.add("selected");
                })
            });
        }

먼저 renderResumeOne() 함수가 받아온 이력서 리스트만큼 이력서를 그리게 되고
querySelectorAll('.resumeList') 을 통해서 클릭시 그려진 이력서 div 에 selected 클래스가 추가되고 지워지게 된다.

        function renderResumeOne(rDto) {
            let el = `
            <div class="card mb-4 resumeList"token template-punctuation string">`+ rDto.resumeId + `)">
            	<div class="card-body">
            		<h5 class="card-title" style="text-align: left;">`+ rDto.title + `</h5>
            		<div class="m-2" style="float: left;">
            			<h6 class="card-subtitle mb-2 text-muted">`+ rDto.education + `</h6>
            		</div>
            		<div class="m-2" style="float: left;">
            			<h6 class="card-subtitle mb-2 text-muted">`+ rDto.career + `</h6>
            		</div>                                                      
            	</div>
            </div>
            `;
            $('#render-resume').append(el);
        }

클릭된 이력서의 배경색 (연한 그린)

.selected {
    background-color: #c5f1c5;
}

로그인 안했을시 로그인 모달

jstl 을 이용해서 로그인 세션이 없을 경우에는 로그인 모달에 뜨게 만든다.

<c:when test="${principal == null && compSession == null}">
     <button type="button" class="btn btn-success w-100" data-bs-toggle="modal"
         data-bs-target="#loginModal">지원하기
     </button>
</c:when>