검색어 타이핑 애니메이션 기능

현재 회사는 카페24를 사용 중에 있지만, react를 까먹지 않기 위해 react 코드로 구현했습니다.
자사몰에 없던 기능을 추가해서 글을 남겨봅니다.

export default function Home() {
    const [currentIndex, setCurrentIndex] = useState<number>(0);
    const [placeholder, setPlaceholder] = useState<string>("");

    useEffect(() => {
    let charIndex = 0;
    const typingAnimation = setInterval(() => {
      const text = placeholders[currentIndex];

      if (charIndex <= text.length) {
        setPlaceholder(text.slice(0, charIndex));
        charIndex++;
      } else {
        clearInterval(typingAnimation);
      }
    }, 100);

    return () => clearInterval(typingAnimation);
    }, [currentIndex]);

    useEffect(() => {
    const changePlaceholder = setInterval(() => {
      setPlaceholder("");
      setCurrentIndex((prev) => (prev + 1) % placeholders.length);
    }, 5000);

    return () => clearInterval(changePlaceholder);
    }, []);

    return (
	<div>
        	검색어 : <input type="text" placeholder={placeholder} />
        </div>
    );
}

 

화면 기록 2026-03-18 오후 10.34.35.mov

0.03MB