movie_app final

yoonnyeong · May 30, 2019 · f29ce12 · f29ce12
1 parent c5c992c
commit f29ce12
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 89 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,34 +5,14 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+
+    <title>Moive App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+
   </body>
 </html>
diff --git 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
@@ -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 (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+
+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 (
+          <Movie
+            title={movie.title_english}
+            poster={movie.medium_cover_image}
+            key={movie.id}
+            genres={movie.genres}
+            synopsis={movie.synopsis}
+          />
+        );
+      });
+      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 (
+      <div className={movies ? "App" : "App--loading"}>
+        {movies ? this._renderMovies() : "Loading"}
+      </div>
+    );
+  }
+}
 export default App;
diff --git a/src/Movie.css 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;
+    }
+}
diff --git a/src/Movie.js 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 (
+        <div className="Movie">
+            <div className="Movie__Column">
+                <MoviePoster poster={poster} alt={title} />
+            </div>   
+            <div className="Movie__Column">
+                <h1>{title}</h1>
+                <div className="Movie__Genres">
+                    {genres.map((genre, index) => <MovieGenre genre={genre} key={index} />)}
+                </div>
+                <div className="Movie__Synopsis">
+                <LinesEllipsis
+                    text={synopsis}
+                    maxLine='3'
+                    ellipsis='...'
+                    trimRight
+                    basedOn='letters'
+                    />   
+                </div>
+            </div>
+        </div>
+    )
+}
+
+function MoviePoster({poster, alt}){
+    return (
+        <img src={poster} alt={alt} title={alt} className="Movie__Poster" />
+    )
+}
+
+function MovieGenre({genre}){
+    return (
+        <span className="Movie__Genre">{genre}</span>
+    )
+}
+
+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
diff --git 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%;
+}
diff --git a/src/index.js b/src/index.js
@@ -6,7 +6,4 @@ import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, 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();