Merge branch 'dev' of https://github.com/imaginer-dev/DateLeaf into 164---ui-프로필-수정-구현

Author: jeongah2651

README.md

@@ -1,33 +1,36 @@
 # DateLeaf
+
 > **DateLeaf**는 다수의 사람들과의 **모임 시간**을 보다 **편리하게 계획**하기 위한 **스케줄러** 입니다.
-<br><br>
-모임을 잡으면서 모든 인원의 일정을 일일이 맞추기 어려울 때,<br>
-매번 번거로운 투표와 생각지 못한 이중약속으로 난감할 때,<br>
-한 번에 너무 많은 스케쥴이 발생하여 나조차도 모든 일정을 기억하기 힘들 때,<br>
-서로의 일정을 입력만 하면 모두가 가능한 날짜와 시간을 자동으로 계산하여<br>
-보다 편리하게 모임 계획을 세울수 있도록 도와줍니다.
+> <br><br>
+> 모임을 잡으면서 모든 인원의 일정을 일일이 맞추기 어려울 때,<br>
+> 매번 번거로운 투표와 생각지 못한 이중약속으로 난감할 때,<br>
+> 한 번에 너무 많은 스케쥴이 발생하여 나조차도 모든 일정을 기억하기 힘들 때,<br>
+> 서로의 일정을 입력만 하면 모두가 가능한 날짜와 시간을 자동으로 계산하여<br>
+> 보다 편리하게 모임 계획을 세울수 있도록 도와줍니다.
 
 ![intro](https://github.com/imaginer-dev/DateLeaf/assets/81802112/57386410-3cda-438d-9368-9216991f607f)
 
-
 ## WHAT FOR?
+
 현대사회에 불고 있는 자기계발 열풍은, 일시적인 유행을 넘어 하나의 사회 현상으로 자리매김하였습니다.<br>
 이러한 자기계발의 시대에 사람들은 규모도 종류도 다양한 모임 활동을 하게되는데<br>
 그때마다 수많은 일정들의 조율에서 오는 피로가 즐기고자 시작한 일이 되려 힘들어지는 이유가 되기도 합니다.<br>
 우리는 그러한 사람들의 불편함을 인지하였고, 이 부분을 자동화로 만들어서 보다 편리하게 모임 계획을 세울수 있도록 했습니다.
 
 ## YOU CAN DO.
+
 ![image](https://github.com/imaginer-dev/DateLeaf/assets/81802112/6663f95b-a2b0-4faa-830b-8e1ba1e7bf39)
 
 ![image](https://github.com/imaginer-dev/DateLeaf/assets/81802112/04b0f787-c0d4-4088-8978-0f9adf97604b)
 
 ## WHAT WE DO
 
-
 ## WE USED
+
 ![image](https://github.com/imaginer-dev/DateLeaf/assets/81802112/3cd4ee87-e28a-49d1-81ba-cef8bd8c46b7)
 
 ## OUR CHALLENGE
 
 ## WHO WE ARE
+
 이예서

src/apis/authApis.ts

@@ -70,3 +70,12 @@ export const searchUser = async (nickname: string) => {
 
   return profiles;
 };
+
+export const signOut = async () => {
+  const { error } = await supabase.auth.signOut();
+  if (error) {
+    throw error;
+  }
+
+  return true;
+};

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/components/common/SideBar/HamburgerButton.tsx

@@ -3,6 +3,7 @@ import SideBarGroupList from './SideBarGroupList';
 import SideBarProfile from './SideBarProfile';
 import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
+import SideBarSignOutButton from '@/components/common/SideBar/SideBarSignOutButton.tsx';
 
 const HamburgerButton = () => {
   const { data: user, isLoading, isError } = useGetProfile();
@@ -33,9 +34,12 @@ const HamburgerButton = () => {
         </label>
         <div className="drawer-side lg:w-80">
           <label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label>
-          <ul className="menu min-h-full w-80 bg-base-200 p-4">
-            <SideBarProfile imageUrl={user?.image_url ?? null} userName={user?.user_name ?? ''} />
-            <SideBarGroupList userId={user?.id ?? ''} />
+          <ul className="menu min-h-full w-80 flex-col justify-between bg-base-200 p-4">
+            <div>
+              <SideBarProfile imageUrl={user?.image_url ?? null} userName={user?.user_name ?? ''} />
+              <SideBarGroupList userId={user?.id ?? ''} />
+            </div>
+            <SideBarSignOutButton />
           </ul>
         </div>
       </div>

src/components/common/SideBar/SideBarSignOutButton.tsx

@@ -0,0 +1,21 @@
+import { useSignOut } from '@/react-queries/useSignOut.ts';
+import { useNavigate } from 'react-router-dom';
+
+export default function SideBarSignOutButton() {
+  const { mutate } = useSignOut();
+  const navigate = useNavigate();
+
+  const onClick = () => {
+    mutate(undefined, {
+      onSuccess: () => {
+        navigate('/login');
+      },
+    });
+  };
+
+  return (
+    <button onClick={onClick} className={'btn btn-error font-bold'}>
+      Sign Out
+    </button>
+  );
+}

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),
+  });