Merge pull request #33 from HappyScrolls/feature/#31_mainpageError

Feature/#31 mainpage error
HappyScrolls · Oct 7, 2024 · a185f68 · a185f68
2 parents a38f4b0 + 5770384
commit a185f68
Show file tree

Hide file tree

Showing 16 changed files with 604 additions and 185 deletions.
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -3,7 +3,6 @@ import LoginPage from "./pages/login/LoginPage";
 import App from "./App";
 import Redirect from "./pages/login/components/Redirect";
 import SignUpPage from "./pages/signup/SignUpPage";
-import MainPage from "./pages/main/MainPage";
 import NotificationPage from "./pages/notification/NotificationPage";
 import CalendarPage from "./pages/calendar/CalendarPage";
 import CoupleInfoPage from "./pages/couple/CoupleInfoPage";
@@ -13,6 +12,7 @@ import AddMySchedulePage from "./pages/schedule/AddMySchedulePage";
 import AddCoupleSchedule from "./pages/schedule/AddCoupleSchedule";
 import ProfileEdit from "./pages/mypage/components/ProfileEdit";
 import CoupleProfileEdit from "./pages/mypage/components/CoupleProfileEdit";
+import SuspenseMainPage from "./pages/main/SuspenseMainPage";
 
 const router = createBrowserRouter([
   {
@@ -25,7 +25,7 @@ const router = createBrowserRouter([
       },
       {
         path: "/main",
-        element: <MainPage />,
+        element: <SuspenseMainPage />,
       },
       {
         path: "/signup",

diff --git a/src/api/couple/coupleInfo.ts b/src/api/couple/coupleInfo.ts
@@ -41,12 +41,8 @@ export const fetchLoverInfo = async (): Promise<LoverInfo | null> => {
     return response.data;
   } catch (error) {
     if (axios.isAxiosError(error)) {
-      if (error.response?.status === 500) {
-        console.warn(
-          "애인 정보가 없거나 서버 오류로 데이터를 가져올 수 없습니다."
-        );
-        return null;
-      }
+      console.warn("내 상대방 정보가 없습니다.");
+      return null;
     }
     throw error;
   }
@@ -60,14 +56,13 @@ export const fetchCoupleInfo = async (): Promise<CoupleInfo | null> => {
     );
     return response.data;
   } catch (error) {
-    // AxiosError인지 확인하고 상태 코드를 확인하여 null 반환
-    if (axios.isAxiosError(error) && error.response?.status === 500) {
+    if (axios.isAxiosError(error)) {
       console.warn(
         "커플 정보가 없거나 서버 오류로 데이터를 가져올 수 없습니다."
       );
-      return null; // 서버 오류인 경우 null 반환
+      return null;
     }
-    throw error; // 다른 에러는 그대로 던짐
+    throw error;
   }
 };
 

diff --git a/src/api/schedule/scheduleAPI.ts b/src/api/schedule/scheduleAPI.ts
@@ -1,3 +1,4 @@
+import axios from "axios";
 import { ScheduleData } from "../../types/ISchedule";
 import { ApiResponse } from "../ApiResponse";
 import { scheduleAxiosInstance } from "../axios";
@@ -14,6 +15,9 @@ export const createSchedule = async (
     return response.data;
   } catch (error) {
     console.error("일정 생성 중 오류 발생:", error);
+    if (axios.isAxiosError(error) && error.response) {
+      console.warn(`에러 상태 코드: ${error.response.status}`);
+    }
     throw error;
   }
 };
@@ -27,6 +31,9 @@ export const deleteSchedule = async (scheduleNo: number) => {
     return response.data;
   } catch (error) {
     console.error("일정 삭제 중 오류 발생:", error);
+    if (axios.isAxiosError(error) && error.response) {
+      console.warn(`에러 상태 코드: ${error.response.status}`);
+    }
     throw error;
   }
 };
@@ -35,37 +42,59 @@ export const deleteSchedule = async (scheduleNo: number) => {
 export const fetchMyScheduleList = async (
   searchDate: string
 ): Promise<ScheduleData[]> => {
-  const response = await scheduleAxiosInstance.get(
-    `/schedule?searchDate=${searchDate}`
-  );
-
-  return response.data;
+  try {
+    const response = await scheduleAxiosInstance.get(
+      `/schedule?searchDate=${searchDate}`
+    );
+    return response.data;
+  } catch (error) {
+    console.error("내 일정 리스트 조회 중 오류 발생:", error);
+    if (axios.isAxiosError(error)) {
+      console.warn("내 일정 정보를 가져올 수 없습니다.");
+      return [];
+    }
+    throw error;
+  }
 };
 
 // 애인 일정 조회
 export const fetchPartnerScheduleList = async (
   searchDate: string
 ): Promise<ScheduleData[]> => {
-  const response = await scheduleAxiosInstance.get(
-    `/schedule/couple?searchDate=${searchDate}`
-  );
-
-  return response.data;
+  try {
+    const response = await scheduleAxiosInstance.get(
+      `/schedule/couple?searchDate=${searchDate}`
+    );
+    return response.data;
+  } catch (error) {
+    console.error("애인 일정 조회 중 오류 발생:", error);
+    if (axios.isAxiosError(error)) {
+      console.warn("애인 일정 정보를 가져올 수 없습니다.");
+      return [];
+    }
+    throw error;
+  }
 };
 
-
-// 공통 일정 조회 
+// 공통 일정 조회
 export const fetchCommonScheduleList = async (
   searchDate: string
 ): Promise<ScheduleData[]> => {
-  const response = await scheduleAxiosInstance.get(
-    `/schedule/common?searchDate=${searchDate}`
-  );
-
-  return response.data;
+  try {
+    const response = await scheduleAxiosInstance.get(
+      `/schedule/common?searchDate=${searchDate}`
+    );
+    return response.data;
+  } catch (error) {
+    console.error("공통 일정 조회 중 오류 발생:", error);
+    if (axios.isAxiosError(error)) {
+      console.warn("공통 일정 정보를 가져올 수 없습니다.");
+      return [];
+    }
+    throw error;
+  }
 };
 
-
 // 일정 상태 업데이트
 export const updateScheduleStatus = async ({
   scheduleNo,
@@ -86,6 +115,10 @@ export const updateScheduleStatus = async ({
     );
     return response.data;
   } catch (error) {
+    console.error("일정 상태 업데이트 중 오류 발생:", error);
+    if (axios.isAxiosError(error) && error.response) {
+      console.warn(`에러 상태 코드: ${error.response.status}`);
+    }
     throw new Error(`일정 상태 업데이트 실패: ${error}`);
   }
 };
diff --git a/src/components/form/EditForm.tsx b/src/components/form/EditForm.tsx
@@ -195,37 +195,6 @@ const AddProfileInput = styled.input`
   display: none;
 `;
 
-const AgreementText = styled.div`
-  color: var(--Black, #3b3634);
-  font-family: SUIT;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-
-  :nth-child(1) {
-    color: var(--Black, #3b3634);
-    font-family: SUIT;
-    font-size: 10px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-  }
-`;
-
-const AgreementWrapper = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-`;
-
-const AgreeBtn = styled.div`
-  width: 15px;
-  height: 15px;
-  background-color: var(--Primary, #f14040);
-  border-radius: 50%;
-`;
-
 const ButtonWrapper = styled.div`
   display: flex;
   gap: 5px;

diff --git a/src/hooks/useScheduleList.ts b/src/hooks/useScheduleList.ts
@@ -10,11 +10,7 @@ import {
 // 내 일정 리스트
 export const useFetchMyScheduleList = (searchDate: string) => {
   const schedule = useSuspenseQuery<ScheduleData[]>({
-    queryKey: [
-      "myScheduleList",
-      searchDate,
-      localStorage.getItem("memberCode"),
-    ],
+    queryKey: ["myScheduleList", searchDate],
     queryFn: () => fetchMyScheduleList(searchDate),
   });
 

diff --git a/src/images/main/commonLine.svg b/src/images/main/commonLine.svg
diff --git a/src/images/main/heart.svg b/src/images/main/heart.svg
diff --git a/src/images/main/pinkCake.svg b/src/images/main/pinkCake.svg
diff --git a/src/images/main/pinkCircle.svg b/src/images/main/pinkCircle.svg
diff --git a/src/images/main/redCake.svg b/src/images/main/redCake.svg
diff --git a/src/images/main/redCircle.svg b/src/images/main/redCircle.svg
diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
@@ -1,18 +1,41 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { Suspense } from "react";
 import ScheduleList from "./components/ScheduleList";
 import MonthCalendar from "./components/MonthCalendar";
 import { Container } from "../../components/layout/Layout";
 import styled from "styled-components";
+import { useMemberInfoQuery } from "../../hooks/useMemberInfo";
+import {
+  useFetchCoupleInfo,
+  useFetchMyLoverInfo,
+} from "../../hooks/useCoupleInfo";
+import { formatTodayHypen } from "../../utils/date";
+import {
+  useFetchMyScheduleList,
+  useFetchPartnerScheduleList,
+} from "../../hooks/useScheduleList";
 
 const MainPage = () => {
+  const todayDate = formatTodayHypen();
+
+  // 내 정보
+  const { data: memberInfo } = useMemberInfoQuery();
+  // 애인 정보
+  const { data: myLoverInfo } = useFetchMyLoverInfo();
+  // 커플 정보
+  const { data: coupleInfo } = useFetchCoupleInfo();
+  // 내 일정
+  const { data: myScheduleList } = useFetchMyScheduleList(todayDate);
+  // 애인 일정
+  const { data: partnerScheduleList } = useFetchPartnerScheduleList(todayDate);
+  // 공통 일정
+
   return (
     <>
-      <Suspense fallback={<div>Loading...</div>}>
-        <MonthContainer>
-          <ScheduleList />
-          <MonthCalendar />
-        </MonthContainer>
-      </Suspense>
+      <MonthContainer>
+        <ScheduleList />
+        <MonthCalendar />
+      </MonthContainer>
     </>
   );
 };

diff --git a/src/pages/main/SuspenseMainPage.tsx b/src/pages/main/SuspenseMainPage.tsx
@@ -0,0 +1,11 @@
+import React, { Suspense } from "react";
+import MainPage from "./MainPage";
+const SuspenseMainPage = () => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <MainPage />
+    </Suspense>
+  );
+};
+
+export default SuspenseMainPage;