#2 기본 버튼 컴포넌트 만들기

#1 기획단계 및 UI 작업

-----

기존엔 UI를 구성하기 위해 Material-UI, ant design의 컴포넌트들을 사용했다. 하지만 이번 프로젝트에서는 직접 만들어보고싶어 styled-component를 이용해 만들었다.

 

버튼 컴포넌트 생성 

 

먼저, 내가 개발하면서 자율적으로 버튼을 커스텀하고 싶은 속성은 

- 텍스트 

- border 여부 및 색상

- outlined 여부

- backgroundColor : 버튼 색상

- fontColor : 폰트 색상

- width : 넓이

위와 같이 정리했다.

 

1. 버튼 컴포넌트 생성 

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

//버튼 컴포넌트 생성
const Button =(props) =>{ 
    return(  
        <Container 
            backgroundColor={props.backgroundColor}
            outlined = {props.outlined}
            borderColor ={props.borderColor}  
            fontColor = {props.fontColor}
            width ={props.width}
        >
            <Text>
            {props.text}
            </Text>  
        </Container> 
    ) 
} 

//proops default 값 설정
Button.defaultProps ={
    text : 'default ',
    borderColor : 'black',
    outlined : false,
    backgroundColor : 'rgba(52,168,234,1)' ,
    fontColor :'white',
    width : '8rem',
}

/*styled-component css 설정*/

const Container = styled.div`
    height: 50px;
    width: ${(props)=> props.width}; 
    display: flex;
    justify-content: center;
    align-items: center;  
    color : ${(props) => props.fontColor};
    outline: ${(props) => props ? `white 1px solid` : false };
    background : ${(props) => props.backgroundColor};    
    border : ${(props) => props['borderColor'].length>0 ? props.borderColor : 'none'};
    word-break : break-all; 
    box-shadow : 2px 2px 2px #c3c3c366; 
    user-select : none; 
    border-radius: 75px 75px 75px 75px / 67px 67px 67px 67px;    cursor : pointer; 
    transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1); 

     
    &:hover{ 
        filter: brightness(90%);  
    }

    &:active{
        background-color: #FFEE53; 
        box-shadow:inset 1px 1px 3px 0px #9d98983d; 
        filter: brightness(100%);   
    }
 
const Text = styled.span` 
`;
 


 export default Button;

Container는 div와 text는 span으로 감싸줬다.  또한 defaultProps 값을 제공해줘서 props에게 default 값을 가지게

기본 설정을 해줬다. 

 

 

이런 상태로 구현이 됐다. 

 

이제 한번 Button 컴포넌트를 사용해보도록 하겠다. 

import Button from '../src/component/Button';
function App() {
  return (
    <div className="App">
      <Button
       text={'업로드'}
       backgroundColor ={'rgba(23,169,37,1)'}
       outlined ={true}
       borderColor ={'rgba(52,168,234,1)'} 
      /> 
    </div>
  );
}

export default App;

해당 색상과 텍스트를 설정해준 결과 이제 해당 props를 전달받은 button 컴포넌트는 default 값 대신 props 값을 사용하게 된다. 

 

이제 프로젝트에서 버튼 걱정은 없어졌다 😎