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: [