Merge branch 'dev' into 127--ui--calendarmain

Author: jeongah2651

src/App.tsx

@@ -1,4 +1,5 @@
-import Calendar from './components/common/Calendar.tsx';
+import Calendar from './components/common/Calendar';
+
 
 function App() {
   return (

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

@@ -1,17 +1,19 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import GroupFormNameInput from './GroupFormNameInput';
 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,16 +22,26 @@ const GroupForm: FC<Props> = ({
   startDate = new Date().toString(),
   endDate = new Date().toString(),
   memo = '',
+  memberList = [],
   onSubmit,
 }) => {
+  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 />
-        <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

@@ -18,6 +18,7 @@ type Event = {
 };
 */
 
+
 interface EventInfo {
   timeText: string;
   event: {
@@ -213,6 +214,7 @@ export default function Calendar() {
       <div className="mt-10">{selectedDate && <EventCards events={selectedEvents} date={selectedDate} />}</div>
     </div>
   );
+
 }
 
 function renderEventContent(eventInfo: EventInfo) {

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

@@ -1,20 +1,59 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
+import { searchUser } from '../../apis/authApis.ts';
 import DialogButton from '@/components/common/DialogButton';
 import { IconUserPlus } from '@/assets/icons';
 import UserInviteDialog from '@/components/common/UserInviteDialog';
+import { Member } from '@/types/Member.ts';
+import UserInvited from './UserInvited.tsx';
+
+interface Props {
+  member: Member[];
+  setMember: any;
+}
+
+const UserInvite: FC<Props> = ({ member, setMember }) => {
+  const [email, setEamil] = useState('');
+  const [list, setList] = useState<Member[]>([]);
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEamil(event.target.value);
+  };
+
+  const onSearchClick = () => {
+    searchUser(email).then((searchedUserList) => {
+      if (!searchedUserList.length) {
+        alert('해당 닉네임을 찾을 수 없습니다.');
+        return;
+      }
+      setList(searchedUserList);
+    });
+  };
+
+  const onUserItemClick = (clickedUser: Member) => {
+    setMember(clickedUser);
+  };
 
-export const UserInvite: FC = () => {
   return (
     <div>
       멤버 초대하기 *
       <ul className="flex gap-2">
+        {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 />}
+            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,32 +1,16 @@
 import InputForm from './InputForm.tsx';
-import { searchUser } from '../../apis/authApis.ts';
-import { FC, useState } from 'react';
+import { FC } from 'react';
 import { IconSearch } from '@/assets/icons';
+import { Member } from '@/types/Member.ts';
 import UserInviteList from './UserInviteList.tsx';
+interface Props {
+  list: Member[];
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onSearchClick: () => void;
+  onUserItemClick: (clickedUser: Member) => void;
+}
 
-const UserInvite: FC = () => {
-  const [email, setEamil] = useState('');
-  const [list, setList] = useState<any[]>([]);
-
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setEamil(event.target.value);
-  };
-
-  const onSearchClick = () => {
-    searchUser(email).then((nickNames) => {
-      if (!nickNames.length) {
-        alert('해당 닉네임을 찾을 수 없습니다.');
-        return;
-      }
-      setList(
-        nickNames.map(({ user_nickname, id }) => {
-          return <UserInviteList user_nickname={user_nickname} id={id} key={id + '-UserInviteList'} />;
-        }),
-      );
-      return list;
-    });
-  };
-
+const UserInvite: FC<Props> = ({ list, onChange, onSearchClick, onUserItemClick }) => {
   return (
     <div>
       <div className="flex items-end">
@@ -36,7 +20,14 @@ const UserInvite: FC = () => {
         </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>
   );