From 71a8857baae214f49c74aec51113d3cf14f7bff0 Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Fri, 31 Jan 2020 17:04:43 +0900 Subject: [PATCH 1/5] =?UTF-8?q?M5=20=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 영화목록 및 정보 표시 인피니트 스크롤(쓰로틀링) --- mission004/ganeodolu/css/style.css | 247 ++++++++++++++++++++++++++ mission004/ganeodolu/html/detail.html | 48 +++++ mission004/ganeodolu/index.html | 45 +++++ mission004/ganeodolu/js/app.js | 77 ++++++++ mission004/ganeodolu/package.json | 11 ++ 5 files changed, 428 insertions(+) create mode 100644 mission004/ganeodolu/css/style.css create mode 100644 mission004/ganeodolu/html/detail.html create mode 100644 mission004/ganeodolu/index.html create mode 100644 mission004/ganeodolu/js/app.js create mode 100644 mission004/ganeodolu/package.json diff --git a/mission004/ganeodolu/css/style.css b/mission004/ganeodolu/css/style.css new file mode 100644 index 0000000..12a5f89 --- /dev/null +++ b/mission004/ganeodolu/css/style.css @@ -0,0 +1,247 @@ +* { + margin: 0; + padding: 0; + color: #fff; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 0; + font-size: 100%; + font-style: normal; +} + +*:focus { + outline: none; +} + +html, +body { + width: 100%; + height: 100%; +} + +body { + background-color: #020e2f; + color: #fff; + height: 100%; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +button { + display: inline-block; + background: none; + border: none; + outline: none; + cursor: pointer; + vertical-align: middle; +} + +button:disabled, +button[disabled] { + cursor: initial; +} + +select { + border: none; + background-color: transparent; +} + +a { + text-decoration: none; + color: inherit; +} + +.header { + box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 6px 2px; +} + +.header-cont { + height: 78px; + max-width: 1200px; + padding: 0 24px; +} + +.logo { + position: absolute; + font-weight: bold; + font-size: 20px; + top: 26px; +} + +.search-bar { + position: absolute; + height: 24px; + right: 24px; + top: 20px; + width: 240px; +} + +.input-search { + width: 210px; + height: 24px; + background-color: transparent; + border-bottom: 2px solid #fff; +} + +.main { + padding: 84px 36px; + text-align: center; +} + +.movie-list { + text-align: left; + margin: 0 auto; + width: 1024px; +} + +.movie-list-item { + width: 180px; + margin: 0 20px 30px 0; + height: 340px; + display: inline-block; + vertical-align: top; + position: relative; + cursor: pointer; +} + +.movie-list-item:hover { + top: 1px; + left: 1px; +} + +.movie-list-item:hover .movie-list-dim { + opacity: 0.5; +} + +.movie-list-dim { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: -webkit-gradient( + linear, + left top, left bottom, + from(rgba(0, 0, 0, 0.3)), + to(rgba(0, 0, 0, 1)) + ); + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.3) 0%, + rgba(0, 0, 0, 1) 100% + ); + opacity: 0; + transition: opacity 0.3s ease-in-out; +} + +.poster { + width: 180px; + height: 270px; + -webkit-box-shadow: 3px 3px 9px 0px rgba(0, 0, 0, 0.4); + box-shadow: 3px 3px 9px 0px rgba(0, 0, 0, 0.4); +} + +.movie-info { + margin-top: 4px; +} + +.movie-info li { + font-size: 14px; +} + +.movie-info li:last-of-type { + font-size: 12px; + opacity: 0.8; +} + +.movie-title { + font-weight: bold; + margin-bottom: 4px; + font-size: 16px; +} + +/*상세 페이지 */ +.main-detail { + display: flex; + height: calc(100% - 82px); +} + +.detail-bg { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-image: url(https://image.tmdb.org/t/p/w300/lMZyfDVoxhmfBUNmnNQWvSEL9E3.jpg); + background-size: cover; + filter: blur(3px); + opacity: 0.5; + background-position: center center; + z-index: -1; +} + +.detail-poster { + border-radius: 20px; + width: auto; + height: 100%; +} + +.detail-info { + padding-left: 24px; + text-align: left; +} + +.detail-info h1 { + font-size: 36px; + margin-bottom: 12px; + font-weight: 300; +} + +.info-list li { + display: inline-block; + position: relative; + margin-right: 16px; +} + +.info-list li:after { + content: '.'; + position: absolute; + top: -6px; + right: -12px; +} + +.info-list li:last-of-type:after { + content: ''; +} + +.info-list .txt-14 { + font-size: 14px; + opacity: 0.8; +} + +.overview { + margin-top: 24px; + font-size: 14px; + opacity: 0.8; +} \ No newline at end of file diff --git a/mission004/ganeodolu/html/detail.html b/mission004/ganeodolu/html/detail.html new file mode 100644 index 0000000..e70c1f3 --- /dev/null +++ b/mission004/ganeodolu/html/detail.html @@ -0,0 +1,48 @@ + + + + + + MISSION 4 + + + + +
+
+ +
+ + + search + +
+
+
+
+
+ +
+

Movie Title

+
    +
  • +

    2020. 01. 09

    +
    • +
  • +

    120 min

    +
    • +
  • +

    Romance / Drama / Fantasy

    +
    • +
+

+ The Fellowship of the Ring embark on a journey to destroy the One Ring and end Sauron's reign over Middle-earth. +

+
+
+ + + diff --git a/mission004/ganeodolu/index.html b/mission004/ganeodolu/index.html new file mode 100644 index 0000000..5d6d0f4 --- /dev/null +++ b/mission004/ganeodolu/index.html @@ -0,0 +1,45 @@ + + + + + + MISSION 4 + + + + +
+
+ +
+ + + search + +
+
+
+
+ +
+ + + diff --git a/mission004/ganeodolu/js/app.js b/mission004/ganeodolu/js/app.js new file mode 100644 index 0000000..775accf --- /dev/null +++ b/mission004/ganeodolu/js/app.js @@ -0,0 +1,77 @@ +const $targetMovieList = document.querySelector('.movie-list') + +function fetchData(pageNumber) { + return new Promise((resolve, reject) => { + fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&page=${pageNumber}`) + .then(res => res.json()) + .then(data => resolve(data)) + }) +} + +(async function movieListView() { + let countPage = 1 + let data = await fetchData(countPage) + console.log(data) + console.log(data.total_pages) + let totalPages = data.total_pages + + let renderedListHTML = data.results.map((val) => { + return ` + +
  • + +
    +
      +
    • ${val.title}
      • +
    • ${val.release_date}
      • +
    +
    • +     + ` + }).join('') + $targetMovieList.innerHTML = renderedListHTML + let scrollTimer; + window.onscroll = async function (e) { + if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight * 0.95) { + if(!scrollTimer){ + scrollTimer = setTimeout(async function(){ + scrollTimer = null; + console.log(countPage) + console.log(data.results) + if(countPage <= totalPages){ + countPage++, + data = await fetchData(countPage) + renderedAddListHTML = data.results.map((val) => { + return ` + +
  • + +
    +
      +
    • ${val.title}
      • +
    • ${val.release_date}
      • +
    +
    • +     + ` + }).join(''), + $targetMovieList.insertAdjacentHTML('beforeend', renderedAddListHTML) + } + }, 200) + } + } + } + + +})() +// movieListView() + + diff --git a/mission004/ganeodolu/package.json b/mission004/ganeodolu/package.json new file mode 100644 index 0000000..359e985 --- /dev/null +++ b/mission004/ganeodolu/package.json @@ -0,0 +1,11 @@ +{ + "name": "origin", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} From f0bbbb2f68ae4a18c28f567652f3d56080e72bdf Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Fri, 31 Jan 2020 18:28:19 +0900 Subject: [PATCH 2/5] =?UTF-8?q?M4=20=EB=A1=9C=EA=B3=A0=EB=88=84=EB=A5=BC?= =?UTF-8?q?=20=EB=95=8C=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission004/ganeodolu/js/app.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/mission004/ganeodolu/js/app.js b/mission004/ganeodolu/js/app.js index 775accf..199b9fb 100644 --- a/mission004/ganeodolu/js/app.js +++ b/mission004/ganeodolu/js/app.js @@ -1,4 +1,9 @@ const $targetMovieList = document.querySelector('.movie-list') +const $targetLogo = document.querySelector('.logo') + +$targetLogo.addEventListener('click', (e) => { + window.location.reload() +}) function fetchData(pageNumber) { return new Promise((resolve, reject) => { @@ -36,7 +41,7 @@ function fetchData(pageNumber) { $targetMovieList.innerHTML = renderedListHTML let scrollTimer; window.onscroll = async function (e) { - if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight * 0.95) { + if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight) { if(!scrollTimer){ scrollTimer = setTimeout(async function(){ scrollTimer = null; From a471c9a58870cca4db5c03e0bfa2e1881c9cb562 Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Fri, 31 Jan 2020 22:35:55 +0900 Subject: [PATCH 3/5] =?UTF-8?q?M5=20=EA=B2=80=EC=83=89=EA=B8=B0=EB=8A=A5,?= =?UTF-8?q?=20=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit js에서 css backgroundImage 변경 두페이지 이동시 data 전달 위해 sessionStorage 사용 --- mission004/ganeodolu/html/detail.html | 88 +++++++++--------- mission004/ganeodolu/index.html | 8 +- mission004/ganeodolu/js/app.js | 125 ++++++++++++++++++++++---- mission004/ganeodolu/js/app_detail.js | 50 +++++++++++ 4 files changed, 208 insertions(+), 63 deletions(-) create mode 100644 mission004/ganeodolu/js/app_detail.js diff --git a/mission004/ganeodolu/html/detail.html b/mission004/ganeodolu/html/detail.html index e70c1f3..ccb56a6 100644 --- a/mission004/ganeodolu/html/detail.html +++ b/mission004/ganeodolu/html/detail.html @@ -1,48 +1,48 @@ - - - - MISSION 4 - - - - -
    -
    - -
    - - - search - -
    + + + + + MISSION 4 + + + + + +
    +
    + +
    + + + search +
    -
    -
    - -
    -

    Movie Title

    -
      -
    • -

      2020. 01. 09

      -
      • -
    • -

      120 min

      -
      • -
    • -

      Romance / Drama / Fantasy

      -
      • -
    -

    - The Fellowship of the Ring embark on a journey to destroy the One Ring and end Sauron's reign over Middle-earth. -

    -
    -
    - - - +
    +
    + +
    + + + + \ No newline at end of file diff --git a/mission004/ganeodolu/index.html b/mission004/ganeodolu/index.html index 5d6d0f4..128691b 100644 --- a/mission004/ganeodolu/index.html +++ b/mission004/ganeodolu/index.html @@ -23,8 +23,8 @@
    -
      - -
    + + -->
    diff --git a/mission004/ganeodolu/js/app.js b/mission004/ganeodolu/js/app.js index 199b9fb..b2d44e2 100644 --- a/mission004/ganeodolu/js/app.js +++ b/mission004/ganeodolu/js/app.js @@ -1,26 +1,37 @@ -const $targetMovieList = document.querySelector('.movie-list') +const $targetMovieList = document.querySelector('.main') const $targetLogo = document.querySelector('.logo') +const $targetSearch = document.querySelector('.input-search') $targetLogo.addEventListener('click', (e) => { window.location.reload() }) -function fetchData(pageNumber) { +// const scrollRestoration = window.history.scrollRestoration +// console.log(scrollRestoration) + +function fetchGetMovie(pageNumber) { return new Promise((resolve, reject) => { fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&page=${pageNumber}`) .then(res => res.json()) .then(data => resolve(data)) }) } +function fetchSearchMovie(keyword, pageNumber) { + return new Promise((resolve, reject) => { + fetch(`https://api.themoviedb.org/3/search/movie?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&query=${keyword}&page=${pageNumber}&include_adult=false`) + .then(res => res.json()) + .then(data => resolve(data)) + }) +} (async function movieListView() { let countPage = 1 - let data = await fetchData(countPage) + let data = await fetchGetMovie(countPage) console.log(data) console.log(data.total_pages) let totalPages = data.total_pages - let renderedListHTML = data.results.map((val) => { + let renderedListHTML = data.results.map((val, idx) => { return `
  • @@ -29,7 +40,7 @@ function fetchData(pageNumber) { src="https://image.tmdb.org/t/p/w300${val.poster_path}" alt="" /> -
    +
    • ${val.title}
    • ${val.release_date}
      • @@ -42,16 +53,16 @@ function fetchData(pageNumber) { let scrollTimer; window.onscroll = async function (e) { if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight) { - if(!scrollTimer){ - scrollTimer = setTimeout(async function(){ + if (!scrollTimer) { + scrollTimer = setTimeout(async function () { scrollTimer = null; console.log(countPage) console.log(data.results) - if(countPage <= totalPages){ - countPage++, - data = await fetchData(countPage) - renderedAddListHTML = data.results.map((val) => { - return ` + if (countPage <= totalPages) { + countPage++ , + data = await fetchGetMovie(countPage) + renderedAddListHTML = data.results.map((val, idx) => { + return `
    • -
      +
      • ${val.title}
      • ${val.release_date}
        • @@ -68,7 +79,7 @@ function fetchData(pageNumber) {         ` }).join(''), - $targetMovieList.insertAdjacentHTML('beforeend', renderedAddListHTML) + $targetMovieList.insertAdjacentHTML('beforeend', renderedAddListHTML) } }, 200) } @@ -76,7 +87,91 @@ function fetchData(pageNumber) { } + $targetMovieList.addEventListener('click', (e) => { + // e.preventDefault() + console.log(e.target) + let getMovieId = e.target.dataset.movieid + console.log(getMovieId) + sessionStorage.setItem('getMovieId', getMovieId) + }) + + })() -// movieListView() + + + + +$targetSearch.addEventListener('keypress', async (e) => { + if (e.key === 'Enter') { + let countPage = 1 + let searchKeyword = e.target.value + if (searchKeyword) { + let data = await fetchSearchMovie(searchKeyword, countPage) + console.log(data) + // })() + let totalPages = data.total_pages + if (totalPages === 0) { + $targetMovieList.innerHTML = '<검색 결과가 존재하지 않습니다>' + return + } + let renderedListHTML = data.results.map((val, idx) => { + return ` + +
      • + +
        +
          +
        • ${val.title}
          • +
        • ${val.release_date}
          • +
        +
        • +         + ` + }).join('') + $targetMovieList.innerHTML = renderedListHTML + let scrollTimer; + window.onscroll = async function (e) { + if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight) { + if (!scrollTimer) { + scrollTimer = setTimeout(async function () { + scrollTimer = null; + console.log(countPage) + console.log(data.results) + if (countPage <= totalPages) { + countPage++ , + data = await fetchSearchMovie(searchKeyword, countPage) + renderedAddListHTML = data.results.map((val) => { + return ` + +
      • + +
        +
          +
        • ${val.title}
          • +
        • ${val.release_date}
          • +
        +
        • +         + ` + }).join(''), + $targetMovieList.insertAdjacentHTML('beforeend', renderedAddListHTML) + } + }, 200) + } + } + } + e.target.value = '' + } + + } +}) diff --git a/mission004/ganeodolu/js/app_detail.js b/mission004/ganeodolu/js/app_detail.js new file mode 100644 index 0000000..5ed9a15 --- /dev/null +++ b/mission004/ganeodolu/js/app_detail.js @@ -0,0 +1,50 @@ +let movieId = Number(sessionStorage.getItem('getMovieId')) +console.log(movieId) + +const $targetDetail = document.querySelector('.main') +console.log($targetDetail) +const $targetLogo = document.querySelector('.logo') +const $targetSearch = document.querySelector('.input-search') + +$targetLogo.addEventListener('click', (e) => { + window.location.href='../index.html'; +}) + +function fetchGetMovieDetail(movieId) { + return new Promise((resolve, reject) => { + fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US`) + .then(res => res.json()) + .then(data => resolve(data)) + }) +} + +(async function movieListView() { + let data = await fetchGetMovieDetail(movieId) + console.log(data) + let genresSum = data.genres.map((val) => { + return val.name + }).join(' / ') + console.log(genresSum) + let renderedListHTML = + ` +
        + +
        +

        ${data.title}

        +
          +
        • +

          ${data.release_date}

          +
          • +
        • +

          ${data.runtime} min

          +
          • +
        • +

          ${genresSum}

          +
          • +
        +

        ${data.overview}

        +
        + ` + $targetDetail.innerHTML = renderedListHTML + document.querySelector('.detail-bg').style.backgroundImage = `url(https://image.tmdb.org/t/p/w300${data.backdrop_path})` +})() \ No newline at end of file From 8d054c195de0e962d554bd266db20a10614b7289 Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Mon, 3 Feb 2020 16:40:54 +0900 Subject: [PATCH 4/5] =?UTF-8?q?M4=20=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80,=20=EA=B2=80=EC=83=89,=20=EC=83=81=EC=84=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit detail.html에서 검색을 하면 sessionStorage에 검색어 저장 후 index.html에서 보여줌 --- mission004/ganeodolu/html/detail.html | 2 +- mission004/ganeodolu/index.html | 2 +- mission004/ganeodolu/js/api.js | 26 +++ mission004/ganeodolu/js/app.js | 216 ++++-------------- mission004/ganeodolu/js/app_detail.js | 82 +++---- mission004/ganeodolu/js/detail.js | 3 + mission004/ganeodolu/js/getMovieDetail.js | 5 + mission004/ganeodolu/js/getMovieList.js | 31 +++ mission004/ganeodolu/js/index.js | 3 + mission004/ganeodolu/js/searchMovie.js | 45 ++++ mission004/ganeodolu/js/showMovieDetail.js | 49 ++++ mission004/ganeodolu/js/showMovieList copy.js | 77 +++++++ mission004/ganeodolu/js/showMovieList.js | 78 +++++++ 13 files changed, 404 insertions(+), 215 deletions(-) create mode 100644 mission004/ganeodolu/js/api.js create mode 100644 mission004/ganeodolu/js/detail.js create mode 100644 mission004/ganeodolu/js/getMovieDetail.js create mode 100644 mission004/ganeodolu/js/getMovieList.js create mode 100644 mission004/ganeodolu/js/index.js create mode 100644 mission004/ganeodolu/js/searchMovie.js create mode 100644 mission004/ganeodolu/js/showMovieDetail.js create mode 100644 mission004/ganeodolu/js/showMovieList copy.js create mode 100644 mission004/ganeodolu/js/showMovieList.js diff --git a/mission004/ganeodolu/html/detail.html b/mission004/ganeodolu/html/detail.html index ccb56a6..3f30262 100644 --- a/mission004/ganeodolu/html/detail.html +++ b/mission004/ganeodolu/html/detail.html @@ -42,7 +42,7 @@

        Movie Title

        --> - + \ No newline at end of file diff --git a/mission004/ganeodolu/index.html b/mission004/ganeodolu/index.html index 128691b..fe3cd0a 100644 --- a/mission004/ganeodolu/index.html +++ b/mission004/ganeodolu/index.html @@ -40,6 +40,6 @@
      --> - + diff --git a/mission004/ganeodolu/js/api.js b/mission004/ganeodolu/js/api.js new file mode 100644 index 0000000..dcfd3bd --- /dev/null +++ b/mission004/ganeodolu/js/api.js @@ -0,0 +1,26 @@ +function fetchGetMovie(pageNumber) { + return new Promise((resolve, reject) => { + fetch(`https://api.themoviedb.org/3/movie/now_playing?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&page=${pageNumber}®ion=KR&include_adult=false`) + // fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&page=${pageNumber}®ion=KR`) + .then(res => res.json()) + .then(data => resolve(data)) + }) +} + +function fetchGetMovieDetail(movieId) { + return new Promise((resolve, reject) => { + fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US`) + .then(res => res.json()) + .then(data => resolve(data)) + }) +} + +function fetchSearchMovie(keyword, pageNumber) { + return new Promise((resolve, reject) => { + fetch(`https://api.themoviedb.org/3/search/movie?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&query=${keyword}&page=${pageNumber}&include_adult=false`) + .then(res => res.json()) + .then(data => resolve(data)) + }) +} + +export { fetchGetMovie, fetchGetMovieDetail, fetchSearchMovie } \ No newline at end of file diff --git a/mission004/ganeodolu/js/app.js b/mission004/ganeodolu/js/app.js index b2d44e2..56737be 100644 --- a/mission004/ganeodolu/js/app.js +++ b/mission004/ganeodolu/js/app.js @@ -1,177 +1,55 @@ -const $targetMovieList = document.querySelector('.main') -const $targetLogo = document.querySelector('.logo') -const $targetSearch = document.querySelector('.input-search') - -$targetLogo.addEventListener('click', (e) => { - window.location.reload() -}) - -// const scrollRestoration = window.history.scrollRestoration -// console.log(scrollRestoration) - -function fetchGetMovie(pageNumber) { - return new Promise((resolve, reject) => { - fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&page=${pageNumber}`) - .then(res => res.json()) - .then(data => resolve(data)) +import { fetchGetMovie, fetchSearchMovie } from './api.js' +import SearchMovie from './searchMovie.js' +import GetMovieList from './getMovieList.js' +import ShowMovieList from './showMovieList.js' + +export default function App() { + const $targetMovieList = document.querySelector('.main') + const $targetLogo = document.querySelector('.logo') + const $targetSearch = document.querySelector('.input-search') + const $targetSearchIcon = document.querySelector('.material-icons') + + $targetLogo.addEventListener('click', (e) => { + window.location.reload() }) -} -function fetchSearchMovie(keyword, pageNumber) { - return new Promise((resolve, reject) => { - fetch(`https://api.themoviedb.org/3/search/movie?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&query=${keyword}&page=${pageNumber}&include_adult=false`) - .then(res => res.json()) - .then(data => resolve(data)) - }) -} - -(async function movieListView() { - let countPage = 1 - let data = await fetchGetMovie(countPage) - console.log(data) - console.log(data.total_pages) - let totalPages = data.total_pages - - let renderedListHTML = data.results.map((val, idx) => { - return ` - -
    • - -
      -
        -
      • ${val.title}
        • -
      • ${val.release_date}
        • -
      -
      • - - ` - }).join('') - $targetMovieList.innerHTML = renderedListHTML - let scrollTimer; - window.onscroll = async function (e) { - if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight) { - if (!scrollTimer) { - scrollTimer = setTimeout(async function () { - scrollTimer = null; - console.log(countPage) - console.log(data.results) - if (countPage <= totalPages) { - countPage++ , - data = await fetchGetMovie(countPage) - renderedAddListHTML = data.results.map((val, idx) => { - return ` - -
    • - -
      -
        -
      • ${val.title}
        • -
      • ${val.release_date}
        • -
      -
      • -       - ` - }).join(''), - $targetMovieList.insertAdjacentHTML('beforeend', renderedAddListHTML) - } - }, 200) + let keyword = sessionStorage.getItem('getKeyword') + console.log(keyword) + + const getMovieList = new GetMovieList({ + onLoad: async () => { + if (!keyword) { + const data = await fetchGetMovie() + showMovieList.setState(data) + } else { + const data = await fetchSearchMovie(keyword) + showMovieList.setState(data) } - } - } - - - $targetMovieList.addEventListener('click', (e) => { - // e.preventDefault() - console.log(e.target) - let getMovieId = e.target.dataset.movieid - console.log(getMovieId) - sessionStorage.setItem('getMovieId', getMovieId) + }, + onScroll: async (pageNumber) => { + const data = await fetchGetMovie(pageNumber) + showMovieList.addSetState(data) + }, }) + const showMovieList = new ShowMovieList({ + $targetMovieList: $targetMovieList, + data: [], + }) -})() - - - - - - -$targetSearch.addEventListener('keypress', async (e) => { - if (e.key === 'Enter') { - let countPage = 1 - let searchKeyword = e.target.value - if (searchKeyword) { - let data = await fetchSearchMovie(searchKeyword, countPage) + const searchMovie = new SearchMovie({ + $targetSearch: $targetSearch, + $targetSearchIcon: $targetSearchIcon, + onClickSearch: async (keyword) => { + const data = await fetchSearchMovie(keyword) console.log(data) - // })() - let totalPages = data.total_pages - if (totalPages === 0) { - $targetMovieList.innerHTML = '<검색 결과가 존재하지 않습니다>' - return - } - let renderedListHTML = data.results.map((val, idx) => { - return ` - -
    • - -
      -
        -
      • ${val.title}
        • -
      • ${val.release_date}
        • -
      -
      • -       - ` - }).join('') - $targetMovieList.innerHTML = renderedListHTML - let scrollTimer; - window.onscroll = async function (e) { - if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight) { - if (!scrollTimer) { - scrollTimer = setTimeout(async function () { - scrollTimer = null; - console.log(countPage) - console.log(data.results) - if (countPage <= totalPages) { - countPage++ , - data = await fetchSearchMovie(searchKeyword, countPage) - renderedAddListHTML = data.results.map((val) => { - return ` - -
    • - -
      -
        -
      • ${val.title}
        • -
      • ${val.release_date}
        • -
      -
      • -       - ` - }).join(''), - $targetMovieList.insertAdjacentHTML('beforeend', renderedAddListHTML) - } - }, 200) - } - } - } - e.target.value = '' + showMovieList.setState(data) + }, + onScroll: async (keyword, pageNumber) => { + const data = await fetchSearchMovie(keyword, pageNumber) + console.log(data) + showMovieList.addSetState(data) } + }) + sessionStorage.removeItem('getKeyword') +} - } -}) diff --git a/mission004/ganeodolu/js/app_detail.js b/mission004/ganeodolu/js/app_detail.js index 5ed9a15..1d0c236 100644 --- a/mission004/ganeodolu/js/app_detail.js +++ b/mission004/ganeodolu/js/app_detail.js @@ -1,50 +1,44 @@ -let movieId = Number(sessionStorage.getItem('getMovieId')) -console.log(movieId) +import ShowMovieDetail from './showMovieDetail.js' +import GetMovieDetail from './getMovieDetail.js' +import { fetchGetMovieDetail } from './api.js' -const $targetDetail = document.querySelector('.main') -console.log($targetDetail) -const $targetLogo = document.querySelector('.logo') -const $targetSearch = document.querySelector('.input-search') +export default function App_detail(){ + let movieId = Number(sessionStorage.getItem('getMovieId')) + + const $targetDetail = document.querySelector('.main') + const $targetLogo = document.querySelector('.logo') + const $targetSearch = document.querySelector('.input-search') + const $targetSearchIcon = document.querySelector('.material-icons') -$targetLogo.addEventListener('click', (e) => { - window.location.href='../index.html'; -}) + + $targetLogo.addEventListener('click', (e) => { + window.location.href='../index.html'; + }) + + const getMovieDetail = new GetMovieDetail({ + onLoad: async () => { + const data = await fetchGetMovieDetail(movieId) + showMovieDetail.setState(data) + } + }) -function fetchGetMovieDetail(movieId) { - return new Promise((resolve, reject) => { - fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US`) - .then(res => res.json()) - .then(data => resolve(data)) + const showMovieDetail = new ShowMovieDetail({ + $targetDetail: $targetDetail, + data: [] }) + + $targetSearch.addEventListener('keypress', (e) => { + if(e.key === "Enter"){ + let getKeyword = e.target.value + sessionStorage.setItem('getKeyword', getKeyword) + window.location.href='../index.html'; + } + }) + $targetSearchIcon.addEventListener('click', (e) => { + let getKeyword = e.target.previousElementSibling.value + sessionStorage.setItem('getKeyword', getKeyword) + window.location.href='../index.html'; + }) + } -(async function movieListView() { - let data = await fetchGetMovieDetail(movieId) - console.log(data) - let genresSum = data.genres.map((val) => { - return val.name - }).join(' / ') - console.log(genresSum) - let renderedListHTML = - ` -
      - -
      -

      ${data.title}

      -
        -
      • -

        ${data.release_date}

        -
        • -
      • -

        ${data.runtime} min

        -
        • -
      • -

        ${genresSum}

        -
        • -
      -

      ${data.overview}

      -
      - ` - $targetDetail.innerHTML = renderedListHTML - document.querySelector('.detail-bg').style.backgroundImage = `url(https://image.tmdb.org/t/p/w300${data.backdrop_path})` -})() \ No newline at end of file diff --git a/mission004/ganeodolu/js/detail.js b/mission004/ganeodolu/js/detail.js new file mode 100644 index 0000000..d8fbc9e --- /dev/null +++ b/mission004/ganeodolu/js/detail.js @@ -0,0 +1,3 @@ +import app_detail from './app_detail.js' + +app_detail() \ No newline at end of file diff --git a/mission004/ganeodolu/js/getMovieDetail.js b/mission004/ganeodolu/js/getMovieDetail.js new file mode 100644 index 0000000..61b2bfd --- /dev/null +++ b/mission004/ganeodolu/js/getMovieDetail.js @@ -0,0 +1,5 @@ +export default function GetMovieDetail({onLoad}){ + window.addEventListener('load', (e) => { + onLoad() + }) +} \ No newline at end of file diff --git a/mission004/ganeodolu/js/getMovieList.js b/mission004/ganeodolu/js/getMovieList.js new file mode 100644 index 0000000..e3396db --- /dev/null +++ b/mission004/ganeodolu/js/getMovieList.js @@ -0,0 +1,31 @@ +export default function GetMovieList({onLoad, onScroll}){ + window.addEventListener('load', (e) => { + // let keyword = sessionStorage.getItem('getKeyword') + // console.log(keyword) + onLoad() + }) + + let scrollTimer; + let pageNumber = 1; + window.onscroll = function (e) { + // console.log((window.pageYOffset + document.body.clientHeight)) + // console.log(document.body.scrollHeight) + if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight * 0.95) { + if (!scrollTimer) { + scrollTimer = setTimeout(async function () { + scrollTimer = null; + console.log(e.target) + pageNumber++ + console.log(pageNumber) + onScroll(pageNumber) + // console.log(countPage) + // console.log(data.results) + // if (countPage <= totalPages) { + // countPage++ + // data = await fetchGetMovie(countPage) + // } + }, 200) + } + } + } +} \ No newline at end of file diff --git a/mission004/ganeodolu/js/index.js b/mission004/ganeodolu/js/index.js new file mode 100644 index 0000000..3388fbe --- /dev/null +++ b/mission004/ganeodolu/js/index.js @@ -0,0 +1,3 @@ +import App from './app.js' + +App() \ No newline at end of file diff --git a/mission004/ganeodolu/js/searchMovie.js b/mission004/ganeodolu/js/searchMovie.js new file mode 100644 index 0000000..0a473d2 --- /dev/null +++ b/mission004/ganeodolu/js/searchMovie.js @@ -0,0 +1,45 @@ +import { fetchSearchMovie } from './api.js' + +export default function SearchMovie({ $targetSearch, $targetSearchIcon, onClickSearch, onScroll }) { + + let searchKeyword + let pageNumber = 1; + let scrollTimer; + + $targetSearch.addEventListener('keypress', async (e) => { + if (e.key === 'Enter') { + searchKeyword = e.target.value + console.log(searchKeyword) + if (searchKeyword) { + onClickSearch(searchKeyword) + pageNumber = 1 + } + } + }) + + $targetSearchIcon.addEventListener('click', (e) => { + console.log(e.target.previousElementSibling.value) + searchKeyword = e.target.previousElementSibling.value + if (searchKeyword) { + onClickSearch(searchKeyword) + pageNumber = 1 + } + }) + + window.onscroll = async function (e) { + if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight * 0.95) { + console.log(searchKeyword, pageNumber) + if (!scrollTimer) { + scrollTimer = setTimeout(async function () { + scrollTimer = null; + pageNumber++ + onScroll(searchKeyword, pageNumber) + }, 200) + } + } + } + + $targetSearch.addEventListener('focus', (e) => { + e.target.value = '' + }) +} \ No newline at end of file diff --git a/mission004/ganeodolu/js/showMovieDetail.js b/mission004/ganeodolu/js/showMovieDetail.js new file mode 100644 index 0000000..4a1aef9 --- /dev/null +++ b/mission004/ganeodolu/js/showMovieDetail.js @@ -0,0 +1,49 @@ +export default function ShowMovieDetail({$targetDetail, data}) { + this.$targetDetail = $targetDetail + this.data = data + + this.setState = function(nextData){ + this.data = nextData; + this.render() + } + + this.render = function(){ + function detailSum(result, prop1, prop2){ + let answer = result[prop1].map((val) => { + return val[prop2] + }).join(' / ') + return answer + } + let genresSum = detailSum(this.data, 'genres', 'name') + let countrySum = detailSum(this.data, 'production_countries', 'name') + + let renderedListHTML = + ` +
      + +
      +

      ${this.data.title}

      +
        +
      • +

        ${this.data.release_date}

        +
        • +
      • +

        ${this.data.runtime} min

        +
        • +
      • +

        ${genresSum}

        +
        • +
      • +

        ${countrySum}

        +
        • +
      +

      ${this.data.overview}

      +
      + ` + this.$targetDetail.innerHTML = renderedListHTML + document.querySelector('.detail-bg').style.backgroundImage = `url(https://image.tmdb.org/t/p/w300${this.data.backdrop_path})` + } + + + +} \ No newline at end of file diff --git a/mission004/ganeodolu/js/showMovieList copy.js b/mission004/ganeodolu/js/showMovieList copy.js new file mode 100644 index 0000000..ac92ccd --- /dev/null +++ b/mission004/ganeodolu/js/showMovieList copy.js @@ -0,0 +1,77 @@ +import {fetchGetMovie} from './api.js' + +export default async function movieListView({$targetMovieList}) { + let countPage = 1 + let data = await fetchGetMovie(countPage) + console.log(data) + console.log(data.total_pages) + let totalPages = data.total_pages + + let renderedListHTML = data.results.map((val, idx) => { + return ` + +
    • + +
      +
        +
      • ${val.title}
        • +
      • ${val.release_date}
        • +
      +
      • +       + ` + }).join('') + $targetMovieList.innerHTML = renderedListHTML + let scrollTimer; + window.onscroll = async function (e) { + // console.log((window.pageYOffset + document.body.clientHeight)) + // console.log(document.body.scrollHeight) + if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight * 0.95) { + if (!scrollTimer) { + scrollTimer = setTimeout(async function () { + scrollTimer = null; + console.log(countPage) + console.log(data.results) + if (countPage <= totalPages) { + countPage++ + data = await fetchGetMovie(countPage) + let renderedAddListHTML = data.results.map((val, idx) => { + return ` + +
    • + +
      +
        +
      • ${val.title}
        • +
      • ${val.release_date}
        • +
      +
      • +       + ` + }).join('') + + $targetMovieList.insertAdjacentHTML('beforeend', renderedAddListHTML) + } + }, 200) + } + } + } + + $targetMovieList.addEventListener('click', (e) => { + // e.preventDefault() + console.log(e.target) + let getMovieId = e.target.dataset.movieid + console.log(getMovieId) + sessionStorage.setItem('getMovieId', getMovieId) + }) + + +} \ No newline at end of file diff --git a/mission004/ganeodolu/js/showMovieList.js b/mission004/ganeodolu/js/showMovieList.js new file mode 100644 index 0000000..2c3ccca --- /dev/null +++ b/mission004/ganeodolu/js/showMovieList.js @@ -0,0 +1,78 @@ +// import {fetchGetMovie} from './api.js' + +export default function ShowMovieList({$targetMovieList, data}) { + this.$targetMovieList = $targetMovieList + this.data = data + + this.setState = function(nextData){ + this.data = nextData; + this.render() + } + this.render = function() { + if(typeof(this.data) !== 'object'){ + throw new Error('데이터가 객체가 아닙니다.') + } + if(this.data.results.length === 0){ + this.$targetMovieList.innerHTML = '<검색 결과가 존재하지 않습니다>' + } + else { + let renderedListHTML = this.data.results.map((val, idx) => { + return ` + +
    • + +
      +
        +
      • ${val.title}
        • +
      • ${val.release_date}
        • +
      +
      • +       + ` + }).join('') + this.$targetMovieList.innerHTML = renderedListHTML + } + } + this.addSetState = function(nextData){ + this.data = nextData; + this.addRender() + } + this.addRender = function() { + if(typeof(this.data) === 'object' && this.data.results.length > 0){ + console.log(this.data) + let renderedAddListHTML = this.data.results.map((val, idx) => { + return ` + +
    • + +
      +
        +
      • ${val.title}
        • +
      • ${val.release_date}
        • +
      +
      • +       + ` + }).join('') + + this.$targetMovieList.insertAdjacentHTML('beforeend', renderedAddListHTML) + } + } + + $targetMovieList.addEventListener('click', (e) => { + console.log(e.target) + let getMovieId = e.target.dataset.movieid + console.log(getMovieId) + sessionStorage.setItem('getMovieId', getMovieId) + }) + + +} \ No newline at end of file From 1a016a5602e9652bb91d7f6b0cb30a0675e0872b Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Mon, 3 Feb 2020 21:38:39 +0900 Subject: [PATCH 5/5] =?UTF-8?q?M4=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 스크롤이벤트 겹치는 것 해결 --- mission004/ganeodolu/html/detail.html | 21 +---- mission004/ganeodolu/index.html | 18 +---- mission004/ganeodolu/js/api.js | 26 ------- mission004/ganeodolu/js/app.js | 41 +++++----- mission004/ganeodolu/js/app_detail.js | 22 +++--- mission004/ganeodolu/js/detail.js | 3 - mission004/ganeodolu/js/getMovieList.js | 28 +------ mission004/ganeodolu/js/index.js | 3 - mission004/ganeodolu/js/scrollMovieList.js | 19 +++++ mission004/ganeodolu/js/searchMovie.js | 29 +------ mission004/ganeodolu/js/showMovieDetail.js | 45 ++--------- mission004/ganeodolu/js/showMovieList copy.js | 77 ------------------- mission004/ganeodolu/js/showMovieList.js | 71 ++++------------- mission004/ganeodolu/util/api.js | 27 +++++++ mission004/ganeodolu/util/constant.js | 15 ++++ mission004/ganeodolu/util/template.js | 57 ++++++++++++++ 16 files changed, 181 insertions(+), 321 deletions(-) delete mode 100644 mission004/ganeodolu/js/api.js delete mode 100644 mission004/ganeodolu/js/detail.js delete mode 100644 mission004/ganeodolu/js/index.js create mode 100644 mission004/ganeodolu/js/scrollMovieList.js delete mode 100644 mission004/ganeodolu/js/showMovieList copy.js create mode 100644 mission004/ganeodolu/util/api.js create mode 100644 mission004/ganeodolu/util/constant.js create mode 100644 mission004/ganeodolu/util/template.js diff --git a/mission004/ganeodolu/html/detail.html b/mission004/ganeodolu/html/detail.html index 3f30262..093bfc0 100644 --- a/mission004/ganeodolu/html/detail.html +++ b/mission004/ganeodolu/html/detail.html @@ -22,27 +22,8 @@
      -
      - + \ No newline at end of file diff --git a/mission004/ganeodolu/index.html b/mission004/ganeodolu/index.html index fe3cd0a..a2b8a83 100644 --- a/mission004/ganeodolu/index.html +++ b/mission004/ganeodolu/index.html @@ -23,23 +23,7 @@
      -
      - + diff --git a/mission004/ganeodolu/js/api.js b/mission004/ganeodolu/js/api.js deleted file mode 100644 index dcfd3bd..0000000 --- a/mission004/ganeodolu/js/api.js +++ /dev/null @@ -1,26 +0,0 @@ -function fetchGetMovie(pageNumber) { - return new Promise((resolve, reject) => { - fetch(`https://api.themoviedb.org/3/movie/now_playing?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&page=${pageNumber}®ion=KR&include_adult=false`) - // fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&page=${pageNumber}®ion=KR`) - .then(res => res.json()) - .then(data => resolve(data)) - }) -} - -function fetchGetMovieDetail(movieId) { - return new Promise((resolve, reject) => { - fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US`) - .then(res => res.json()) - .then(data => resolve(data)) - }) -} - -function fetchSearchMovie(keyword, pageNumber) { - return new Promise((resolve, reject) => { - fetch(`https://api.themoviedb.org/3/search/movie?api_key=9c75b9a50b9510e81c6bc16c1a41517c&language=en-US&query=${keyword}&page=${pageNumber}&include_adult=false`) - .then(res => res.json()) - .then(data => resolve(data)) - }) -} - -export { fetchGetMovie, fetchGetMovieDetail, fetchSearchMovie } \ No newline at end of file diff --git a/mission004/ganeodolu/js/app.js b/mission004/ganeodolu/js/app.js index 56737be..73ccf12 100644 --- a/mission004/ganeodolu/js/app.js +++ b/mission004/ganeodolu/js/app.js @@ -1,34 +1,32 @@ -import { fetchGetMovie, fetchSearchMovie } from './api.js' -import SearchMovie from './searchMovie.js' +import { fetchGetMovie, fetchSearchMovie } from '../util/api.js' import GetMovieList from './getMovieList.js' +import SearchMovie from './searchMovie.js' import ShowMovieList from './showMovieList.js' +import ScrollMovieList from './scrollMovieList.js' export default function App() { + const $targetMovieList = document.querySelector('.main') const $targetLogo = document.querySelector('.logo') const $targetSearch = document.querySelector('.input-search') const $targetSearchIcon = document.querySelector('.material-icons') $targetLogo.addEventListener('click', (e) => { + sessionStorage.removeItem('getKeyword') window.location.reload() }) - let keyword = sessionStorage.getItem('getKeyword') - console.log(keyword) const getMovieList = new GetMovieList({ onLoad: async () => { + let keyword = sessionStorage.getItem('getKeyword') if (!keyword) { const data = await fetchGetMovie() showMovieList.setState(data) } else { - const data = await fetchSearchMovie(keyword) + const data = await fetchSearchMovie(1, keyword) showMovieList.setState(data) } - }, - onScroll: async (pageNumber) => { - const data = await fetchGetMovie(pageNumber) - showMovieList.addSetState(data) - }, + } }) const showMovieList = new ShowMovieList({ @@ -40,16 +38,23 @@ export default function App() { $targetSearch: $targetSearch, $targetSearchIcon: $targetSearchIcon, onClickSearch: async (keyword) => { - const data = await fetchSearchMovie(keyword) - console.log(data) + const data = await fetchSearchMovie(1, keyword) showMovieList.setState(data) - }, - onScroll: async (keyword, pageNumber) => { - const data = await fetchSearchMovie(keyword, pageNumber) - console.log(data) - showMovieList.addSetState(data) } }) - sessionStorage.removeItem('getKeyword') + + const scrollMovieList = new ScrollMovieList({ + onScroll: async (pageNumber, keyword) => { + if (!keyword) { + const data = await fetchGetMovie(pageNumber) + showMovieList.addSetState(data) + } else { + const data = await fetchSearchMovie(pageNumber, keyword) + showMovieList.addSetState(data) + } + } + }) } +new App() + diff --git a/mission004/ganeodolu/js/app_detail.js b/mission004/ganeodolu/js/app_detail.js index 1d0c236..89d444e 100644 --- a/mission004/ganeodolu/js/app_detail.js +++ b/mission004/ganeodolu/js/app_detail.js @@ -1,22 +1,23 @@ import ShowMovieDetail from './showMovieDetail.js' import GetMovieDetail from './getMovieDetail.js' -import { fetchGetMovieDetail } from './api.js' +import { fetchGetMovieDetail } from '../util/api.js' +import { KEY_NAME } from '../util/constant.js' + +export default function App_detail() { -export default function App_detail(){ - let movieId = Number(sessionStorage.getItem('getMovieId')) - const $targetDetail = document.querySelector('.main') const $targetLogo = document.querySelector('.logo') const $targetSearch = document.querySelector('.input-search') const $targetSearchIcon = document.querySelector('.material-icons') - + $targetLogo.addEventListener('click', (e) => { - window.location.href='../index.html'; + window.location.href = '../index.html'; }) const getMovieDetail = new GetMovieDetail({ onLoad: async () => { + let movieId = Number(sessionStorage.getItem('getMovieId')) const data = await fetchGetMovieDetail(movieId) showMovieDetail.setState(data) } @@ -28,17 +29,18 @@ export default function App_detail(){ }) $targetSearch.addEventListener('keypress', (e) => { - if(e.key === "Enter"){ + if (e.key === KEY_NAME.ENTER) { let getKeyword = e.target.value sessionStorage.setItem('getKeyword', getKeyword) - window.location.href='../index.html'; + window.location.href = '../index.html'; } }) $targetSearchIcon.addEventListener('click', (e) => { let getKeyword = e.target.previousElementSibling.value sessionStorage.setItem('getKeyword', getKeyword) - window.location.href='../index.html'; + window.location.href = '../index.html'; }) - } +new App_detail() + diff --git a/mission004/ganeodolu/js/detail.js b/mission004/ganeodolu/js/detail.js deleted file mode 100644 index d8fbc9e..0000000 --- a/mission004/ganeodolu/js/detail.js +++ /dev/null @@ -1,3 +0,0 @@ -import app_detail from './app_detail.js' - -app_detail() \ No newline at end of file diff --git a/mission004/ganeodolu/js/getMovieList.js b/mission004/ganeodolu/js/getMovieList.js index e3396db..08071a8 100644 --- a/mission004/ganeodolu/js/getMovieList.js +++ b/mission004/ganeodolu/js/getMovieList.js @@ -1,31 +1,5 @@ -export default function GetMovieList({onLoad, onScroll}){ +export default function GetMovieList({ onLoad }){ window.addEventListener('load', (e) => { - // let keyword = sessionStorage.getItem('getKeyword') - // console.log(keyword) onLoad() }) - - let scrollTimer; - let pageNumber = 1; - window.onscroll = function (e) { - // console.log((window.pageYOffset + document.body.clientHeight)) - // console.log(document.body.scrollHeight) - if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight * 0.95) { - if (!scrollTimer) { - scrollTimer = setTimeout(async function () { - scrollTimer = null; - console.log(e.target) - pageNumber++ - console.log(pageNumber) - onScroll(pageNumber) - // console.log(countPage) - // console.log(data.results) - // if (countPage <= totalPages) { - // countPage++ - // data = await fetchGetMovie(countPage) - // } - }, 200) - } - } - } } \ No newline at end of file diff --git a/mission004/ganeodolu/js/index.js b/mission004/ganeodolu/js/index.js deleted file mode 100644 index 3388fbe..0000000 --- a/mission004/ganeodolu/js/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import App from './app.js' - -App() \ No newline at end of file diff --git a/mission004/ganeodolu/js/scrollMovieList.js b/mission004/ganeodolu/js/scrollMovieList.js new file mode 100644 index 0000000..aa52b6d --- /dev/null +++ b/mission004/ganeodolu/js/scrollMovieList.js @@ -0,0 +1,19 @@ +export default function ScrollMovieList({ onScroll }) { + + let pageNumber = 1; + let scrollTimer; + + window.onscroll = async function (e) { + + if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight * 0.95) { + if (!scrollTimer) { + scrollTimer = setTimeout(async function () { + scrollTimer = null; + pageNumber++ + let searchKeyword = sessionStorage.getItem('getKeyword') + onScroll(pageNumber, searchKeyword) + }, 200) + } + } + } +} \ No newline at end of file diff --git a/mission004/ganeodolu/js/searchMovie.js b/mission004/ganeodolu/js/searchMovie.js index 0a473d2..7625c99 100644 --- a/mission004/ganeodolu/js/searchMovie.js +++ b/mission004/ganeodolu/js/searchMovie.js @@ -1,44 +1,23 @@ -import { fetchSearchMovie } from './api.js' - -export default function SearchMovie({ $targetSearch, $targetSearchIcon, onClickSearch, onScroll }) { - - let searchKeyword - let pageNumber = 1; - let scrollTimer; +export default function SearchMovie({ $targetSearch, $targetSearchIcon, onClickSearch }) { $targetSearch.addEventListener('keypress', async (e) => { if (e.key === 'Enter') { - searchKeyword = e.target.value - console.log(searchKeyword) + let searchKeyword = e.target.value if (searchKeyword) { onClickSearch(searchKeyword) - pageNumber = 1 + sessionStorage.setItem('getKeyword', searchKeyword) } } }) $targetSearchIcon.addEventListener('click', (e) => { - console.log(e.target.previousElementSibling.value) searchKeyword = e.target.previousElementSibling.value if (searchKeyword) { onClickSearch(searchKeyword) - pageNumber = 1 + sessionStorage.setItem('getKeyword', searchKeyword) } }) - window.onscroll = async function (e) { - if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight * 0.95) { - console.log(searchKeyword, pageNumber) - if (!scrollTimer) { - scrollTimer = setTimeout(async function () { - scrollTimer = null; - pageNumber++ - onScroll(searchKeyword, pageNumber) - }, 200) - } - } - } - $targetSearch.addEventListener('focus', (e) => { e.target.value = '' }) diff --git a/mission004/ganeodolu/js/showMovieDetail.js b/mission004/ganeodolu/js/showMovieDetail.js index 4a1aef9..9d00b1c 100644 --- a/mission004/ganeodolu/js/showMovieDetail.js +++ b/mission004/ganeodolu/js/showMovieDetail.js @@ -1,49 +1,16 @@ -export default function ShowMovieDetail({$targetDetail, data}) { +import { renderedMovieDetailHTML } from '../util/template.js' + +export default function ShowMovieDetail({ $targetDetail, data }) { this.$targetDetail = $targetDetail this.data = data - this.setState = function(nextData){ + this.setState = function (nextData) { this.data = nextData; this.render() } - this.render = function(){ - function detailSum(result, prop1, prop2){ - let answer = result[prop1].map((val) => { - return val[prop2] - }).join(' / ') - return answer - } - let genresSum = detailSum(this.data, 'genres', 'name') - let countrySum = detailSum(this.data, 'production_countries', 'name') - - let renderedListHTML = - ` -
      - -
      -

      ${this.data.title}

      -
        -
      • -

        ${this.data.release_date}

        -
        • -
      • -

        ${this.data.runtime} min

        -
        • -
      • -

        ${genresSum}

        -
        • -
      • -

        ${countrySum}

        -
        • -
      -

      ${this.data.overview}

      -
      - ` - this.$targetDetail.innerHTML = renderedListHTML + this.render = function () { + this.$targetDetail.innerHTML = renderedMovieDetailHTML(this.data) document.querySelector('.detail-bg').style.backgroundImage = `url(https://image.tmdb.org/t/p/w300${this.data.backdrop_path})` } - - - } \ No newline at end of file diff --git a/mission004/ganeodolu/js/showMovieList copy.js b/mission004/ganeodolu/js/showMovieList copy.js deleted file mode 100644 index ac92ccd..0000000 --- a/mission004/ganeodolu/js/showMovieList copy.js +++ /dev/null @@ -1,77 +0,0 @@ -import {fetchGetMovie} from './api.js' - -export default async function movieListView({$targetMovieList}) { - let countPage = 1 - let data = await fetchGetMovie(countPage) - console.log(data) - console.log(data.total_pages) - let totalPages = data.total_pages - - let renderedListHTML = data.results.map((val, idx) => { - return ` - -
    • - -
      -
        -
      • ${val.title}
        • -
      • ${val.release_date}
        • -
      -
      • -       - ` - }).join('') - $targetMovieList.innerHTML = renderedListHTML - let scrollTimer; - window.onscroll = async function (e) { - // console.log((window.pageYOffset + document.body.clientHeight)) - // console.log(document.body.scrollHeight) - if ((window.pageYOffset + document.body.clientHeight) >= document.body.scrollHeight * 0.95) { - if (!scrollTimer) { - scrollTimer = setTimeout(async function () { - scrollTimer = null; - console.log(countPage) - console.log(data.results) - if (countPage <= totalPages) { - countPage++ - data = await fetchGetMovie(countPage) - let renderedAddListHTML = data.results.map((val, idx) => { - return ` - -
    • - -
      -
        -
      • ${val.title}
        • -
      • ${val.release_date}
        • -
      -
      • -       - ` - }).join('') - - $targetMovieList.insertAdjacentHTML('beforeend', renderedAddListHTML) - } - }, 200) - } - } - } - - $targetMovieList.addEventListener('click', (e) => { - // e.preventDefault() - console.log(e.target) - let getMovieId = e.target.dataset.movieid - console.log(getMovieId) - sessionStorage.setItem('getMovieId', getMovieId) - }) - - -} \ No newline at end of file diff --git a/mission004/ganeodolu/js/showMovieList.js b/mission004/ganeodolu/js/showMovieList.js index 2c3ccca..b5540ea 100644 --- a/mission004/ganeodolu/js/showMovieList.js +++ b/mission004/ganeodolu/js/showMovieList.js @@ -1,78 +1,37 @@ -// import {fetchGetMovie} from './api.js' +import { renderedMovieListHTML } from '../util/template.js' +import { ERROR_TYPE } from '../util/constant.js' -export default function ShowMovieList({$targetMovieList, data}) { +export default function ShowMovieList({ $targetMovieList, data }) { this.$targetMovieList = $targetMovieList this.data = data - this.setState = function(nextData){ + this.setState = function (nextData) { this.data = nextData; this.render() } - this.render = function() { - if(typeof(this.data) !== 'object'){ - throw new Error('데이터가 객체가 아닙니다.') + this.render = function () { + if (typeof (this.data) !== 'object') { + throw new Error(ERROR_TYPE.NOT_OBJECT) } - if(this.data.results.length === 0){ - this.$targetMovieList.innerHTML = '<검색 결과가 존재하지 않습니다>' + if (this.data.results.length === 0) { + this.$targetMovieList.innerHTML = ERROR_TYPE.NO_RESULT } else { - let renderedListHTML = this.data.results.map((val, idx) => { - return ` - -
    • - -
      -
        -
      • ${val.title}
        • -
      • ${val.release_date}
        • -
      -
      • -       - ` - }).join('') - this.$targetMovieList.innerHTML = renderedListHTML + this.$targetMovieList.innerHTML = renderedMovieListHTML(this.data) } } - this.addSetState = function(nextData){ + + this.addSetState = function (nextData) { this.data = nextData; this.addRender() } - this.addRender = function() { - if(typeof(this.data) === 'object' && this.data.results.length > 0){ - console.log(this.data) - let renderedAddListHTML = this.data.results.map((val, idx) => { - return ` - -
    • - -
      -
        -
      • ${val.title}
        • -
      • ${val.release_date}
        • -
      -
      • -       - ` - }).join('') - - this.$targetMovieList.insertAdjacentHTML('beforeend', renderedAddListHTML) + this.addRender = function () { + if (typeof (this.data) === 'object' && this.data.results.length > 0) { + this.$targetMovieList.insertAdjacentHTML('beforeend', renderedMovieListHTML(this.data)) } } - $targetMovieList.addEventListener('click', (e) => { - console.log(e.target) let getMovieId = e.target.dataset.movieid - console.log(getMovieId) sessionStorage.setItem('getMovieId', getMovieId) }) - - } \ No newline at end of file diff --git a/mission004/ganeodolu/util/api.js b/mission004/ganeodolu/util/api.js new file mode 100644 index 0000000..874fdbe --- /dev/null +++ b/mission004/ganeodolu/util/api.js @@ -0,0 +1,27 @@ +import { MOVIE_API } from './constant.js' + +function fetchGetMovie(pageNumber) { + return new Promise((resolve, reject) => { + fetch(`${MOVIE_API.URI}movie/now_playing?${MOVIE_API.KEY}&language=en-US&page=${pageNumber}®ion=KR&include_adult=false`) + .then(res => res.json()) + .then(data => resolve(data)) + }) +} + +function fetchGetMovieDetail(movieId) { + return new Promise((resolve, reject) => { + fetch(`${MOVIE_API.URI}movie/${movieId}?${MOVIE_API.KEY}&language=en-US`) + .then(res => res.json()) + .then(data => resolve(data)) + }) +} + +function fetchSearchMovie(pageNumber, keyword) { + return new Promise((resolve, reject) => { + fetch(`${MOVIE_API.URI}search/movie?${MOVIE_API.KEY}&language=en-US&query=${keyword}&page=${pageNumber}&include_adult=false`) + .then(res => res.json()) + .then(data => resolve(data)) + }) +} + +export { fetchGetMovie, fetchGetMovieDetail, fetchSearchMovie } \ No newline at end of file diff --git a/mission004/ganeodolu/util/constant.js b/mission004/ganeodolu/util/constant.js new file mode 100644 index 0000000..febdb3d --- /dev/null +++ b/mission004/ganeodolu/util/constant.js @@ -0,0 +1,15 @@ +const MOVIE_API = { + URI: 'https://api.themoviedb.org/3/', + KEY: 'api_key=9c75b9a50b9510e81c6bc16c1a41517c' +} + +const KEY_NAME = { + ENTER: 'Enter' +} + +const ERROR_TYPE = { + NOT_OBJECT: '입력값이 객체가 아닙니다.', + NO_RESULT: '<검색 결과가 존재하지 않습니다>' +} + +export { MOVIE_API, KEY_NAME, ERROR_TYPE } \ No newline at end of file diff --git a/mission004/ganeodolu/util/template.js b/mission004/ganeodolu/util/template.js new file mode 100644 index 0000000..46da64d --- /dev/null +++ b/mission004/ganeodolu/util/template.js @@ -0,0 +1,57 @@ +function renderedMovieListHTML(inputValue) { + let result = inputValue.results.map((val, idx) => { + return ` + +
    • + +
      +
        +
      • ${val.title}
        • +
      • ${val.release_date}
        • +
      +
      • +       + ` + }).join('') + return result +} + +function renderedMovieDetailHTML(inputValue) { + let genresSum = detailSum(inputValue, 'genres', 'name') + let countrySum = detailSum(inputValue, 'production_countries', 'name') + return ` +
      + +
      +

      ${inputValue.title}

      +
        +
      • +

        ${inputValue.release_date}

        +
        • +
      • +

        ${inputValue.runtime} min

        +
        • +
      • +

        ${genresSum}

        +
        • +
      • +

        ${countrySum}

        +
        • +
      +

      ${inputValue.overview}

      +
      + ` +} + +function detailSum(result, prop1, prop2) { + let answer = result[prop1].map((val) => { + return val[prop2] + }).join(' / ') + return answer +} + +export { renderedMovieListHTML, renderedMovieDetailHTML } \ No newline at end of file