+ OMDb API를 이용한 영화검색 +
+ ` + } +} \ No newline at end of file diff --git a/src/components/MovieItem.js b/src/components/MovieItem.js new file mode 100644 index 00000000..1619f421 --- /dev/null +++ b/src/components/MovieItem.js @@ -0,0 +1,60 @@ +import { Component } from '../core/core' +import { getMovieDetails } from '../store/movie' + +export default class MovieItem extends Component { + constructor(props) { + super({ + props, + tagName: 'div' + }) + + this.onDblClick = this.onDblClick.bind(this) + } + + onDblClick() { + window.location.href = `#/movie?id=${this.props.movie.imdbID}` + } + + async render() { + const {movie} = this.props + + this.el.setAttribute('class', 'movie') + this.el.style.backgroundImage = `url(${movie.Poster})` + + this.el.ondblclick = () => { + window.location.href = `#/movie?id=${movie.imdbID}` + } + + this.el.innerHTML = /* HTML */ ` +${name}
++ ${email} + +
+ + + ` + } +} \ No newline at end of file diff --git a/src/routes/Home.js b/src/routes/Home.js new file mode 100644 index 00000000..3313af92 --- /dev/null +++ b/src/routes/Home.js @@ -0,0 +1,34 @@ +import { Component } from '../core/core' +import Headline from '../components/Headline' +import Search from '../components/Search' +import MovieList from '../components/MovieList' +import MovieListMore from '../components/MovieListMore' + +export default class Home extends Component { + render () { + this.el.classList.add('homeContainer') + const container1 = document.createElement('div') + const headline = new Headline().el + const search = new Search().el + container1.classList.add('container1') + container1.append( + headline, + search + ) + + const container2 = document.createElement('div') + const movieList = new MovieList().el + const movieListMore = new MovieListMore().el + container2.classList.add('container2') + container2.append( + movieList, + movieListMore + ) + + this.el.innerHTML = '' + this.el.append( + container1, + container2 + ) + } +} \ No newline at end of file diff --git a/src/routes/Movie.js b/src/routes/Movie.js new file mode 100644 index 00000000..79f3b97d --- /dev/null +++ b/src/routes/Movie.js @@ -0,0 +1,65 @@ +import { Component } from "../core/core"; +import movieStore, { getMovieDetails } from '../store/movie' + +export default class Movie extends Component { + async render () { + this.el.classList.add('container', 'the-movie') + + this.el.innerHTML = /* HTML */ ` + +${rating.Source} - ${rating.Value}
` + }).join('')} +${movie.Actors}
+${movie.Director}
+${movie.Production}
+${movie.Genre}
+