Podo UI

Podo UI

토스트

토스트 알림 컴포넌트

기본 사용법

토스트는 .toast 클래스를 사용하여 만들 수 있습니다. 아이콘, 헤더, 본문, 닫기 버튼을 포함할 수 있습니다.

실제 예제:
Header
Lorem ipsum dolor sit amet
HTML
<div class="toast">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-header">Header</div>
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="닫기"></button>
</div>

스타일 속성

토스트는 border와 long 속성을 조합하여 다양한 스타일을 제공합니다:

Border 속성

  • border=false (기본): 4px 두꺼운 강조 색상 테두리
  • border=true (.border): 1px 전체 외곽선만 (강조 색상 테두리 없음)

Long 속성

  • long=false (기본): 세로 레이아웃, border=false일 때 상단에 4px 강조 테두리
  • long=true (.long): 가로 레이아웃, border=false일 때 왼쪽에 4px 강조 테두리

border=false - 강조 색상 테두리

기본 스타일은 상단에 4px 두꺼운 강조 색상 테두리가 표시됩니다.

실제 예제:
Header
Lorem ipsum dolor sit amet
HTML
<!-- border=false (4px 강조 색상 테두리) -->
<div class="toast info">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-header">Header</div>
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="닫기"></button>
</div>

border=true - 전체 외곽선

.border 클래스를 추가하면 1px 전체 외곽선만 표시됩니다 (강조 색상 테두리 없음).

실제 예제:
Header
Lorem ipsum dolor sit amet
HTML
<!-- border=true (1px 전체 외곽선만) -->
<div class="toast border info">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-header">Header</div>
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="닫기"></button>
</div>

Long 스타일

.long 클래스를 추가하면 가로 레이아웃으로 변경되며, 테두리 위치가 상단에서 왼쪽으로 바뀝니다. 좁은 공간에 토스트를 표시할 때 유용합니다.

long=true, border=false

왼쪽에 4px 두꺼운 강조 색상 테두리가 표시됩니다.

실제 예제:
Lorem ipsum dolor sit amet
HTML
<!-- long=true, border=false (왼쪽에 4px 강조 테두리) -->
<div class="toast long info">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="닫기"></button>
</div>

long=true, border=true

1px 전체 외곽선만 표시됩니다 (강조 색상 테두리 없음).

실제 예제:
파일이 성공적으로 업로드되었습니다
HTML
<!-- long=true, border=true (1px 전체 외곽선만) -->
<div class="toast long border success">
  <i class="icon-check"></i>
  <div class="toast-content">
    <div class="toast-body">파일이 성공적으로 업로드되었습니다</div>
  </div>
  <button aria-label="닫기"></button>
</div>

색상 변형

6가지 색상 변형을 사용하여 다양한 메시지를 전달할 수 있습니다:

Default

기본 알림

Default
border=false (4px 강조 테두리)
Default
border=true (1px 외곽선)
long=true, border=false
long=true, border=true

Primary

주요 알림

Primary
border=false (4px 강조 테두리)
Primary
border=true (1px 외곽선)
long=true, border=false
long=true, border=true

Info

정보성 알림

Info
border=false (4px 강조 테두리)
Info
border=true (1px 외곽선)
long=true, border=false
long=true, border=true

Success

성공 알림

Success
border=false (4px 강조 테두리)
Success
border=true (1px 외곽선)
long=true, border=false
long=true, border=true

Warning

경고 알림

Warning
border=false (4px 강조 테두리)
Warning
border=true (1px 외곽선)
long=true, border=false
long=true, border=true

Danger

위험 알림

Danger
border=false (4px 강조 테두리)
Danger
border=true (1px 외곽선)
long=true, border=false
long=true, border=true
HTML
<!-- Default -->
<div class="toast default">...</div>

<!-- Info -->
<div class="toast info">...</div>

<!-- Success -->
<div class="toast success">...</div>

<!-- Warning -->
<div class="toast warning">...</div>

<!-- Danger -->
<div class="toast danger">...</div>

조합 예제

.long 클래스를 추가하면 가로 레이아웃으로 변경되며 한 줄로 표시됩니다. 좁은 공간에 토스트를 표시할 때 유용합니다.

실제 예제:
Lorem ipsum dolor sit amet
파일이 성공적으로 업로드되었습니다
HTML
<div class="toast long info">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="닫기"></button>
</div>

<!-- Long + Border -->
<div class="toast long border success">
  <i class="icon-check"></i>
  <div class="toast-content">
    <div class="toast-body">파일이 성공적으로 업로드되었습니다</div>
  </div>
  <button aria-label="닫기"></button>
</div>

간단한 메시지

헤더 없이 본문만 표시할 수도 있습니다:

실제 예제:
Lorem ipsum dolor sit amet
파일이 성공적으로 업로드되었습니다
HTML
<div class="toast info">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="닫기"></button>
</div>

React 컴포넌트 예제

버튼을 클릭하여 다양한 Toast 스타일을 확인해보세요:

React에서 사용하기

React 애플리케이션에서 Toast 컴포넌트를 사용할 수 있습니다.

1. ToastProvider 설정

먼저 애플리케이션의 최상위에 ToastProvider를 추가합니다:

app/layout.tsx
import { ToastProvider } from 'podo-ui';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ToastProvider>
          {children}
        </ToastProvider>
      </body>
    </html>
  );
}

2. useToast Hook 사용

컴포넌트에서 useToast hook을 사용하여 토스트를 표시합니다:

component.tsx
import { useToast } from 'podo-ui';

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

  const handleClick = () => {
    showToast({
      message: '저장되었습니다!',
      header: 'Success',
      theme: 'success',
      border: false,
      position: 'top-right',
      duration: 3000,
    });
  };

  return <button onClick={handleClick}>저장</button>;
}

3. Toast 옵션

TypeScript
interface ToastOptions {
  message: string;           // 필수: 토스트 메시지
  header?: string;           // 선택: 헤더 텍스트 (long일 때는 표시 안됨)
  theme?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
  border?: boolean;          // true: 1px 전체 외곽선, false: 4px 강조 테두리 (기본)
  long?: boolean;            // true: 가로 레이아웃
  duration?: number;         // 자동 닫힘 시간(ms), 0이면 자동으로 닫히지 않음
  width?: string | number;   // 너비 (기본: auto)
  position?: 'top-left' | 'top-center' | 'top-right'
           | 'center-left' | 'center' | 'center-right'
           | 'bottom-left' | 'bottom-center' | 'bottom-right';
}

4. 사용 예제

TypeScript
// border=false (4px 강조 테두리)
showToast({
  message: '파일이 업로드되었습니다',
  theme: 'success',
  position: 'top-right',
});

// border=true (1px 전체 외곽선)
showToast({
  header: '알림',
  message: '새로운 메시지가 있습니다',
  theme: 'info',
  border: true,
  position: 'bottom-center',
});

// Long 스타일
showToast({
  message: '저장 완료',
  theme: 'success',
  long: true,
  position: 'bottom-right',
  duration: 2000,
});

// 너비 지정
showToast({
  message: '이것은 넓은 토스트입니다',
  width: 400,
  position: 'top-center',
});

// 자동으로 닫히지 않음
showToast({
  header: '중요 알림',
  message: '이 메시지는 수동으로 닫아야 합니다',
  theme: 'warning',
  duration: 0,
  position: 'center',
});

SCSS에서 사용하기

SCSS 모듈에서 토스트 스타일을 커스터마이징할 수 있습니다:

component.module.scss
@use 'podo-ui/mixin' as *;

.customToast {
  display: flex;
  align-items: flex-start;
  gap: s(3);
  padding: s(4);
  border-radius: r(2);
  background-color: color('bg-elevation-1');
  border: 1px solid color('border');
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .icon {
    color: color('info');
  }

  .content {
    flex: 1;
  }

  .header {
    font-weight: 600;
    color: color('text-body');
    margin-bottom: s(1);
  }

  .body {
    color: color('text-body');
  }

  .close {
    cursor: pointer;
    color: color('text-action');

    &:hover {
      color: color('text-action-hover');
    }
  }
}