[React, Next.js] 리액트의 여러 알림 라이브러리, 그 중 Sonner 라이브러리로 코드 구현하기.

 

 

해당 페이지 사용에 몇 가지 규칙이 있다.
그 규칙을 어겼을 때, 사용자에게 알리고 싶다.
리액트에 사용할 수 있는 라이브러리 중 하나를 선택해
사용자에게 규칙을 알려보자!

 

 

 

 

 

 

https://lotto-magic-frontend.vercel.app/

로또 번호 생성 마법진

 

 

 

 

 

 

1. 화면

 

 

 

 

 

 

---

 

 

 

 

 

2. 다양한 알림 라이브러리

• React-toastify
  : 가장 인기 있는 라이브러리이다. React 애플리케이션에서 토스트 메시지를 쉽게 구현할 수 있게 해주는 라이브러리이다. 기능이 많고 안정적이다. 기본 스타일이 있어서 커스텀이 많이 필요하지 않을 때 편리하다.
  
  
• Sweetalert2
  : 기존의 alert 창보다 다양한 디자인과 색감으로 만들어진 alert 창이다. 한 종류만 있지 않고 alert, confirm, prompt 입력창 역시 지원하며 여러 주제에 따른 다양한 알람창을 따로 css 작업없이 고퀄리티의 애니메이션 창을 구현할 수 있다. 사용자에게 확인/취소가 필요한 모달을 사용해야할 때 편리하다. 가벼운 안내보다는 조금 무거운 느낌이 있다.
  
  
• Sonner
  : React의 선언적 구조에 최적화된 토스트이다. 가벼우며 Framer Motion 스타일로 부드러운 애니메이션을 구현한다. Promise 처리로 로직을 작성하기 매우 간편하다. headless 모드를 지원하여 개발자가 원하는 대로 디자인하기가 매우 쉽다. Tailwind CSS와 궁합이 좋은 편이다. 
  
  
• 그 중 Sonner를 선택했다. 일단 제일 큰 이유는 내가 원하는 모습 그대로 CSS를 구현할 수 있다는 점이 가장 컸다. 조촐하긴 해도 나름 '마법'에 관련한 페이지라서(?) 일정한 테마를 원했다. 또 이 프로젝트의 로직은 사용자와 상호작용 없이 번호만 보여주면 되기 때문에 아주 가볍게 동작할 수 있는 Sonner가 알맞다고 느꼈다. 꼭 Sonner를 사용할 필요 없이, 본인 프로젝트에 맞는 라이브러리를 사용하면 될 것 같다. 관련 링크는 아래에 첨부하겠다.

 

 

- React-toastify

React에서 react-toastify로 효과적인 알림 구현하기

 

 

-SweetAlert2

🎨 SweetAlert2 - 이쁜 alert 모달창 설치 & 사용법

 

 

- React에 적용하기 좋은 라이브러리 모음

[번역] 프로젝트를 강화할 수 있는 17개 React 라이브러리

 

 

 

 

---

 

 

 

 

3. Sonner

• Sonner 라이브러리 설치

npm install sonner

 

 

• 토스트 만들 파일 만들기
  내경로: components/common/MagicToast.tsx

 

 

• 토스트 코드 작성하기
  1) 전체 코드

'use client';

import { Toaster, toast } from 'sonner';

type MagicToastOptions = {
    duration?: number;
};

export function showMagicToast(
    message: string,
    options?: MagicToastOptions
) {
    toast.custom(
        (toastId) => (
            <button
                type="button"
                onClick={() => toast.dismiss(toastId)}
                style={{
                    width: 'min(286px, calc(100vw - 48px))',
                    minHeight: '52px',
                    padding: '14px 22px',
                    transform: 'translateX(12.5%)',
                    border: 'none',
                    borderRadius: '28px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    textAlign: 'center',
                    cursor: 'pointer',
                    background:
                        'linear-gradient(90deg, rgba(181, 162, 242, 0.96) 0%, rgba(193, 232, 252, 0.96) 100%)',
                    color: '#111111',
                    fontSize: 'clamp(0.88rem, 3.6vw, 1.08rem)',
                    fontWeight: 700,
                    lineHeight: 1.25,
                    fontFamily: 'OngleipParkDahyeon, sans-serif !important',
                    boxShadow:
                        '0 16px 38px rgba(134, 104, 214, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55)',
                    backdropFilter: 'blur(6px)',
                }}
            >
                {message}
            </button>
        ),
        {
            duration: options?.duration ?? 1700,
            position: 'top-center',
        }
    );
}

export function MagicToaster() {
    return (
        <Toaster
            position="top-center"
            duration={1900}
            visibleToasts={2}
            gap={14}
            offset={70}
        />
    );
}

 

 

       2) 설명 포함된 코드

'use client';

import { Toaster, toast } from 'sonner';

// showMagicToast 함수에 추가로 넣을 수 있는 옵션의 모양을 정해뒀다.
type MagicToastOptions = {
    // 현재 옵션은 하나만 설정했다.
    // ?을 붙여서 duration은 선택값으로 있어도 되고 없어도 된다는 의미이다.
    // showMagicToast('요소를 3개 이상 선택해주세요.', {duration: 3000,});
    // 만약 특정 토스트만 3000으로 설정하면 3초가 보이도록 하는 것이다.
    // 설정하지 않으면 아래 설정한 값으로 보인다.(1.7초)
    duration?: number;
};

// 다른 컴포너틑에서 사용할 수 있도록 export 했다.
export function showMagicToast(
    // showMagicToast 함수가 받을 값들을 정하는 부분이다.
    // showMagicToast(1_message, 2_MagicToastOption)이 된다.
    message: string,
    options?: MagicToastOptions
) {
    toast.custom(
        (toastId) => (
            <button
                type="button"
                onClick={() => toast.dismiss(toastId)}
                style={{
                    width: 'min(286px, calc(100vw - 48px))',
                    minHeight: '52px',
                    padding: '14px 22px',
                    transform: 'translateX(12.5%)',
                    border: 'none',
                    borderRadius: '28px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    textAlign: 'center',
                    cursor: 'pointer',
                    background:
                        'linear-gradient(90deg, rgba(181, 162, 242, 0.96) 0%, rgba(193, 232, 252, 0.96) 100%)',
                    color: '#111111',
                    fontSize: 'clamp(0.88rem, 3.6vw, 1.08rem)',
                    fontWeight: 700,
                    lineHeight: 1.25,
                    fontFamily: 'OngleipParkDahyeon, sans-serif !important',
                    boxShadow:
                        '0 16px 38px rgba(134, 104, 214, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55)',
                    backdropFilter: 'blur(6px)',
                }}
            >
                {/* 전달받은 message를 토스트 안에 표시한다. */}
                {message}
            </button>
        ),
        {
            // 토스트가 자동으로 사라지기까지의 시간이다.(1.7초)
            // options 안에 duration이 있으면 그 값을 사용하고
            // 없으면 1700ms를 사용한다.
            duration: options?.duration ?? 1700,
            position: 'top-center',
        }
    );
}

// MagicToaster는 실제 토스트가 렌더링 될 공간을 만드는 컴포넌트이다.
// Next.js의 경우 layout.tsx에 넣어 앱 전체에서 한 번만 렌더링하면 된다.
export function MagicToaster() {
    return (
        <Toaster
            position="top-center"
            duration={1700}
            // 동시에 보일 수 있는 토스트 화면 개수
            // 예를 들어 사용자가 버튼을 연속으로 클릭해도
            // 토스트가 2개 이상으로 보이지 않게 막았다.
            visibleToasts={2}
            // 토스트가 여러개 보일 때 둘 사이의 간격이다.
            gap={14}
            // 화면에서 얼마나 떨어뜨릴지 설정했다.
            // top-center를 미리 설정했으니 맨 위에서 70px 아래로 표시된다.
            offset={70}
        />
    );
}

 

 

 

 

---

 

 

 

 

4. showMagicToast 코드에 적용하기

• 요소를 3개 이상 선택했을 때

        if (selectedOptions.length >= 3) {
            showMagicToast('요소는 3개까지만 선택할 수 있어요.');
            return;
        }

MagicToast.tsx에서 message: string, options?: MagicToastOptions 이 코드를 정의했다. 설명으로 showMagicToast(1_message, 2_MagicToastOption)가 되고 여기서 두번째에 duration: 3000과 같은 입력을 하지 않으면 기본값 1700이 된다고 했다. 

다시 코드를 살펴보자. 메시지만 적었다. 그러면 해당 메시지는 기본값인 1.7초 동안 보이고 사라진다.

 

        if (selectedOptions.length >= 3) {
            showMagicToast('요소를 3개 이상 선택해주세요.', {duration: 3000,});
            return;
        }

여기서는 메시지와 duration을 함께 보냈다. 그러면 해당 메시지는 따로 설정한 3초 동안 보이고 사라질 것이다. 이런식으로 토스트의 메시지와 보여줄 시간을 입력하여 사용하면 된다. 

 

 

 

 

---

 

 

 

 

4. layout.tsx

// MagicToaster는 실제 토스트가 렌더링 될 공간을 만드는 컴포넌트이다.
// Next.js의 경우 layout.tsx에 넣어 앱 전체에서 한 번만 렌더링하면 된다.
export function MagicToaster() {
    return (
		...
        />
    );
}

return (
        <html lang="ko">
        <body className={`${geistSans.variable} ${geistMono.variable}`}>
        <MswProvider>
            <QueryProvider>
                {children}
            </QueryProvider>
            
            <MagicToaster />
        </MswProvider>
        </body>
        </html>
    );
}

MagicToast.tsx에 마지막 부분을 보면 MagicToaster 컴포넌트를 작성했다. MagicToaster는 토스트 메시지를 직접 띄우는 코드가 아니라, 토스트가 화면에 나타날 수 있도록 준비해주는 출력 공간이다. 그래서 앱 전체에 토스트를 사용할 수 있도록 layout.tsx의 children 아래에<MagicToaster/>를 넣었다.

다른 라이브러리인 MswProvider와 같이 {children}을 감싼 형태가 아닌 이유는, MagicToaster가 children에게 기능을 제공하는 provider 역할을 하지 않기 때문이다. 토스트는 단순히 알림이 뜰 수 있는 공간만 설치하면 된다. 그래서 굳이 children을 감쌀 필요가 없다.

토스트는 특정 페이지의 일부라기보다는 앱 전체에 떠다니는 전역 알림이다. 이 알림은 페이지 안쪽 박스에 들어가는 게 아니라 화면 상단에 둥실 떠야한다. 그래서 특정 페이지 컴포넌트 안에 넣기보다 layout.tsx에 전역으로 한 번 넣는게 좋다.