Podo UI

Podo UI

토스트

토스트 알림 컴포넌트

Import

@use 'podo-ui/mixin' as *;

기본 사용법

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

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>
실제 예제:
Header
Lorem ipsum dolor sit amet

스타일 속성

토스트는 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 두꺼운 강조 색상 테두리가 표시됩니다.

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>
실제 예제:
Header
Lorem ipsum dolor sit amet

border=true - 전체 외곽선

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

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>
실제 예제:
Header
Lorem ipsum dolor sit amet

Long 스타일

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

long=true, border=false

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

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>
실제 예제:
Lorem ipsum dolor sit amet

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가지 색상 변형을 사용하여 다양한 메시지를 전달할 수 있습니다:

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>

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

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');
    }
  }
}