Daily Emoji - 내 첫 번째 NextJS 프로젝트

실시간으로 확인할 수 있습니다here.
전체 코드here를 확인할 수 있습니다.

소개

이 웹사이트의 아이디어는 사용자를 위해 이모티콘을 무작위로 선택하여 복사할 수 있게 만드는 것입니다. 내 첫 번째 NextJS 프로젝트입니다.

단계

따라서 이 프로젝트를 만들기 위해 따라야 할 몇 가지 단계가 있습니다.

에서 이모티콘 몇 개를 가져옵니다.

무작위화 버튼을 클릭한 후 "롤링"애니메이션을 생성합니다

.

무작위 이모티콘 표시

사용자가 복사할 수 있도록 합니다

.

사용자가 복사한 경우 신호

API에서 가져오기

import { useState, useEffect } from "react";

 const UrlToFetch =
"https://emojihub.herokuapp.com/api/all/category_smileys_and_people";

  const [emoji, setEmoji] = useState([{ htmlCode: "" }]);

  const [isLoaded, setIsLoaded] = useState(false);

  const fetchEmoji = () => {
    fetch(UrlToFetch)
      .then((res) => res.json())
      .then((emoji) => setEmoji(emoji))
      .then(() => setIsLoaded(true));
  };

다음은 API에서 가져오는 코드 스니펫입니다. 가져오기 후에 모든 이모티콘을 emoji라는 상태로 저장하고 isLoaded 변수를 true로 설정하여 로드된 이모티콘을 UI에 표시합니다.

"롤링" 애니메이션 및 무작위 애니메이션 표시

그래서 처음에는 카지노 스타일의 롤과 같은 애니메이션을 만들려고 생각했지만 조금 검색한 후(아마도 손으로 많이 만들어야 한다는 것을 깨닫고) 더 쉬운 애니메이션을 만들기로 결정했습니다. 몇 가지 이모티콘 사이에서 빠르게 변경됩니다.

  const [loadingEmoji, setLoadingEmoji] = useState("😀");
  const [finishedAnimation, setFinishedAnimation] = useState(false);
  const [timeLeft, setTimeLeft] = useState(5);

  useEffect(() => {
    const loadingEmojis = [
      { htmlCode: ["🤣"] },
      { htmlCode: ["😚"] },
      { htmlCode: ["👇"] },
      { htmlCode: ["✌"] },
      { htmlCode: ["🤞"] },
      { htmlCode: ["🖖"] },
    ];
    if (timeLeft === 0) {
      setFinishedAnimation(true);
      setTimeLeft(null);
    }
    if (!timeLeft) return;
    const intervalId = setInterval(() => {
      setLoadingEmoji(getRandomEmoji(loadingEmojis));
      setTimeLeft((timeLeft) => timeLeft - 1);
    }, 333);
    return () => clearInterval(intervalId);
  }, [getRandomEmoji, timeLeft]);

이 스니펫은 애니메이션의 일반적인 아이디어를 나타냅니다. 이모지 세트와 5로 초기화된 timeLeft(애니메이션 실행에 남은 시간을 나타냄)라는 변수가 있습니다. 아직 시간이 남아 있으면 간격 함수를 만듭니다. 그러면 새로운 loadingEmoji가 설정되고 timeLeft가 1씩 감소합니다.

모든 작업이 실행되고 남은 시간이 없으면 finishedAnimation을 true로 설정하고 UI가 이에 반응합니다.

결과 표시를 애니메이션화하기 위해 animate.css을 사용했습니다.

import "animate.css";

<div
  className={
     styles.description +
     " animate__animated animate__tada animate__delay-2s"
     }
     dangerouslySetInnerHTML={{
     __html: emoji,
     }}
></div>

이것이 최종 결과입니다.

사용자가 복사할 수 있도록 만들기

사용자의 클립보드에 쉽게 복사할 수 있도록 copy-to-clipboard을 사용했습니다.

  const copyToClipboard = () => {
    copy(document.querySelector("#emoji").innerHTML);
  };

  <div
        onClick={() => copyToClipboard()}
        className={
          styles.description +
          " animate__animated animate__tada animate__delay-2s"
        }
        dangerouslySetInnerHTML={{
          __html: emoji,
        }}
        id="emoji"
        data-tip="Click on it to copy <br>to your clipboard!"
      ></div>

그림 이모티콘이 복사되었다는 사용자 신호

이모지가 클립보드에 복사되었음을 사용자에게 보여주기 위해 React-toastify 을 사용하여 쉽고 아름다운 알림을 만들었습니다.

import { ToastContainer, toast } from "react-toastify";

  const notify = () => toast("Copied to clipboard!");

  const copyToClipboard = () => {
    copy(document.querySelector("#emoji").innerHTML);
    notify();
  };


      <ToastContainer
        position="top-right"
        autoClose={2000}
        theme="dark"
        pauseOnHover={false}
      />

그리고 그게 다야! 또한 react-tooltip 을 사용하여 보다 사용자 친화적으로 만들기 위해 몇 가지 툴팁을 추가했지만 이는 완전히 선택 사항입니다.

아주 쉽게 Vercel에 배포했습니다.

읽어 주셔서 감사합니다!