FooterButton 컴포넌트

[lumpyspaceyz]

Button

버튼 컴포넌트 입니다.

Method

• buttonCase - 3가지 케이스(large | medium | small) 중 해당하는 케이스를 문자열로 받습니다.

  • large - 가로 사이즈를 가득 채우는 1개 버튼 케이스입니다.
    
  • medium - 1:2 비율의 2개 버튼 케이스입니다.
    
  • small - 1:1 비율의 2개 버튼 케이스입니다.
    

• text - 버튼에 들어갈 문자 데이터를 배열로 받습니다.

  • 'large' 버튼 케이스는 버튼이 1개이므로 배열의 길이는 1이어야합니다.
  • 'medium', 'small' 버튼 케이스는 버튼이 2개이므로 배열의 길이는 2이어야합니다.

• route - 버튼 클릭 시 이동할 경로 담은 콜백 함수를 배열로 받습니다.

  • 'large' 버튼 케이스는 버튼이 1개이므로 배열의 길이는 1이어야합니다.
  • 'medium', 'small' 버튼 케이스는 버튼이 2개이므로 배열의 길이는 2이어야합니다.

사용예시

<Button
  buttonCase="large"
  text={['시작하기']}
  route={[() => '/main']}
/>

<Button
  buttonCase="medium"
  text={['이전', '다음']}
  route={[() => '/main', () => '/user']}
/>

<Button
  buttonCase="small"
  text={['취소', '확인']}
  route={[() => '/main', () => '/bookmark']}
/>

전체코드

import { useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { useNavigate } from 'react-router-dom';

type ButtonProps = {
  buttonCase: 'large' | 'medium' | 'small';
  text: string[];
  route: (() => string)[];
};

const getClassName = (buttonCase: string, index: number) => {
  let className =
    'flex flex-row justify-center items-center flex-nowrap w-full rounded-[7px] py-12pxr text-body-em';
  switch (buttonCase) {
    case 'large':
      className += ' bg-primary text-white';
      break;
    case 'medium':
      className +=
        index === 0
          ? ' bg-gray_150 text-gray-700 basis-1/3'
          : ' bg-primary text-white basis-2/3';
      break;
    case 'small':
      className +=
        index === 0
          ? ' bg-gray_150 text-gray-700 basis-1/2'
          : ' bg-primary text-white basis-1/2';
      break;
  }
  return className;
};

function ErrorFallback({ message }: { message: string }): JSX.Element {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{message}</pre>
    </div>
  );
}

const ButtonContent = ({
  buttonCase = 'large',
  text,
  route,
}: ButtonProps): JSX.Element => {
  const navigate = useNavigate();

  if (
    (buttonCase === 'medium' || buttonCase === 'small') &&
    (text.length !== 2 || route.length !== 2)
  ) {
    throw new Error(
      `${buttonCase} 케이스일 때 text와 route 배열의 길이가 정확히 2여야 합니다.`
    );
  }

  if (buttonCase === 'large' && (text.length !== 1 || route.length !== 1)) {
    throw new Error(
      `${buttonCase} 케이스일 때 text와 route 배열의 길이가 정확히 1이어야 합니다.`
    );
  }

  // 콜백 함수로 들어온 경로로 이동하는 핸들러
  const handleOnClick = (idx: number): void => {
    const path = route[idx](); // 해당 인덱스의 콜백 함수를 호출하여 경로 추출
    navigate(path); // 추출된 경로로 이동
  };

  // buttonCase에 따라 버튼 마크업 생성
  let buttonMarkup: JSX.Element;
  switch (buttonCase) {
    case 'large':
      buttonMarkup = (
        <div className="bg-white">
          <button
            onClick={() => handleOnClick(0)}
            className={getClassName(buttonCase, 0)}
          >
            {text[0]}
          </button>
        </div>
      );
      break;
    case 'medium':
    case 'small':
      {
        const buttons = text.map((buttonText, idx) => (
          <button
            key={idx}
            onClick={() => handleOnClick(idx)}
            className={getClassName(buttonCase, idx)}
          >
            {buttonText}
          </button>
        ));
        buttonMarkup = (
          <div className={`flex flex-row bg-white gap-8pxr`}>{buttons}</div>
        );
      }
      break;
    default:
      buttonMarkup = <div className="bg-white">{text[0]}</div>;
  }

  return buttonMarkup;
};

const Button = (props: ButtonProps) => {
  const [errorKey, setErrorKey] = useState('');

  const handleError = (error: Error) => {
    const errorMessage = error.message.split(' ')[0];
    setErrorKey(errorMessage);
  };

  return (
    <ErrorBoundary
      fallbackRender={() => (
        // 에러가 발생했을 때 랜더링 될 컴포넌트(ErrorFallback) 정의
        <ErrorFallback
          message={`${errorKey} 버튼은 text와 route 배열에 정확히 ${errorKey === 'large' ? '1개' : '2개'}의 항목이 필요합니다.`}
        />
      )}
      onError={handleError}
    >
      <ButtonContent {...props} />
    </ErrorBoundary>
  );
};

export default Button;

[lumpyspaceyz]

route값 전달 방식 오류 수정