Merge pull request #186 from KDT-hahahoho/Feat/#183

EmotionStressBefore 공통 컴포넌트화
KDT-hahahoho · Nov 20, 2024 · a30e057 · a30e057
2 parents 17c89e7 + 12980e3
commit a30e057
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 28 deletions.
diff --git a/src/components/home/CoupleReport.tsx b/src/components/home/CoupleReport.tsx
@@ -3,13 +3,15 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import variables from '@styles/Variables';
 import EChartsReact from 'echarts-for-react';
+import EmotionStressBefore from '@pages/emotion/result/EmotionStressBefore';
 
 type EmotionData = {
   essential?: number;
   refusing?: number;
   relational?: number;
   sexual?: number;
   social?: number;
+  total?: number;
 } | null;
 interface CoupleResult {
   my_emotion: EmotionData;
@@ -118,6 +120,8 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
     ],
   };
 
+  console.log(coupleData?.result);
+
   return (
     <CoupleReportContainer>
       <CoupleReportTitle>
@@ -138,7 +142,34 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
           <EChartsReact option={option} />
           {coupleData?.result && (
             <div className="flex-box">
-              <EmotionGraphContainer></EmotionGraphContainer>
+              <EmotionGraphContainer>
+                {selected === 'self' && (
+                  <>
+                    {coupleData?.result?.my_inf_tests[0]?.total && (
+                      <EmotionStressBefore
+                        total={coupleData?.result?.my_inf_tests[0]?.total}
+                        color={variables.colors.primary}
+                      />
+                    )}
+                    {coupleData?.result?.my_emotion?.total && (
+                      <EmotionStressBefore total={coupleData?.result?.my_emotion?.total} text="예상 점수" />
+                    )}
+                  </>
+                )}
+                {selected === 'partner' && (
+                  <>
+                    {coupleData?.result?.spouse_inf_tests[0]?.total && (
+                      <EmotionStressBefore
+                        total={coupleData?.result?.spouse_inf_tests[0]?.total}
+                        color={variables.colors.primary}
+                      />
+                    )}
+                    {coupleData?.result?.spouse_emotion?.total && (
+                      <EmotionStressBefore total={coupleData?.result?.spouse_emotion?.total} text="예상 점수" />
+                    )}
+                  </>
+                )}
+              </EmotionGraphContainer>
             </div>
           )}
         </ChartCover>
@@ -151,10 +182,7 @@ export default CoupleReport;
 
 const EmotionGraphContainer = styled.div`
   width: 100%;
-
-  .flex-box {
-    display: flex;
-  }
+  display: flex;
 `;
 
 const ToggleContainer = styled.div`

diff --git a/src/pages/emotion/result/EmotionResult.tsx b/src/pages/emotion/result/EmotionResult.tsx
@@ -103,7 +103,7 @@ const EmotionResult = () => {
 
         <EmotionGraphContainer>
           <div className="flex-box">
-            <EmotionStressBefore record={prevRecord} />
+            <EmotionStressBefore total={prevRecord.total} />
             <EmotionStress />
           </div>
         </EmotionGraphContainer>

diff --git a/src/pages/emotion/result/EmotionStress.tsx b/src/pages/emotion/result/EmotionStress.tsx
@@ -71,7 +71,7 @@ const EmotionStress = () => {
         },
         axisLine: {
           lineStyle: {
-            width: 20,
+            width: 12,
           },
         },
         splitLine: {

diff --git a/src/pages/emotion/result/EmotionStressBefore.tsx b/src/pages/emotion/result/EmotionStressBefore.tsx
@@ -4,24 +4,20 @@ import ECharts from 'echarts-for-react';
 import useAnalysisStore from '@store/useAnalysisStore';
 import styled from '@emotion/styled';
 
-interface EmotionStressBeforeProps {
-  record: {
-    essential: number;
-    refusing: number;
-    relational: number;
-    sexual: number;
-    social: number;
-    total: number;
-  };
-}
-
-const EmotionStressBefore: React.FC<EmotionStressBeforeProps> = (record) => {
+const EmotionStressBefore = ({
+  total,
+  color = `${variables.colors.secondaryStrong}`,
+  text = '기존 점수',
+}: {
+  total: number;
+  color?: string;
+  text?: string;
+}) => {
   const analysisResult = useAnalysisStore((state) => state.analysis);
-  const value = record.record.total * 0.5;
+  const value = total * 0.5;
 
   console.log(analysisResult);
-  console.log(record.record.total);
-  console.log(record);
+  console.log(total);
 
   const [options] = useState({
     tooltip: {
@@ -36,7 +32,7 @@ const EmotionStressBefore: React.FC<EmotionStressBeforeProps> = (record) => {
         type: 'gauge',
         startAngle: 90,
         endAngle: -270,
-        color: `${variables.colors.secondaryStrong}`,
+        color: color,
 
         pointer: {
           show: false,
@@ -48,12 +44,12 @@ const EmotionStressBefore: React.FC<EmotionStressBeforeProps> = (record) => {
           clip: false,
           itemStyle: {
             borderWidth: 1,
-            borderColor: `${variables.colors.secondaryStrong}`,
+            borderColor: color,
           },
         },
         axisLine: {
           lineStyle: {
-            width: 20,
+            width: 12,
           },
         },
         splitLine: {
@@ -75,7 +71,7 @@ const EmotionStressBefore: React.FC<EmotionStressBeforeProps> = (record) => {
         ],
         detail: {
           fontSize: 22,
-          color: `${variables.colors.secondaryStrong}`,
+          color: color,
           formatter: '{value}',
           offsetCenter: ['0', '0%'],
         },
@@ -86,11 +82,11 @@ const EmotionStressBefore: React.FC<EmotionStressBeforeProps> = (record) => {
   });
 
   return (
-    <StressText>
+    <StressText className="xxx">
       <div className="stress-box">
         <ECharts option={options} opts={{ width: 'auto', height: 'auto' }} />
       </div>
-      <p className="stress-sub-text">기존 점수</p>
+      <p className="stress-sub-text">{text}</p>
     </StressText>
   );
 };