Merge pull request #153 from KDT-hahahoho/Feat/#144

Feat/#144

src/components/home/CoupleInformation.tsx

@@ -149,27 +149,27 @@ const CoupleCardsWrapper = styled.div`
 `;
 
 const PersonalCard = styled.div`
-  border-radius: ${variables.borderRadius}+0.8rem;
+  border-radius: 1.6rem;
   width: 50%;
   height: 21rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 1rem;
-  box-shadow: inset ${variables.BoxShadow};
+  box-shadow: inset 0 0 0.3rem rgba(0, 0, 0, 0.1);
 `;
 
 const SpouseCard = styled.div`
-  border-radius: ${variables.borderRadius}+0.8rem;
+  border-radius: 1.6rem;
   width: 50%;
   height: 21rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 1rem;
-  box-shadow: inset ${variables.BoxShadow};
+  box-shadow: inset 0 0 0.3rem rgba(0, 0, 0, 0.1);
 `;
 
 const CardImage = styled.img`
@@ -213,21 +213,24 @@ const CoupleMissionToChoose = styled.div<{ isMissionDone: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  box-shadow: inset ${variables.BoxShadow};
+  box-shadow: inset 0 0 0.3rem rgba(0, 0, 0, 0.1);
   border-radius: calc(${variables.borderRadius} + 0.4rem);
   color: ${variables.colors.black};
   margin-bottom: 1.4rem;
-  padding: 0 1rem;
+  padding: 1.4rem 2.5rem;
   border: ${({ isMissionDone }) => (isMissionDone ? `1px solid ${variables.colors.primary}` : 'transparent')};
   border-color: ${({ isMissionDone }) => (isMissionDone ? variables.colors.primary : 'transparent')};
 `;
 
 const MissionTitle = styled.p`
   font-weight: 500;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
 `;
 
 const IsMissionDone = styled.input`
+  margin-right: -0.5rem;
+  background-color: red;
   width: 2.4rem;
   height: 2.4rem;
+  flex-grow: 0;
 `;

src/components/home/CoupleMissonWeekly.tsx

@@ -34,23 +34,22 @@ const CoupleMissionWeeklyUI = styled.div`
   font-weight: 700;
   display: flex;
   align-items: center;
-  box-shadow: inset ${variables.BoxShadow};
+  box-shadow: inset 0 0 0.3rem rgba(0, 0, 0, 0.1);
   border-radius: calc(${variables.borderRadius} + 0.4rem);
   color: ${variables.colors.black};
   margin-bottom: 1.4rem;
+  padding: 1.4rem 2.5rem;
 `;
 
 const Title = styled.p`
   margin-right: 1.5rem;
-  margin-left: 2.5rem;
 `;
 
 const MissionDots = styled.div`
   display: flex;
   gap: 0.8rem;
 `;
 
-// status prop을 받아서 색상을 결정하는 Dot 컴포넌트
 const Dot = styled.div<{ status: DotStatus }>`
   width: 2.4rem;
   height: 2.4rem;

src/components/home/CoupleReport.tsx

@@ -10,12 +10,15 @@ type EmotionData = {
   sexual?: number;
   social?: number;
 } | null;
-
 interface CoupleResult {
   my_emotion: EmotionData;
   spouse_emotion: EmotionData;
+  my_inf_tests: EmotionData[];
+  spouse_inf_tests: EmotionData[]; // 새로운 필드 추가
 }
 
+// ... 기존 코드 ...
+
 interface CoupleData {
   result?: CoupleResult;
 }
@@ -38,6 +41,13 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
     sexual: mySexual = 0,
     social: mySocial = 0,
   } = coupleData?.result?.my_emotion || {};
+  const {
+    essential: myInfEssential = 0,
+    refusing: myInfRefusing = 0,
+    relational: myInfRelational = 0,
+    sexual: myInfSexual = 0,
+    social: myInfSocial = 0,
+  } = coupleData?.result?.my_inf_tests[0] || {};
 
   const {
     essential: spouseEssential = 0,
@@ -46,6 +56,16 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
     sexual: spouseSexual = 0,
     social: spouseSocial = 0,
   } = coupleData?.result?.spouse_emotion || {};
+  const {
+    essential: spouseInfEssential = 0,
+    refusing: spouseInfRefusing = 0,
+    relational: spouseInfRelational = 0,
+    sexual: spouseInfSexual = 0,
+    social: spouseInfSocial = 0,
+  } = coupleData?.result?.spouse_inf_tests[0] || {};
+
+  console.log(spouseEssential, spouseRefusing, spouseRelational, spouseSexual, spouseSocial);
+  console.log(spouseInfEssential, spouseInfRefusing, spouseInfRelational, spouseInfSexual, spouseInfSocial);
 
   const option = {
     radar: {
@@ -83,7 +103,7 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
             show: selected === 'self',
           },
           {
-            value: [spouseSocial, spouseSexual, spouseEssential, spouseRefusing, spouseRelational],
+            value: [myInfSocial, myInfSexual, myInfEssential, myInfRefusing, myInfRelational],
             itemStyle: {
               color: variables.colors.secondaryStrong,
             },

src/components/home/OurKeyword.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import variables from '@styles/Variables';
-import EChartsReact from 'echarts-for-react';
 
 interface EmotionData {
   interest_keyword: string;
@@ -21,65 +20,17 @@ const OurKeyword = ({ coupleData }: OurKeywordProps) => {
   const myKeyword = coupleData?.result?.my_emotion?.interest_keyword ?? '';
   const spouseKeyword = coupleData?.result?.spouse_emotion?.interest_keyword ?? '';
 
-  console.log(coupleData);
-
   // 키워드를 쉼표로 분리하여 배열로 변환
   const myKeywordArray = myKeyword.split(',').map((keyword) => keyword.trim());
   const spouseKeywordArray = spouseKeyword.split(',').map((keyword) => keyword.trim());
 
-  // 키워드 데이터 준비
-  const keywordData = [...myKeywordArray, ...spouseKeywordArray].map((keyword, index) => ({
-    value: 100,
-    name: `${keyword}`,
-    color: index === 0 ? variables.colors.primaryLight : variables.colors.secondary,
-  }));
-
-  const option = {
-    tooltip: {
-      trigger: 'item',
-    },
-    legend: {
-      bottom: '-1%',
-      left: 'center',
-    },
-    series: [
-      {
-        name: 'Access From',
-        type: 'pie',
-        radius: ['40%', '70%'],
-        avoidLabelOverlap: false,
-        padAngle: 5,
-        itemStyle: {
-          borderRadius: 10,
-        },
-        label: {
-          show: false,
-          position: 'center',
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: 10,
-            fontWeight: 'bold',
-          },
-        },
-        data: keywordData.map((item, index) => ({
-          ...item,
-          itemStyle: {
-            color: index === 0 ? variables.colors.primaryLight : variables.colors.secondary, // 첫 번째 항목은 primaryLight, 나머지는 secondary 색상
-          },
-        })),
-      },
-    ],
-  };
-
   return (
     <OurKeywordContainer>
       <OurKeywordTitle>우리의 관심사</OurKeywordTitle>
       <OurKeywordTitleDes>나의 통계와 배우자의 통계를 한눈에 확인할 수 있어요</OurKeywordTitleDes>
       <OurKeywordLineChartContainer>
         <OurKeywordDescription>우리의 관심사</OurKeywordDescription>
-        <EChartsReact option={option} style={{ width: '100%', height: '80%' }} />
+        {myKeywordArray}, {spouseKeywordArray}
       </OurKeywordLineChartContainer>
     </OurKeywordContainer>
   );
@@ -107,7 +58,7 @@ const OurKeywordTitleDes = styled.p`
 
 const OurKeywordLineChartContainer = styled.div`
   width: 100%;
-  height: 42rem;
+  height: 20rem;
   border: 1px solid ${variables.colors.gray50};
   border-radius: ${variables.borderRadius};
   margin-top: 4.2rem;

src/components/home/OurReport.tsx

@@ -35,7 +35,7 @@ interface ChartOptions {
     type: string;
   };
   grid: {
-    bottom: number | string;
+    top: number | string;
   };
   series: Array<{
     name: string;
@@ -51,6 +51,7 @@ interface OurReportProps {
 
 const OurReport = ({ coupleData }: OurReportProps) => {
   const [testdone, setTestDone] = useState<boolean>(false);
+
   const [options, setOptions] = useState<ChartOptions>({
     xAxis: {
       type: 'category',
@@ -64,7 +65,7 @@ const OurReport = ({ coupleData }: OurReportProps) => {
     },
     yAxis: { type: 'value' },
     grid: {
-      bottom: '10%',
+      top: '10%',
     },
     series: [],
   });
@@ -103,7 +104,7 @@ const OurReport = ({ coupleData }: OurReportProps) => {
         },
         yAxis: { type: 'value' },
         grid: {
-          bottom: '20%',
+          top: '-23px',
         },
         series: [
           { name: '본인', data: myData, type: 'line', color: variables.colors.primary },

src/pages/Home/Home.tsx

@@ -12,11 +12,14 @@ import { useGetCoupleData } from '@hooks/useGetCoupleData';
 const Home = () => {
   const token = localStorage.getItem('authToken') || '';
   const redirect = useAuthRedirect(); // 인가 확인 훅
-  const { data: coupleData, isLoading, error } = useGetCoupleData(token);
+  const { data: coupleData } = useGetCoupleData(token);
 
   if (redirect) return redirect; // 인증되지 않으면 리디렉션을 반환
-  // if (isLoading) return <div>......</div>; // 로딩 중 표시
-  // if (error || !coupleData) return <div>{error?.message}</div>; // 에러 핸들링
+
+
+  console.log('home에서 데이터 호출 ', coupleData);
+
+
 
   return (
     <HomepageContainer>
@@ -37,7 +40,6 @@ const HomepageContainer = styled.div`
   flex-direction: column;
   height: 100vh;
   margin-top: 9rem;
-  height: 300rem;
 `;
 
 const ContentWrapper = styled.div`

tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/auth/autherror.tsx","./src/components/auth/checkagreement.tsx","./src/components/auth/pagetitleheader.tsx","./src/components/auth/profilesetup.tsx","./src/components/auth/setupemail.tsx","./src/components/auth/setupkoreanidinput.tsx","./src/components/auth/setupname.tsx","./src/components/auth/setuppassword.tsx","./src/components/auth/setupsubfertility.tsx","./src/components/common/button.tsx","./src/components/common/footer.tsx","./src/components/common/genericform.tsx","./src/components/common/genericprogressbar.tsx","./src/components/common/input.tsx","./src/components/common/toast.tsx","./src/components/common/toogle.tsx","./src/components/home/coupleinformation.tsx","./src/components/home/couplemissonweekly.tsx","./src/components/home/couplereport.tsx","./src/components/home/homepagetitle.tsx","./src/components/home/ourkeyword.tsx","./src/components/home/ourreport.tsx","./src/components/layout/layout.tsx","./src/features/auth.tsx","./src/hooks/useauthredirect.tsx","./src/hooks/usecoupleinfo.tsx","./src/hooks/usefetch.tsx","./src/hooks/usefunnel.tsx","./src/hooks/usegpt.tsx","./src/pages/home/home.tsx","./src/pages/user/follow/followpage.tsx","./src/pages/user/login/loginpage.tsx","./src/pages/user/signup/signuppage.tsx","./src/pages/user/welcome/welcomepage.tsx","./src/pages/counseling/counseling.tsx","./src/pages/counseling/counselinglist.tsx","./src/pages/counseling/counselinglistitem.tsx","./src/pages/counseling/counslingguide.tsx","./src/pages/emotion/message/emotionmessage.style.tsx","./src/pages/emotion/message/emotionmessage.tsx","./src/pages/emotion/mission/emotionmission.style.tsx","./src/pages/emotion/mission/emotionmission.tsx","./src/pages/emotion/record/emotionbad.tsx","./src/pages/emotion/record/emotioneffort.tsx","./src/pages/emotion/record/emotiongood.tsx","./src/pages/emotion/record/emotionrecord.style.tsx","./src/pages/emotion/record/emotionrecord.tsx","./src/pages/emotion/record/emotionrecordpage.tsx","./src/pages/emotion/result/emotiongraph.tsx","./src/pages/emotion/result/emotionresult.tsx","./src/pages/emotion/result/emotionstress.tsx","./src/pages/scale/listgraph.tsx","./src/pages/scale/questions.tsx","./src/pages/scale/scalelist.tsx","./src/pages/scale/scaleresult.tsx","./src/pages/scale/scaletotalgraph.tsx","./src/pages/scale/scaletypegraph.tsx","./src/pages/scale/testing.tsx","./src/router/protectedroute.tsx","./src/router/route.tsx","./src/store/useanalysisstore.ts","./src/store/useauthstore.ts","./src/store/useemotionstore.ts","./src/styles/globalstyles.tsx","./src/styles/variables.tsx","./src/utils/validation/handlevalidation.ts"],"version":"5.6.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/auth/autherror.tsx","./src/components/auth/checkagreement.tsx","./src/components/auth/pagetitleheader.tsx","./src/components/auth/profilesetup.tsx","./src/components/auth/setupemail.tsx","./src/components/auth/setupkoreanidinput.tsx","./src/components/auth/setupname.tsx","./src/components/auth/setuppassword.tsx","./src/components/auth/setupsubfertility.tsx","./src/components/common/button.tsx","./src/components/common/footer.tsx","./src/components/common/genericform.tsx","./src/components/common/genericprogressbar.tsx","./src/components/common/input.tsx","./src/components/common/toast.tsx","./src/components/common/toogle.tsx","./src/components/home/coupleinformation.tsx","./src/components/home/couplemissonweekly.tsx","./src/components/home/couplereport.tsx","./src/components/home/homepagetitle.tsx","./src/components/home/ourkeyword.tsx","./src/components/home/ourreport.tsx","./src/components/layout/layout.tsx","./src/features/auth.tsx","./src/hooks/useauthredirect.tsx","./src/hooks/usecoupleinfo.tsx","./src/hooks/usefetch.tsx","./src/hooks/usefunnel.tsx","./src/hooks/usegpt.tsx","./src/hooks/usegetcoupledata.tsx","./src/pages/home/home.tsx","./src/pages/user/follow/followpage.tsx","./src/pages/user/interests/interestitem.tsx","./src/pages/user/interests/interestpage.tsx","./src/pages/user/login/loginpage.tsx","./src/pages/user/signup/signuppage.tsx","./src/pages/user/welcome/welcomepage.tsx","./src/pages/counseling/counseling.tsx","./src/pages/counseling/counselinglist.tsx","./src/pages/counseling/counselinglistitem.tsx","./src/pages/counseling/counslingguide.tsx","./src/pages/emotion/message/emotionmessage.style.tsx","./src/pages/emotion/message/emotionmessage.tsx","./src/pages/emotion/mission/emotionmission.style.tsx","./src/pages/emotion/mission/emotionmission.tsx","./src/pages/emotion/record/emotionbad.tsx","./src/pages/emotion/record/emotioneffort.tsx","./src/pages/emotion/record/emotiongood.tsx","./src/pages/emotion/record/emotionrecord.style.tsx","./src/pages/emotion/record/emotionrecord.tsx","./src/pages/emotion/record/emotionrecordpage.tsx","./src/pages/emotion/result/emotiongraph.tsx","./src/pages/emotion/result/emotionresult.tsx","./src/pages/emotion/result/emotionstress.tsx","./src/pages/scale/listgraph.tsx","./src/pages/scale/questions.tsx","./src/pages/scale/scalelist.tsx","./src/pages/scale/scaleresult.tsx","./src/pages/scale/scaletotalgraph.tsx","./src/pages/scale/scaletypegraph.tsx","./src/pages/scale/testing.tsx","./src/router/protectedroute.tsx","./src/router/route.tsx","./src/store/useanalysisstore.ts","./src/store/useauthstore.ts","./src/store/useemotionstore.ts","./src/styles/globalstyles.tsx","./src/styles/variables.tsx","./src/types/types.ts","./src/utils/validation/handlevalidation.ts"],"version":"5.6.3"}