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:flexjustify-content:space-betweenalign-items:flex-startgap:spacing-200(8px)padding-x:spacing-300(12px)padding-y:spacing-200(8px)border-radius:radius-100position:fixedz-index:10000top:72pxright:20pxwidth:320pxcolor:whiteanimation: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:flexjustify-content:flex-startalign-items:flex-startgap:spacing-200(8px)
Right Area:
display:flexjustify-content:centerheight:24pxflex:0 0 auto
Text Wrapper:
display:gridflex:1gap:spacing-100(4px)
Title:
typography:heading[2]
Description:
typography:body[1]
Leading Element:
width:16pxheight:24px
Icon Wrapper:
width:16pxheight:16px
Button:
display:flextypography:heading[1]margin-x:spacing-250(10px)height:24pxflex:0 0 auto