Merge pull request #181 from KDT-hahahoho/Feat/#78

�AI 심리상담 gpt 응답에 타이핑 효과 추가

src/hooks/useTyping.tsx

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+const TypingEffect = ({ text, container }: { text: string; container: HTMLDivElement }) => {
+  const [displayedText, setDisplayedText] = useState('');
+
+  useEffect(() => {
+    let index = 0;
+    const interval = setInterval(() => {
+      if (index < text.length - 1) {
+        setDisplayedText((prev) => prev + text[index]);
+        index++;
+        container.scrollTo({ top: container.scrollHeight - container.clientHeight, behavior: 'smooth' });
+      } else {
+        clearInterval(interval);
+      }
+    }, 50);
+    console.log(container.scrollHeight);
+    return () => clearInterval(interval);
+  }, [text]);
+
+  return <p>{displayedText}</p>;
+};
+
+export default TypingEffect;

src/pages/counseling/Counseling.tsx

@@ -10,6 +10,7 @@ import CounselingGuide from './CounslingGuide';
 import sendIcon from '/img/icon-send.svg';
 import wishIcon from '/img/icon-wish-profile.svg';
 import PageTitle from '@components/common/PageTitle';
+import TypingEffect from '@hooks/useTyping';
 
 interface Message {
   sender?: string;
@@ -269,7 +270,11 @@ const Counseling = () => {
 
             {messages.map(({ sender, message }, idx) => (
               <li key={`${sender}-${message!.slice(0, 10)}-${idx}`} className={sender}>
-                <p>{message}</p>
+                {message && sender === 'gpt' ? (
+                  <TypingEffect text={message} container={scrollBoxRef.current!} />
+                ) : (
+                  <p>{message}</p>
+                )}
               </li>
             ))}