CoreToast

useToast 훅으로 호출하는 명령형 토스트 알림 컴포넌트. Toast로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Toast를 사용하세요.

CoreToast는 CoreToastProvider와 useToast 훅으로 구성되는 명령형 토스트 시스템입니다. 컴포넌트 트리 어디서든 showToast()를 호출해 토스트를 띄웁니다.

4가지 status — neutral, informative, success, error
isPermanent — false면 6초 후 자동 닫힘, true면 사용자가 직접 닫아야 함
actionButtonProps — 토스트에 액션 버튼 추가
description — 제목 아래 본문 텍스트
CorePortal을 통해 #toast-container에 마운트

Usage

기본 설정

CoreToastProvider를 앱 최상단에 배치해야 useToast를 사용할 수 있습니다.

// app.tsx / layout.tsx
import { CoreToastProvider } from '@featuring-corp/components';

function App() {
  return (
    <CoreToastProvider>
      {/* 앱 콘텐츠 */}
    </CoreToastProvider>
  );
}

기본 사용법

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

function MyComponent() {
  const { showToast } = useToast();

  return (
    <button onClick={() => showToast({ status: 'neutral', title: '알림 메시지입니다.' })}>
      토스트 열기
    </button>
  );
}

Description 포함

const { showToast } = useToast();

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

다양한 Status

const { showToast } = useToast();

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

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

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

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

자동 닫힘 / 영구 표시

const { showToast } = useToast();

// 6초 후 자동 닫힘 (기본값)
showToast({ status: 'success', title: '저장됨', isPermanent: false });

// 사용자가 직접 닫아야 함
showToast({ status: 'error', title: '연결 오류', isPermanent: true });

Action Button 포함

const { showToast } = useToast();

showToast({
  status: 'neutral',
  title: '파일이 삭제되었습니다.',
  actionButtonProps: {
    text: '실행 취소',
    onClick: () => {
      restoreFile();
    },
  },
  isPermanent: true,
});

Props

showToast 파라미터

Prop

Type

ToastStatus

Prop

Type

CoreActionButtonProps

Prop

Type

스타일

Toast 기본 스타일

position: fixed, top: 72px, right: 20px, width: 320px
padding: spacing-200 (8px) spacing-300 (12px)
border-radius: radius-100, color: white, z-index: 10000

Status 색상

Status	background-color
`neutral`	`black`
`informative`	`blue-70`
`success`	`green-60`
`error`	`red-60`

Animation

조건	Animation
`isPermanent: false`	`moveLeftRight 6s`
`isPermanent: true`	`moveLeft 0.25s`
닫힘	`moveRight 0.25s`

마이그레이션 가이드

CoreToastProvider + useToast에서 Toast로 이전하세요.

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

// Provider 설정
<CoreToastProvider>{children}</CoreToastProvider>

// 사용
const { showToast } = useToast();
showToast({ status: 'success', title: '저장됨', description: '변경사항이 저장되었습니다.', isPermanent: false });

// After
import { Toast, useToastManager } from '@featuring-corp/components';

// Provider 설정
<Toast.Provider>
  {children}
  <Toast.Viewport />
</Toast.Provider>

// 사용
const { add } = useToastManager();
add({ status: 'success', title: '저장됨', description: '변경사항이 저장되었습니다.' });

CoreToast prop	Toast 대응
`status`	`status`
`title`	`title`
`description`	`description`
`isPermanent: false`	`timeout: 5000` (기본값)
`isPermanent: true`	`timeout: Infinity`
`actionButtonProps`	`Toast.Action` 서브컴포넌트

On this page