Style: 감정 분석 UI 개선

KDT-hahahoho · Nov 21, 2024 · 15ccb54 · 15ccb54
1 parent 1127c81
commit 15ccb54
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
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;
   }
 `;