<현재 상태>
- 화면
- 현재 이 상태인데 여기에 오른쪽 콘솔창에 들어온 데이터들을 넣어주는 게 목표다!
- HTML
<!--exhibition-detail.html-->
<body>
<header></header>
<h1 class="welcome-title">전시 상세</h1>
<div class="all-items-organizer">
<div class="poster-n-info-organizer">
<div class="mini-organizer">
<div class="poster-part">
<img class="poster-img" id="posterImg" src="../static/img/default-img.jpg">
</div>
<div class="heart-set">
<div class="heart" id="heart" onclick='heart()'></div>
<span class="heart-num">999</span>
</div>
</div>
<div class="info-part">
<span class="blue-words">전시
제목</span><span
class="black-words" id="titleInDetail">ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ</span>
<span class="blue-words">전시
장소</span><span
class="black-words" id="locationInDetail">ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ</span>
<span class="blue-words">전시
시작일</span><span
class="black-words" id="startDateInDetail">ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ</span>
<span class="blue-words">전시
종료일</span><span
class="black-words" id="endDateInDetail">ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ</span>
<span class="blue-words">전시
설명</span><span
class="black-words" id="contentInDetail">ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ</span>
</div>
</div>
<div class="btns">
<button class="show-reviews">리뷰 보기</button>
<button class="show-accompanies">동행글 보기</button>
</div>
<!-- 이 부분에 리뷰 목록/ 동행글 목록 들어갈 자리 -->
<!-- 이 부분에 리뷰 목록/ 동행글 목록 들어갈 자리 -->
</div>
</body>
- Javascript
// exhibition-detail.js
console.log('exhibition-detail 연결')
import { getExhibitionAPI } from "./api.js";
window.onload = function loadExhibition() {
// url 객체 생성 후 exhibition_id 값 추출
const exhibition_id = new URLSearchParams(window.location.search).get("exhibition_id")
getExhibitionAPI(exhibition_id).then(({ response, responseJson }) => {
const exhibitionDATA = responseJson
console.log(exhibitionDATA)
})
}
- 12번째 줄 아래로 쭉쭉 코드를 추가할 예정!
<화면에 데이터 보여주기>
- 이미지
- 우선 html에 이미지가 들어갈 부분에 id를 추가한다
<!--exhibition-detail.html-->
<div class="poster-part">
<img class="poster-img" id="posterImg" src="../static/img/default-img.jpg">
</div>
// exhibition-detail.js
...
window.onload = function loadExhibition() {
// url 객체 생성 후 exhibition_id 값 추출
const exhibition_id = new URLSearchParams(window.location.search).get("exhibition_id")
getExhibitionAPI(exhibition_id).then(({ response, responseJson }) => {
const exhibitionDATA = responseJson
..
// 전시회 이미지
const exhibitionImg = document.getElementById("posterImg");
if (exhibitionDATA.image) {
if (exhibitionDATA.image.includes('https:')) {
exhibitionImg.setAttribute("src", exhibitionDATA.image);
} else {
// 대체 url 코드로 인코딩된 url 디코딩 하기
exhibitionImg.setAttribute("src", decodeURIComponent(exhibitionDATA.image.split("media/")[1]));
}
}
..
})
}
- html의 img 태그 부분을 불러와서 전시회 데이터에 image가 있으면 해당 이미지를 넣어준다
- 좋아요
<!--exhibition-detail.html-->
<div class="heart-set">
<div class="heart" id="heartInDeatil"></div>
<span class="heart-num" id="heartNumInDeatil"></span>
</div>
- 하트와 좋아요 개수에 id를 각각 지정해줬다
- js에서 넣어줄 예정이기 때문에 onclick 옵션은 삭제했다
// exhibition-detail.js
import { ..., exhibitionLikeAPI, payload, payloadParse, myPageAPI } from "./api.js";
...
window.onload = function loadExhibition() {
// url 객체 생성 후 exhibition_id 값 추출
const exhibition_id = new URLSearchParams(window.location.search).get("exhibition_id")
getExhibitionAPI(exhibition_id).then(({ response, responseJson }) => {
const exhibitionDATA = responseJson
...
// // 전시회 좋아요
const exhibitionHeart = document.getElementById("heartInDeatil");
exhibitionHeart.addEventListener("click", function () {
heart(exhibitionDATA.id)
})
// 전시회 좋아요 개수
const exhibitionHeartNum = document.getElementById("heartNumInDeatil")
exhibitionHeartNum.innerText = exhibitionDATA.likes
// 좋아요 하트색 세팅
if (payload) {
myPageAPI(payloadParse.user_id).then(({ responseJson }) => {
responseJson.exhibition_likes.forEach((obj) => {
if (exhibitionDATA.id == obj.id) {
const heartElement = document.getElementById("heartInDeatil");
heartElement.style.backgroundImage = 'url("../static/img/filled-heart.png")';
}
})
})
}
...
})
}
// 좋아요 하트 관련 코드
function heart(exhibition_id) {
let fullHeart = false;
exhibitionLikeAPI(exhibition_id).then(({ response, responseJson }) => {
const heartElement = document.getElementById("heartInDeatil");
const heartNum = document.getElementById("heartNumInDeatil")
if (response.status == 201) {
heartElement.style.backgroundImage = 'url("../static/img/filled-heart.png")';
heartNum.innerText = responseJson.likes
} else {
heartElement.style.backgroundImage = 'url("../static/img/empty-heart.png")';
heartNum.innerText = responseJson.likes
}
fullHeart = !fullHeart;
})
}
- 16번째 줄을 보면 html에서 해당 아이디를 가진 태그를 불러오고 그 태그에 클릭이벤트를 추가한다
- 클릭 시 heart() 함수가 작동하는데 해당 함수는 43번째 줄에 정의했다
- api.js에 있는 좋아요 기능 함수를 실행시켜서 좋아요를 클릭하면 하트색이 빨간색으로 변하고 한 번 더 클릭하면 빈 하트로 바뀌는 코드다
- 22,23번째 줄은 좋아요 개수 태그를 html에서 불러와서 text에 해당 전시회의 좋아요 개수를 넣어주는 코드다
- 26번째 줄부터는 전시회 상세 페이지에 접속한 유저의 정보에서 해당 전시회에 좋아요를 눌렀다면 빨간하트로 채워진 상태로 보여주는 코드다
- 제목
<!--exhibition-detail.html-->
<div class="info-part">
<span class="blue-words">전시 제목</span><span class="black-words" id="titleInDetail"></span>
...
</div>
// exhibition-detail.js
window.onload = function loadExhibition() {
// url 객체 생성 후 exhibition_id 값 추출
const exhibition_id = new URLSearchParams(window.location.search).get("exhibition_id")
getExhibitionAPI(exhibition_id).then(({ response, responseJson }) => {
const exhibitionDATA = responseJson
console.log(exhibitionDATA)
...
// 전시회 제목
const exhibitionTitle = document.getElementById("titleInDetail");
exhibitionTitle.innerHTML = exhibitionDATA.info_name
...
})
}
- 이제부터는 다 똑같다
- 14번째 innerText 대신 innerHTML을 쓴 이유는 데이터에 HTML에서 사용하는 특수기호가 있기 때문이다
- Text로 할 경우 그 특수기호가 그대로 보인다
- 장소
<!--exhibition-detail.html-->
<div class="info-part">
...
<span class="blue-words">전시 장소</span><span class="black-words" id="locationInDetail"></span>
...
</div>
// exhibition-detail.js
window.onload = function loadExhibition() {
// url 객체 생성 후 exhibition_id 값 추출
const exhibition_id = new URLSearchParams(window.location.search).get("exhibition_id")
getExhibitionAPI(exhibition_id).then(({ response, responseJson }) => {
const exhibitionDATA = responseJson
console.log(exhibitionDATA)
...
// 전시회 장소
const exhibitionLocation = document.getElementById("locationInDetail");
exhibitionLocation.innerHTML = exhibitionDATA.location
...
})
}
- 장소에서는 특수기호가 있는 데이터를 발견하지는 못 했지만 혹시 있을 수도 있어서 innerHTML로 했다
- 시작일
<!--exhibition-detail.html-->
<div class="info-part">
...
<span class="blue-words">전시 시작일</span><span class="black-words" id="startDateInDetail"></span>
...
</div>
// exhibition-detail.js
window.onload = function loadExhibition() {
// url 객체 생성 후 exhibition_id 값 추출
const exhibition_id = new URLSearchParams(window.location.search).get("exhibition_id")
getExhibitionAPI(exhibition_id).then(({ response, responseJson }) => {
const exhibitionDATA = responseJson
console.log(exhibitionDATA)
...
// 전시회 시작일
const exhibitionStartDate = document.getElementById("startDateInDetail");
exhibitionStartDate.innerText = exhibitionDATA.start_date
...
})
}
- 시작일에는 특수기호 들어갈 일이 없어서 innerText로 했다
- 종료일
<!--exhibition-detail.html-->
<div class="info-part">
...
<span class="blue-words">전시 종료일</span><span class="black-words" id="endDateInDetail"></span>
...
</div>
// exhibition-detail.js
window.onload = function loadExhibition() {
// url 객체 생성 후 exhibition_id 값 추출
const exhibition_id = new URLSearchParams(window.location.search).get("exhibition_id")
getExhibitionAPI(exhibition_id).then(({ response, responseJson }) => {
const exhibitionDATA = responseJson
console.log(exhibitionDATA)
...
// 전시회 종료일
const exhibitionEndDate = document.getElementById("endDateInDetail");
exhibitionEndDate.innerText = exhibitionDATA.end_date
...
})
}
- 설명
<!--exhibition-detail.html-->
<div class="info-part">
...
<span class="blue-words">전시 설명</span><span class="black-words" id="contentInDetail"></span>
</div>
// exhibition-detail.js
window.onload = function loadExhibition() {
// url 객체 생성 후 exhibition_id 값 추출
const exhibition_id = new URLSearchParams(window.location.search).get("exhibition_id")
getExhibitionAPI(exhibition_id).then(({ response, responseJson }) => {
const exhibitionDATA = responseJson
console.log(exhibitionDATA)
...
// 전시회 설명
const exhibitionContent = document.getElementById("contentInDetail");
exhibitionContent.innerHTML = exhibitionDATA.content
...
})
}
- 설명에는 특수기호가 들어가 있어서 innerHTML로 했다
<예약하기 버튼 추가하기>
- html
<!--exhibition-detail.html-->
<div class="btns">
...
<button class="show-reservation" id="reserveInDetail">예약하기</button>
</div>
- 리뷰보기, 동행글보기 버튼 옆에 예약하기 버튼을 만들었다
- javascript
// exhibition-detail.js
window.onload = function loadExhibition() {
// url 객체 생성 후 exhibition_id 값 추출
const exhibition_id = new URLSearchParams(window.location.search).get("exhibition_id")
getExhibitionAPI(exhibition_id).then(({ response, responseJson }) => {
const exhibitionDATA = responseJson
console.log(exhibitionDATA)
...
// 예약하기 버튼
const exhibitionReserveButton = document.getElementById("reserveInDetail");
exhibitionReserveButton.addEventListener("click", function () {
exhibitionReserve(exhibitionDATA.direct_url);
});
})
}
// 전시회 예약 페이지
function exhibitionReserve(link) {
window.open(link)
}
- 예약하기 버튼 클릭 시 전시회 데이터 중 예약 페이지 url로 이동하게끔 하는 코드다
<구현 완료 화면>
