Merge pull request #154 from imaginer-dev/51-그룹일정-추가-시-DB-저장

51 그룹일정 추가 시 db 저장

Author: gihwan-dev

src/components/GroupForm/GroupForm.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import GroupFormNameInput from './GroupFormNameInput';
 import GroupFormDescriptionInput from './GroupFormDescriptionInput';
 import GroupFormDateInput from './GroupFormDateInput';
@@ -22,13 +22,15 @@ const GroupForm: FC<Props> = ({
   memo = '',
   onSubmit,
 }) => {
+  const [member, setMember] = useState<any[]>([]);
+
   return (
     <form onSubmit={onSubmit} 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} />
         <GroupFormDateInput startDate={startDate} endDate={endDate} />
-        <UserInvite />
+        <UserInvite member={member} setMember={setMember} />
         <GroupFormMemoInput memo={memo} />
       </div>
       <button type="submit" className="btn btn-outline btn-primary w-full">

src/components/common/UserInvite.tsx

@@ -1,20 +1,58 @@
-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 UserInvited from './UserInvited';
+import UserInviteList from './UserInviteList.tsx';
+
+interface Props {
+  member: any;
+  setMember: any;
+}
+
+const UserInvite: FC<Props> = ({ member, setMember }) => {
+  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;
+      }
+      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'} />]);
+            }}
+          />,
+        ]);
+      });
+    });
+  };
 
-export const UserInvite: FC = () => {
   return (
     <div>
       멤버 초대하기 *
       <ul className="flex gap-2">
+        {member}
         <li>
           <DialogButton
             classname={'userInvite bg-base-200 hover:bg-base-300'}
             name={<IconUserPlus />}
             title={'멤버 찾기'}
             desc={''}
-            children={<UserInviteDialog />}
+            children={<UserInviteDialog list={list} onChange={onChange} onSearchClick={onSearchClick} />}
           />
         </li>
       </ul>

src/components/common/UserInviteDialog.tsx

@@ -1,32 +1,13 @@
 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 UserInviteList from './UserInviteList.tsx';
-
-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;
-    });
-  };
+interface Props {
+  list: any[];
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onSearchClick: () => void;
+}
 
+const UserInvite: FC<Props> = ({ list, onChange, onSearchClick }) => {
   return (
     <div>
       <div className="flex items-end">

src/components/common/UserInviteList.tsx

@@ -4,9 +4,10 @@ import { IconPlus } from '@/assets/icons';
 interface Props {
   user_nickname: any;
   id: string;
+  onClick: () => void;
 }
 
-const UserInviteList: FC<Props> = ({ user_nickname, id }) => {
+const UserInviteList: FC<Props> = ({ user_nickname, id, onClick }) => {
   return (
     <li key={id} className="border-b">
       <button type="button" className="ju btn flex w-full justify-between border-none bg-transparent" onClick={onClick}>
@@ -17,6 +18,4 @@ const UserInviteList: FC<Props> = ({ user_nickname, id }) => {
   );
 };
 
-const onClick = () => {};
-
 export default UserInviteList;

src/main.tsx

@@ -11,7 +11,7 @@ import ProtectedRoute from './providers/ProtectedRoute.tsx';
 
 import UserInvite from './components/common/UserInvite.tsx';
 import EditGroupPage from './pages/EditGroupPage.tsx';
-import AddGroupPage from './pages/AddGroupPage.tsx';
+import AddGroupSchedulePage from './pages/AddGroupSchedulePage.tsx';
 
 const router = createBrowserRouter([
   {
@@ -35,7 +35,7 @@ const router = createBrowserRouter([
       },
       {
         path: '/add-group',
-        element: <AddGroupPage />,
+        element: <AddGroupSchedulePage />,
       },
       {
         path: '/login',

src/pages/AddGroupPage.tsx renamed to src/pages/AddGroupSchedulePage.tsx

@@ -5,7 +5,7 @@ const AddGroupPage = () => {
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
-    console.log(formData);
+    console.log(formData.get('name'));
   };
 
   return (