From 1127c81b0998d06ac7097585b034944d4af5a16a Mon Sep 17 00:00:00 2001
From: s0zzang <dlth8888@gmail.com>
Date: Thu, 21 Nov 2024 11:26:21 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Bug:=20=ED=83=80=EC=9D=B4=ED=95=91=20?=
 =?UTF-8?q?=ED=9A=A8=EA=B3=BC=20=EC=A0=81=EC=9A=A9=EC=8B=9C=202=EB=B2=88?=
 =?UTF-8?q?=EC=A7=B8=20=EA=B8=80=EC=94=A8=20=EB=88=84=EB=9D=BD=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useTyping.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

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

From 15ccb54abc27752ad1576b5fff1bfc3d5576f027 Mon Sep 17 00:00:00 2001
From: s0zzang <dlth8888@gmail.com>
Date: Thu, 21 Nov 2024 11:26:39 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Style:=20=EA=B0=90=EC=A0=95=20=EB=B6=84?=
 =?UTF-8?q?=EC=84=9D=20UI=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/emotion/result/EmotionGraph.tsx        | 10 +++++-----
 src/pages/emotion/result/EmotionResult.tsx       |  4 ++--
 src/pages/emotion/result/EmotionStress.tsx       |  4 ++--
 src/pages/emotion/result/EmotionStressBefore.tsx |  4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/emotion/result/EmotionGraph.tsx b/src/pages/emotion/result/EmotionGraph.tsx
index fa4347b..48fc290 100644
--- 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
index 3588ebb..86c26b6 100644
--- 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
index 30a15fa..2b5dcb6 100644
--- 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
index da36847..18cb81f 100644
--- 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;
   }
 `;