04. 공통 UI 컴포넌트 만들기 (UI.jsx)

1. 왜 공통 UI 컴포넌트를 먼저 만들까?

이 프로젝트에서는 버튼, 로딩 표시, 모달(팝업), 컨테이너(감싸는 영역) 가 여러 페이지에서 반복된다. 이것들을 UI.jsx 한 파일에 모아두면, 필요한 곳에서 가져다 쓰기만 하면 된다.

2. Button — 버튼 컴포넌트

src/components/ 폴더 안에 UI.jsx 파일을 새로 만든다. 이 파일에 4개의 컴포넌트를 순서대로 작성한다. 먼저 Button부터 시작한다. variant prop으로 버튼 종류를 지정하면 CSS 클래스 btn-{variant}가 적용된다.

export function Button({ variant = "primary", className = "", children, ...props }) {
  return (
    <button className={`btn-${variant} ${className}`} {...props}>
      {children}
    </button>
  );
}

버튼 스타일은 src/index.css에 CSS 클래스로 정의한다. 아래 내용을 index.css 파일에 추가한다.

@layer components {
  .btn-primary   { @apply bg-yellow-400 text-black hover:bg-yellow-300; }
  .btn-danger    { @apply bg-red-600 text-white hover:bg-red-500; }
  .btn-ghost     { @apply text-white hover:text-yellow-400; }
  .btn-secondary { @apply bg-gray-800 text-white hover:bg-gray-700 disabled:opacity-30; }
}

3. Spinner — 로딩 표시

같은 UI.jsx 파일에서, Button 함수 바로 아래에 이어서 Spinner를 작성한다. full prop이 true이면 화면 전체를 덮는 로딩 화면을 렌더링하고, false이면 텍스트만 표시한다.

export function Spinner({ message = "불러오는 중...", full = false, className = "" }) {
  if (full) {
    return (
      <div className="bg-black min-h-screen flex items-center justify-center">
        <p className="text-white text-2xl animate-pulse">{message}</p>
      </div>
    );
  }
  return <p className={`text-white text-xl ${className}`}>{message}</p>;
}

4. Modal — 팝업 컴포넌트

같은 UI.jsx 파일에서, Spinner 함수 바로 아래에 이어서 Modal을 작성한다. fixed inset-0으로 화면 전체를 덮는 오버레이를 생성하고, 그 위에 콘텐츠를 가운데 배치하는 팝업 컴포넌트이다.

export function Modal({ onClose, children }) {
  return (
    <div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4">
      <div className="relative">
        <Button variant="ghost" onClick={onClose} className="absolute -top-10 right-0 text-2xl">
          <FontAwesomeIcon icon={faXmark} />
        </Button>
        {children}
      </div>
    </div>
  );
}

5. Container — 섹션 레이아웃

같은 UI.jsx 파일에서, Modal 함수 바로 아래에 마지막 컴포넌트인 Container를 작성한다. container mx-auto로 최대 너비를 제한하고 가로 중앙에 배치하는 공통 레이아웃 컴포넌트이다.

export function Container({ className = "", children }) {
  return (
    <section className={`px-11 ${className}`}>
      <div className="container mx-auto">
        {children}
      </div>
    </section>
  );
}

6. 전체 코드 확인

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faXmark } from "@fortawesome/free-solid-svg-icons";

export function Button({ variant = "primary", className = "", children, ...props }) {
  return (
    <button className={`btn-${variant} ${className}`} {...props}>
      {children}
    </button>
  );
}

export function Spinner({ message = "불러오는 중...", full = false, className = "" }) {
  if (full) {
    return (
      <div className="bg-black min-h-screen flex items-center justify-center">
        <p className="text-white text-2xl animate-pulse">{message}</p>
      </div>
    );
  }
  return <p className={`text-white text-xl ${className}`}>{message}</p>;
}