fix: 사이드바 네비게이션 동작 수정

Author: gihwan-dev

src/apis/getAllMemberSchedule.ts

@@ -0,0 +1,15 @@
+import { getAllGroupMembers } from '@/apis/groupScheduleApis.ts';
+import supabase from '@/supabase';
+
+export const getAllMemberSchedule = async (groupId: string) => {
+  const memberList = await getAllGroupMembers(groupId);
+
+  const memberIdList = memberList.map((member) => member.id);
+
+  const { data: memberScheduleList } = await supabase
+    .from('personal_schedules')
+    .select('*')
+    .in('user_id', memberIdList);
+
+  return memberScheduleList;
+};

src/apis/groupScheduleApis.ts

@@ -1,5 +1,6 @@
 import supabase from '@/supabase';
 import { Member } from '@/types/Member';
+
 interface addGroupShedule {
   title: string;
   description: string;
@@ -73,6 +74,20 @@ interface UpdateGroupScheduleMember {
   groupId: string;
 }
 
+export const getOneGroup = async (groupId: string) => {
+  const { data, error } = await supabase.from('groups').select('*').eq('id', +groupId);
+
+  if (error) {
+    throw error;
+  }
+
+  if (!data) {
+    throw new Error('데이터를 찾을 수 없습니다.');
+  }
+
+  return data[0];
+};
+
 export const getOneGroupSchedule = async (scheduleId: string) => {
   const { data, error } = await supabase.from('group_schedules').select('*').eq('id', +scheduleId);
 

src/pages/GroupSchedulePage.tsx

@@ -3,27 +3,39 @@ import HamburgerButton from '@/components/common/SideBar/HamburgerButton';
 import Calendar from '@/components/common/Calendar';
 import CreateEventDialog from '@/components/MyCalendar/CreateEventButton';
 import { useParams } from 'react-router-dom';
-import { useGetOneGroupSchedule } from '@/react-queries/useGetOneGroupSchedule';
 import { Loading } from '.';
 import { DB_Events } from '@/utils';
+import { useGetOneGroup } from '@/react-queries/useGetOneGroup.ts';
+import { useGetAllMemberSchedule } from '@/react-queries/useGetAllMemberSchedule.ts';
 
 const GroupSchedulePage = () => {
   // TODO: 캘린더 수정해서 이벤트 리스트를 외부에서 받을 수 있도록 해야함.
   // TODO: 그룹 스케줄을 받아오는게 아닌 그룹 정보를 받아와 이름을 표현해줘야 한다.
   const params = useParams<{ groupId: string }>();
   const groupId = params.groupId!;
 
-  const { data, isLoading, isError } = useGetOneGroupSchedule(groupId);
+  const { data, isLoading, isError } = useGetOneGroup(groupId);
+  const {
+    data: memberScheduleList,
+    isLoading: memberScheduleListLoading,
+    isError: memberScheduleListError,
+  } = useGetAllMemberSchedule(groupId);
 
-  if (isError) {
+  if (isError || memberScheduleListError) {
     return <div>에러가 발생했습니다.</div>;
   }
 
   console.log(data);
 
   const db_events: DB_Events[] = [];
-  if (data) {
-    db_events.push({ ...data, start_date: data.start_date, end_date: data.end_date, title: data.title, id: data.id });
+  if (memberScheduleList) {
+    const eventList: DB_Events[] = memberScheduleList.map((item) => ({
+      start_date: item.start_date,
+      end_date: item.end_date,
+      title: item.title,
+      id: item.id,
+    }));
+    db_events.push(...eventList);
   }
 
   const onDelete = (id: number) => {
@@ -33,8 +45,8 @@ const GroupSchedulePage = () => {
 
   return (
     <div className="lg:ml-80">
-      {isLoading && <Loading size="lg" display="spinner" color="primary" />}
-      <AppBar backButton={false} IconButton={<HamburgerButton />} calendarName={data?.title ?? ''} />
+      {(isLoading || memberScheduleListLoading) && <Loading size="lg" display="spinner" color="primary" />}
+      <AppBar backButton={false} IconButton={<HamburgerButton />} calendarName={data?.name ?? ''} />
       <main className="z-1 relative flex-grow">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="rounded bg-white p-6 px-4 sm:px-0">

src/react-queries/queryKeys.ts

@@ -15,6 +15,7 @@ export const queries = createQueryKeyStore({
   },
   group: {
     getOne: (groupId: string) => [groupId],
+    getAllMemberSchedule: (groupId: string) => [groupId],
     getAll: null,
     update: null,
     updateMember: null,

src/react-queries/useGetAllMemberSchedule.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { queries } from '@/react-queries/queryKeys.ts';
+import { getAllMemberSchedule } from '@/apis/getAllMemberSchedule.ts';
+
+export const useGetAllMemberSchedule = (groupId: string) =>
+  useQuery({
+    queryKey: queries.group.getAllMemberSchedule(groupId).queryKey,
+    queryFn: () => getAllMemberSchedule(groupId),
+  });

src/react-queries/useGetOneGroup.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { queries } from '@/react-queries/queryKeys.ts';
+import { getOneGroup } from '@/apis/groupScheduleApis.ts';
+
+export const useGetOneGroup = (groupId: string) =>
+  useQuery({
+    queryKey: queries.group.getOne(groupId).queryKey,
+    queryFn: () => getOneGroup(groupId),
+  });