[React] 동적인 타이머 만들기 React에서 FontAwesome 아이콘 사용/ 기본 배치 CSS

최종 결과

기존 타이머에 약간의 CSS를 적용시켰다. 아이콘은 FontAwesome에서 가져와 사용하였다.

React에서 Font Awesome 사용 - 오류

JSX상에서 기존 HTML처럼 Font Awesome의 CDN키를 적용하니 아래와 같은 오류가 발생하였다.

Warning: Invalid DOM property `crossorigin`. Did you mean `crossOrigin`?
→ JSX는 CamelCase를 사용하기 때문에 위와 같은 오류가 나온다고 생각한다.

관련 패키지 설치

Font Awesome의 SVG 기반 아이콘 활성화시키기 위한 패키지

npm i @fortawesome/fontawesome-svg-core

Font Awesome에서 제공되는 Solid, Regular, Light, Brands 카테고리에 대한 패키지중 선택하여 설치

npm i @fortawesome/free-solid-svg-icons 
npm i @fortawesome/free-regular-svg-icons 
npm i @fortawesome/free-brands-svg-icons
 ...

Font Awesome을 React 컴포넌트 형태로 사용할 수 있도록 해주는 패키지

npm i @fortawesome/react-fontawesome

Font Awesome 아이콘 임포트

@fortawesome/react-fontawesome  패키지를 사용하기 때문에 

import { faPause, faPlay, faStop } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import 한 아이콘을 icon props 형식으로 전달

<FontAwesomeIcon icon={faPlay} />
<FontAwesomeIcon icon={faPause} />
<FontAwesomeIcon icon={faStop} />

결과

Font Awesome을 이용하여 시작, 정지, 리셋 버튼에 아이콘을 추가해주었다.

CSS로 타이머를 배치와 약간의 애니메이션 효과를 주었다.

body {
  padding: 0;
  margin: 0;
}

.timer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
  width: 100%;
}

.timer {
  font-size: 60px;
  margin-bottom: 30px;
}

.timer-form__Btn {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 25px;
}
.timerBtn {
  height: 30px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timerBtn i {
  font-size: 22px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.timerBtn i:active,
.timerBtn i:hover {
  font-size: 30px;
}