Toast 재사용 - ssseok/wedding.invitation GitHub Wiki

목적

다른 Component에서도 복사하기를 많이 사용하여 lib폴더에 copy.tsx를 만들어서 재사용하기 쉽게 만들었습니다.

설치

bun add react-hot-toast

import { Toaster } from 'react-hot-toast';

export default function HotToast() {
  return (
    <Toaster
      toastOptions={{
        style: {
          fontSize: '14px',
          backdropFilter: 'blur(16px)',
          filter: 'drop-shadow(rgba(0, 0, 0, 0.1) 0px 2px 10px)',
          background: 'rgba(255, 255, 255, 0.9)',
        },
        position: 'top-center',
      }}
    />
  );
}

toast를 커스텀해서 만들어 src 최상위 루트 main.tsx에 넣었습니다.

코드

import { toast } from 'react-hot-toast';

export const copy = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
    toast(() => (
      <div className='min-w-[200px]'>
        <p className='text-sm'>
          <b>복사완료</b>
        </p>
        <p className='text-xs'>{text}</p>
      </div>
    ));
  } catch (e) {
    alert('클립보드 복사에 실패했습니다.');
  }
};

⚠️ GitHub.com Fallback ⚠️