import {MdAdd} from 'react-icons/md'; // npm i react-icons
import './TodoInsert.scss';

function TodoInsert() {
  return (
    <form className='TodoInsert'>
      <input placeholder='할 일을 입력하세요' />
      <button type='submit'>
        <MdAdd />
      </button>
    </form>
  )
}

export default TodoInsert;

.TodoInsert {
  display: flex;
  background: #495057;
}

input {
  // 기본 스타일 초기화
  background: none;
  outline: none;
  border: none;
  
  padding: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: white;
  
  &::placeholder {
    // placehoder 디자인
    color: #dee2e6;
  }
  // 버튼을 제외한 영역을 모두 차지하기
  flex: 1;
}

button {
  // 기본 스타일 초기화
  background: none;
  outline: none;
  border: none;

  background: #868e96;
  color: white;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.1s background ease-in;
  &:hover {
    background: #adb5bd;
  }
}

react-icons

• 리액트에서 아이콘을 자유롭게 사용
• npm 설치 후 원하는 아이콘 import하여 태그에 적용
• 홈페이지 주소(https://react-icons.github.io/react-icons

input 디자인

• border는 기본 테두리 / outline은 focus시 테두리
• &::placeholder로 디자인 가능
• flex:1로 설정하면 버튼 사용하고 남은 공간 모두 input으로 채움

button 디자인

• &:hover 사용하여 마우스 올렸을 때 색 변화

결과