diff --git a/src/hooks/useTyping.tsx b/src/hooks/useTyping.tsx index fe1e94c..93012b6 100644 --- a/src/hooks/useTyping.tsx +++ b/src/hooks/useTyping.tsx @@ -2,21 +2,21 @@ import { useState, useEffect } from 'react'; const TypingEffect = ({ text, container }: { text: string; container: HTMLDivElement }) => { const [displayedText, setDisplayedText] = useState(''); + const [index, setIndex] = useState(0); useEffect(() => { - let index = 0; const interval = setInterval(() => { - if (index < text.length - 1) { + if (index < text.length) { setDisplayedText((prev) => prev + text[index]); - index++; - container.scrollTo({ top: container.scrollHeight - container.clientHeight, behavior: 'smooth' }); + setIndex((prev) => prev + 1); + container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' }); } else { - clearInterval(interval); + clearInterval(interval); // 타이핑이 끝나면 정지 } }, 50); - console.log(container.scrollHeight); - return () => clearInterval(interval); - }, [text]); + + return () => clearInterval(interval); // 컴포넌트 언마운트 시 인터벌 클리어 + }, [text, index, container]); return
{displayedText}
; };