MovieChart 폴더 삭제 및 component로 분리

client/src/components/MovieChart.js

+import { useState, useEffect } from 'react'
+import MovieCard from './MovieCard/index.js'
+import movieApi from '../apis/movie.api.js'
+import catchErrors from '../utils/catchErrors.js'
+
+
+const MovieChart = () => {
+    const [TMDB_TopRated_Data, setTMDB_TopRated_Data] = useState([])
+    const [error, setError] = useState("")
+    const category = "popular"
+
+    useEffect(() => {
+        getTMDB_TopRated()
+    }, [])
+
+    async function getTMDB_TopRated() {
+        try {
+            setError("")
+            const data = await movieApi.getfromTM(category)
+            console.log("sdad==", data)
+            setTMDB_TopRated_Data([...data])
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    return (
+        <>
+            {TMDB_TopRated_Data.length !== 0 ?
+                <div className="row row-cols-1 row-cols-md-4 g-4">
+                    <MovieCard list={TMDB_TopRated_Data} />
+                </div>
+                : <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
+            }
+        </>
+    )
+}
+
+export default MovieChart
\ No newline at end of file

client/src/components/MovieChart/MovieChart.js

-import React from 'react'
-import { Link } from 'react-router-dom';
-import styles from "./movieChart.module.scss"
-
-const MovieChart = () => {
-    const MovieChartList = [
-        {
-            id: 1,
-            poster: "/images/movie_image_black.jpg",
-            title: "블랙위도우",
-            popularity: 50.98,
-            release_date: "2021-07-07",
-            runtime: 134,
-            overview: "어벤져스의 히어로 블랙 위도우, 나타샤 로마노프는 자신의 과거와 연결된 레드룸의 거대한 음모와 실체를 깨닫게 된다. 상대의 능력을 복제하는 빌런 태스크마스터와 새로운 위도우들의 위협에 맞서 목숨을 건 반격을 시작하는 나타샤는 스파이로 활약했던 자신의 과거 뿐 아니라, 어벤져스가 되기 전 함께했던 동료들을 마주해야만 하는데…"
-        },
-        {
-            id: 2,
-            poster: "/images/movie_image_limit.jpg",
-            title: "발신제한",
-            popularity: 3.22,
-            release_date: "2021-06-23",
-            runtime: 94,
-            overview: ''
-        },
-        {
-            id: 3,
-            poster: "/images/movie_image_everyday.jpg",
-            title: "우리는 매일매일",
-            popularity: 2.83,
-            release_date: "2021-06-30",
-            runtime: 75,
-            overview: ''
-        },
-        {
-            id: 4,
-            poster: "/images/movie_image_cruella.jpg",
-            title: "크루엘라",
-            popularity: 1.72,
-            release_date: "2021-05-26",
-            runtime: 133,
-            overview: ''
-        }
-    ]
-    return (
-        <div class="row row-cols-1 row-cols-md-4 g-4">
-            {MovieChartList.length > 0
-                ?
-                MovieChartList.map(movie => (
-                    <div className="card h-100" style={{ backgroundColor: "black" }}>
-                        <Link to={{
-                            pathname: `/movie/${movie.id}`,
-                            state: {
-                                id: movie.id,
-                                poster: movie.poster,
-                                title: movie.title,
-                                popularity: movie.popularity,
-                                release_date: movie.release_date,
-                                runtime: movie.runtime,
-                                overview: movie.overview
-                            }
-                        }} className={`${styles.layer}`} >
-                            <img src={movie.poster} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
-                            <div className={`${styles.description}`}>{movie.overview}</div>
-                        </Link>
-                        <div className="card-body text-light">
-                            <marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
-                            <p className="card-text text-center">예매율: {movie.popularity}% | {movie.runtime}분</p>
-                            <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
-                        </div>
-                        <button className="btn btn-warning">예매하기</button>
-                    </div>
-                ))
-                : <div>영화정보를 로딩할 수 없습니다.</div>
-            }
-        </div>
-    )
-}
-
-export default MovieChart
\ No newline at end of file

client/src/components/MovieChart/index.js

-export { default } from './MovieChart'
\ No newline at end of file

client/src/components/MovieChart/movieChart.module.scss

-.layer{
-    position: relative;
-}
-// .poster{
-//     opacity: 1;
-//     &:hover{
-//         opacity: 0.3;
-//     }
-// }
-.description{
-    position: absolute;
-    top: 0%;
-    left: 0%;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    background-color:rgba(0, 0, 0, 0.6);
-    text-align: center;
-    color:white;
-    //ellipsis
-    text-overflow: ellipsis;
-    white-space: pre-line;
-    display: -webkit-box;
-    -webkit-line-clamp: 9;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    &:hover{
-        opacity: 1;
-    }
-}
-.title{
-    
-}
\ No newline at end of file