From d4c00908dc993bb45c7f9319a8d94d35a62a45ce Mon Sep 17 00:00:00 2001
From: woojoung <ywj981217@naver.com>
Date: Wed, 20 Nov 2024 14:56:09 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=AF=B8=EC=85=98=20=EC=88=98=ED=96=89?=
 =?UTF-8?q?=20=EC=97=AC=EB=B6=80=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/CoupleInformation.tsx | 77 ++++++++++++-----------
 src/components/home/CoupleReport.tsx      |  1 -
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/components/home/CoupleInformation.tsx b/src/components/home/CoupleInformation.tsx
index 1ed6bb0..9964d84 100644
--- a/src/components/home/CoupleInformation.tsx
+++ b/src/components/home/CoupleInformation.tsx
@@ -7,7 +7,6 @@ import { useNavigate } from 'react-router-dom';
 import { useCoupleInfo } from '@hooks/useCoupleInfo';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
-import CoupleMissionWeekly from './CoupleMissionWeekly';
 
 // TODO : 미션 등록 이번주 미션 해야함
 interface InfTest {
@@ -42,7 +41,8 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => {
   const navigate = useNavigate();
   const [selfMessage, setSelfMessage] = useState('');
   const [mission, setMission] = useState('');
-  const [isMissionDone, setIsMissionDone] = useState(false); // 체크박스 상태
+  // isMissionDone 초기값을 서버 데이터와 동기화
+  const [isMissionDone, setIsMissionDone] = useState(false);
   const { partnerName, myName, gender, isConnected } = useCoupleInfo();
   const myMissionCompleted = coupleData?.result?.my_emotion?.is_complement || false;
   const spouseMissionCompleted = coupleData?.result?.spouse_emotion?.is_complement || false;
@@ -50,7 +50,7 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => {
 
   const getMissionStatusMessage = () => {
     if (myMissionCompleted && spouseMissionCompleted) {
-      return spouseExportMessage;
+      return spouseExportMessage || '배우자의 메시지가 없습니다';
     } else if (myMissionCompleted) {
       return '배우자 미션 수행 대기중';
     } else {
@@ -61,31 +61,36 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => {
   /** 미션 수행 등록 함수 {PUT} */
   const handleMissionToggle = async () => {
     try {
-      setIsMissionDone(!isMissionDone);
-      if (coupleData?.result?.my_emotion) {
-        const result_id = coupleData.result.my_emotion.id;
-
-        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);
+      if (!isMissionDone) {
+        setIsMissionDone(true);
+        if (coupleData?.result?.my_emotion) {
+          const result_id = coupleData.result.my_emotion.id;
+
+          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(false);
     }
   };
 
+  // 서버 데이터가 변경될 때마다 로컬 상태 업데이트
   useEffect(() => {
     const emotion = coupleData?.result?.my_emotion;
     setSelfMessage(emotion?.self_message || '');
     setMission(emotion?.mission_content || '');
+    // isMissionDone 상태를 서버 데이터와 동기화
+    setIsMissionDone(emotion?.is_complement || false);
   }, [coupleData]);
 
   return (
@@ -110,30 +115,26 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => {
           <EmotionAnalysis>{partnerName ? '감정분석 필요' : '연동 필수'}</EmotionAnalysis>
         </SpouseCard>
       </CoupleCardsWrapper>
-      <>
-        <>
-          {mission ? (
-            <CoupleMissionToChoose isMissionDone={isMissionDone}>
-              <MissionTitle>{mission}</MissionTitle>
-              <IsMissionDone type="checkbox" checked={isMissionDone} onChange={handleMissionToggle} />
-            </CoupleMissionToChoose>
-          ) : (
-            <CoupleMission>
-              {partnerName ? getMissionStatusMessage() : '배우자 연동을 하면 미션 등록이 가능해요'}
-            </CoupleMission>
-          )}
-        </>
-      </>
-      {partnerName ? (
-        <CoupleMissionWeekly></CoupleMissionWeekly>
-      ) : (
-        <CoupleMission>배우자 연동을 하면 미션 등록이 가능해요</CoupleMission>
+      {mission && (
+        <CoupleMissionToChoose isMissionDone={isMissionDone}>
+          <MissionTitle>{mission}</MissionTitle>
+          {!isMissionDone && <IsMissionDone type="checkbox" checked={isMissionDone} onChange={handleMissionToggle} />}
+          {isMissionDone && <CompletedLabel>완료</CompletedLabel>}
+        </CoupleMissionToChoose>
       )}
+
+      <CoupleMission>
+        {partnerName ? getMissionStatusMessage() : '배우자 연동을 하면 미션 등록이 가능해요'}
+      </CoupleMission>
     </CoupleInformationContainer>
   );
 };
-
 export default CoupleInformation;
+const CompletedLabel = styled.span`
+  color: ${variables.colors.primary};
+  font-weight: 600;
+  font-size: ${variables.size.medium};
+`;
 
 const CoupleInformationContainer = styled.div`
   display: flex;
@@ -212,7 +213,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;
diff --git a/src/components/home/CoupleReport.tsx b/src/components/home/CoupleReport.tsx
index 4d24e63..e1091b7 100644
--- a/src/components/home/CoupleReport.tsx
+++ b/src/components/home/CoupleReport.tsx
@@ -62,7 +62,6 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
     sexual: spouseInfSexual = 0,
     social: spouseInfSocial = 0,
   } = coupleData?.result?.spouse_inf_tests[0] || {};
-
   const option = {
     radar: {
       indicator: [