[REACT] 공통 컴포넌트

1. 공통 컴포넌트 구현하기

1. 버튼 컴포넌트 구현
   • Button.jsx ```jsx import “./Button.css”;

const Button = ({ text, type, onClick }) => { return ( <button onClick={onClick} className={Button Button_${type}}> {text} </button> ); };

export default Button;

  - Button.css
  ```css
  .Button {
    background-color: rgb(236, 236, 236);
    cursor: pointer;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 18px;
    white-space: noWrap;
  }

  .Button_POSITIVE {
    background-color: rgb(100, 201, 100);
    color: white;
  }

  .Button_NEGATIVE {
    background-color: rgb(253, 86, 95);
    color: white;
  }

• Header.jsx ```jsx import “./Header.css”;

const Header = ({ title, leftChild, rightChild }) => { return ( <header className="Header"> <div className="header_left">{leftChild}</div> <div className="header_center">{title}</div> <div className="header_right">{rightChild}</div> </header> ); };

export default Header;

  - Header.css
  ```css
  .Header {
    display: flex;
    align-items: center;
    padding: 20px 0px;
    border-bottom: 1px solid rgb(226, 226, 226);
  }

  .Header > div {
    display: flex;
  }

  .Header .header_center {
    width: 50%;
    font-size: 25px;
    justify-content: center;
  }

  .Header .header_left {
    width: 25%;
    justify-content: flex-start;
  }

  .Header .header_right {
    width: 25%;
    justify-content: flex-end;
  }