[Next.js][프로젝트] 💚Color Inside (5) - 로딩 스피너 구현

LoadingSpinner 컴포넌트

'use client';

import useTypingWords from '@/hooks/useTypingWords';
import { useEffect } from 'react';
import Character from './assets/Character';
import Spinner from './assets/Spinner';

const LoadingSpinner = () => {
  useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'auto';
    };
  }, []);

  const loadingText = '당신의 감정을 위한 공간을 준비중이에요! 잠시만 기다려주세요.';
  const typingText = useTypingWords(loadingText);

  return (
    <div className="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center bg-layout gap-16px-col-m md:gap-16px-col">
      <div className="flex items-center justify-center">
        <div className="relative md:inline-flex hidden">
          <span className="loader">
            <Spinner />
          </span>
        </div>
        <div className="relative md:hidden inline-flex">
          <span className="loader-mobile">
            <Spinner />
          </span>
        </div>
        <Character />
      </div>
      <div className="flex items-center">
        <p className="relative text-layout text-start text-14px-m md:text-20px font-normal tracking-0.28px md:tracking-tight">
          {loadingText}
        </p>
        <p className="absolute text-start text-14px-m md:text-20px font-normal tracking-0.28px md:tracking-tight">
          {typingText}
        </p>
      </div>
    </div>
  );
};

export default LoadingSpinner;

useTypingWords hook 구현

• 로딩 이미지가 보일 때 로딩 메세지가 한 글자씩 나타나도록 하는 hook 구현

'use client';

import { useEffect, useState } from 'react';

const useTypingWords = (text: string): string => {
  const [typing, setTyping] = useState<string>('');
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    const typingWords = setInterval(() => {
      if (typing.length === text.length) return;

      setTyping((prevTyping) => {
        const nextTyping = prevTyping ? prevTyping + text[count] : text[0];
        setCount(count + 1);

        return nextTyping;
      });
    }, 100);

    return () => clearInterval(typingWords);
  }, [count, text]);

  return typing;
};

export default useTypingWords;