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

심리상담 타이핑 효과 오류 개선, 감정분석 UI 개선
KDT-hahahoho · Nov 21, 2024 · eb3aad6 · eb3aad6
2 parents 65ef05d + 15ccb54
commit eb3aad6
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 19 deletions.
diff --git 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 <p>{displayedText}</p>;
 };

diff --git a/src/pages/emotion/result/EmotionGraph.tsx b/src/pages/emotion/result/EmotionGraph.tsx
@@ -13,11 +13,11 @@ const EmotionGraph: React.FC = () => {
   const analysisResult = useAnalysisStore((state) => state.analysis);
 
   const data: EmotionData[] = [
-    { value: analysisResult.emotions.anger, name: '분노', color: `${variables.colors.primary}` },
-    { value: analysisResult.emotions.disgust, name: '혐오', color: `${variables.colors.primaryLight}` },
-    { value: analysisResult.emotions.fear, name: '공포', color: `${variables.colors.primarySoft}` },
+    { value: analysisResult.emotions.anger, name: '분노', color: `#FFD4CB` },
+    { value: analysisResult.emotions.disgust, name: '혐오', color: `#E6E6E6` },
+    { value: analysisResult.emotions.fear, name: '공포', color: `#FEE9CA` },
     { value: analysisResult.emotions.joy, name: '기쁨', color: `${variables.colors.primaryStrong}` },
-    { value: analysisResult.emotions.sadness, name: '슬픔', color: `${variables.colors.secondary}` },
+    { value: analysisResult.emotions.sadness, name: '슬픔', color: `#E2F2FF` },
     { value: analysisResult.emotions.surprise, name: '놀람', color: `${variables.colors.secondarySoft}` },
   ];
 
@@ -32,7 +32,7 @@ const EmotionGraph: React.FC = () => {
       icon: 'circle',
       itemWidth: 20,
       itemHeight: 20,
-      padding: [40, 40, 0, 0],
+      padding: [40, 35, 0, 0],
     },
     series: [
       {

diff --git a/src/pages/emotion/result/EmotionResult.tsx b/src/pages/emotion/result/EmotionResult.tsx
@@ -148,8 +148,8 @@ export const ResultTitleBox = styled.div`
 
 export const ResultTextBox = styled.div`
   align-items: center;
-  margin-bottom: 3rem;
-  margin-top: 10rem;
+  margin-bottom: 2rem;
+  margin-top: 3rem;
 
   & > h2 {
     font-size: ${variables.size.large};

diff --git a/src/pages/emotion/result/EmotionStress.tsx b/src/pages/emotion/result/EmotionStress.tsx
@@ -24,7 +24,7 @@ export const StressText = styled.div`
     font-size: 1.5rem;
     font-weight: 500;
     color: ${variables.colors.gray100};
-    margin: 4em 0 6rem 0;
+    margin: -2rem 0 3rem;
   }
 `;
 
@@ -108,7 +108,7 @@ const EmotionStress = () => {
   return (
     <StressText>
       <div className="stress-box">
-        <ECharts option={options} opts={{ width: 'auto', height: 'auto' }} />
+        <ECharts option={options} opts={{ width: 170, height: 170 }} />
       </div>
       <p className="stress-sub-text">현재 예상 점수</p>
     </StressText>

diff --git a/src/pages/emotion/result/EmotionStressBefore.tsx b/src/pages/emotion/result/EmotionStressBefore.tsx
@@ -84,7 +84,7 @@ const EmotionStressBefore = ({
   return (
     <StressText className="xxx">
       <div className="stress-box">
-        <ECharts option={options} opts={{ width: 'auto', height: 'auto' }} />
+        <ECharts option={options} opts={{ width: 170, height: 170 }} />
       </div>
       <p className="stress-sub-text">{text}</p>
     </StressText>
@@ -106,7 +106,7 @@ export const StressText = styled.div`
     font-size: 1.5rem;
     font-weight: 500;
     color: ${variables.colors.gray100};
-    margin: 4em 0 6rem 0;
+    margin: -2rem 0 3rem;
   }
 `;