고민했던 거

버튼 컴포넌트 만드는데 헤더에서만 사용할 컴포넌트이지만, 로그인 회원가입 두개의 버튼이라 어떻게 구현할까 고민

현재는 하나의 컴포넌트에서 isSignupBtn의 값에 따라 스타일만 다르게 주는 방식으로 진행 -> 버튼 클릭 액션은 그냥 Link 태그로 해당 페이지로 이동하도록 구현

import styled from 'styled-components';
import { Link } from 'react-router-dom';

type HeaderProps = {
  path: string;
  text: string;
  isSignupBtn: boolean;
};

const HeaderBtn = ({ path, text, isSignupBtn }: HeaderProps) => {
  return (
    <Link to={path}>
      <StyledBtn isSignup={isSignupBtn}>{text}</StyledBtn>
    </Link>
  );
};

export default HeaderBtn;
const StyledBtn = styled.button`
  background-color: ${(props: { isSignup: boolean }) =>
    props.isSignup ? 'white' : 'var(--cyan-dark-500)'};
  color: ${(props: { isSignup: boolean }) =>
    props.isSignup ? 'var(--cyan-dark-500)' : 'white'};
  border: ${(props: { isSignup: boolean }) =>
    `1px solid ${props.isSignup ? 'var(--cyan-dark-500)' : 'white'}`};
  padding: 0.5rem 1.3rem;
  border-radius: 20px;
`;

const HeaderBtnContainer = () => {
  return (
    <StyledContainer>
      <HeaderBtn path='/login' text='로그인' isSignupBtn={false} />
      <HeaderBtn path='/signup' text='회원가입' isSignupBtn={true} />
    </StyledContainer>
  );
};