diff --git a/src/components/home/CoupleInformation.tsx b/src/components/home/CoupleInformation.tsx index b8ad5a5..99f405a 100644 --- a/src/components/home/CoupleInformation.tsx +++ b/src/components/home/CoupleInformation.tsx @@ -149,7 +149,7 @@ const CoupleCardsWrapper = styled.div` `; const PersonalCard = styled.div` - border-radius: ${variables.borderRadius}+0.8rem; + border-radius: 1.6rem; width: 50%; height: 21rem; display: flex; @@ -157,11 +157,11 @@ const PersonalCard = styled.div` align-items: center; justify-content: center; padding: 1rem; - box-shadow: inset ${variables.BoxShadow}; + box-shadow: inset 0 0 0.3rem rgba(0, 0, 0, 0.1); `; const SpouseCard = styled.div` - border-radius: ${variables.borderRadius}+0.8rem; + border-radius: 1.6rem; width: 50%; height: 21rem; display: flex; @@ -169,7 +169,7 @@ const SpouseCard = styled.div` justify-content: center; align-items: center; padding: 1rem; - box-shadow: inset ${variables.BoxShadow}; + box-shadow: inset 0 0 0.3rem rgba(0, 0, 0, 0.1); `; const CardImage = styled.img` @@ -213,21 +213,24 @@ const CoupleMissionToChoose = styled.div<{ isMissionDone: boolean }>` display: flex; justify-content: space-between; 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; - padding: 0 1rem; + padding: 1.4rem 2.5rem; border: ${({ isMissionDone }) => (isMissionDone ? `1px solid ${variables.colors.primary}` : 'transparent')}; border-color: ${({ isMissionDone }) => (isMissionDone ? variables.colors.primary : 'transparent')}; `; const MissionTitle = styled.p` font-weight: 500; - font-size: 1.2rem; + font-size: 1.4rem; `; const IsMissionDone = styled.input` + margin-right: -0.5rem; + background-color: red; width: 2.4rem; height: 2.4rem; + flex-grow: 0; `; diff --git a/src/components/home/CoupleMissonWeekly.tsx b/src/components/home/CoupleMissonWeekly.tsx index 70bc2ba..791ac4c 100644 --- a/src/components/home/CoupleMissonWeekly.tsx +++ b/src/components/home/CoupleMissonWeekly.tsx @@ -34,15 +34,15 @@ const CoupleMissionWeeklyUI = styled.div` font-weight: 700; display: flex; 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; + padding: 1.4rem 2.5rem; `; const Title = styled.p` margin-right: 1.5rem; - margin-left: 2.5rem; `; const MissionDots = styled.div` @@ -50,7 +50,6 @@ const MissionDots = styled.div` gap: 0.8rem; `; -// status prop을 받아서 색상을 결정하는 Dot 컴포넌트 const Dot = styled.div<{ status: DotStatus }>` width: 2.4rem; height: 2.4rem; diff --git a/src/components/home/CoupleReport.tsx b/src/components/home/CoupleReport.tsx index cb92cd4..55d5daf 100644 --- a/src/components/home/CoupleReport.tsx +++ b/src/components/home/CoupleReport.tsx @@ -10,12 +10,15 @@ type EmotionData = { sexual?: number; social?: number; } | null; - interface CoupleResult { my_emotion: EmotionData; spouse_emotion: EmotionData; + my_inf_tests: EmotionData[]; + spouse_inf_tests: EmotionData[]; // 새로운 필드 추가 } +// ... 기존 코드 ... + interface CoupleData { result?: CoupleResult; } @@ -38,6 +41,13 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => { sexual: mySexual = 0, social: mySocial = 0, } = coupleData?.result?.my_emotion || {}; + const { + essential: myInfEssential = 0, + refusing: myInfRefusing = 0, + relational: myInfRelational = 0, + sexual: myInfSexual = 0, + social: myInfSocial = 0, + } = coupleData?.result?.my_inf_tests[0] || {}; const { essential: spouseEssential = 0, @@ -46,6 +56,16 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => { sexual: spouseSexual = 0, social: spouseSocial = 0, } = coupleData?.result?.spouse_emotion || {}; + const { + essential: spouseInfEssential = 0, + refusing: spouseInfRefusing = 0, + relational: spouseInfRelational = 0, + sexual: spouseInfSexual = 0, + 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: { @@ -83,7 +103,7 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => { show: selected === 'self', }, { - value: [spouseSocial, spouseSexual, spouseEssential, spouseRefusing, spouseRelational], + value: [myInfSocial, myInfSexual, myInfEssential, myInfRefusing, myInfRelational], itemStyle: { color: variables.colors.secondaryStrong, }, diff --git a/src/components/home/OurKeyword.tsx b/src/components/home/OurKeyword.tsx index 29c2074..1474261 100644 --- a/src/components/home/OurKeyword.tsx +++ b/src/components/home/OurKeyword.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; import variables from '@styles/Variables'; -import EChartsReact from 'echarts-for-react'; interface EmotionData { interest_keyword: string; @@ -21,65 +20,17 @@ const OurKeyword = ({ coupleData }: OurKeywordProps) => { const myKeyword = coupleData?.result?.my_emotion?.interest_keyword ?? ''; const spouseKeyword = coupleData?.result?.spouse_emotion?.interest_keyword ?? ''; - console.log(coupleData); - // 키워드를 쉼표로 분리하여 배열로 변환 const myKeywordArray = myKeyword.split(',').map((keyword) => keyword.trim()); const spouseKeywordArray = spouseKeyword.split(',').map((keyword) => keyword.trim()); - // 키워드 데이터 준비 - const keywordData = [...myKeywordArray, ...spouseKeywordArray].map((keyword, index) => ({ - value: 100, - name: `${keyword}`, - color: index === 0 ? variables.colors.primaryLight : variables.colors.secondary, - })); - - const option = { - tooltip: { - trigger: 'item', - }, - legend: { - bottom: '-1%', - left: 'center', - }, - series: [ - { - name: 'Access From', - type: 'pie', - radius: ['40%', '70%'], - avoidLabelOverlap: false, - padAngle: 5, - itemStyle: { - borderRadius: 10, - }, - label: { - show: false, - position: 'center', - }, - emphasis: { - label: { - show: true, - fontSize: 10, - fontWeight: 'bold', - }, - }, - data: keywordData.map((item, index) => ({ - ...item, - itemStyle: { - color: index === 0 ? variables.colors.primaryLight : variables.colors.secondary, // 첫 번째 항목은 primaryLight, 나머지는 secondary 색상 - }, - })), - }, - ], - }; - return ( 우리의 관심사 나의 통계와 배우자의 통계를 한눈에 확인할 수 있어요 우리의 관심사 - + {myKeywordArray}, {spouseKeywordArray} ); @@ -107,7 +58,7 @@ const OurKeywordTitleDes = styled.p` const OurKeywordLineChartContainer = styled.div` width: 100%; - height: 42rem; + height: 20rem; border: 1px solid ${variables.colors.gray50}; border-radius: ${variables.borderRadius}; margin-top: 4.2rem; diff --git a/src/components/home/OurReport.tsx b/src/components/home/OurReport.tsx index 46df2aa..1e06521 100644 --- a/src/components/home/OurReport.tsx +++ b/src/components/home/OurReport.tsx @@ -35,7 +35,7 @@ interface ChartOptions { type: string; }; grid: { - bottom: number | string; + top: number | string; }; series: Array<{ name: string; @@ -51,6 +51,7 @@ interface OurReportProps { const OurReport = ({ coupleData }: OurReportProps) => { const [testdone, setTestDone] = useState(false); + const [options, setOptions] = useState({ xAxis: { type: 'category', @@ -64,7 +65,7 @@ const OurReport = ({ coupleData }: OurReportProps) => { }, yAxis: { type: 'value' }, grid: { - bottom: '10%', + top: '10%', }, series: [], }); @@ -103,7 +104,7 @@ const OurReport = ({ coupleData }: OurReportProps) => { }, yAxis: { type: 'value' }, grid: { - bottom: '20%', + top: '-23px', }, series: [ { name: '본인', data: myData, type: 'line', color: variables.colors.primary }, diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 53537b7..fe9d897 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -12,11 +12,14 @@ import { useGetCoupleData } from '@hooks/useGetCoupleData'; const Home = () => { const token = localStorage.getItem('authToken') || ''; const redirect = useAuthRedirect(); // 인가 확인 훅 - const { data: coupleData, isLoading, error } = useGetCoupleData(token); + const { data: coupleData } = useGetCoupleData(token); if (redirect) return redirect; // 인증되지 않으면 리디렉션을 반환 - // if (isLoading) return
......
; // 로딩 중 표시 - // if (error || !coupleData) return
{error?.message}
; // 에러 핸들링 + + + console.log('home에서 데이터 호출 ', coupleData); + + return ( @@ -37,7 +40,6 @@ const HomepageContainer = styled.div` flex-direction: column; height: 100vh; margin-top: 9rem; - height: 300rem; `; const ContentWrapper = styled.div` diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo index 39c0bea..c8a8d2e 100644 --- a/tsconfig.tsbuildinfo +++ b/tsconfig.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/auth/autherror.tsx","./src/components/auth/checkagreement.tsx","./src/components/auth/pagetitleheader.tsx","./src/components/auth/profilesetup.tsx","./src/components/auth/setupemail.tsx","./src/components/auth/setupkoreanidinput.tsx","./src/components/auth/setupname.tsx","./src/components/auth/setuppassword.tsx","./src/components/auth/setupsubfertility.tsx","./src/components/common/button.tsx","./src/components/common/footer.tsx","./src/components/common/genericform.tsx","./src/components/common/genericprogressbar.tsx","./src/components/common/input.tsx","./src/components/common/toast.tsx","./src/components/common/toogle.tsx","./src/components/home/coupleinformation.tsx","./src/components/home/couplemissonweekly.tsx","./src/components/home/couplereport.tsx","./src/components/home/homepagetitle.tsx","./src/components/home/ourkeyword.tsx","./src/components/home/ourreport.tsx","./src/components/layout/layout.tsx","./src/features/auth.tsx","./src/hooks/useauthredirect.tsx","./src/hooks/usecoupleinfo.tsx","./src/hooks/usefetch.tsx","./src/hooks/usefunnel.tsx","./src/hooks/usegpt.tsx","./src/pages/home/home.tsx","./src/pages/user/follow/followpage.tsx","./src/pages/user/login/loginpage.tsx","./src/pages/user/signup/signuppage.tsx","./src/pages/user/welcome/welcomepage.tsx","./src/pages/counseling/counseling.tsx","./src/pages/counseling/counselinglist.tsx","./src/pages/counseling/counselinglistitem.tsx","./src/pages/counseling/counslingguide.tsx","./src/pages/emotion/message/emotionmessage.style.tsx","./src/pages/emotion/message/emotionmessage.tsx","./src/pages/emotion/mission/emotionmission.style.tsx","./src/pages/emotion/mission/emotionmission.tsx","./src/pages/emotion/record/emotionbad.tsx","./src/pages/emotion/record/emotioneffort.tsx","./src/pages/emotion/record/emotiongood.tsx","./src/pages/emotion/record/emotionrecord.style.tsx","./src/pages/emotion/record/emotionrecord.tsx","./src/pages/emotion/record/emotionrecordpage.tsx","./src/pages/emotion/result/emotiongraph.tsx","./src/pages/emotion/result/emotionresult.tsx","./src/pages/emotion/result/emotionstress.tsx","./src/pages/scale/listgraph.tsx","./src/pages/scale/questions.tsx","./src/pages/scale/scalelist.tsx","./src/pages/scale/scaleresult.tsx","./src/pages/scale/scaletotalgraph.tsx","./src/pages/scale/scaletypegraph.tsx","./src/pages/scale/testing.tsx","./src/router/protectedroute.tsx","./src/router/route.tsx","./src/store/useanalysisstore.ts","./src/store/useauthstore.ts","./src/store/useemotionstore.ts","./src/styles/globalstyles.tsx","./src/styles/variables.tsx","./src/utils/validation/handlevalidation.ts"],"version":"5.6.3"} \ No newline at end of file +{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/auth/autherror.tsx","./src/components/auth/checkagreement.tsx","./src/components/auth/pagetitleheader.tsx","./src/components/auth/profilesetup.tsx","./src/components/auth/setupemail.tsx","./src/components/auth/setupkoreanidinput.tsx","./src/components/auth/setupname.tsx","./src/components/auth/setuppassword.tsx","./src/components/auth/setupsubfertility.tsx","./src/components/common/button.tsx","./src/components/common/footer.tsx","./src/components/common/genericform.tsx","./src/components/common/genericprogressbar.tsx","./src/components/common/input.tsx","./src/components/common/toast.tsx","./src/components/common/toogle.tsx","./src/components/home/coupleinformation.tsx","./src/components/home/couplemissonweekly.tsx","./src/components/home/couplereport.tsx","./src/components/home/homepagetitle.tsx","./src/components/home/ourkeyword.tsx","./src/components/home/ourreport.tsx","./src/components/layout/layout.tsx","./src/features/auth.tsx","./src/hooks/useauthredirect.tsx","./src/hooks/usecoupleinfo.tsx","./src/hooks/usefetch.tsx","./src/hooks/usefunnel.tsx","./src/hooks/usegpt.tsx","./src/hooks/usegetcoupledata.tsx","./src/pages/home/home.tsx","./src/pages/user/follow/followpage.tsx","./src/pages/user/interests/interestitem.tsx","./src/pages/user/interests/interestpage.tsx","./src/pages/user/login/loginpage.tsx","./src/pages/user/signup/signuppage.tsx","./src/pages/user/welcome/welcomepage.tsx","./src/pages/counseling/counseling.tsx","./src/pages/counseling/counselinglist.tsx","./src/pages/counseling/counselinglistitem.tsx","./src/pages/counseling/counslingguide.tsx","./src/pages/emotion/message/emotionmessage.style.tsx","./src/pages/emotion/message/emotionmessage.tsx","./src/pages/emotion/mission/emotionmission.style.tsx","./src/pages/emotion/mission/emotionmission.tsx","./src/pages/emotion/record/emotionbad.tsx","./src/pages/emotion/record/emotioneffort.tsx","./src/pages/emotion/record/emotiongood.tsx","./src/pages/emotion/record/emotionrecord.style.tsx","./src/pages/emotion/record/emotionrecord.tsx","./src/pages/emotion/record/emotionrecordpage.tsx","./src/pages/emotion/result/emotiongraph.tsx","./src/pages/emotion/result/emotionresult.tsx","./src/pages/emotion/result/emotionstress.tsx","./src/pages/scale/listgraph.tsx","./src/pages/scale/questions.tsx","./src/pages/scale/scalelist.tsx","./src/pages/scale/scaleresult.tsx","./src/pages/scale/scaletotalgraph.tsx","./src/pages/scale/scaletypegraph.tsx","./src/pages/scale/testing.tsx","./src/router/protectedroute.tsx","./src/router/route.tsx","./src/store/useanalysisstore.ts","./src/store/useauthstore.ts","./src/store/useemotionstore.ts","./src/styles/globalstyles.tsx","./src/styles/variables.tsx","./src/types/types.ts","./src/utils/validation/handlevalidation.ts"],"version":"5.6.3"} \ No newline at end of file