feat: 멤버추가 ui 및 기능 작업

Author: Rose4tune

src/components/common/UserInvite.tsx

@@ -1,21 +1,25 @@
 import { FC } from 'react';
 import DialogButton from '@/components/common/DialogButton';
-import IconUserPlus from '@/assets/icons/IconUserPlus';
+import { IconUserPlus } from '@/assets/icons';
 import UserInviteDialog from '@/components/common/UserInviteDialog';
 
-const AddCalendarPage: FC = () => {
+export const UserInvite: FC = () => {
   return (
     <div>
       멤버 초대하기 *
-      <DialogButton
-        classname={'userInvite bg-base-200 hover:bg-base-300'}
-        name={<IconUserPlus />}
-        title={'멤버 찾기'}
-        desc={''}
-        children={<UserInviteDialog />}
-      />
+      <ul className="flex gap-2">
+        <li>
+          <DialogButton
+            classname={'userInvite bg-base-200 hover:bg-base-300'}
+            name={<IconUserPlus />}
+            title={'멤버 찾기'}
+            desc={''}
+            children={<UserInviteDialog />}
+          />
+        </li>
+      </ul>
     </div>
   );
 };
 
-export default AddCalendarPage;
+export default UserInvite;

src/components/common/UserInviteDialog.tsx

@@ -1,7 +1,7 @@
 import InputForm from './InputForm.tsx';
 import { searchUser } from '../../apis/authApis.ts';
 import { FC, useState } from 'react';
-import IconSearch from '@/assets/icons/IconSearch.tsx';
+import { IconSearch } from '@/assets/icons';
 import UserInviteList from './UserInviteList.tsx';
 
 const UserInvite: FC = () => {
@@ -13,8 +13,16 @@ const UserInvite: FC = () => {
   };
 
   const onSearchClick = () => {
-    searchUser(email).then((value) => {
-      setList(value.map(({ user_nickname, id }) => <UserInviteList user_nickname={user_nickname} id={id} />));
+    searchUser(email).then((nickNames) => {
+      if (!nickNames.length) {
+        alert('해당 닉네임을 찾을 수 없습니다.');
+        return;
+      }
+      setList(
+        nickNames.map(({ user_nickname, id }) => {
+          return <UserInviteList user_nickname={user_nickname} id={id} />;
+        }),
+      );
       return list;
     });
   };

src/components/common/UserInviteList.tsx

@@ -1,24 +1,22 @@
 import { FC } from 'react';
-import IconPlus from '@/assets/icons/IconPlus.tsx';
+import { IconPlus } from '@/assets/icons';
 
 interface Props {
   user_nickname: any;
   id: string;
 }
 
-const UserPlusList: FC<Props> = ({ user_nickname, id }) => {
+const UserInviteList: FC<Props> = ({ user_nickname, id }) => {
   return (
     <li key={id} className="border-b">
-      <button className="ju btn block flex w-full justify-between border-none bg-transparent" onClick={onPlusClick}>
+      <button className="ju btn block flex w-full justify-between border-none bg-transparent" onClick={onClick}>
         {user_nickname}
         <IconPlus />
       </button>
     </li>
   );
 };
 
-const onPlusClick = () => {
-  console.log('aa');
-};
+const onClick = () => {};
 
-export default UserPlusList;
+export default UserInviteList;

src/components/common/UserInvited.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { IconClose, IconLeaf } from '@/assets/icons';
+import DialogButton from './DialogButton';
+
+interface Props {
+  user_nickname: any;
+  id: any;
+}
+
+const UserInvited: FC<Props> = ({ user_nickname, id }) => {
+  return (
+    <li key={id}>
+      <DialogButton
+        classname={'userInvite bg-white hover:bg-base-100 relative'}
+        name={
+          <div>
+            <IconClose style={'absolute top-px right-px'} />
+            <IconLeaf />
+            <p>{user_nickname}</p>
+          </div>
+        }
+        title={''}
+        desc={'해당 멤버를 삭제 하시겠습니까?'}
+        children={''}
+      />
+    </li>
+  );
+};
+
+export default UserInvited;

src/main.tsx

@@ -48,7 +48,7 @@ const router = createBrowserRouter([
         element: <TextInputForm />,
       },
       {
-        path: 'UserInvite',
+        path: 'userInvite',
         element: <UserInvite />,
       },
     ],