07. Home.jsx — 메인 페이지 완성하기

1. Home 페이지의 구조

GOFLEX의 메인 페이지는 두 가지 영역으로 나뉜다.

• 히어로(Hero) 영역 — 배경 영상 + 인기 영화 하이라이트 + "자세히 보기" 버튼
• 영화 목록 영역 — 현재 상영작, 인기 영화, 최고 평점 3개 섹션

2. 1단계 — import + 데이터 받기

src/components/Home.jsx 파일을 열고 임시 코드를 모두 지운 뒤 아래를 작성한다.

import { useOutletContext, Link } from "react-router";
import { Section } from "./Section.jsx";
import { Spinner } from "./UI.jsx";

export function Home() {
  const { now, popular, topRated, loading } = useOutletContext();

  // 인기영화 첫 번째를 히어로에 표시
  const hero = popular.length > 0 ? popular[0] : null;

3. 2단계 — 히어로 영역

같은 Home.jsx 파일에서, 1단계의 hero 변수 선언 바로 아래에 return을 작성한다. 히어로 영역은 세 겹의 레이어(배경 영상 → 오버레이 → 텍스트)로 구성된다. position: absolute 요소를 겹쳐서 레이어를 구성하는 CSS 포지셔닝 기법이다.

  return (
    <>
      <section className="relative h-screen overflow-hidden">
        <video src="video.mp4" className="absolute top-0 left-0 w-full h-full object-cover" autoPlay muted loop playsInline />
        <div className="absolute bg-black/50 w-full h-full top-0 left-0"></div>
    {/* 다음탭으로 */}

4. 3단계 — 영화 목록 영역

같은 Home.jsx 파일에서, 히어로 </section> 태그 바로 아래에 이어서 작성한다. loading 상태에 따라 스피너 또는 영화 목록을 조건부 렌더링한다.

      {loading && <Spinner className="text-center py-20 bg-black" />}

      {!loading && (
        <>
          <Section title="현재 상영작" items={now} category="now_playing" />
          <Section title="인기 영화" items={popular} category="popular" />
          <Section title="최고 평점" items={topRated} category="top_rated" />
        </>
      )}
    </>
  );
}

5. 동작 확인

6. 전체 코드

import { useOutletContext, Link } from "react-router";
import { Section } from "./Section.jsx";
import { Spinner } from "./UI.jsx";

export function Home() {
  const { now, popular, topRated, loading } = useOutletContext();

  // 인기영화 첫 번째를 히어로에 표시
  const hero = popular.length > 0 ? popular[0] : null;

  return (
    <>
      {/* 상단 비디오 영역 */}
      <section className="relative h-screen overflow-hidden">
        <video src="video.mp4" className="absolute top-0 left-0 w-full h-full object-cover" autoPlay muted loop playsInline />
        <div className="absolute bg-black/50 w-full h-full top-0 left-0"></div>
        <div className="relative container mx-auto flex flex-col justify-center items-center h-full text-center px-6">
          <h2 className="text-5xl md:text-7xl lg:text-9xl font-bold text-yellow-400">GOFLEX</h2>
          <p className="text-xl md:text-2xl text-white mt-4">최신 영화와 인기 작품을 만나보세요.</p>
          {hero && (
            <div className="mt-8 flex flex-col items-center gap-3">
              <p className="text-gray-300 text-lg">지금 인기 있는 영화</p>
              <h3 className="text-3xl md:text-4xl font-bold text-white">{hero.title}</h3>
              <Link to={`/movie/${hero.id}`} className="mt-2 bg-yellow-400 text-black px-8 py-3 rounded-lg font-bold hover:bg-yellow-300 transition-colors">
                자세히 보기
              </Link>
            </div>
          )}
        </div>
      </section>

      {/* 영화 목록 */}
      {loading && <Spinner className="text-center py-20 bg-black" />}

      {!loading && (
        <>
          <Section title="현재 상영작" items={now} category="now_playing" />
          <Section title="인기 TV" items={popular} category="popular" />
          <Section title="최고 평점" items={topRated} category="top_rated" />
        </>
      )}
    </>
  );
}