React #Movie App part_2

으아앙악 두개재!!!!!!!!!!!!

Movie App Code challenge 🔥

• 주어진 과제
  • Home에서 해줬던 loading을 Detail에 해주기
  • movie가 State에 없음. 현재 API에서 json을 받아와서 아무것도 안 하고 있는 상태.
    -> 힌트: json을 state에 넣어보기

1. Deatail, MovieDetail 컴포넌트

• <Home /> 컴포넌트에서 <Movie /> 컴포넌트를 보여줬던 것 처럼,
  <Detail /> 컴포넌트에서 보여줄 MovieDetail 컴포넌트를 만들었다.
• 영화의 background Img, title, year, genres 등등의 정보를
  부모 컴포넌트인 <Detail />에서 prop 으로 받아 사용해주면 된다.
• 먼저 prop 으로 필요한 정보를 다 넘겨주고

// - Detail.js

...
  return (
    <div>
      {loading ? (
        <LoadingH1 />
      ) : (
        <div>
          <MovieDetail
            key={detail.id}
            id={detail.id}
            coverImg={detail.medium_cover_image}
            title={detail.title}
            year={detail.year}
            genres={detail.genres}
            runtime={detail.runtime}
            rating={detail.rating}
            desc={detail.description_full}
            backImg={detail.background_image}
          />
        </div>
      )}
    </div>
  );
}

export default Detail;

// -MovieDetail.js

function MovieDetail({
  coverImg,
  title,
  year,
  genres,
  runtime,
  rating,
  desc,
  backImg,
}) {
  return (
    <div>
      {/* header */}
      <div>
        <img src={backImg} />
        {/* section_*/}
        <div>
          <img src={coverImg} alt={coverImg} />
          <div>
            <div>
              {title} ({year})
            </div>
            <div>
              {genres &&
                genres.map((gen) => (
                  <pkey={gen}>
                    {gen}
                  </p>
                ))}
            </div>
            <p>
              🕐 {runtime ? `${runtime} Minute` : 'None'} | ⭐ {rating}
            </p>
            <div>
              {desc.length > 230 ? `${desc.slice(0, 230)}...` : desc}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

• 굿굿.
  - MovieDetail 의 propTypes 타입도 정해주자.

MovieDetail.propTypes = {
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  year: PropTypes.number.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
  runtime: PropTypes.number,
  rating: PropTypes.number,
  desc: PropTypes.string,
};

• 정보가 있는 것도, 없는 것도 있어 애매한 것은 isRequired 를 따로 주지 않았다.

2. Module.CSS

• 간단하게 gird 를 사용해서 제작해보고 싶었다.
• css 제작 전, Home 과 Detail 둘다 api가 불러와지기 전 <h1>Loading ...</h1>을 보여주고 있었던 것이 생각나 하나의 컴포넌트로 제작해주기로한다.

// -Loading.js

import loaStyle from '../loading.module.css';

function LoadingH1() {
  return <div className={loaStyle.h1}>Loading...</div>;
}

export default LoadingH1;

• 만들었으니 Home 과 Detail 컴포넌트에 적용만 해주면 된다.

// - Detail.js

...
  return (
    <div>
      {loading ? (
        <LoadingH1 />  <<<-----
      ) : (
        <div>
...

• 간단하게 스타일도 입혀줬다!
• 그리고 <Movie />, <MovieDetail /> 컴포넌트에도
  module css 를 사용해 빠르게 스타일을 입혀줬다!
• 영역에 마우스를 올리면 배경색이 짙어지고, 타이틀 위에 마우스를 올리면 약간 붉게 해봐땅. . 쿄쿄 쿄ㅛ쿄 ㅛ
  
  
• 완성본!
• 더 완벽하고 예쁜 페이지를 위해 이후에 css 를 더 업그레이드해줄 예정이다.
• 이제 마지막은, 퍼블리싱 단계만이 남았다!
  (사실 위의 사진은 퍼블리싱까지 모두 마친 상태이지만, 복습은 안했으니까~)

gooooooood >_<