Type something to search...
to navigateto selectESC to close

08. Section과 Card — 영화 카드 목록 만들기

요약

Gemini CLI로 구현하기 — Section & Card 컴포넌트

  1. npx gemini
  2. 1
    src/components/Section.jsx와 Card.jsx를 작성해줘. Section은 title, items, category props를 받아서 제목, 더보기 링크(/category/[category]), [열 수]열 그리드 카드 목록을 렌더링해줘. Card는 item prop을 받아서 TMDB 포스터 이미지(https://image.tmdb.org/t/p/w500/), 호버 시 줄거리+평점 오버레이, 하단에 제목+평점+개봉일을 표시해줘. Tailwind CSS group-hover를 활용해줘.
  3. 사용 가이드: [열 수]를 원하는 그리드 열 개수(기본: 4)로 바꾼다. 카드에 기능을 추가하려면 프롬프트 끝에 요구사항을 덧붙인다.

1. 이번 편에서 만들 것

컴포넌트역할
Section제목 + “더보기” 링크 + 영화 카드 그리드
Card포스터 + 호버 시 줄거리/평점 오버레이 + 하단 정보

2. Section.jsx 작성

src/components/Section.jsx 파일을 열고 임시 코드를 모두 지운 뒤 아래를 작성한다. Section은 제목, “더보기” 링크, 카드 그리드를 하나의 단위로 묶는 레이아웃 컴포넌트이다. title과 items prop만 바꿔서 세 가지 카테고리에 재사용한다.

src/components/Section.jsx
1
import { Link } from "react-router";
2
import { Card } from "./Card.jsx";
3
import { Container } from "./UI.jsx";
4


5
export function Section({ title, items, category }) {
6
  return (
7
    <Container className="py-24">
8
      <div className="flex items-center justify-between pt-10 pb-5 px-3">
9
        <h2 className="text-4xl font-bold text-white">{title}</h2>
10
        {category && (
11
          <Link to={`/category/${category}`} className="text-yellow-400 hover:text-yellow-300 text-sm font-bold">
12
            더보기 &rarr;
13
          </Link>
14
        )}
15
      </div>
16
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
17
        {items.map((el) => (
18
          <Card key={el.id} item={el} />
19
        ))}
20
      </div>
21
    </Container>
22
  );
23
}
줄설명
34편에서 만든 Container 컴포넌트를 가져온다. 공통 레이아웃 컴포넌트이다.
5title(제목), items(영화 배열), category(카테고리 키)를 받는다.
8flex — 자식 요소를 가로로 나란히 배치하는 Tailwind 클래스이다. justify-between — 자식들을 양쪽 끝으로 밀어낸다. 결과적으로 제목은 왼쪽, “더보기”는 오른쪽에 배치된다.
10-14category가 있을 때만 “더보기” 링크를 표시한다. 클릭하면 /category/popular 같은 페이지로 이동한다. &rarr;는 → 화살표이다.
16grid — CSS Grid 레이아웃이다. grid-cols-4는 4열 구성이다. gap-6은 그리드 아이템 사이의 간격이다. sm:, md: 반응형 접두사로 뷰포트 크기에 따라 열 수가 변경된다.
17-19.map()(맵)은 배열의 각 요소에 콜백 함수를 실행하고, 그 반환값으로 구성된 새 배열을 만드는 메서드이다. items에 영화가 20개 있으면 Card 컴포넌트 20개로 이루어진 새 배열이 만들어지고, React가 이를 화면에 렌더링한다.

Home.jsx에서는 category="popular" 같은 값을 전달하지만, 나중에 다른 곳에서 Section을 “더보기” 없이 사용할 수도 있다. {category && (...)}로 처리하면 category가 없으면 “더보기” 링크가 자동으로 숨겨진다.

3. Card.jsx — 1단계: import + 포스터

src/components/Card.jsx 파일을 열고 임시 코드를 모두 지운 뒤 작성한다. Card는 영화 포스터, 호버 오버레이(줄거리·평점), 하단 정보를 표시하는 컴포넌트이다. 클릭하면 영화 상세 페이지로 이동한다.

src/components/Card.jsx
1
import { Link } from "react-router";
2
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3
import { faHeart, faStar } from "@fortawesome/free-solid-svg-icons";
4


5
export function Card({ item }) {
6
  const poster = `https://image.tmdb.org/t/p/w500/${item.poster_path}`;
줄설명
3하트(faHeart)와 별(faStar) 아이콘을 가져온다.
5props 이름이 item이다. (이전 교안에서는 movie였다.)
6TMDB 포스터 이미지 URL을 조합한다.

4. Card.jsx — 2단계: JSX 렌더링

 
1
(8.432).toFixed(1)  // "8.4"
2
(10).toFixed(1)     // "10.0"
3
(0).toFixed(1)      // "0.0"

숫자를 소수점 N자리까지만 표시하는 메서드이다. TMDB 평점은 8.432 같은 값이 오므로, toFixed(1)로 "8.4"처럼 깔끔하게 표시한다.

텍스트를 최대 3줄까지만 표시하고 나머지는 ...으로 잘라내는 Tailwind 클래스이다. 줄거리가 아무리 길어도 카드 레이아웃이 깨지지 않는다.

5. 동작 확인

확인 항목기대 결과
메인 페이지 스크롤영화 포스터가 4열 그리드로 나열됨
카드에 마우스 올림포스터가 확대되고, 어두운 오버레이에 줄거리+평점 표시
”더보기 →” 클릭/category/popular 등 카테고리 페이지로 이동
카드 클릭/movie/숫자로 이동
모바일 크기1열 → 2열 → 4열로 반응형 변화

6. 전체 코드