[캐치카페] 현직자와 함께하는 프로그래밍 3회차 과제 도전기 - 2 (영화 상세정보 페이지 꾸미기)

[캐치카페] 현직자와 함께하는 프로그래밍 3회차 과제 도전기 - 1 (API 데이터 자동으로 추가하기)

어제 api에 데이터를 추가하였으니 이번에는 정말 과제 1번을 도전해보았습니다.

 

과제의 조건은 총 4가지였습니다.

1. 배경화면을 어둡게

2. 모든 글씨 색을 밝게

3. 영화 제목 글씨는 크게

4. 포스터는 왼쪽 또는 오른쪽으로 정렬

 

조건을 고려하여 변경해 보았습니다.

기존 영화 상세페이지

변경한 영화 상세페이지

영화의 세부적인 정보를 담은 div 와 포스터 이미지를 담은 div를 하나의 div로 묶어주고

그 아래는 줄거리를 담은 div를 넣어 주었습니다.

 

세부적으로 보면 다음과 같습니다.

조건 1 / 조건 2

배경화면을 어둡게 ->background-color

모든 글씨 색을 밝게 -> color

Style.css

body {
    background-color: #36454f;
    color:#ffffff;
}

 

조건 3

영화 제목 글씨는 크게 -> h1 태그 적용

MovieDetail.js

const MovieItem = ({ title, advanceRate, advanceRateRank, posterUrl, plot , released, genres, casts, director, runtime, visitorRating,expertRating, screenStatus}) => { 
    // console.log(screenStatus);
    console.log(casts)
    return (
      <div>
      <div className="detail_page">
        <div className="detail_info">
          <h1>{title}</h1>
          {/* <img width="300" src={posterUrl}/> */}
          {/* <div>줄거리 : {plot}</div>  */}
          <h3>개봉일: {released}</h3>
          <h3>감독 : {director}</h3>
          {/* <h3>배우 : {casts}</h3> */}
          <h3>배우 : {casts? casts.map(cast => <span>{cast}    </span>):null}</h3>
          <h3>장르 : {genres}</h3>
          <h3>상영 여부 : {screenStatus}</h3>
          <h3>상영시간 : {runtime}</h3>
          <h3>관람객 평점 : {visitorRating}</h3>
          <h3>전문가 평점 : {expertRating}</h3>
          
          <h3>예매율: {advanceRate}</h3> 
          <h3>예매율 순위 : {advanceRateRank}</h3>
        </div> 

        <div className="posterImg">
              <img className="postImg" src={posterUrl}/>
        </div>
        </div>

        <div className="detail_page">

          <div className="plot_div">
              <h2>줄거리</h2>
              <h3>{plot}</h3> 
          </div>
        </div>
      </div>
    ); 
  };

조건 4

포스터는 왼쪽 또는 오른쪽으로 정렬 -> div 2개를 하나의 div로 묶고 각각의 div에 float = left 적용

MovieDetail.js

  const MovieItem = ({ title, advanceRate, advanceRateRank, posterUrl, plot , released, genres, casts, director, runtime, visitorRating,expertRating, screenStatus}) => { 
    // console.log(screenStatus);
    console.log(casts)
    return (
      <div>
      <div className="detail_page">
        <div className="detail_info">
          <h1>{title}</h1>
          {/* <img width="300" src={posterUrl}/> */}
          {/* <div>줄거리 : {plot}</div>  */}
          <h3>개봉일: {released}</h3>
          <h3>감독 : {director}</h3>
          {/* <h3>배우 : {casts}</h3> */}
          <h3>배우 : {casts? casts.map(cast => <span>{cast}    </span>):null}</h3>
          <h3>장르 : {genres}</h3>
          <h3>상영 여부 : {screenStatus}</h3>
          <h3>상영시간 : {runtime}</h3>
          <h3>관람객 평점 : {visitorRating}</h3>
          <h3>전문가 평점 : {expertRating}</h3>
          
          <h3>예매율: {advanceRate}</h3> 
          <h3>예매율 순위 : {advanceRateRank}</h3>
        </div> 

        <div className="posterImg">
              <img className="postImg" src={posterUrl}/>
        </div>
        </div>

        <div className="detail_page">

          <div className="plot_div">
              <h2>줄거리</h2>
              <h3>{plot}</h3> 
          </div>
        </div>
      </div>
    ); 
  };

Style.css

.detail_info {
    width: 400px;
    float: left;
    padding: 10px;
}

.posterImg {
    width: 700px;
    float: left;
    margin-left: 10px;
    text-align: right;
    padding-top: 10px;
}

 

그외 하면서 필요했던 것들

상영여부 한글로 변환 -> if 조건문 사용 같다의 연산자 ( === )

MovieDetail.js

if (movieDetail.screeningStatus === "open"){
      movieDetail.screeningStatus = "상영중";
}
else if (movieDetail.screeningStatus === "finished"){
      movieDetail.screeningStatus = "상영 종료";
}
else if (movieDetail.screeningStatus === "ready"){
      movieDetail.screeningStatus = "상영 예정";
}

 

전체 가운데 정렬 -> 전체를 div로 묶고 margin = auto

MovieDetail.js

import React from "react"; 
import superagent from "superagent"; 
export default class extends React.Component { 
  state = { movieDetail: [] }; 
  
  componentDidMount = async () => { 
    let url = "http://54.180.149.147:8080/api/team/2/movie/"+this.props.match.params.id; 
    
    //TODO: 1. 서버에서 데이터 불러오기 
    //데이터를 서버에서 불러와서 movieList라는 변수에 저장한다 
    let movieDetail = await superagent 
    .get(url) 
    .then(response => response.body) 
    .catch(error => error); 

    if (movieDetail.screeningStatus === "open"){
      movieDetail.screeningStatus = "상영중";
    }
    else if (movieDetail.screeningStatus === "finished"){
        movieDetail.screeningStatus = "상영 종료";
    }
    if (movieDetail.screeningStatus === "ready"){
        movieDetail.screeningStatus = "상영 예정";
    }
    
    //TODO: 2. 브라우저에 임시로 저장하기 (state) 
    // this.setState({ // ... // }) 
    //불러온 데이터를 브라우저에 임시로 저장한다 
    this.setState({ movieDetail }); 
    console.log(movieDetail) 

    
  }; 
  
  render() { 
    const { movieDetail } = this.state; 
    
    
    return ( 
    <div> 
      {/* TODO: 3. 영화 1개에 대한 데이터 출력하는 코드 짜기 */ 
      <MovieItem 
      title={movieDetail.title} 
      posterUrl={movieDetail.posterUrl} 
      advanceRate={movieDetail.advanceRate} 
      advanceRateRank={movieDetail.advanceRateRank} 
      plot = {movieDetail.plot}
      released = {movieDetail.released}
      genres = {movieDetail.genres}
      casts = {movieDetail.cast}
      director = {movieDetail.director}
      runtime = {movieDetail.runtime}
      visitorRating = {movieDetail.visitorRating}
      expertRating = {movieDetail.expertRating}
      screenStatus = {movieDetail.screeningStatus}
      

      />} 
      </div> 
      
      ); 
    } 
  } 
  const MovieItem = ({ title, advanceRate, advanceRateRank, posterUrl, plot , released, genres, casts, director, runtime, visitorRating,expertRating, screenStatus}) => { 
    // console.log(screenStatus);
    console.log(casts)
    return (
      <div>
      <div className="detail_page">
        <div className="detail_info">
          <h1>{title}</h1>
          {/* <img width="300" src={posterUrl}/> */}
          {/* <div>줄거리 : {plot}</div>  */}
          <h3>개봉일: {released}</h3>
          <h3>감독 : {director}</h3>
          {/* <h3>배우 : {casts}</h3> */}
          <h3>배우 : {casts? casts.map(cast => <span>{cast}    </span>):null}</h3>
          <h3>장르 : {genres}</h3>
          <h3>상영 여부 : {screenStatus}</h3>
          <h3>상영시간 : {runtime}</h3>
          <h3>관람객 평점 : {visitorRating}</h3>
          <h3>전문가 평점 : {expertRating}</h3>
          
          <h3>예매율: {advanceRate}</h3> 
          <h3>예매율 순위 : {advanceRateRank}</h3>
        </div> 

        <div className="posterImg">
              <img className="postImg" src={posterUrl}/>
        </div>
        </div>

        <div className="detail_page">

          <div className="plot_div">
              <h2>줄거리</h2>
              <h3>{plot}</h3> 
          </div>
        </div>
      </div>
    ); 
  };

Style.css

.detail_page {
    width : 1000px;
    padding: 10px;
    top: 10px;
    left: 50%;
    margin : auto;
    overflow: hidden;
    display: flex;
    padding-top: 20px;
}

 

줄거리 글 줄 간격 넓히기 -> line-height 속성

Style.css

.plot_div {
    width: 1000px;
    line-height: 200%;
}

 

 

list 출력하는 방법 -> map 함수 사용

MovieDetail.js

<h3>배우 : {casts? casts.map(cast => <span>{cast}    </span>):null}</h3>

 

아직 해결하지 못한 것

상영 날짜의 형식을 2019년 10월 3일 의 형식으로 출력하지 못한것

 

아직 해결하지 못한 것은 4회차에 참석하여 질문을 통해 해결해보고자 합니다.

 

그럼 4회차를 참석하러!

 

SOMJANG/catch_program_react