Toast

토스트 컴포넌트는 사용자에게 알림 메시지를 표시합니다.

기본 사용법

import { ToastProvider, useToast } from '@aift/ui/Toast';
import { Button } from '@aift/ui/Button';

function ToastExample() {
  const { enqueueToast } = useToast();

  return (
    <Button
      variant="outlined"
      onClick={() =>
        enqueueToast({
          title: '알림',
          description: '메시지',
          actionLabel: '확인',
        })
      }
    >
      토스트 표시
    </Button>
  );
}

export default function Preview() {
  return (
    <ToastProvider position="top-center">
      <div className="p-4">
        <ToastExample />
      </div>
    </ToastProvider>
  );
}

import { ToastProvider, useToast } from '@aift/ui/Toast';import { Button } from '@aift/ui/Button';function ToastExample() {  const { enqueueToast } = useToast();  return (    <Button      variant="outlined"      onClick={() =>        enqueueToast({          title: '알림',          description: '메시지',          actionLabel: '확인',        })      }    >      토스트 표시    </Button>  );}export default function Preview() {  return (    <ToastProvider position="top-center">      <div className="p-4">        <ToastExample />      </div>    </ToastProvider>  );}

Status

'use client';

import { ToastProvider, useToast } from '@aift/ui/Toast';
import { Button } from '@aift/ui/Button';

function ToastStatusExampleContent() {
  const { enqueueToast } = useToast();

  return (
    <div className="flex flex-col space-y-4 gap-4">
      <div>
        <Button
          variant="outlined"
          onClick={() => enqueueToast({ status: 'positive', title: '알림', description: '메시지', actionLabel: '확인' })}
        >
          Positive
        </Button>
      </div>
      <div>
        <Button
          variant="outlined"
          onClick={() => enqueueToast({ status: 'cautionary', title: '알림', description: '메시지', actionLabel: '확인' })}
        >
          Cautionary
        </Button>
      </div>
      <div>
        <Button
          variant="outlined"
          onClick={() => enqueueToast({ status: 'destructive', title: '알림', description: '메시지', actionLabel: '확인' })}
        >
          Destructive
        </Button>
      </div>
      <div>
        <Button
          variant="outlined"
          onClick={() => enqueueToast({ status: 'info', title: '알림', description: '메시지', actionLabel: '확인' })}
        >
          Info
        </Button>
      </div>
    </div>
  );
}

export default function ToastStatusExample() {

  return (
    <ToastProvider>
      <ToastStatusExampleContent />
    </ToastProvider>
  );
}

'use client';import { ToastProvider, useToast } from '@aift/ui/Toast';import { Button } from '@aift/ui/Button';function ToastStatusExampleContent() {  const { enqueueToast } = useToast();  return (    <div className="flex flex-col space-y-4 gap-4">      <div>        <Button          variant="outlined"          onClick={() => enqueueToast({ status: 'positive', title: '알림', description: '메시지', actionLabel: '확인' })}        >          Positive        </Button>      </div>      <div>        <Button          variant="outlined"          onClick={() => enqueueToast({ status: 'cautionary', title: '알림', description: '메시지', actionLabel: '확인' })}        >          Cautionary        </Button>      </div>      <div>        <Button          variant="outlined"          onClick={() => enqueueToast({ status: 'destructive', title: '알림', description: '메시지', actionLabel: '확인' })}        >          Destructive        </Button>      </div>      <div>        <Button          variant="outlined"          onClick={() => enqueueToast({ status: 'info', title: '알림', description: '메시지', actionLabel: '확인' })}        >          Info        </Button>      </div>    </div>  );}export default function ToastStatusExample() {  return (    <ToastProvider>      <ToastStatusExampleContent />    </ToastProvider>  );}

Position

ToastProvider의 position으로 기본 위치를 설정하고, enqueueToast 호출 시 position으로 개별 오버라이드할 수 있습니다.

'use client';

import { ToastPosition, ToastProvider, useToast } from '@aift/ui/Toast';
import { Button } from '@aift/ui/Button';

const positions: ToastPosition[] = [
  'top-left',
  'top-center',
  'top-right',
  'bottom-left',
  'bottom-center',
  'bottom-right',
];

function ToastPositionExampleContent() {
  const { enqueueToast } = useToast();

  return (
    <div className="flex flex-wrap gap-2">
      {positions.map((position) => (
        <Button
          key={position}
          variant="outlined"
          onClick={() =>
            enqueueToast({
              title: '알림',
              description: `${position} 위치`,
              position,
            })
          }
        >
          {position}
        </Button>
      ))}
    </div>
  );
}

export default function ToastPositionExample() {
  return (
    <ToastProvider position="bottom-right">
      <ToastPositionExampleContent />
    </ToastProvider>
  );
}

'use client';import { ToastPosition, ToastProvider, useToast } from '@aift/ui/Toast';import { Button } from '@aift/ui/Button';const positions: ToastPosition[] = [  'top-left',  'top-center',  'top-right',  'bottom-left',  'bottom-center',  'bottom-right',];function ToastPositionExampleContent() {  const { enqueueToast } = useToast();  return (    <div className="flex flex-wrap gap-2">      {positions.map((position) => (        <Button          key={position}          variant="outlined"          onClick={() =>            enqueueToast({              title: '알림',              description: `${position} 위치`,              position,            })          }        >          {position}        </Button>      ))}    </div>  );}export default function ToastPositionExample() {  return (    <ToastProvider position="bottom-right">      <ToastPositionExampleContent />    </ToastProvider>  );}

// Provider 기본 위치
<ToastProvider position="top-center">
  {children}
</ToastProvider>

// 개별 토스트 위치 오버라이드
enqueueToast({
  title: '저장 완료',
  position: 'top-right',
});

Props

Toast 컴포넌트는 Radix UI의 Toast를 기반으로 하며, useToast 훅을 통해 사용합니다.

ToastProvider: 토스트 컨텍스트 제공자 (position 기본값: bottom-right)
useToast: 토스트를 표시하는 훅
position: top-left | top-center | top-right | bottom-left | bottom-center | bottom-right

Toast

Toast

기본 사용법

Status

Position

Props

On this page