Feat/#155

src/components/home/CoupleInformation.tsx

@@ -5,11 +5,10 @@ import profileImgMan from '@assets/Images/mainManProfile.svg';
 import mainlock from '@assets/Images/mainlock.svg';
 import { useNavigate } from 'react-router-dom';
 import { useCoupleInfo } from '@hooks/useCoupleInfo';
-import CoupleMissionWeekly from './CoupleMissonWeekly';
+import CoupleMissionWeekly from './CoupleMissionWeekly';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
 
-// TODO : 미션 등록 이번주 미션 해야함
 interface InfTest {
   essential: number;
   refusing: number;
@@ -20,13 +19,17 @@ interface InfTest {
   self_message?: string;
   id: number;
   mission_content?: string;
+  export_message?: string;
+  is_complement?: boolean;
 }
 
 interface CoupleData {
   result?: {
     my_inf_tests?: InfTest[];
     spouse_inf_tests?: InfTest[];
     my_emotion?: InfTest;
+    spouse_emotion?: InfTest;
+    is_complement?: InfTest;
   };
 }
 
@@ -38,40 +41,60 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => {
   const navigate = useNavigate();
   const [selfMessage, setSelfMessage] = useState('');
   const [mission, setMission] = useState('');
-  const [isMissionDone, setIsMissionDone] = useState(false); // 체크박스 상태
+  const [isMissionDone, setIsMissionDone] = useState(false);
   const { partnerName, myName, gender, isConnected } = useCoupleInfo();
+  const exportMessage = coupleData?.result?.spouse_emotion?.export_message;
+
+  const myMissionCompleted = coupleData?.result?.my_emotion?.is_complement || false;
+  const spouseMissionCompleted = coupleData?.result?.spouse_emotion?.is_complement || false;
 
   /** 미션 수행 등록 함수 {PUT} */
   const handleMissionToggle = async () => {
     try {
-      setIsMissionDone(!isMissionDone);
+      const newMissionStatus = !isMissionDone;
+      setIsMissionDone(newMissionStatus);
 
       if (coupleData?.result?.my_emotion) {
         const result_id = coupleData.result.my_emotion.id;
+        const response = await axios.put(
+          `/emotions/results/${result_id}/`,
+          { is_complement: newMissionStatus },
+          {
+            headers: { 'Content-Type': 'application/json' },
+          }
+        );
 
         const requestData = {
           is_complement: true,
         };
 
-        const response = await axios.put(`https://www.wishkr.site/emotions/results/${result_id}/`, requestData, {
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
-        console.log('요청 성공:', response.data);
       }
     } catch (error) {
       console.error('에러:', error);
-      setIsMissionDone(isMissionDone);
+      setIsMissionDone(isMissionDone); // 실패시 원래 상태로 복구
     }
   };
 
   useEffect(() => {
     const emotion = coupleData?.result?.my_emotion;
     setSelfMessage(emotion?.self_message || '');
     setMission(emotion?.mission_content || '');
+    setIsMissionDone(emotion?.is_complement || false);
   }, [coupleData]);
 
+  // 미션 메시지 결정 함수
+  const getMissionMessage = () => {
+    if (myMissionCompleted && !spouseMissionCompleted) {
+      return '배우자의 미션 수행을 기다리고 있어요';
+    } else if (!myMissionCompleted && spouseMissionCompleted) {
+      return '배우자가 미션을 완료했어요! 나도 미션을 수행해볼까요?';
+    } else if (myMissionCompleted && spouseMissionCompleted) {
+      return exportMessage || '두 분 모두 미션을 완료했어요!';
+    } else {
+      return mission;
+    }
+  };
+
   return (
     <CoupleInformationContainer>
       <CoupleInfoTitle>{selfMessage ? selfMessage : '원활한 사용을 위해 부부 연동이 필요해요!'}</CoupleInfoTitle>
@@ -96,15 +119,9 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => {
       </CoupleCardsWrapper>
       <>
         {mission ? (
-          <CoupleMissionToChoose
-            isMissionDone={isMissionDone} // 체크박스 상태에 따라 스타일 적용
-          >
-            <MissionTitle>{mission}</MissionTitle>
-            <IsMissionDone
-              type="checkbox"
-              checked={isMissionDone} // 체크박스 상태 관리
-              onChange={handleMissionToggle}
-            />
+          <CoupleMissionToChoose isMissionDone={isMissionDone}>
+            <MissionTitle>{getMissionMessage()}</MissionTitle>
+            <IsMissionDone type="checkbox" checked={isMissionDone} onChange={handleMissionToggle} />
           </CoupleMissionToChoose>
         ) : (
           <CoupleMission>
@@ -200,7 +217,7 @@ const CoupleMission = styled.div`
   display: flex;
   justify-content: center;
   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;

src/components/home/CoupleReport.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import styled from '@emotion/styled';
 import variables from '@styles/Variables';
 import EChartsReact from 'echarts-for-react';
@@ -14,11 +15,9 @@ interface CoupleResult {
   my_emotion: EmotionData;
   spouse_emotion: EmotionData;
   my_inf_tests: EmotionData[];
-  spouse_inf_tests: EmotionData[]; // 새로운 필드 추가
+  spouse_inf_tests: EmotionData[];
 }
 
-// ... 기존 코드 ...
-
 interface CoupleData {
   result?: CoupleResult;
 }
@@ -64,9 +63,6 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
     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: {
       indicator: [
@@ -95,20 +91,24 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
         type: 'radar',
         data: [
           {
-            value: [mySocial, mySexual, myEssential, myRefusing, myRelational],
+            value:
+              selected === 'self'
+                ? [mySocial, mySexual, myEssential, myRefusing, myRelational]
+                : [spouseSocial, spouseSexual, spouseEssential, spouseRefusing, spouseRelational],
             itemStyle: {
               color: variables.colors.primary,
             },
-            name: '나',
-            show: selected === 'self',
+            name: selected === 'self' ? '나' : '배우자',
           },
           {
-            value: [myInfSocial, myInfSexual, myInfEssential, myInfRefusing, myInfRelational],
+            value:
+              selected === 'self'
+                ? [myInfSocial, myInfSexual, myInfEssential, myInfRefusing, myInfRelational]
+                : [spouseInfSocial, spouseInfSexual, spouseInfEssential, spouseInfRefusing, spouseInfRelational],
             itemStyle: {
               color: variables.colors.secondaryStrong,
             },
-            name: '배우자',
-            show: selected === 'partner',
+            name: '예상 점수',
           },
         ],
       },
@@ -124,11 +124,11 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
             본인
           </ToggleOption>
           <ToggleOption isSelected={selected === 'partner'} onClick={() => setSelected('partner')}>
-            남편
+            배우자
           </ToggleOption>
         </ToggleContainer>
       </CoupleReportTitle>
-      <CoupleReportTitleDes>나의 통계와 배우자의 통계를 한눈에 확인</CoupleReportTitleDes>
+      <CoupleReportTitleDes>나의 통계와 배우자의 통계를 한눈에 확인해요</CoupleReportTitleDes>
       <CoupleReportLineChartContainer>
         <CoupleReportDescription>난임 스트레스 예상 점수</CoupleReportDescription>
         <ChartCover>

src/components/home/OurKeyword.tsx

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 import variables from '@styles/Variables';
+import { useEffect, useState } from 'react';
+import notInftest from '@assets/Images/notInftest.svg';
 
 interface EmotionData {
   interest_keyword: string;
@@ -15,29 +17,77 @@ interface CoupleData {
 interface OurKeywordProps {
   coupleData?: CoupleData | undefined;
 }
-
 const OurKeyword = ({ coupleData }: OurKeywordProps) => {
   const myKeyword = coupleData?.result?.my_emotion?.interest_keyword ?? '';
   const spouseKeyword = coupleData?.result?.spouse_emotion?.interest_keyword ?? '';
+  const [testDone, setTestDone] = useState(false);
+
+  useEffect(() => {
+    setTestDone(!!myKeyword);
+  }, [myKeyword]);
 
-  // 키워드를 쉼표로 분리하여 배열로 변환
-  const myKeywordArray = myKeyword.split(',').map((keyword) => keyword.trim());
-  const spouseKeywordArray = spouseKeyword.split(',').map((keyword) => keyword.trim());
+  const myKeywordArray = myKeyword.split('#').filter((keyword) => keyword.trim() !== '');
+  const spouseKeywordArray = spouseKeyword.split('#').filter((keyword) => keyword.trim() !== '');
 
   return (
     <OurKeywordContainer>
       <OurKeywordTitle>우리의 관심사</OurKeywordTitle>
       <OurKeywordTitleDes>나의 통계와 배우자의 통계를 한눈에 확인할 수 있어요</OurKeywordTitleDes>
-      <OurKeywordLineChartContainer>
-        <OurKeywordDescription>우리의 관심사</OurKeywordDescription>
-        {myKeywordArray}, {spouseKeywordArray}
-      </OurKeywordLineChartContainer>
+      {testDone ? (
+        <OurKeywordLineChartContainer>
+          <OurKeywordDescription>우리의 관심사</OurKeywordDescription>
+          <KeywordContainer>
+            {[...myKeywordArray, ...spouseKeywordArray].map((keyword, index) => (
+              <KeywordBox key={index}>#{keyword.trim()}</KeywordBox>
+            ))}
+          </KeywordContainer>
+        </OurKeywordLineChartContainer>
+      ) : (
+        <>
+          <NoResult src={notInftest} alt="No test result" />
+          <Notification>난임 스트레스 척도 검사를 완료해주세요</Notification>
+        </>
+      )}
     </OurKeywordContainer>
   );
 };
-
 export default OurKeyword;
 
+const NoResult = styled.img`
+  width: 100%;
+  margin-top: 6rem;
+  height: 26rem;
+  margin-bottom: 1.8rem;
+`;
+
+const Notification = styled.div`
+  width: 100%;
+  height: 4rem;
+  border-radius: ${variables.borderRadius};
+  background-color: ${variables.colors.gray10};
+  display: flex;
+  justify-content: center;
+  color: ${variables.colors.gray100};
+  font-size: ${variables.size.medium};
+  align-items: center;
+`;
+
+const KeywordContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 2rem;
+  margin-top: 3.5rem;
+`;
+
+const KeywordBox = styled.div`
+  padding: 0.8rem 1.6rem;
+  background-color: ${variables.colors.secondaryStrong};
+  border-radius: 2rem;
+  font-size: ${variables.size.small};
+  color: ${variables.colors.tertiarySoft};
+`;
+
 const OurKeywordContainer = styled.div`
   display: flex;
   flex-direction: column;

src/hooks/useCoupleInfo.tsx

@@ -6,7 +6,6 @@ const fetchCoupleInfo = async (memberId: string) => {
   const response = await axios.get('https://www.wishkr.site/accounts/couple', {
     params: { memberId },
   });
-  console.log(response.data.result);
   return response.data.result;
 };
 

src/pages/Home/Home.tsx

@@ -16,11 +16,8 @@ const Home = () => {
 
   if (redirect) return redirect; // 인증되지 않으면 리디렉션을 반환
 
-
   console.log('home에서 데이터 호출 ', coupleData);
 
-
-
   return (
     <HomepageContainer>
       <ContentWrapper>
@@ -39,7 +36,6 @@ const HomepageContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100vh;
-  margin-top: 9rem;
 `;
 
 const ContentWrapper = styled.div`