From 5f8aa55e5ebc668ef593ec1c57012e6b67feb651 Mon Sep 17 00:00:00 2001 From: LinQuixote Date: Wed, 8 May 2024 23:58:10 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor=20:=20=EB=94=94=ED=85=8C=EC=9D=BC?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8A=B8=EB=A0=88=EC=9D=BC?= =?UTF-8?q?=EB=9F=AC=20=EC=98=81=EC=83=81=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/api.js | 4 +- js/page/detail.js | 138 ++++++++++++++++++++++++++++++---------------- page/detail.html | 2 +- 3 files changed, 94 insertions(+), 50 deletions(-) diff --git a/js/api.js b/js/api.js index 6075b16..03ecd81 100644 --- a/js/api.js +++ b/js/api.js @@ -55,7 +55,8 @@ export const getMovieImages = async (movie_id) => { // 무비 id를 입력하면 영화 영상들을 유튜브로 가져옵니다. // 유튜브 url을 리턴하는 함수로 없으면 빈배열을 리턴합니다. export const getMovieVideos = async (movie_id) => { - const url = `${defaultUrl}${movie_id}/videos?language=ko`; + // movie/movie_id/videos?language=ko + const url = `${defaultUrl}movie/${movie_id}/videos?language=ko`; const response = await fetch(url, options); const data = await response.json(); @@ -68,4 +69,3 @@ export const getMovieVideos = async (movie_id) => { } return []; }; - diff --git a/js/page/detail.js b/js/page/detail.js index 9aa130a..63e44eb 100644 --- a/js/page/detail.js +++ b/js/page/detail.js @@ -1,131 +1,175 @@ -import {getMovieDetail} from '../api.js'; +import { getMovieDetail, getMovieVideos } from "../api.js"; import getUrlParamValue from "../utils/getUrlParamValue.js"; +import { getLocalStorage } from "../utils/localStorage.js"; + +const movieId = getUrlParamValue("movieId"); + +getMovieVideos(movieId).then((response) => { + const userString = getLocalStorage("userObj"); + // 있으면 객체 없으면 undefined + const userData = userString ?? JSON.parse(userString); + if (!userData) { + const btn = document.getElementById("trailerBtn"); + btn.innerHTML = "로그인"; + btn.addEventListener("click", function () { + window.location.href = "./profile.html"; + }); + } else { + const btn = document.getElementById("trailerBtn"); + btn.innerHTML = "트레일러 재생"; + let videoUrl; + if (response.length > 0) { + // 영화 비디오 url이 있으면? + btn.addEventListener("click", function () { + window.open(response[0]); + }); + } else { + btn.addEventListener("click", function () { + alert("동영상이 존재하지 않습니다."); + }); + } + } +}); -const movieId = getUrlParamValue('movieId'); +// document.getElementById("trailerBtn").addEventListener("click", function() { +// }) getMovieDetail(movieId).then((response) => { // 영화 제목 설정 - const titleElement = document.querySelector('.logo-box'); - const tabName = document.querySelector('title'); + const titleElement = document.querySelector(".logo-box"); + const tabName = document.querySelector("title"); titleElement.textContent = response.title; tabName.textContent = `${response.title} : ${tabName.textContent}`; // 장르 정보 설정 - const genreContainer = document.querySelector('.dot-item'); + const genreContainer = document.querySelector(".dot-item"); response.genres.forEach((genre, index) => { - const genreElement = document.createElement('span'); + const genreElement = document.createElement("span"); genreElement.textContent = genre.name; genreContainer.appendChild(genreElement); if (index < response.genres.length - 1) { - const space = document.createTextNode(' '); + const space = document.createTextNode(" "); genreContainer.appendChild(space); } }); // 이미지 설정 - const imageBox = document.querySelector('.video-detail .image-box img'); - const thumbImg = document.querySelector('.thumb-img'); + const imageBox = document.querySelector(".video-detail .image-box img"); + const thumbImg = document.querySelector(".thumb-img"); if (response.poster_path) { imageBox.src = `https://image.tmdb.org/t/p/original${response.backdrop_path}`; thumbImg.src = `https://image.tmdb.org/t/p/original${response.poster_path}`; } // 개요 설정 - const TaglineElement = document.querySelector('.detail-info-box .content-clamp .text'); + const TaglineElement = document.querySelector( + ".detail-info-box .content-clamp .text" + ); TaglineElement.textContent = response.overview; // preview-title 설정 - const previewTitleElement = document.querySelector('.preview-title'); + const previewTitleElement = document.querySelector(".preview-title"); previewTitleElement.textContent = response.title; // preview-dsc 설정 - const previewDscElement = document.querySelector('.preview-dsc'); + const previewDscElement = document.querySelector(".preview-dsc"); previewDscElement.textContent = response.overview; // detail-dsc 설정 - const detailDscElement = document.querySelector('.detail-dsc'); + const detailDscElement = document.querySelector(".detail-dsc"); detailDscElement.textContent = response.overview; // Production Companies 설정 - const productionCompaniesElement = document.querySelector('.detail-info-table tbody tr:nth-child(1) td'); - productionCompaniesElement.textContent = response.production_companies.map(company => company.name).join(', '); + const productionCompaniesElement = document.querySelector( + ".detail-info-table tbody tr:nth-child(1) td" + ); + productionCompaniesElement.textContent = response.production_companies + .map((company) => company.name) + .join(", "); // 장르 정보 설정 - const genres = response.genres.map(genre => genre.name).join(' '); - const genreRow = document.querySelector('.detail-info-table tbody tr:nth-child(2) td'); + const genres = response.genres.map((genre) => genre.name).join(" "); + const genreRow = document.querySelector( + ".detail-info-table tbody tr:nth-child(2) td" + ); genreRow.innerHTML = `${genres}`; }); //////////영화 인물 감독 //////////// //1.인물 api. 상단4명만 출력할것 const options = { - method: 'GET', + method: "GET", headers: { - accept: 'application/json', - Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzNDQ1MzFmMGRkOGY3NmY2NDE2NWEwNzU4MDQ1M2QzOSIsInN1YiI6IjY2MmIyMzQ5NzY0ODQxMDExZDJjMzFkNiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.bNR43UvxNhyv-aUuh3xtx44tXz-IjayN-QrgO-ATUMA' - } + accept: "application/json", + Authorization: + "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzNDQ1MzFmMGRkOGY3NmY2NDE2NWEwNzU4MDQ1M2QzOSIsInN1YiI6IjY2MmIyMzQ5NzY0ODQxMDExZDJjMzFkNiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.bNR43UvxNhyv-aUuh3xtx44tXz-IjayN-QrgO-ATUMA", + }, }; -fetch(`https://api.themoviedb.org/3/movie/${movieId}/credits?language=ko-KR`, options) - .then(response => response.json()) - .then(response => { +fetch( + `https://api.themoviedb.org/3/movie/${movieId}/credits?language=ko-KR`, + options +) + .then((response) => response.json()) + .then((response) => { // API에서 가져온 출연진 정보 const actors = response.cast.slice(0, 4); // 배열의 처음 4개 요소만 선택 // preview-dsc에 있는 요소를 찾아서 출연진 정보를 추가합니다. - const actorListElement = document.querySelector('.content-actor-list'); - const actorElement = document.createElement('span'); - actorElement.classList.add('content-actor-list'); - actorElement.textContent = actors.map((actor) => actor.name).join(', '); + const actorListElement = document.querySelector(".content-actor-list"); + const actorElement = document.createElement("span"); + actorElement.classList.add("content-actor-list"); + actorElement.textContent = actors.map((actor) => actor.name).join(", "); actorListElement.appendChild(actorElement); // 출연진 정보를 detail-info-table에 추가합니다. - const genreRow = document.querySelector('.detail-info-table tbody tr:nth-child(3) td'); - const genreRowElement = document.createElement('span'); - genreRowElement.classList.add('genre'); - genreRowElement.textContent = actors.map((actor) => actor.name).join(', '); + const genreRow = document.querySelector( + ".detail-info-table tbody tr:nth-child(3) td" + ); + const genreRowElement = document.createElement("span"); + genreRowElement.classList.add("genre"); + genreRowElement.textContent = actors.map((actor) => actor.name).join(", "); genreRow.appendChild(genreRowElement); }) - .catch(err => console.error(err)) + .catch((err) => console.error(err)) .finally(() => removeLoadingOverlay()); - //더보기 스크롤 밑으로 내리기 함수 -const moreLink = document.querySelector('.more'); +const moreLink = document.querySelector(".more"); -moreLink.addEventListener('click', function() { +moreLink.addEventListener("click", function () { // 스크롤을 제일 아래로 내립니다. window.scrollTo({ top: document.body.scrollHeight, - behavior: 'smooth' // 스무스한 스크롤 효과 적용 + behavior: "smooth", // 스무스한 스크롤 효과 적용 }); }); // 클립보드 -const shareButton = document.querySelector('.icon-item button'); -shareButton.addEventListener('click', function() { +const shareButton = document.querySelector(".icon-item button"); +shareButton.addEventListener("click", function () { // 현재 페이지의 URL을 가져옵니다. const url = window.location.href; // 클립보드에 URL을 복사합니다. - navigator.clipboard.writeText(url) + navigator.clipboard + .writeText(url) .then(() => { // 복사가 성공했을 때 알림을 표시합니다. - alert('주소가 복사되었어요'); + alert("주소가 복사되었어요"); }) - .catch(err => { + .catch((err) => { // 복사가 실패했을 때 에러를 콘솔에 출력합니다. - console.error('주소 복사 실패:', err); + console.error("주소 복사 실패:", err); }); }); - const removeLoadingOverlay = () => { - const loadingOverlay = document.querySelector('#loaderWrap'); + const loadingOverlay = document.querySelector("#loaderWrap"); const hideOverlay = setTimeout(() => { - loadingOverlay.style.display = 'none'; + loadingOverlay.style.display = "none"; clearTimeout(hideOverlay); }, 1000); -} \ No newline at end of file +}; diff --git a/page/detail.html b/page/detail.html index 1a753be..93f76fa 100644 --- a/page/detail.html +++ b/page/detail.html @@ -67,7 +67,7 @@

- +