1 영화앱 tailwind

1. Header 분석

<header className="fixed top-0 left-0 w-full py-4 px-2 bg-black/90 z-50">
  {/* fixed: 스크롤해도 고정 */}
  {/* top-0 left-0: 화면 최상단 좌측 */}
  {/* w-full: 전체 너비 */}
  {/* py-4 px-2: 상하 16px, 좌우 8px 패딩 */}
  {/* bg-black/90: 검은색 배경 90% 불투명 */}
  {/* z-50: 다른 요소 위에 표시 */}
  <div className="container mx-auto">
    <Link to="/">
      <h1 className="text-3xl text-yellow-300 font-bold">
        {/* text-3xl: 30px 텍스트 */}
        {/* text-yellow-300: 연한 노란색 */}
        {/* font-bold: 굵은 글씨 */}
        GOFLIX
      </h1>
    </Link>
  </div>
</header>

2. 영화 카드 컴포넌트 패턴

function MovieCard({ movie }) {
  return (
    <div className="group relative rounded-lg overflow-hidden cursor-pointer
                    transition-transform duration-300 hover:scale-105
                    shadow-lg hover:shadow-yellow-400/30">
      {/* 포스터 이미지 */}
      <img
        src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
        alt={movie.title}
        className="w-full aspect-[2/3] object-cover"
      />
      {/* 호버 오버레이 */}
      <div className="absolute inset-0 bg-black/70 opacity-0 group-hover:opacity-100
                      transition-opacity duration-300 flex flex-col justify-end p-4">
        <h3 className="text-white font-bold text-sm line-clamp-2">{movie.title}</h3>
        <p className="text-yellow-300 text-xs mt-1">⭐ {movie.vote_average.toFixed(1)}</p>
      </div>
    </div>
  );
}

3. 전체 페이지 레이아웃

// App.jsx
<main className="bg-black text-white min-h-screen pt-16">
  {/* bg-black: 검은 배경 */}
  {/* text-white: 기본 텍스트 흰색 */}
  {/* min-h-screen: 최소 전체 높이 */}
  {/* pt-16: 상단 64px (fixed 헤더 높이만큼) */}
  <Outlet />
</main>

// 홈 페이지
<section className="container mx-auto px-4 py-8">
  <h2 className="text-2xl font-bold mb-6 text-yellow-300">인기 영화</h2>
  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
    {movies.map(movie => <MovieCard key={movie.id} movie={movie} />)}
  </div>
</section>

4. 버튼 스타일 패턴

{/* 주요 액션 버튼 */}
<button className="bg-yellow-400 text-black font-bold px-6 py-2 rounded-lg
                   hover:bg-yellow-300 active:scale-95
                   transition-all duration-200 cursor-pointer">
  자세히 보기
</button>

{/* 보조 버튼 (아웃라인) */}
<button className="border-2 border-white text-white font-semibold px-6 py-2 rounded-lg
                   hover:bg-white hover:text-black
                   transition-all duration-200 cursor-pointer">
  목록 추가
</button>

5. 영화 상세 페이지

function MovieDetail({ movie }) {
  return (
    <div className="relative min-h-screen bg-black text-white">
      {/* 배경 이미지 */}
      <div className="relative h-[60vh]">
        <img
          src={`https://image.tmdb.org/t/p/original${movie.backdrop_path}`}
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent" />
      </div>

      {/* 콘텐츠 */}
      <div className="container mx-auto px-4 -mt-32 relative z-10">
        <div className="flex flex-col md:flex-row gap-8">
          <img
            src={`https://image.tmdb.org/t/p/w300${movie.poster_path}`}
            className="w-40 md:w-56 rounded-xl shadow-2xl flex-none mx-auto md:mx-0"
          />
          <div className="flex-1">
            <h1 className="text-3xl md:text-5xl font-black">{movie.title}</h1>
            <div className="flex items-center gap-3 mt-3 text-sm text-gray-400">
              <span className="text-yellow-400 font-bold">⭐ {movie.vote_average.toFixed(1)}</span>
              <span>{movie.release_date.slice(0, 4)}</span>
            </div>
            <p className="mt-4 text-gray-300 leading-relaxed max-w-2xl line-clamp-4 md:line-clamp-none">
              {movie.overview}
            </p>
            <div className="flex gap-3 mt-6">
              <button className="bg-yellow-400 text-black font-bold px-6 py-3 rounded-lg
                                 hover:bg-yellow-300 active:scale-95 transition-all duration-200">
                ▶ 재생
              </button>
              <button className="border border-white/40 text-white px-6 py-3 rounded-lg
                                 hover:bg-white/10 transition-all duration-200">
                + 내 목록
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}