From 2fc6318fa6a19b93bf94aec8641698502d75c655 Mon Sep 17 00:00:00 2001 From: woojoung Date: Tue, 19 Nov 2024 14:12:11 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20=EB=B0=B0=EC=9A=B0=EC=9E=90=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20=ED=99=9C=EC=84=B1?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/CoupleReport.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/home/CoupleReport.tsx b/src/components/home/CoupleReport.tsx index 55d5daf..64fff25 100644 --- a/src/components/home/CoupleReport.tsx +++ b/src/components/home/CoupleReport.tsx @@ -64,9 +64,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 +92,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,7 +125,7 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => { 본인 setSelected('partner')}> - 남편 + 배우자 From b986257f23fff3137349514a9f5a5e7487b7e34a Mon Sep 17 00:00:00 2001 From: woojoung Date: Tue, 19 Nov 2024 14:36:46 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20=EB=B6=80=EB=B6=80=20=ED=82=A4?= =?UTF-8?q?=EC=9B=8C=EB=93=9C=EC=84=B8=EB=B6=84=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/CoupleInformation.tsx | 2 +- src/components/home/CoupleReport.tsx | 7 +++--- src/components/home/OurKeyword.tsx | 29 ++++++++++++++++++----- src/pages/Home/Home.tsx | 4 ---- 4 files changed, 27 insertions(+), 15 deletions(-) diff --git a/src/components/home/CoupleInformation.tsx b/src/components/home/CoupleInformation.tsx index 99f405a..8299651 100644 --- a/src/components/home/CoupleInformation.tsx +++ b/src/components/home/CoupleInformation.tsx @@ -200,7 +200,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 64fff25..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; } @@ -129,7 +128,7 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => { - 나의 통계와 배우자의 통계를 한눈에 확인 + 나의 통계와 배우자의 통계를 한눈에 확인해요 난임 스트레스 예상 점수 diff --git a/src/components/home/OurKeyword.tsx b/src/components/home/OurKeyword.tsx index 1474261..5f1f034 100644 --- a/src/components/home/OurKeyword.tsx +++ b/src/components/home/OurKeyword.tsx @@ -15,14 +15,12 @@ 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 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 ( @@ -30,14 +28,33 @@ const OurKeyword = ({ coupleData }: OurKeywordProps) => { 나의 통계와 배우자의 통계를 한눈에 확인할 수 있어요 우리의 관심사 - {myKeywordArray}, {spouseKeywordArray} + + {[...myKeywordArray, ...spouseKeywordArray].map((keyword, index) => ( + #{keyword.trim()} + ))} + ); }; - export default OurKeyword; +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.gray10}; +`; + const OurKeywordContainer = styled.div` display: flex; flex-direction: column; 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` From a4d7a2c85d99a8eb931de8dd3c4be9de50894a3f Mon Sep 17 00:00:00 2001 From: woojoung Date: Tue, 19 Nov 2024 15:43:44 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20=EB=AF=B8=EC=85=98=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EB=94=94=ED=85=8C=EC=9D=BC=20=EB=B6=80=EB=B6=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/CoupleInformation.tsx | 61 +++++++++++-------- ...ssonWeekly.tsx => CoupleMissionWeekly.tsx} | 0 src/components/home/OurKeyword.tsx | 51 +++++++++++++--- src/hooks/useCoupleInfo.tsx | 1 - 4 files changed, 79 insertions(+), 34 deletions(-) rename src/components/home/{CoupleMissonWeekly.tsx => CoupleMissionWeekly.tsx} (100%) diff --git a/src/components/home/CoupleInformation.tsx b/src/components/home/CoupleInformation.tsx index 8299651..b211a68 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,33 @@ 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 requestData = { - is_complement: true, - }; - - const response = await axios.put(`/emotions/results/${result_id}/`, requestData, { - headers: { - 'Content-Type': 'application/json', - }, - }); + const response = await axios.put( + `/emotions/results/${result_id}/`, + { is_complement: newMissionStatus }, + { + headers: { 'Content-Type': 'application/json' }, + } + ); console.log('요청 성공:', response.data); } } catch (error) { console.error('에러:', error); - setIsMissionDone(isMissionDone); + setIsMissionDone(isMissionDone); // 실패시 원래 상태로 복구 } }; @@ -70,8 +75,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 +115,9 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => { <> {mission ? ( - - {mission} - + + {getMissionMessage()} + ) : ( 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/OurKeyword.tsx b/src/components/home/OurKeyword.tsx index 5f1f034..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; @@ -18,6 +20,11 @@ interface OurKeywordProps { 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('#').filter((keyword) => keyword.trim() !== ''); const spouseKeywordArray = spouseKeyword.split('#').filter((keyword) => keyword.trim() !== ''); @@ -26,19 +33,45 @@ const OurKeyword = ({ coupleData }: OurKeywordProps) => { 우리의 관심사 나의 통계와 배우자의 통계를 한눈에 확인할 수 있어요 - - 우리의 관심사 - - {[...myKeywordArray, ...spouseKeywordArray].map((keyword, index) => ( - #{keyword.trim()} - ))} - - + {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; @@ -52,7 +85,7 @@ const KeywordBox = styled.div` background-color: ${variables.colors.secondaryStrong}; border-radius: 2rem; font-size: ${variables.size.small}; - color: ${variables.colors.gray10}; + color: ${variables.colors.tertiarySoft}; `; const OurKeywordContainer = styled.div` diff --git a/src/hooks/useCoupleInfo.tsx b/src/hooks/useCoupleInfo.tsx index a9b5e73..41ad73a 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('/accounts/couple', { params: { memberId }, }); - console.log(response.data.result); return response.data.result; };