[Notiflix / CSS] 라이브러리 스타일 커스텀하기

중간발표까지 주요 기능들을 구현하기위해 토스트 알림은 라이브러리를 사용하기로 했다.

여러가지 후보들을 두고 디자이너님과도 상의를 거쳤고, 빠른 구현이 목적이니만큼 커스텀에 공을 들이지 않아도 디자인 요구사항과 가장 유사한 Notiflix를 선택하게 되었다.

 

https://notiflix.github.io/notify

Notify | Notiflix

 

기존에 react-tostify만 사용해보았는데 찾아보니 다양한 라이브러리가 있고, Notiflix가 내 기준에서는 디자인도 마음에들고..ㅎㅎㅎ 글로벌 스타일 혹은 페이지별 스타일을 정의해두고 호출까지의 과정이 직관적이라고 느껴졌다.

 

 

기본적인 사용법

간단하게 정리해보자면 사용할 옵션들을 그 옵션을 적용하기위해 호출되는 컴포넌트에서 초기화시켜주면 된다.

나는 어떤 경로로 접근하더라도 반드시 포함되고있는 navigation.tsx에서 설정해주었는데, 추후 레이아웃을 분리할 예정이라 다른 곳에서도 공통적인 옵션을 적용하기위해 contants 폴더에 따로 초기값을 저장해두었다.

// constant 폴더에 선언해둠
import { INotifyOptions } from 'notiflix';

export const NOTIFLIX_INIT_VALUES: INotifyOptions = {
  backOverlay: false,
  useIcon: false,
  borderRadius: '20px',
  position: 'center-bottom',
  distance: '50px',
  cssAnimationDuration: 200,
  fontFamily: 'Main',
  fontSize: '16px',
  success: {
    background: 'rgba(64, 64, 64, 0.8)',
  },
};

// 옵션을 적용할 곳에서 초기화
useEffect(() => {
  Notify.init(NOTIFLIX_INIT_VALUES);
}, []);

 

 

스타일 커스텀

설정할 수 있는 옵션들은 문서에 자세히 나와있는데, 열심히 찾아봤지만 텍스트를 가운데 정렬하고, 메세지에따라 길이 조정이 되는 옵션이 보이지 않았다.

현재 프로젝트가 모바일퍼스트로 진행되고있어 우측 상단에 토스트 메세지가 보이고, 텍스트가 좌측에서부터 작성돼있는 모습은 많이 어색했고, 프로그래머로서 디자이너님과의 협업은 처음이었기에 최대한 완성도를 높이고싶었다.

튜터님께서 토스트 메세지가 뜰 때 생성되는 요소에 스타일이 어떻게 적용돼있는지 확인해보라고 조언을 주셨고, 개발자도구로 토스트를 확인해 적용돼있는 아이디를 확인했다.

 

div#NotiflixNotifyWrap {
  display: flex;
  flex-direction: column;
}

div#NotiflixNotifyWrap div {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 12px;
  padding-left: 12px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

 

div#NotifiixNotifyWrap 하위로 생성된 순서에따라 다른 이름이 붙는 구조였다.

동시에 여러 메세지가 뜰 때 기본적으로 가로 정렬이 설정되어있어 flex-direction: column을 설정해주었다.

또 디자이너님이 피그마에 만들어주신 패딩을 적용하고, 글자수에 따라 길이가 조정되게 하기위해 width: fit-content, 길이가 달라지더라도 화면의 가운데에 위치하도록 margin-left, margin-right: auto, 텍스트가 가운데정렬되도록 text-align: center를 설정해주었다.

 

완성!!

한번 설정해두고 여기저기 간편하게 잘 사용하고있다 bbbb