세부사양 구현 완료 및 CSS 수정 중입니다. (#277)

* 토큰 요청 리팩토링

* 리팩토링 수정 완료

* 병합 전 커밋

* 마이페이지 구현 및 테스트 완료

* 마이페이지 구현 완료 및 리스트 오류 해결 중

* 멤버 목록 조회

* 가입된 멤버조회 구현

* 마이페이지 / 스터디 리스트 페이지 테스트 완료

* 개인 일정만 구현하면 진짜진짜 끝...

* 세부사양 구현 완료, 개인 일정 CRUD의 경우 엔드포인트가 확정되면 추후 개선

* 기능구현 완료, 디버깅 및 CSS 구현 중

* 기능구현 완료 및 CSS 구현 중

* 세부사양 구현 완료 및 CSS 수정 중

client/package.json

@@ -23,6 +23,7 @@
     "dotenv": "^16.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.11.0",
     "recoil": "^0.7.7",
@@ -49,4 +50,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

client/src/App.tsx

@@ -13,7 +13,6 @@ import ProfileCalendar from "./pages/ProfileCalendar";
 import Redirect from "./pages/Redirect";
 import useRefreshToken from "./hooks/useRefreshToken";
 import Modal from "react-modal";
-import TestPage from "./test/TestPage";
 import Home from "./pages/Home";
 import HTestPage from "./pages/HTestPage";
 

client/src/apis/CalendarApi.ts

@@ -0,0 +1,90 @@
+import {
+  StudyInfoDto,
+  getStudyGroupInfo,
+  getStudyGroupList,
+} from "./StudyGroupApi";
+
+// ====================== 개인이 속한 스터디의 스케줄을 가져오는 로직  ===========================
+// 1. 개인이 속한 스터디 조회
+// 2. 조회 데이터의 id 추출
+// 3. id를 인자로 전달하여 각 스터디의 상세정보를 추출하고, 변수에 담기
+// 4. 변수에 담은 스터디 정보를 fullCalendar 라이브러리에 맞게 맵핑
+// 5. fullCalendar 라이브러리에 전달하여 이벤트 생성
+export interface Event {
+  id: string;
+  title: string;
+  daysOfWeek?: string[];
+  startTime: string;
+  endTime: string;
+  startRecur: string;
+  endRecur: string;
+  description: string;
+  overlap: boolean;
+}
+
+export const generateStudyEvents = async (
+  isLoggedIn: boolean
+): Promise<Event[]> => {
+  // 1. 개인이 속한 스터디 조회
+  const myStudyGroups = await getStudyGroupList();
+  console.log(myStudyGroups);
+
+  // 2. 조회 데이터의 id 추출
+  const studyGroupIds: number[] = [];
+  // members 배열에서 스터디 그룹의 ID 추출
+  for (const member of myStudyGroups.data.members) {
+    studyGroupIds.push(member.id);
+  }
+
+  // 3. id를 인자로 전달하여 각 스터디의 상세정보를 추출하고, 변수에 담기
+  const studyGroupInfos: StudyInfoDto[] = [];
+  for (const id of studyGroupIds) {
+    const studyGroupInfo = await getStudyGroupInfo(id, isLoggedIn);
+    studyGroupInfos.push(studyGroupInfo);
+  }
+
+  // 4. 변수에 담은 스터디 정보를 fullCalendar 라이브러리에 맞게 맵핑
+  const events: Event[] = studyGroupInfos.map(
+    (studyGroupInfo: StudyInfoDto) => {
+      const mappedDaysOfWeek: string[] = studyGroupInfo.daysOfWeek.map(
+        (day: string) => {
+          switch (day) {
+            case "월":
+              return "1"; // "월" -> 1
+            case "화":
+              return "2"; // "화" -> 2
+            case "수":
+              return "3"; // "수" -> 3
+            case "목":
+              return "4"; // "목" -> 4
+            case "금":
+              return "5"; // "금" -> 5
+            case "토":
+              return "6"; // "토" -> 6
+            case "일":
+              return "0"; // "일" -> 0
+            default:
+              return ""; // handle any other cases if necessary
+          }
+        }
+      );
+
+      const event: Event = {
+        id: studyGroupInfo.id.toString(),
+        title: studyGroupInfo.studyName,
+        daysOfWeek: mappedDaysOfWeek,
+        startTime: `${studyGroupInfo.studyTimeStart}:00`,
+        endTime: `${studyGroupInfo.studyTimeEnd}:00`,
+        startRecur: studyGroupInfo.studyPeriodStart,
+        endRecur: studyGroupInfo.studyPeriodEnd,
+        description: studyGroupInfo.introduction,
+        overlap: true,
+      };
+      console.log(event);
+      return event;
+    }
+  );
+
+  // 5. fullCalendar 이벤트 배열 반환
+  return events;
+};

client/src/apis/EduApi.ts

@@ -7,3 +7,4 @@ export const eduApi: AxiosInstance = axios.create({
 export const socialLoginApi = `${
   import.meta.env.VITE_APP_API_URL
 }/oauth2/authorization`;
+

client/src/apis/MemberApi.ts

@@ -18,19 +18,13 @@ export interface MemberInfoResponseDto {
 export const getMemberInfo = async (isLoggedIn: boolean) => {
   // * 로그인 상태가 아닌 경우 에러 발생
   if (!isLoggedIn) throw new Error("로그인 상태를 확인해주세요.");
-
-  try {
     // tokenRequestApi를 사용하여 /members 엔드포인트로 GET 요청 전송
     const response = await tokenRequestApi.get<MemberInfoResponseDto>(
       "/members"
     );
     // 응답 데이터 추출
     const data = response.data;
     return data; // 데이터 반환
-  } catch (error) {
-    console.error("유저 정보를 불러오는데 실패했습니다.", error);
-    throw new Error("유저 정보를 불러오는데 실패했습니다."); // 실패 시 에러 발생
-  }
 };
 
 // =============== 유저 기본정보 업데이트(PATCH) ===============
@@ -48,15 +42,10 @@ export const updateMember = async (
   if (!isLoggedIn) throw new Error("로그인 상태를 확인해주세요.");
   // 입력 데이터가 없을 경우 에러 발생
   if (!data) throw new Error("입력값을 확인해주세요.");
-  try {
+
     // tokenRequestApi를 사용하여 /members 엔드포인트로 PATCH 요청 전송
     console.log("전송되는 데이터:", data);
-    await tokenRequestApi.patch("/members", {data
-    : data});
-  } catch (error) {
-    console.error("유저정보를 업데이트 하는데 실패했습니다.", error);
-    throw new Error("유저정보를 업데이트 하는데 실패했습니다."); // 실패 시 에러 발생
-  }
+    await tokenRequestApi.patch("/members", data);
 };
 
 // =============== 유저 프로필 사진 업데이트(PATCH) ===============
@@ -67,12 +56,7 @@ export interface MemberProfileUpdateImageDto {
 export const updateMemberProfileImage = async (
   data: MemberProfileUpdateImageDto
 ) => {
-  try {
     await tokenRequestApi.patch("/members/profile-image", data);
-  } catch (error) {
-    console.error("프로필 사진을 업로드하는데 실패했습니다.", error);
-    throw new Error("프로필 사진을 업로드하는데 실패했습니다.");
-  }
 };
 
 // =============== 유저 자기소개 / 선호하는 사람 업데이트(PATCH) ===============
@@ -82,37 +66,24 @@ export interface MemberDetailDto {
 }
 // TODO : Member의 자기소개, 선호하는 사람 수정 요청을 보내는 코드
 export const updateMemberDetail = async (memberDetailDto: MemberDetailDto) => {
-  try {
     await tokenRequestApi.patch("/members/detail", memberDetailDto);
-  } catch (error) {
-    console.error("상세정보를 업데이트하는데 실패했습니다.", error);
-    throw new Error("상세정보를 업데이트하는데 실패했습니다.");
-  }
 };
 
 // =============== 유저 탈퇴(DELETE) ===============
 // TODO : Member의 회원 탈퇴 요청을 보내는 코드
 export const deleteMember = async () => {
-  try {
     await tokenRequestApi.delete("/members");
-  } catch (error) {
-    throw new Error("회원탈퇴에 실패했습니다.");
-  }
 };
 
 // =============== 유저 비밀번호 체크 ===============
 export interface MemberPasswordCheckDto {
   password: string;
 }
 // TODO : Member의 비밀번호를 확인하는 코드
-export const checkMemberPassword = async (
+export const checkMemberPassword = (
   memberPasswordCheckDto: MemberPasswordCheckDto
 ) => {
-  try {
-    await tokenRequestApi.post("/members/password", memberPasswordCheckDto);
-  } catch (error) {
-    throw new Error("비밀번호가 일치하지 않습니다.");
-  }
+    tokenRequestApi.post("/members/password", memberPasswordCheckDto);
 };
 
 // TODO : (Advance) Member의 수정된 사진을 S3에 업로드하는 코드