Bug: 타이핑 효과 적용시 2번째 글씨 누락 개선

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 <p>{displayedText}</p>;
 };