diff --git a/src/components/home/CoupleInformation.tsx b/src/components/home/CoupleInformation.tsx index af8e28b..0bc8fae 100644 --- a/src/components/home/CoupleInformation.tsx +++ b/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,6 +19,8 @@ interface InfTest { self_message?: string; id: number; mission_content?: string; + export_message?: string; + is_complement?: boolean; } interface CoupleData { @@ -27,6 +28,8 @@ interface CoupleData { my_inf_tests?: InfTest[]; spouse_inf_tests?: InfTest[]; my_emotion?: InfTest; + spouse_emotion?: InfTest; + is_complement?: InfTest; }; } @@ -38,31 +41,37 @@ 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); // 실패시 원래 상태로 복구 } }; @@ -70,8 +79,22 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => { 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 ( {selfMessage ? selfMessage : '원활한 사용을 위해 부부 연동이 필요해요!'} @@ -96,15 +119,9 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => { <> {mission ? ( - - {mission} - + + {getMissionMessage()} + ) : ( @@ -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; diff --git a/src/components/home/CoupleMissonWeekly.tsx b/src/components/home/CoupleMissionWeekly.tsx similarity index 100% rename from src/components/home/CoupleMissonWeekly.tsx rename to src/components/home/CoupleMissionWeekly.tsx diff --git a/src/components/home/CoupleReport.tsx b/src/components/home/CoupleReport.tsx index 55d5daf..4d24e63 100644 --- a/src/components/home/CoupleReport.tsx +++ b/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) => { 본인 setSelected('partner')}> - 남편 + 배우자 - 나의 통계와 배우자의 통계를 한눈에 확인 + 나의 통계와 배우자의 통계를 한눈에 확인해요 난임 스트레스 예상 점수 diff --git a/src/components/home/OurKeyword.tsx b/src/components/home/OurKeyword.tsx index 1474261..04df4b6 100644 --- a/src/components/home/OurKeyword.tsx +++ b/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 ( 우리의 관심사 나의 통계와 배우자의 통계를 한눈에 확인할 수 있어요 - - 우리의 관심사 - {myKeywordArray}, {spouseKeywordArray} - + {testDone ? ( + + 우리의 관심사 + + {[...myKeywordArray, ...spouseKeywordArray].map((keyword, index) => ( + #{keyword.trim()} + ))} + + + ) : ( + <> + + 난임 스트레스 척도 검사를 완료해주세요 + + )} ); }; - 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; diff --git a/src/hooks/useCoupleInfo.tsx b/src/hooks/useCoupleInfo.tsx index b06fc07..e73d18e 100644 --- a/src/hooks/useCoupleInfo.tsx +++ b/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; }; diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index fe9d897..131e402 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -16,11 +16,8 @@ const Home = () => { if (redirect) return redirect; // 인증되지 않으면 리디렉션을 반환 - console.log('home에서 데이터 호출 ', coupleData); - - return ( @@ -39,7 +36,6 @@ const HomepageContainer = styled.div` display: flex; flex-direction: column; height: 100vh; - margin-top: 9rem; `; const ContentWrapper = styled.div`