10. Toaster

Toaster UI는 사용자 작업의 상황에 따라 다양한 피드백 메시지를 제공하기 위해 사용한다. 구현할 Toaster UI의 이미지는 아래와 같다.

toast-ui Toaster UI

1. 요구 사항

  1. Success/Error/Warning 버튼을 클릭하면 해당 toast 요소를 생성해 뷰의 우측 하단에 표시한다.
  2. Success/Error/Warning toast 요소는 순차적으로 표시되어야 하며 일정 시간(3000ms) 후에 자동 제거되어야 한다.
  3. Success/Error/Warning toast 요소의 x 버튼을 클릭하면 해당 toast 요소를 제거하고 나머지 toast 요소의 위치도 재조정한다.

2. 기본 템플릿

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Toaster</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet" />
    <style>
      *,
      *::after,
      *::before {
        box-sizing: border-box;
      }

      body {
        font-family: 'Open Sans';
        font-weight: 300;
        color: #58666e;
        background-color: #f0f3f4;
      }

      .title {
        color: #db5b33;
        font-weight: 300;
        text-align: center;
      }

      .toast {
        --toast-width: 350px;
        --toast-height: 100px;

        position: absolute;
        right: 0;
        width: var(--toast-width);
        height: var(--toast-height);
        padding: 10px 15px;
        margin: 10px;
        border: 1px solid transparent;
        border-radius: 4px;
        animation: move 0.8s both;
      }

      .toast-heading {
        margin: 10px 0 15px;
      }

      .toast-message {
        display: flex;
        align-items: center;
        height: 20px;
        gap: 10px;
      }

      .toast-success {
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
      }

      .toast-error {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
      }

      .toast-warning {
        color: #856404;
        background-color: #fff3cd;
        border-color: #ffeeba;
      }

      .close {
        position: absolute;
        top: 7px;
        right: 10px;
        font-size: 1.5em;
        cursor: pointer;
      }

      @keyframes move {
        from {
          transform: translate3D(100%, 0, 0);
        }
        to {
          transform: translate3D(0, 0, 0);
        }
      }
    </style>
    <script defer src="app.js"></script>
  </head>
  <body>
    <h1 class="title">Toaster UI</h1>

    <button class="show-success">Success</button>
    <button class="show-error">Error</button>
    <button class="show-warning">Warning</button>

    <!-- local SVG sprite -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
      <symbol id="success" fill="currentColor" viewBox="0 0 16 16">
        <path
          d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
      </symbol>
      <symbol id="error" fill="currentColor" viewBox="0 0 16 16">
        <path
          d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
      </symbol>
      <symbol id="warning" fill="currentColor" viewBox="0 0 16 16">
        <path
          d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
      </symbol>
    </svg>

    <!--
    toast-success =>
    <div class="toast toast-success"">
      <h4 class="toast-heading">Title</h4>
      <div class="toast-message">
        <svg width="24" height="24">
          <use xlink:href="#success" />
        </svg>
        <p>Message</p>
      </div>
      <a class="close">&times;</a>
    </div>

    toast-error =>
    <div class="toast toast-error"">
      <h4 class="toast-heading">Title</h4>
      <div class="toast-message">
        <svg width="24" height="24">
          <use xlink:href="#error" />
        </svg>
        <p>Message</p>
      </div>
      <a class="close">&times;</a>
    </div>
    -->
  </body>
</html>
Back to top
Close