[React] props에 따라 스타일 설정하기

버튼 컴포넌트에 props로 상태 넘겨주기

import Button from '../../components/Button';

<Button
  onClick={emailVerifiedClick} 
  disabled={loading}
  styling={fullBtn}
  text={loading ? '이메일 전송중' : '이메일 재전송'}
/>

상태에 따라 스타일링 하기

import { classNames } from '../shared/share';

interface IProps {
  type?: 'submit' | 'button';
  text: string;
  onClick?: () => void;
  disabled?: boolean;
  styling?: 'fullBtn' | 'normal';
}

export default function Button({
  type = 'button',
  text,
  onClick,
  disabled,
  styling,
}: IProps) {
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={classNames(
        `px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-sm text-sm cursor-pointer disabled:bg-indigo-200`,
        styling === 'fullBtn' &&
          `flex w-full justify-center disabled:bg-indigo-200`
      )}
    >
      {text}
    </button>
  );
}