fix: 멤버 추가 리스트 보여주는 기능 수정

Author: Rose4tune

src/components/common/UserInvite.tsx

@@ -1,20 +1,56 @@
-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';
+
+const UserInvite: FC = () => {
+  const [email, setEamil] = useState('');
+  const [list, setList] = useState<any[]>([]);
+  const [member, setMember] = 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'} />]);
+            }}
+          />,
+        ]);
+      });
+
+      console.log(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;