9-9. react-toastify 를 통한 알림

포스트를 작성 했을 때, 혹은 텍스트의 길이가 너무 짧아 포스팅을 하지 못하게 될 때 사용자가 알림을 받을 수 있도록 react-toastify 라는 라이브러리를 사용하여 알림 시스템을 구현해보도록 하겠습니다.

먼저 이 라이브러리를 설치하세요.

$ yarn add react-toastify

이 라이브러리를 적용 할 때는 먼저 App 컴포넌트에서 ToastContainer 라는 컴포넌트를 렌더링 해주어야합니다. 그러면, 나중에 toast 라는 함수를 실행 하게 됐을 때 이 컴포넌트를 통해서 알림을 렌더링해줍니다.

기본적으로는, 알림의 하단에 프로그레스바가 나타나는데, 이 모양이 WriteContainer 와 매우 유사해서 보기 좋지 않으므로 비활성화를 하고, 다른 컴포넌트에 가려지지 않도록 스타일의 z-index 값을 20으로 설정하겠습니다.

그리고 위치는 우측 하단으로 설정하겠습니다.

src/App.js

(...)

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.min.css' 

class App extends Component {

    (...)

    render() {
        return (
            <div>
                <HeaderContainer/>
                <Route exact path="/" component={Home}/>
                <Route path="/auth" component={Auth}/>
                <ToastContainer style={{zIndex: 20}} hideProgressBar={true} position="bottom-right"/>
            </div>
        );
    }
}

(...)

이제, 총 4가지의 알림을 유저에게 보여주도록 하겠습니다.

1. 텍스트가 5자 미만일때
2. 텍스트가 1000자 이상일때
3. 포스트 작성 성공 했을 때
4. 포스트 작성 실패 했을 때

src/containers/Home/WritePostContainer.js

(...)

import { toast } from 'react-toastify';

(...)

    handlePost = async () => {
        // 게이지가 다 차면 실행되는 메소드
        const { HomeActions, value } = this.props;

        // 알림에서 보여줄 DOM
        const message = (message) => (<div style={{fontSize: '1.1rem'}}>{message}</div>);

        // 사전 오류 핸들링
        if(value.length < 5) {
            HomeActions.changeWritePostInput('');
            return toast(message('너무 짧습니다. 5자 이상 입력하세요.'), { type: 'error' });
        }

        if(value.length > 1000) {
            HomeActions.changeWritePostInput('');
            return toast(message('최대 1000자까지 입력 할 수 있습니다.'), { type: 'error' });
        }

        try {
            await HomeActions.writePost(value);
            toast(message('생각이 작성되었습니다.'), { type: 'success' })
        } catch (e) {
            toast(message('오류가 발생했습니다.'), { type: 'error' })
        }
    }

(...)

이제 포스트 작성 부분은 거의 마쳤습니다! 9장을 마무리 하기전에, 기능 한가지만 더 구현을 하겠습니다. 우리가 만드는 서비스는 생각의 흐름대로 글을 쓰도록 하는게 포인트인데, 만약에 유저가 복사 붙이기를 하게 된다면 서비스의 특성이 무의미해지겠죠?

그래서, 붙여넣기 기능을 막아보도록 하겠습니다.

이는 매우 간단합니다.

WritePost 의 StyledTextarea 에 onPaste 값에 이벤트를 무시하도록 하는 코드를 입력하면 됩니다.

src/components/Home/WritePost.js - render - StyledTextarea

        <StyledTextarea
            minRows={3} 
            maxRows={10} 
            placeholder={`의식의 흐름대로 당신의 생각을 적어보세요.\n5초이상 아무것도 입력하지 않으면 자동으로 포스팅됩니다.`}
            value={value}
            onChange={onChange}
            onPaste={e=>e.preventDefault()}
        />

코드를 저장하고 한번 복사 붙여넣기를 해보세요 잘 막혔나요?