Featuring Design System
Legacy

CoreToast

토스트 컴포넌트

Usage

기본 사용법 (Title만)

import { useToast } from '@featuring-corp/components';

const { showToast } = useToast();

showToast({
  status: 'neutral',
  title: '내용을 입력해 주세요.',
  isPermanent: true
});

Description 포함

import { useToast } from '@featuring-corp/components';

const { showToast } = useToast();

showToast({
  status: 'neutral',
  title: '내용을 입력해 주세요.',
  description: '설명이 들어갑니다.',
  isPermanent: true
});

Action Button 포함

import { useToast } from '@featuring-corp/components';

const { showToast } = useToast();

showToast({
  status: 'neutral',
  title: '내용을 입력해 주세요.',
  actionButtonProps: {
    text: 'Action',
    onClick: () => {
      console.log('action');
    },
  },
  isPermanent: true
});

모든 기능 조합

import { useToast } from '@featuring-corp/components';

const { showToast } = useToast();

showToast({
  status: 'neutral',
  title: '내용을 입력해 주세요.',
  description: '설명이 들어갑니다.',
  actionButtonProps: {
    text: 'Action',
    onClick: () => {
      console.log('action');
    },
  },
  isPermanent: true
});

다양한 Status

import { useToast } from '@featuring-corp/components';

const { showToast } = useToast();

// Neutral
showToast({
  status: 'neutral',
  title: '알림',
  description: '중립적인 메시지입니다.',
  isPermanent: true
});

// Informative
showToast({
  status: 'informative',
  title: '정보',
  description: '정보 메시지입니다.',
  isPermanent: true
});

// Success
showToast({
  status: 'success',
  title: '성공',
  description: '작업이 완료되었습니다.',
  isPermanent: true
});

// Error
showToast({
  status: 'error',
  title: '에러',
  description: '에러가 발생했습니다.',
  isPermanent: true
});

임시 표시 (자동 닫힘)

import { useToast } from '@featuring-corp/components';

const { showToast } = useToast();

showToast({
  status: 'success',
  title: '성공',
  description: '작업이 완료되었습니다.',
  isPermanent: false  // 자동으로 닫힘
});

영구 표시 (수동 닫기)

import { useToast } from '@featuring-corp/components';

const { showToast } = useToast();

showToast({
  status: 'success',
  title: '성공',
  description: '작업이 완료되었습니다.',
  isPermanent: true  // 사용자가 직접 닫아야 함
});

Props

showToast 함수

Prop

Type

ToastStatus

Prop

Type

ActionButtonProps

Prop

Type

스타일

기본 스타일 속성

Toast Base:

  • display: flex
  • justify-content: space-between
  • align-items: flex-start
  • gap: spacing-200 (8px)
  • padding-x: spacing-300 (12px)
  • padding-y: spacing-200 (8px)
  • border-radius: radius-100
  • position: fixed
  • z-index: 10000
  • top: 72px
  • right: 20px
  • width: 320px
  • color: white
  • animation: moveLeftRight 6s (기본), moveLeft 0.25s (isPermanent: on), moveRight 0.25s (is-hide 클래스)

Status Variants (상태별 토큰):

  • Neutral: background-color: black
  • Informative: background-color: blue-70
  • Success: background-color: green-60
  • Error: background-color: red-60

Left Area:

  • display: flex
  • justify-content: flex-start
  • align-items: flex-start
  • gap: spacing-200 (8px)

Right Area:

  • display: flex
  • justify-content: center
  • height: 24px
  • flex: 0 0 auto

Text Wrapper:

  • display: grid
  • flex: 1
  • gap: spacing-100 (4px)

Title:

  • typography: heading[2]

Description:

  • typography: body[1]

Leading Element:

  • width: 16px
  • height: 24px

Icon Wrapper:

  • width: 16px
  • height: 16px

Button:

  • display: flex
  • typography: heading[1]
  • margin-x: spacing-250 (10px)
  • height: 24px
  • flex: 0 0 auto