diff --git a/public/index.html b/public/index.html index dd1ccfd..0ba0a1b 100644 --- a/public/index.html +++ b/public/index.html @@ -5,34 +5,14 @@ - + - - React App + + Moive App
- + diff --git a/src/App.css b/src/App.css index b41d297..f59e421 100644 --- a/src/App.css +++ b/src/App.css @@ -1,33 +1,3 @@ .App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + } diff --git a/src/App.js b/src/App.js index ce9cbd2..d25a229 100644 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,73 @@ -import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import React, {Component} from 'react'; +import './App.css'; +import Movie from './Movie'; -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); + +class App extends Component{ + // Render : componterWillMoint() -> render() -> componentDidMount() + // componentWillMount(){ + // console.log('will mount'); + // } + +state = {} + +//여기에서 00초 후에 페이지로드후 다른 작업을 진행시킬 수 있음. +componentDidMount() { + this._getMovies(); } + // //api + // fetch("https://yts.ag/api/v2/list_movies.json?sort_by=like_count") + // .then(response => response.json()) + // .then(json=>{ + // this.setState({ + // movies : json.data.movies + // }) + // }) + // //if it has errors + // .catch(err => console.log(err)) + + + +_renderMovies = () => { + const movies = this.state.movies.map(movie => { + console.log(movie) + return ( + + ); + }); + return movies; + }; +_getMovies = async () => { + const movies = await this._callApi(); + this.setState({ + movies + }) + }; + + _callApi = () => { + return fetch( + "https://yts.am/api/v2/list_movies.json?sort_by=download_count" + ) + .then(potato => potato.json()) + .then(json => json.data.movies) + .catch(err => console.log(err)); + }; + + + render() { + const { movies } = this.state; + return ( +
+ {movies ? this._renderMovies() : "Loading"} +
+ ); + } +} export default App; diff --git a/src/Movie.css b/src/Movie.css new file mode 100644 index 0000000..43b76c5 --- /dev/null +++ b/src/Movie.css @@ -0,0 +1,73 @@ +.Movie{ + background-color:white; + width:40%; + display: flex; + justify-content: space-between; + align-items:flex-start; + flex-wrap:wrap; + margin-bottom:50px; + text-overflow: ellipsis; + padding:0 20px; + box-shadow: 0 8px 38px rgba(133, 133, 133, 0.3), 0 5px 12px rgba(133, 133, 133,0.22); +} + +.Movie__Column{ + width:30%; + box-sizing:border-box; + text-overflow: ellipsis; +} + +.Movie__Column:last-child{ + padding:20px 0; + width:60%; +} + +.Movie h1{ + font-size:20px; + font-weight: 600; +} + +.Movie .Movie__Genres{ + display: flex; + flex-wrap:wrap; + margin-bottom:20px; +} + +.Movie__Genres .Movie__Genre{ + margin-right:10px; + color:#B4B5BD; +} + +.Movie .Movie__Synopsis { + text-overflow: ellipsis; + color:#B4B5BD; + overflow: hidden; +} + +.Movie .Movie__Poster{ + max-width: 100%; + position: relative; + top:-20px; + box-shadow: -10px 19px 38px rgba(83, 83, 83, 0.3), 10px 15px 12px rgba(80,80,80,0.22); +} + +@media screen and (min-width:320px) and (max-width:667px){ + .Movie{ + width:100%; + } +} + +@media screen and (min-width:320px) and (max-width:667px) and (orientation: portrait){ + .Movie{ + width:100%; + flex-direction: column; + } + .Movie__Poster{ + top:0; + left:0; + width:100%; + } + .Movie__Column{ + width:100%!important; + } +} \ No newline at end of file diff --git a/src/Movie.js b/src/Movie.js new file mode 100644 index 0000000..841394a --- /dev/null +++ b/src/Movie.js @@ -0,0 +1,59 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import LinesEllipsis from 'react-lines-ellipsis' +import './Movie.css'; + +function Movie({title, poster, genres, synopsis}){ + return ( +
+
+ +
+
+

{title}

+
+ {genres.map((genre, index) => )} +
+
+ +
+
+
+ ) +} + +function MoviePoster({poster, alt}){ + return ( + {alt} + ) +} + +function MovieGenre({genre}){ + return ( + {genre} + ) +} + +Movie.propTypes = { + title: PropTypes.string.isRequired, + poster: PropTypes.string.isRequired, + genres: PropTypes.array.isRequired, + synopsis: PropTypes.string.isRequired +} + +MoviePoster.propTypes = { + poster: PropTypes.string.isRequired, + alt: PropTypes.string.isRequired +} + +MovieGenre.propTypes ={ + genre: PropTypes.string.isRequired +} + +export default Movie \ No newline at end of file diff --git a/src/index.css b/src/index.css index 4a1df4d..7b0e54d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,11 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + background-color:#EFF3F7; + height: 100%; } -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; -} +html, #root{ + height:100%; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 87d1be5..824627d 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,4 @@ import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementById('root')); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();