<html>
- 일단 추천바 모양은 이렇게 구현되어 있다(팀원분이 만들어주심!)
<div class="recommend-organizer" style="display: none;">
<h6 class="rec-intro">이런 전시는 어떠세요?</h6>
<div class="recommend-organizer-small">
<div class="one-by-one">
<div class="rec-img-box">
<a href="" target="" id="1-rec-img-anchor">
<img class="rec-img" src="../static/img/default-img.jpg" id="1-rec-img">
</a>
</div>
<span class="rec-title" id="1-rec-title"></span>
</div>
<div class="one-by-one">
<div class="rec-img-box">
<a href="" target="" id="2-rec-img-anchor">
<img class="rec-img" src="../static/img/default-img.jpg" id="2-rec-img">
</a>
</div>
<span class="rec-title" id="2-rec-title"></span>
</div>
<div class="one-by-one">
<div class="rec-img-box">
<a href="" target="" id="3-rec-img-anchor">
<img class="rec-img" src="../static/img/default-img.jpg" id="3-rec-img">
</a>
</div>
<span class="rec-title" id="3-rec-title"></span>
</div>
<div class="one-by-one">
<div class="rec-img-box">
<a href="" target="" id="4-rec-img-anchor">
<img class="rec-img" src="../static/img/default-img.jpg" id="4-rec-img">
</a>
</div>
<span class="rec-title" id="4-rec-title"></span>
</div>
<div class="one-by-one">
<div class="rec-img-box">
<a href="" target="" id="5-rec-img-anchor">
<img class="rec-img" src="../static/img/default-img.jpg" id="5-rec-img">
</a>
</div>
<span class="rec-title" id="5-rec-title"></span>
</div>
</div>
</div>
<스크롤에 따라 추천바 숨기기>
// 스크롤 위치에 따른 추천바 숨기기
let recommendOrganizer = document.querySelector(".recommend-organizer");
let reserveBtn = document.querySelector("#reserveBtn");
let reserveBtnHeight = window.pageYOffset + reserveBtn.getBoundingClientRect().top;
let header = document.querySelector("header");
let headerHeight = window.pageYOffset + header.getBoundingClientRect().top;
window.onscroll = function () {
let windowTop = window.scrollY;
if (windowTop >= reserveBtnHeight || windowTop <= headerHeight) {
recommendOrganizer.style.display = "none";
} else {
recommendOrganizer.style.display = "flex";
}
}
- 전시 제목이 긴 경우 추천바가 제목을 가리는 경우가 있어서 header 높이를 기준으로 스크롤바가 헤더 높이보다 아래로 가면 추천바가 뜨게끔 했다
- 그리고 리뷰나 동행글 보기를 누른 경우 pc에서는 괜찮은데 모바일로 볼 때 추천바가 리뷰를 가려서 예약하기 버튼을 기준으로 버튼 위치보다 스크롤이 아래로 내려가면 사라지게 했다
<추천바에 추천 게시글 넣기>
// 전시 추천바
for (let i = 1; i <= 5; i++) {
let recommend = exhibitionDATA.recommend[i - 1]
// 상세페이지 링크
let linkedExhibition = document.getElementById(`${i}-rec-img-anchor`)
linkedExhibition.setAttribute("href", `${frontendBaseURL}/templates/exhibition-detail.html?exhibition_id=${recommend.id}`)
// 이미지
let recommendImg = document.getElementById(`${i}-rec-img`)
if (recommend.image) {
if (recommend.image.includes('https:')) {
recommendImg.setAttribute("src", recommend.image);
} else {
// 대체 url 코드로 인코딩된 url 디코딩 하기
recommendImg.setAttribute("src", decodeURIComponent(recommend.image.split("media/")[1]));
}
}
// 제목
let recommendTitle = document.getElementById(`${i}-rec-title`)
recommendTitle.innerHTML = recommend.info_name
}
- 데이터 넣는 건 다 비슷해서 달리 설명할 게 없다
- 추천 전시가 5개로 고정되어 있으니까 1부터 5까지 for문을 돌려서 각 숫자에 맞게 데이터가 들어가도록 했다
