📦 공통 컴포넌트 설계 가이드 (React + Tailwind)

🎯 왜 공통 컴포넌트를 만들까?

공통 컴포넌트는

👉 디자인 일관성 유지

👉 코드 재사용

👉 유지보수 효율 증가

를 위해 사용한다.

단, 무조건 많이 만드는 게 아니라 “필요한 만큼만” 만드는 게 핵심이다.

🧠 핵심 기준 (가장 중요)

공통 컴포넌트는 아래 3가지 조건을 만족할 때 만든다.

1. 3번 이상 반복된다
2. 디자인이 동일하다
3. props로 제어 가능하다

👉 3개 모두 YES일 때만 만든다.

🧩 컴포넌트 종류

1️⃣ UI 컴포넌트 (공통)

• Button
• Card
• Input
• ProgressBar

👉 특징:

• 재사용 가능
• 스타일 중심
• 로직 거의 없음

2️⃣ 도메인 컴포넌트 (서비스 전용)

• ResultCard
• QuestionCard
• MatchSection

👉 특징:

• 특정 기능 포함
• 해당 서비스에서만 사용

🎨 Button 컴포넌트 설계 (실전 예시)

📌 Button.jsx

export default function Button({
  variant = "primary",
  size = "md",
  children,
  disabled = false,
  onClick,
  className = "",
}) {
  const base =
    "rounded-xl font-medium transition active:scale-95";

  const variants = {
    primary: "bg-yellow-400 text-black",
    secondary: "bg-gray-200 text-black",
    danger: "bg-red-500 text-white",
    outline: "border border-gray-300 text-black",
  };

  const sizes = {
    sm: "px-3 py-1 text-sm",
    md: "px-4 py-2 text-base",
    lg: "px-5 py-3 text-lg",
  };

  const disabledStyle = disabled
    ? "opacity-50 cursor-not-allowed"
    : "";

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${base} ${variants[variant]} ${sizes[size]} ${disabledStyle} ${className}`}
    >
      {children}
    </button>
  );
}

📌 사용 예시

<Button variant="primary">시작하기</Button>
<Button variant="danger">삭제</Button>
<Button variant="outline">취소</Button>
<Button size="lg">큰 버튼</Button>

🎴 Card 컴포넌트

export default function Card({ children, className = "" }) {
  return (
    <div className={`bg-white rounded-2xl shadow-md p-4 ${className}`}>
      {children}
    </div>
  );
}

🧠 ResultCard (도메인 컴포넌트)

import Card from "../common/Card";

export default function ResultCard({ bread, description, mbti }) {
  return (
    <Card className="text-center">
      <h2 className="text-xl font-bold">{bread}</h2>
      <p className="mt-2 text-sm text-gray-600">{description}</p>
      <span className="mt-3 inline-block text-xs bg-gray-100 px-2 py-1 rounded">
        {mbti}
      </span>
    </Card>
  );
}

📁 폴더 구조

components/
  common/
    Button.jsx
    Card.jsx
    ProgressBar.jsx

  domain/
    ResultCard.jsx
    QuestionCard.jsx

⚠️ 하지 말아야 할 것

❌ 모든 요소를 컴포넌트화

❌ 스타일을 props로 무한 확장

❌ 공통화 기준 없이 분리

👉 과한 추상화는 오히려 유지보수를 어렵게 만든다.

💡 실전 팁

• 스타일은 variant로 관리
• 레이아웃은 className으로 덮어쓰기
• 처음부터 만들지 말고 반복되면 분리

🚀 한줄 정리

👉 “공통 컴포넌트는 미리 만드는 게 아니라, 반복될 때 뽑는 것이다.”