[React] UI 구성_②TodoInsert 만들기

2-2.2) TodoInsert 만들기

components 디렉터리에 TodoInsert.jsx 파일과 TodoInsert.scss 파일 생성

• App.jsx

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';

const App = () => {
  return (
    <TodoTemplate>
      <TodoInsert />
    </TodoTemplate>
  );
};

export default App;

• TodoInsert.jsx

import React from 'react';
import { MdAdd } from 'react-icons/md'; // 아이콘 사용
import './TodoInsert.scss';

// [ 아이콘 사용 방법 ]
// 사이트에서 사용하고 싶은 아이콘을 고르고, import 구문을 사용하여 불러옴
// 예시 : import { 아이콘 이름 } from 'react-icons/md';

const TodoInsert = () => {
  return (
    <form className="TodoInsert">
      {/* placeholder => 입력 필드(input, textarea 등)의 힌트 텍스트 */}
      <input placeholder="할 일을 입력하세요" />
      <button type="submit">
        <MdAdd />
      </button>
    </form>
  );
};

export default TodoInsert;

(+) 리액트 아이콘 사용 방법
사이트에서 사용하고 싶은 아이콘을 고르고, import 구문을 사용하여 불러옴.

// 예시 
import { 아이콘 이름 } from 'react-icons/md';

뭔가 좀 휑한 느낌이 든다! 스타일링을 해보자~

• TodoInsert.scss

.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 {
        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;  // cursor: pointer; => 사용자가 특정 요소 위에 마우스를 올렸을 때, 커서 모양을 손 모양으로 변경
      transition: 0.1s background ease-in;
      &:hover {
        background: #adb5bd;  // hover => 마우스를 특정 요소 위에 올려놓았을 때 스타일을 변경
      }
    }
  }

마우스를 + 버튼에 올리면 배경색이 바뀌고, 커서 모양도 손가락 모양으로 바뀐다.