feat: footer, list view 애인 정보 업데이트

HappyScrolls · Oct 8, 2024 · 663e400 · 663e400
1 parent 5a47444
commit 663e400
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 11 deletions.
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -3,21 +3,39 @@ import styled from "styled-components";
 import heart from "../../images/layout/heart.svg";
 import mypageLogo from "../../images/layout/mypageLogo.svg";
 import { useNavigate } from "react-router-dom";
+import { calculateDaysTogether } from "../../utils/date";
+import { useFetchCoupleInfo } from "../../hooks/useCoupleInfo";
 
 const Footer = () => {
   const navigate = useNavigate();
 
   const handleButton = () => {
     navigate("/mypage");
   };
+
+  // 커플 정보
+  const { data: coupleInfo } = useFetchCoupleInfo();
+
   return (
     <>
       <FooterContainer>
         <FooterBody>
           <FooterHeader>
-            <LoveIcon src={heart} />
+            {coupleInfo ? (
+              <>
+                <span>{coupleInfo.nickNameA}</span>
+                <LoveIcon src={heart} />
+                <span>{coupleInfo.nickNameB}</span>
+              </>
+            ) : (
+              ""
+            )}
           </FooterHeader>
-          <DDay>D+100</DDay>
+          <DDay>
+            {coupleInfo
+              ? `D+${calculateDaysTogether(coupleInfo.startedAt)}`
+              : "커플로 등록해주세요!"}
+          </DDay>
         </FooterBody>
         <FooterButtonDiv onClick={handleButton}>
           <FooterButton src={mypageLogo} />
@@ -33,7 +51,7 @@ const FooterContainer = styled.div`
   width: 100%;
   padding: 0 30px;
   position: relative;
-  margin-top: 20px;
+  margin-top: 30px;
 
   background: #fff;
   display: flex;
@@ -63,6 +81,16 @@ const FooterHeader = styled.div`
   @media (max-width: 768px) {
     padding: 0 10px;
   }
+
+  span {
+    padding: 5px;
+    color: var(--Black, #3b3634);
+    font-family: SUIT;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
 `;
 
 const LoveIcon = styled.img`

diff --git a/src/pages/calendar/components/ListView.tsx b/src/pages/calendar/components/ListView.tsx
@@ -2,16 +2,25 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import defaultCat from "../../../images/signup/defaultCat.svg";
 import {
+  useFetchCommonScheduleList,
   useFetchMyScheduleList,
   useFetchPartnerScheduleList,
 } from "../../../hooks/useScheduleList";
 import { getBusyColor } from "../../../utils/colors";
 import { ScheduleData } from "../../../types/ISchedule";
 import { useUpdateScheduleStatus } from "../../../hooks/useUpdateScheduleStatus";
+import { useQueryClient } from "@tanstack/react-query";
+import { CoupleInfo } from "../../../types/ICoupleInfo";
+import { IMemberInfo } from "../../../types/IMemberInfo";
 
 const ListView: React.FC<{ date: string }> = ({ date }) => {
+  const queryClient = useQueryClient();
   const { data: myScheduleList } = useFetchMyScheduleList(date);
   const { data: partnerScheduleList } = useFetchPartnerScheduleList(date);
+  const { data: commonScheduleList } = useFetchCommonScheduleList(date);
+
+  const coupleInfo = queryClient.getQueryData<CoupleInfo>(["coupleInfo"]);
+  const myInfo = queryClient.getQueryData<IMemberInfo>(["memberInfo"]);
 
   const [mySchedules, setMySchedules] = useState<ScheduleData[]>(
     myScheduleList || []
@@ -20,20 +29,26 @@ const ListView: React.FC<{ date: string }> = ({ date }) => {
     partnerScheduleList || []
   );
 
+  // 내 일정 + 공통일정 통합 상태 변경
   useEffect(() => {
     if (myScheduleList) {
-      setMySchedules(myScheduleList);
+      setMySchedules([...myScheduleList, ...(commonScheduleList || [])]);
     }
-  }, [myScheduleList]);
+  }, [myScheduleList, commonScheduleList]);
 
+  // 애인 일정 + 공통일정 통합 상태 변경
   useEffect(() => {
     if (partnerScheduleList) {
-      setPartnerSchedules(partnerScheduleList);
+      setPartnerSchedules([
+        ...partnerScheduleList,
+        ...(commonScheduleList || []),
+      ]);
     }
-  }, [partnerScheduleList]);
+  }, [partnerScheduleList, commonScheduleList]);
 
   const { mutate: updateScheduleStatus } = useUpdateScheduleStatus();
 
+  // 완료 상태 변경
   const toggleCompletion = (
     schedules: ScheduleData[],
     setSchedules: React.Dispatch<React.SetStateAction<ScheduleData[]>>,
@@ -60,9 +75,13 @@ const ListView: React.FC<{ date: string }> = ({ date }) => {
       return schedule;
     });
 
+    // 애인 일정 중에 공통일정인 일정 상태 함께 변경
     const updatedOtherSchedules: ScheduleData[] = otherSchedules.map(
       (schedule) => {
-        if (schedule.isCommon && schedules[index].isCommon) {
+        if (
+          schedule.isCommon &&
+          schedule.scheduleNo === schedules[index].scheduleNo
+        ) {
           return {
             ...schedule,
             status: updatedSchedules[index].status,
@@ -83,7 +102,9 @@ const ListView: React.FC<{ date: string }> = ({ date }) => {
         <Header>
           <ProfileImage src={defaultCat} alt="프로필" />{" "}
           <Wrapper>
-            <Name>(애칭)의 일정</Name>
+            <Name>
+              {coupleInfo ? `${coupleInfo.nickNameA}` : `${myInfo?.name}`}
+            </Name>
             <StatusContainer>
               <StatusItem>일정 {mySchedules.length}개</StatusItem>
               <StatusItem>
@@ -130,7 +151,9 @@ const ListView: React.FC<{ date: string }> = ({ date }) => {
         <Header>
           <ProfileImage src={defaultCat} alt="프로필" />{" "}
           <Wrapper>
-            <Name>(애칭)의 일정</Name>
+            <Name>
+              {coupleInfo ? `${coupleInfo.nickNameB}` : "커플로 등록해주세요!"}
+            </Name>
             <StatusContainer>
               <StatusItem>일정 {partnerScheduleList.length}개</StatusItem>
               <StatusItem>

diff --git a/src/pages/calendar/components/ViewChangeHeader.tsx b/src/pages/calendar/components/ViewChangeHeader.tsx
@@ -1,5 +1,8 @@
+import { useQueryClient } from "@tanstack/react-query";
 import React from "react";
 import { styled } from "styled-components";
+import { CoupleInfo } from "../../../types/ICoupleInfo";
+import { calculateDaysTogether } from "../../../utils/date";
 
 interface ViewChangeHeaderProps {
   isTimetableView: boolean;
@@ -16,13 +19,20 @@ const ViewChangeHeader: React.FC<ViewChangeHeaderProps> = ({
   onNextDay,
   formattedDate,
 }) => {
+  const queryClient = useQueryClient();
+  const coupleInfo = queryClient.getQueryData<CoupleInfo>(["coupleInfo"]);
+
   return (
     <>
       <ViewChangeBox>
         <Arrow onClick={onPreviousDay}>{"<"}</Arrow>
         <DateInfo>
           <DateText>{formattedDate}</DateText>
-          <DdayText>D+000 ❤️</DdayText>
+          <DdayText>
+            {coupleInfo
+              ? `D+${calculateDaysTogether(coupleInfo.startedAt)}❤️`
+              : "커플로 등록해주세요!"}
+          </DdayText>
         </DateInfo>
         <ViewToggleWrapper>
           <ViewToggleButton onClick={toggleView}>