[TECH-QA] 개방-폐쇄 원칙(Open-Closed Principle, OCP)

// 안티패턴: OCP를 위반하는 Button 컴포넌트
function Button({ variant, children, ...props }) {
  let className = 'button';

  if (variant === 'primary') {
    className += ' button--primary';
  } else if (variant === 'secondary') {
    className += ' button--secondary';
  } else if (variant === 'danger') {
    className += ' button--danger';
  }

  return (
    <button className={className} {...props}>
      {children}
    </button>
  );
}

// 사용 예시
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="danger">Danger Button</Button>

// 기본 컴포넌트 ButtonBase
function ButtonBase({ className, children, ...props }) {
  return (
    <button className={`button ${className}`} {...props}>
      {children}
    </button>
  );
}

// 확장된 버튼 컴포넌트들
const PrimaryButton = ({ children, ...props }) => (
  <ButtonBase className="button--primary" {...props}>
    {children}
  </ButtonBase>
);

const SecondaryButton = ({ children, ...props }) => (
  <ButtonBase className="button--secondary" {...props}>
    {children}
  </ButtonBase>
);

const DangerButton = ({ children, ...props }) => (
  <ButtonBase className="button--danger" {...props}>
    {children}
  </ButtonBase>
);

// 사용 예시
<PrimaryButton>Primary Button</PrimaryButton>
<SecondaryButton>Secondary Button</SecondaryButton>
<DangerButton>Danger Button</DangerButton>

// 새로운 SuccessButton 추가 (기존 코드 수정 없이 가능)
const SuccessButton = ({ children, ...props }) => (
  <ButtonBase className="button--success" {...props}>
    {children}
  </ButtonBase>
);

function Card({ header, body, footer, ...props }) {
  return (
    <div className="card" {...props}>
      {header && <div className="card-header">{header}</div>}
      {body && <div className="card-body">{body}</div>}
      {footer && <div className="card-footer">{footer}</div>}
    </div>
  );
}

// 사용 예시
<Card
  header={<h2>Card Title</h2>}
  body={<p>This is the card content.</p>}
  footer={<PrimaryButton>Action</PrimaryButton>}
/>

const ImageCard = ({ image, ...props }) => (
  <Card
    header={image && <img src={image} alt="Card Image" className="card-image" />}
    {...props}
  />
);

// 사용 예시
<ImageCard
  image="https://example.com/image.jpg"
  body={<p>This is an image card.</p>}
  footer={<SecondaryButton>Learn More</SecondaryButton>}
/>

// HOC: 로딩 상태를 추가
function withLoading(Component) {
  return function LoadingComponent({ isLoading, children, ...props }) {
    return (
      <Component {...props} disabled={isLoading}>
        {isLoading ? 'Loading...' : children}
      </Component>
    );
  };
}

// 로딩 가능한 버튼 생성
const LoadingPrimaryButton = withLoading(PrimaryButton);
const LoadingSecondaryButton = withLoading(SecondaryButton);

// 사용 예시
<LoadingPrimaryButton isLoading={true}>Click Me</LoadingPrimaryButton>
<LoadingSecondaryButton isLoading={false}>Click Me</LoadingSecondaryButton>