Merge pull request #155 from imaginer-dev/31-일정-수정-버튼을-클릭시-DB에-UPDATE-할-수-있어야-한다

31 일정 수정 버튼을 클릭시 db에 update 할 수 있어야 한다

Author: Rose4tune

src/App.tsx

@@ -1,7 +1,6 @@
-import MyCalendarPage from './pages/MyCalendarPage';
+import Calendar from './components/common/Calendar';
 
 function App() {
-
   return (
     <div>
       <header className="relative z-10">
@@ -53,7 +52,6 @@ function App() {
       </main>
     </div>
   );
-
 }
 
 export default App;

src/apis/groupScheduleApis.ts

@@ -0,0 +1,103 @@
+import supabase from '@/supabase';
+import { Member } from '@/types/Member';
+
+export const getOneGroupSchedule = async (scheduleId: string) => {
+  const { data, error } = await supabase.from('group_schedules').select('*').eq('id', +scheduleId);
+
+  if (error) {
+    throw error;
+  }
+
+  if (!data) {
+    throw new Error('데이터를 찾을 수 없습니다.');
+  }
+
+  return data[0];
+};
+
+interface UpdateGroupSchedule {
+  name: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  memo: string;
+  scheduleId: string;
+}
+
+export const updateGroupSchedule = async ({
+  name,
+  description,
+  startDate,
+  endDate,
+  memo,
+  scheduleId,
+}: UpdateGroupSchedule) => {
+  const { data, error } = await supabase
+    .from('group_schedules')
+    .update({
+      title: name,
+      description,
+      start_date: startDate,
+      end_date: endDate,
+      memo,
+    })
+    .eq('id', +scheduleId);
+
+  if (error) {
+    throw error;
+  }
+
+  return data;
+};
+
+interface UpdateGroupScheduleMember {
+  updatedMemberList: Member[];
+  groupId: string;
+}
+
+export const updateGroupScheduleMember = async ({ updatedMemberList, groupId }: UpdateGroupScheduleMember) => {
+  const { error: deleteError } = await supabase.from('group_user_ralations').delete().eq('group_id', groupId);
+  if (deleteError) {
+    throw deleteError;
+  }
+
+  const { data, error: insertError } = await supabase.from('group_user_ralations').insert(
+    updatedMemberList.map((member) => ({
+      group_id: +groupId,
+      user_id: member.id,
+    })),
+  );
+
+  if (insertError) {
+    throw insertError;
+  }
+
+  return data;
+};
+
+export const getAllGroupMembers = async (groupId: string) => {
+  // group_user_ralations 의 응답 결과의 user_id를 포함하는 profile리스트를 받아온다.
+  const { data, error } = await supabase.from('group_user_ralations').select('user_id').eq('group_id', +groupId);
+
+  if (error) {
+    throw error;
+  }
+
+  if (!data) {
+    throw new Error('데이터를 찾을 수 없습니다.');
+  }
+
+  const { data: allUserProfile, error: getProfileError } = await supabase
+    .from('profiles')
+    .select('*')
+    .in(
+      'id',
+      data.map((d) => d.user_id),
+    );
+
+  if (getProfileError) {
+    throw getProfileError;
+  }
+
+  return allUserProfile;
+};

src/components/GroupForm/GroupForm.tsx renamed to src/components/Group/GroupForm.tsx

@@ -4,14 +4,16 @@ import GroupFormDescriptionInput from './GroupFormDescriptionInput';
 import GroupFormDateInput from './GroupFormDateInput';
 import UserInvite from '../common/UserInvite';
 import GroupFormMemoInput from './GroupFormMemoInput';
+import { Member } from '@/types/Member';
 
 interface Props {
   name?: string;
-  description?: string;
+  description?: string | null;
   startDate?: string;
   endDate?: string;
-  memo?: string;
-  onSubmit: React.FormEventHandler<HTMLFormElement>;
+  memo?: string | null;
+  memberList?: Member[];
+  onSubmit: (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => void;
 }
 
 const GroupForm: FC<Props> = ({
@@ -20,18 +22,26 @@ const GroupForm: FC<Props> = ({
   startDate = new Date().toString(),
   endDate = new Date().toString(),
   memo = '',
+  memberList = [],
   onSubmit,
 }) => {
-  const [member, setMember] = useState<any[]>([]);
+  const [member, setMember] = useState<Member[]>(memberList);
+
+  const onClick = (newMember: Member) => {
+    setMember((prev) => [...prev, newMember]);
+  };
 
   return (
-    <form onSubmit={onSubmit} className="container mx-auto flex max-w-sm flex-1 flex-col gap-4 pb-[50px] pt-4">
+    <form
+      onSubmit={(e) => onSubmit(e, member)}
+      className="container mx-auto flex max-w-sm flex-1 flex-col gap-4 pb-[50px] pt-4"
+    >
       <div className="flex h-full w-full flex-1 flex-col gap-4">
         <GroupFormNameInput name={name} />
-        <GroupFormDescriptionInput description={description} />
+        <GroupFormDescriptionInput description={description ?? ''} />
         <GroupFormDateInput startDate={startDate} endDate={endDate} />
-        <UserInvite member={member} setMember={setMember} />
-        <GroupFormMemoInput memo={memo} />
+        <UserInvite member={member} setMember={onClick} />
+        <GroupFormMemoInput memo={memo ?? ''} />
       </div>
       <button type="submit" className="btn btn-outline btn-primary w-full">
         저장

src/components/GroupForm/GroupFormDateInput.tsx renamed to src/components/Group/GroupFormDateInput.tsx

@@ -6,7 +6,6 @@ import { useRef, useState, useEffect } from 'react';
 import { useEventState } from '@/stores/myEventsStore';
 import { getPersonalSchedule } from '@/apis/personalScheduleApi';
 
-
 type Event = {
   title: string;
   start: Date | string;
@@ -16,15 +15,7 @@ interface EventCardsProps {
   date: Date | string | null;
 }
 
-const events = [
-  { title: 'Meeting', start: new Date() },
-  { title: 'Meeting', start: '2024-05-08' },
-  { title: 'Meeting', start: '2024-05-08' },
-  { title: 'Meeting', start: '2024-05-08' },
-];
-
-export function Calendar() {
-
+export default function Calendar() {
   const [calendarHeight, setCalendarHeight] = useState<string | number>('auto');
   const calendarRef = useRef<FullCalendar | null>(null);
   const [selectedEvents, setSelectedEvents] = useState<Event[]>([]);
@@ -154,7 +145,7 @@ export function Calendar() {
       <div className="mt-10">{selectedDate && <EventCards events={selectedEvents} date={selectedDate} />}</div>
     </div>
   );
-};
+}
 
 interface EventInfo {
   timeText: string;
@@ -174,7 +165,6 @@ function renderEventContent(eventInfo: EventInfo) {
   );
 }
 
-
 function EventCards({ events, date }: EventCardsProps) {
   const [menuOpen, setMenuOpen] = useState(-1);
 
@@ -222,4 +212,3 @@ function EventCards({ events, date }: EventCardsProps) {
     </div>
   );
 }
-

src/components/GroupForm/GroupFormDescriptionInput.tsx renamed to src/components/Group/GroupFormDescriptionInput.tsx

@@ -3,56 +3,57 @@ import { searchUser } from '../../apis/authApis.ts';
 import DialogButton from '@/components/common/DialogButton';
 import { IconUserPlus } from '@/assets/icons';
 import UserInviteDialog from '@/components/common/UserInviteDialog';
-import UserInvited from './UserInvited';
-import UserInviteList from './UserInviteList.tsx';
+import { Member } from '@/types/Member.ts';
+import UserInvited from './UserInvited.tsx';
 
 interface Props {
-  member: any;
+  member: Member[];
   setMember: any;
 }
 
 const UserInvite: FC<Props> = ({ member, setMember }) => {
   const [email, setEamil] = useState('');
-  const [list, setList] = useState<any[]>([]);
+  const [list, setList] = useState<Member[]>([]);
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEamil(event.target.value);
   };
 
   const onSearchClick = () => {
-    searchUser(email).then((nickNames) => {
-      if (!nickNames.length) {
+    searchUser(email).then((searchedUserList) => {
+      if (!searchedUserList.length) {
         alert('해당 닉네임을 찾을 수 없습니다.');
         return;
       }
-      nickNames.map(({ user_nickname, id }) => {
-        setList([
-          <UserInviteList
-            user_nickname={user_nickname}
-            id={id}
-            key={id + '-UserInviteList'}
-            onClick={() => {
-              if (!user_nickname.length) return;
-              setMember([...member, <UserInvited user_nickname={user_nickname} id={id} key={id + '-Member'} />]);
-            }}
-          />,
-        ]);
-      });
+      setList(searchedUserList);
     });
   };
 
+  const onUserItemClick = (clickedUser: Member) => {
+    setMember(clickedUser);
+  };
+
   return (
     <div>
       멤버 초대하기 *
       <ul className="flex gap-2">
-        {member}
+        {member.map((user) => (
+          <UserInvited id={user.id} user_nickname={user.user_nickname} key={user.id + '-UserInvited'} />
+        ))}
         <li>
           <DialogButton
             classname={'userInvite bg-base-200 hover:bg-base-300'}
             name={<IconUserPlus />}
             title={'멤버 찾기'}
             desc={''}
-            children={<UserInviteDialog list={list} onChange={onChange} onSearchClick={onSearchClick} />}
+            children={
+              <UserInviteDialog
+                onUserItemClick={onUserItemClick}
+                list={list}
+                onChange={onChange}
+                onSearchClick={onSearchClick}
+              />
+            }
           />
         </li>
       </ul>

src/components/GroupForm/GroupFormMemoInput.tsx renamed to src/components/Group/GroupFormMemoInput.tsx

@@ -1,13 +1,16 @@
 import InputForm from './InputForm.tsx';
 import { FC } from 'react';
 import { IconSearch } from '@/assets/icons';
+import { Member } from '@/types/Member.ts';
+import UserInviteList from './UserInviteList.tsx';
 interface Props {
-  list: any[];
+  list: Member[];
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onSearchClick: () => void;
+  onUserItemClick: (clickedUser: Member) => void;
 }
 
-const UserInvite: FC<Props> = ({ list, onChange, onSearchClick }) => {
+const UserInvite: FC<Props> = ({ list, onChange, onSearchClick, onUserItemClick }) => {
   return (
     <div>
       <div className="flex items-end">
@@ -17,7 +20,14 @@ const UserInvite: FC<Props> = ({ list, onChange, onSearchClick }) => {
         </button>
       </div>
       <ul id="searchList" role="list" className="divide-y divide-gray-100">
-        {list}
+        {list.map((user) => (
+          <UserInviteList
+            id={user.id}
+            onClick={() => onUserItemClick(user)}
+            user_nickname={user.user_nickname}
+            key={user.id + '-UserInviteList'}
+          />
+        ))}
       </ul>
     </div>
   );