Yeon dong/4week (#31)

* 4week styled-component적용중 * 4week 절반정도 완성 * 4week movie poster site 구현 * 4week movie poster site 구현 수정 * 4week movie poster site 구현 수정완료
SSUMC-6th · May 16, 2024 · b580035 · b580035
1 parent 758662f
commit b580035
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 6 deletions.
diff --git a/yeon-dong-4week/UMC-Movie/src/components/Header/Header.jsx b/yeon-dong-4week/UMC-Movie/src/components/Header/Header.jsx
@@ -13,7 +13,7 @@ function Header() {
   const [loginstatus, setLoginStatus] = useState(false);
 
   const loginClick = () =>{
-    setLoginStatus(!loginstatus);
+    setLoginStatus(loginstatus => !loginstatus);
   };
 
     return (

diff --git a/yeon-dong-4week/UMC-Movie/src/pages/MovieDetailPage/MovieDetailPage.jsx b/yeon-dong-4week/UMC-Movie/src/pages/MovieDetailPage/MovieDetailPage.jsx
@@ -1,6 +1,8 @@
 import React, {useState, useEffect} from "react";
 import { useParams } from "react-router-dom";
 import LoadingSpinner from "../../components/LoadingSpinner/LoadingSpinner";
+import { Background, Blur, Container, OverviewContainer, Title, InfoContainer, Text, Box, Overview } from "./MovieDetailPage.style";
+
 
 function MovieDetailPage() {
   const [loading, setLoading] = useState(true); // State to manage loading state
@@ -21,22 +23,61 @@ function MovieDetailPage() {
 
         // JSON 형태로 변환
         const data = await response.json();
-
         // 가져온 영화 데이터를 상태에 설정
-        setMovies(data.results);
+        setMovies(data); // 다음 렌더링에 나타나게 하겠다. useEffect가 끝나야지 차있다.
         setLoading(false);
       } catch (error) {
         console.error('Error fetching movies:', error);
       }
-      console.log(movies);
     };
     // 페이지가 로드될 때 영화 데이터를 가져오도록 호출
     fetchMovies();
   }, []); // 빈 배열을 전달하여 한 번만 호출되도록 설정
-
+
+  const starCount = () => {
+    const star = [];
+    for (let i = 0; i < Math.floor(movies.vote_average); i++) {
+      star.push("⭐️ ");
+    }
+    return star;
+  };
+
     return (
       <>
-        {loading ? (<LoadingSpinner />) : ( <div>안녕</div> )}
+        {loading ? (<LoadingSpinner />) : ( 
+        <>
+        <Background image={`https://image.tmdb.org/t/p/w200${movies.backdrop_path}`} >
+        <Blur>
+          <Container>
+              <img
+                src={`https://image.tmdb.org/t/p/w200${movies.poster_path}`}
+                width="300px"
+                height="440px"
+              />
+            <OverviewContainer>
+              <Title>{movies.title}</Title>
+              <InfoContainer>
+                <Text>평점</Text>
+                <Box>{starCount()}</Box>
+              </InfoContainer>
+              <InfoContainer>
+                <Text>개봉일</Text>
+                <Box>{movies.release_date}</Box>
+              </InfoContainer>
+              <Box>
+                <Text>줄거리</Text>
+                <Overview>
+                  {movies.overview == ""
+                    ? "TMDB에서 제공하는 API에 상세 줄거리 정보가 없습니다."
+                    : movies.overview}
+                </Overview>
+              </Box>
+            </OverviewContainer>
+          </Container>
+        </Blur>
+        </Background>
+      </> 
+        )}
       </>
     )
   }

diff --git a/yeon-dong-4week/UMC-Movie/src/pages/MovieDetailPage/MovieDetailPage.style.js b/yeon-dong-4week/UMC-Movie/src/pages/MovieDetailPage/MovieDetailPage.style.js
@@ -0,0 +1,61 @@
+import styled from "styled-components";
+
+export const Background = styled.div`
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  background-image: linear-gradient(rgba(40, 43, 49, 0.8), rgba(0, 0, 0, 0.8)),
+    url(${(props) => props.image});
+  background-size: cover;
+  left: 50%;
+  transform: translate(-50%);
+`;
+
+export const Blur = styled.div`
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(10px);
+`;
+
+export const Container = styled.div`
+  display: flex;
+  width: fit-content;
+  text-align: center;
+  transform: translate(50%, 45%);
+  color: white;
+  img {
+    border-radius: 8px;
+  }
+`;
+
+export const OverviewContainer = styled.div`
+  width: 400px;
+  text-align: left;
+  margin-left: 60px;
+  margin-top: 12px;
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  margin-bottom: 20px;
+`;
+
+export const Overview = styled.p`
+  overflow: hidden;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 130%;
+`;
+
+export const Title = styled.h2`
+  color: white;
+  font-size: 24px;
+  margin-bottom: 12px;
+`;
+
+export const Text = styled.div`
+  color: white;
+  margin-right: 12px;
+`;
+
+export const Box = styled.div``;