2024/06/18 팀프로젝트(Festiall) : 공통 컴포넌트 - 버튼

모든 컴포넌트에서 재사용 가능한 버튼 컴포넌트

기존에는 컴포넌트 마다 버튼 컴포넌트, 인풋 컴포넌트 등 많이 사용되는 컴포넌트들을 일일이 새로 만들어서  사용했었다.

결국 페이지가 나타내는 이미지에 따라 일관성있게 버튼, 인풋 등은 디자인을 비슷하게 해서 기존에 썼던 스타일 코드를 ctrl C + ctrl V 하는 경우가 많았었고, 이 부분으로 피드백도 한 번 받았어서 이번 프로젝트에서

하나 만들어봤다.

 

굉장히 간단

버튼의 레이블을 children으로 받고,

onClick 이벤트, 배경 색상도 props로 받는다.

props로 받은 배경색상이 없으면 기본 배경색은 흰 색, 글자 색은 검은 색, 보더도 검은 색으로 나타나고

배경색상을 받으면 그 배경 색상으로 버튼 색이 바뀌면서 보더도 같은 색으로 바뀐다.

레이블이 눈에 잘 보이게 글자 색은 흰 색으로 바뀐다.

import React from 'react'
import styled from 'styled-components'

const StyledButton = styled.button`
    width: 17%;
    height: 40px;
    background-color: ${props => props.$bgColor || "white"};
    color: ${props => props.$bgColor ? "white" : "black"};
    border: 2px solid ${props => props.$bgColor || "black"};
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    &:hover{
        filter: brightness(0.9);
    }
`;

const Button = ({ children, onClick, bgColor }) => {
    return (
        <StyledButton onClick={onClick} $bgColor={bgColor}>{children}</StyledButton>
    )
}

export default Button

 

이제 이 버튼들이 사용되는 곳에서 import하고 Button을 return문에 넣어주면 끝

 

헤더에 넣어보기

src/components/header/Header.jsx

import Button from '../Button/Button'

...

return (...
		<Button onClick={() => navigate("/signup")}>회원가입</Button>
		<Button bgColor={"#495057"} onClick={() => navigate("/login")}>로그인</Button>
...)

배경색을 받은 로그인 버튼은 보더 색도 같이 변해서 테두리가 없는 것 처럼 보이고 글자 색도 흰 색으로 바뀌었다.

배경색을 못 받은 회원가입 버튼은 기본 설정인 흰 배경, 검은 테두리 및 글자 색인 것을 확인 할 수 있다.

또한, onClick 이벤트도 props로 받기 때문에 버튼을 클릭하면 각 페이지로 이동한다.

 

내가 이때까지 했던 리액트 프로젝트에서 진작에 이랬으면 스타일 파일의 코드도 많이 줄었을 것이고

코드 재사용도 엄청 줄었을 것 같다는 생각이 들었다.