eastjun-dev · ganeodolu · Jan 31, 2020 · Jan 31, 2020 · Jan 31, 2020 · Feb 3, 2020
diff --git a/mission004/ganeodolu/css/style.css 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;
+}
diff --git a/mission004/ganeodolu/html/detail.html b/mission004/ganeodolu/html/detail.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>MISSION 4</title>
+  <link rel="stylesheet" href="../css/style.css" />
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+</head>
+
+<body>
+  <div class="header">
+    <div class="header-cont">
+      <p class="logo">Movie App</p>
+      <div class="search-bar">
+        <input class="input-search" type="text" placeholder="검색" />
+        <i class="material-icons">
+          search
+        </i>
+      </div>
+    </div>
+  </div>
+  <div class="main main-detail">
+  </div>
+  <script type="module" src="../js/app_detail.js"></script>
+</body>
+
+</html>
diff --git a/mission004/ganeodolu/index.html b/mission004/ganeodolu/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>MISSION 4</title>
+    <link rel="stylesheet" href="./css/style.css" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div class="header">
+      <div class="header-cont">
+        <p class="logo">Movie App</p>
+        <div class="search-bar">
+          <input class="input-search" type="text" placeholder="검색" />
+          <i class="material-icons">
+            search
+          </i>
+        </div>
+      </div>
+    </div>
+    <div class="main">
+    </div>
+    <script type="module" src="js/app.js"></script>
+  </body>
+</html>
diff --git a/mission004/ganeodolu/js/app.js b/mission004/ganeodolu/js/app.js
@@ -0,0 +1,60 @@
+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()
+    })
+
+    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(1, keyword)
+                showMovieList.setState(data)
+            }
+        }
+    })
+
+    const showMovieList = new ShowMovieList({
+        $targetMovieList: $targetMovieList,
+        data: [],
+    })
+
+    const searchMovie = new SearchMovie({
+        $targetSearch: $targetSearch,
+        $targetSearchIcon: $targetSearchIcon,
+        onClickSearch: async (keyword) => {
+            const data = await fetchSearchMovie(1, keyword)
+            showMovieList.setState(data)
+        }
+    })
+
+    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()
+