1. App.js
   import { useState, useEffect } from 'react';
   import Header from './Header';
   import MovieRankList from './MovieRankList';
   import CurrentMovie from './CurrentMovie';

import mockMovie from './mockMovie';
import { getMovies } from './api/movieDataApi';

export const App = () => {
const [thisMovies, setThisMovies] = useState(null);
const [movies, setMovies] = useState([]);

useEffect(() => {
getMovies().then((data) => {
setMovies(data);
setThisMovies(data[0]);
});
}, []);
const handleCardClick = (movie) => {
setThisMovies(movie);
};

if(!movies) return

;
global.handleCardClick = handleCardClick;

return (
<>

  <div className="header">
    <Header />
  </div>
  <div className="body">
    <CurrentMovie movie={thisMovies} />
    <MovieRankList handleCardClick={handleCardClick} movies={movies} />
  </div>
</>

);
};

2. CurrentMovie.js
   import React from 'react';

export default function CurrentMovie({ movie }) {
if (!movie) return '영화를 선택하세요';

const { description_full, runtime, rating, title, medium_cover_image } = movie;
return (
<>

  <div className="left-current-side">
    <div className="current-movie">
      <h1 className="title">{title}</h1>
      <img className="thumbnail" src={medium_cover_image} alt="thumbnail" />
      <p className="rating">rating : {rating}</p>
      <p className="running-time">runtime : {runtime}</p>
      <p>Description</p>
      <p className="description">{description_full}</p>
    </div>
  </div> 
</>

);
}

3. Header.js
   import React from 'react';

export default function Header () {
return

Movie Top 10

;
}

4. index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { App } from './App';
   import './global.css';

ReactDOM.render(, document.getElementById('root'));

5. MovieRankList.js
   import React from 'react';
   import MovieRankListEntry from './MovieRankListEntry';
   export default function MovieRankList({ movies, handleCardClick }) {
   return (

   <div className="right-movie-list">
     {!movies.length
       ? '영화 목록이 비었습니다'
       : movies.map((movie) => {

   return (
   
   );
   })}

   </div>

   );
   }

6. MovieRankListEntry.js
   import React from 'react';

export default function MovieRankListEntry({
handleCardClick,
movie,
movie: {runtime, rating, title, medium_cover_image, genres },
}) {
return (

<div
  className="card"
  onClick={() => {
    handleCardClick(movie);
  }}
>
  <div style={{ flex: 3 }}>
    <img width="100%" height="100%" src={medium_cover_image} alt="cover" />
  </div>
  <div style={{ flex: 7 }}>
    <h3 className="title">{title}</h3>
    <p className="rating">rating : {rating}</p>
    <p className="running-time">running time : {runtime} min</p>
    <p>Genres</p>
    <div className="tag-list">
      {genres.map((genre) => (
        <div className="tag" key={genre}>
          {genre}
        </div>
      ))}
    </div>
  </div>
</div>

);
}