[UI 만들기] 4. Popper

 

 

  이번에 만들어보고자 하는 UI는 Popper이다. 일명 토스트라고도 부르는 UI이다. 이번에는 특정시간에 일정한 시간만큼 띄워졌다가 없어지는 기능을 넣고자 한다. 거기에 애니메이션을 추가해서 오른쪽에서 날아오는 형식을 추가하겠다.

  먼저, CSS부터 구성한다.

.nightly-toast {
  position:fixed;
  right: -300px; // 화면 밖에서 시작함.
  top: 50px;
  z-index: 9999;
  width: 300px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: all 2s ease-out;
}

.nightly-toast.show {
  right: 50px;
}

.nightly-toast.hide {
  right: -300px;
}

 

여기서 먼저 .nightly-toast라는 CSS 클래스를 만든다. 그리고 posiont: fixed를 사용하여 사용자가 페이지를 스크롤할 때에도 토스트가 제자리에 있도록 한다.

  다음으로 .show와 .hide라는 두 개의 추가 클래스를 만들고, 이 클래스를 토스트가 표시되거나 숨겨질 때 애니메이션을 트리거하는 데 사용된다. 'right' 속성을 사용하여 토스트를 화면 안팎으로 이동하고 transition 속성을 사용하여 움직임에 애니메이션을 적용한다.

import React, { useState, useEffect } from 'react';

function NightlyToast() {
  const [showToast, setShowToast] = useState(false);
  
  useEffect(() => {
    const checkTime = () => {
      const currentHour = new Date().getHours();
      const currentMinute = new Date().getMinutes();
      const isReservationTime = currentHour === 22 && currentMinute === 0;
      
      if (isReservationTime) {
        setShowToast(true);
        const timer = setTimeout(() => setShowToast(false), 30000);
        return () => clearTimeout(timer);
      }
    }
    const interval = setInterval(checkTime, 60000);
      
    return () => clearInterval(interval)
  }, []);
  
  return (
    <div className={`nightly-toast ${showToast ? 'show' : 'hide'}`}>
      <div>
        <strong>Nightly Reminder</strong>
      </div>
      <div>
        Don't forget to brush your teeth before bed!
      </div>
    </div>
  )
}

export default NightlyToast;

이 예에서는 useState와 useEffect hook을 사용하여 토스트 상태와 알림 시간을 관리한다. showToast의 초기값을 false로 설정하고 있고, setInterval을 사용하여 매일 밤 적절한 시간에 함수를 실행하고 있다. 함수가 실행되면 showToast를 true로 설정하여 애니메이션을 트리거하고 setTimeout을 사용하여 30초 후에 토스트를 숨긴다.