Merge pull request #182 from KDT-hahahoho/Feat/#155

Feat: 이번주 미션 수행여부 컴포넌트 구현
KDT-hahahoho · Nov 20, 2024 · e8f2415 · e8f2415
2 parents d975b49 + f8df571
commit e8f2415
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 23 deletions.
diff --git a/src/components/home/CoupleInformation.tsx b/src/components/home/CoupleInformation.tsx
@@ -7,6 +7,7 @@ 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 {
@@ -58,6 +59,27 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => {
     }
   };
 
+  const [prevEmotionId, setPrevEmotionId] = useState<number | null>(null);
+
+  useEffect(() => {
+    const emotion = coupleData?.result?.my_emotion;
+    const currentEmotionId = emotion?.id;
+
+    // 이전 이모션 ID와 현재 이모션 ID가 다르면 새로운 미션으로 간주
+    if (currentEmotionId && prevEmotionId !== currentEmotionId) {
+      setSelfMessage(emotion?.self_message || '');
+      setMission(emotion?.mission_content || '');
+      setIsMissionDone(false); // 새로운 미션이므로 미션 수행 여부 초기화
+      setPrevEmotionId(currentEmotionId); // 현재 이모션 ID 저장
+    } else if (!currentEmotionId) {
+      // 이모션이 없는 경우 초기화
+      setSelfMessage('');
+      setMission('');
+      setIsMissionDone(false);
+      setPrevEmotionId(null);
+    }
+  }, [coupleData?.result?.my_emotion?.id, prevEmotionId]);
+
   /** 미션 수행 등록 함수 {PUT} */
   const handleMissionToggle = async () => {
     try {
@@ -126,10 +148,12 @@ const CoupleInformation = ({ coupleData }: OurReportProps) => {
       <CoupleMission>
         {partnerName ? getMissionStatusMessage() : '배우자 연동을 하면 미션 등록이 가능해요'}
       </CoupleMission>
+      <CoupleMissionWeekly></CoupleMissionWeekly>
     </CoupleInformationContainer>
   );
 };
 export default CoupleInformation;
+
 const CompletedLabel = styled.span`
   color: ${variables.colors.primary};
   font-weight: 600;

diff --git a/src/components/home/CoupleMissionWeekly.tsx b/src/components/home/CoupleMissionWeekly.tsx
@@ -1,19 +1,67 @@
 import styled from '@emotion/styled';
 import variables from '@styles/Variables';
+import fetchMissionStatusWeekly from '@hooks/useCheckMissionStatus';
+import { useEffect, useState } from 'react';
 
-type DotStatus = 'completed' | 'current' | 'locked';
+type DotStatus = 'bothCompleted' | 'oneCompleted' | 'locked';
+
+interface MissionData {
+  is_complement: boolean;
+  created_at: string;
+}
+
+interface WeeklyStatusType {
+  user_is_complement: {
+    [key: string]: MissionData[];
+  };
+  spouse_is_complement: {
+    [key: string]: MissionData[];
+  };
+}
 
 const CoupleMissionWeekly = () => {
-  // 각 날짜의 상태를 정의
-  const dotStatuses: DotStatus[] = [
-    'completed', // 월요일 - 완료
-    'completed', // 화요일 - 완료
-    'completed', // 수요일 - 완료
-    'current', // 목요일 - 현재
-    'locked', // 금요일 - 잠김
-    'locked', // 토요일 - 잠김
-    'locked', // 일요일 - 잠김
-  ];
+  const [weeklyStatus, setWeeklyStatus] = useState<WeeklyStatusType | null>(null);
+
+  useEffect(() => {
+    const MemberId = localStorage.getItem('MemberId');
+    if (MemberId) {
+      const fetchStatus = async () => {
+        const data = await fetchMissionStatusWeekly(MemberId);
+        if (data) {
+          setWeeklyStatus(data);
+        }
+      };
+      fetchStatus();
+    }
+  }, []);
+
+  const getDotStatus = (day: string): DotStatus => {
+    if (!weeklyStatus) return 'locked';
+
+    const userMission = weeklyStatus.user_is_complement[day]?.[0];
+    const spouseMission = weeklyStatus.spouse_is_complement[day]?.[0];
+
+    const userCompleted = userMission?.is_complement || false;
+    const spouseCompleted = spouseMission?.is_complement || false;
+
+    if (userCompleted && spouseCompleted) {
+      return 'bothCompleted';
+    } else if (userCompleted || spouseCompleted) {
+      return 'oneCompleted';
+    }
+    return 'locked';
+  };
+
+  const days = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
+  const today = new Date().getDay(); // 0(일요일)부터 6(토요일)
+  const mondayOffset = today === 0 ? 6 : today - 1; // 월요일 기준으로 조정
+
+  const dotStatuses: DotStatus[] = days.map((day, index) => {
+    if (index > mondayOffset) {
+      return 'locked';
+    }
+    return getDotStatus(day);
+  });
 
   return (
     <CoupleMissionWeeklyUI>
@@ -55,12 +103,12 @@ const Dot = styled.div<{ status: DotStatus }>`
   height: 2.4rem;
   background-color: ${({ status }) => {
     switch (status) {
-      case 'completed':
-        return variables.colors.primary;
-      case 'current':
-        return variables.colors.secondary;
+      case 'bothCompleted':
+        return variables.colors.primary; // 파란색 - 둘 다 완료
+      case 'oneCompleted':
+        return variables.colors.secondary; // 빨간색 - 한 명만 완료
       case 'locked':
-        return variables.colors.gray50;
+        return variables.colors.gray50; // 회색 - 미완료 또는 잠김
       default:
         return variables.colors.gray50;
     }

diff --git a/src/components/home/CoupleReport.tsx b/src/components/home/CoupleReport.tsx
@@ -63,12 +63,16 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
     social: spouseInfSocial = 0,
   } = coupleData?.result?.spouse_inf_tests[0] || {};
   const option = {
+    legend: {
+      show: true,
+      bottom: '0',
+    },
     radar: {
       indicator: [
         { name: '사회적' },
         { name: '성적' },
         { name: '필요성' },
-        { name: '아이가 없는 일상에 대한 거부' },
+        { name: '아이가 없는 일상' },
         { name: '관계적' },
       ],
       splitNumber: 10,
@@ -97,7 +101,7 @@ const CoupleReport = ({ coupleData }: CoupleReportProps) => {
             itemStyle: {
               color: variables.colors.primary,
             },
-            name: selected === 'self' ? '나' : '배우자',
+            name: selected === 'self' ? '검사 점수' : '배우자',
           },
           {
             value:

diff --git a/src/components/home/OurKeyword.tsx b/src/components/home/OurKeyword.tsx
@@ -38,7 +38,9 @@ const OurKeyword = ({ coupleData }: OurKeywordProps) => {
           <OurKeywordDescription>우리의 관심사</OurKeywordDescription>
           <KeywordContainer>
             {[...myKeywordArray, ...spouseKeywordArray].map((keyword, index) => (
-              <KeywordBox key={index}>#{keyword.trim()}</KeywordBox>
+              <KeywordBox key={index} colorIndex={index}>
+                #{keyword.trim()}
+              </KeywordBox>
             ))}
           </KeywordContainer>
         </OurKeywordLineChartContainer>
@@ -80,12 +82,23 @@ const KeywordContainer = styled.div`
   margin-top: 3.5rem;
 `;
 
-const KeywordBox = styled.div`
+const KeywordBox = styled.div<{ colorIndex: number }>`
   padding: 0.8rem 1.6rem;
-  background-color: ${variables.colors.secondaryStrong};
+  background-color: ${({ colorIndex }) => {
+    switch (colorIndex % 3) {
+      case 0:
+        return variables.colors.primaryStrong;
+      case 1:
+        return variables.colors.primaryStrong;
+      case 2:
+        return variables.colors.secondaryStrong;
+      default:
+        return variables.colors.secondaryStrong;
+    }
+  }};
   border-radius: 0.5rem;
-  font-size: ${variables.size.small};
-  color: ${variables.colors.tertiarySoft};
+  font-size: ${variables.size.medium};
+  color: ${variables.colors.white};
 `;
 
 const OurKeywordContainer = styled.div`

diff --git a/src/hooks/useCheckMissionStatus.tsx b/src/hooks/useCheckMissionStatus.tsx
@@ -0,0 +1,28 @@
+import axios from 'axios';
+
+const fetchMissionStatusWeekly = async (member_id: string) => {
+  try {
+    const response = await axios.get('https://www.wishkr.site/emotions/missions/', {
+      params: { member_id },
+    });
+
+    // response.data가 undefined인지 체크
+    if (!response.data) {
+      console.error('응답 데이터가 없습니다');
+      return null;
+    }
+
+    if (!response.data) {
+      console.error('result 필드가 없습니다', response.data);
+      return null;
+    }
+
+    console.log('주간 미션 현황', response.data);
+    return response.data;
+  } catch (error) {
+    console.error('미션 상태 조회 중 에러 발생:', error);
+    return null;
+  }
+};
+
+export default fetchMissionStatusWeekly;