Merge pull request #146 from imaginer-dev/138-초대회원을-멤버에-추가할-수-있다

138 초대회원을 멤버에 추가할 수 있다

Author: gihwan-dev

src/assets/icons/IconClose.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+
+interface Props {
+  style: string;
+}
+
+const IconClose: FC<Props> = ({ style }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      className={`h-6 w-6 ${style}`}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+    </svg>
+  );
+};
+
+export default IconClose;

src/assets/icons/IconLeaf.tsx

@@ -0,0 +1,12 @@
+const IconLeaf = () => {
+  return (
+    <svg width="46" height="48" viewBox="0 0 46 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M38.3476 42.3332C35.985 42.3332 33.3148 42.3332 30.3858 42.5167C22.9579 42.9754 12.9085 42.165 10.8371 32.1346C7.89185 17.8842 16.4363 6.20248 15.5463 9.04646C8.2155 32.3946 21.7118 37.9143 32.6028 40.7736C35.8879 41.6298 37.7327 41.8286 40.6294 37.5626C44.3514 32.1041 47.7012 21.9055 45.0472 16.9209C39.529 6.66119 19.0093 5.42268 20.2392 1.06498C21.6471 -3.88904 -1.12189 8.74065 0.0432616 32.7004C0.706751 46.3392 13.5234 52.1648 36.082 44.7643C38.3638 44.0151 38.3476 42.3485 38.3476 42.3485V42.3332Z"
+        fill="#B8EA00"
+      />
+    </svg>
+  );
+};
+
+export default IconLeaf;

src/assets/icons/index.tsx

@@ -0,0 +1,7 @@
+import IconClose from './IconClose';
+import IconLeaf from './IconLeaf';
+import IconPlus from './IconPlus';
+import IconSearch from './IconSearch';
+import IconUserPlus from './IconUserPlus';
+
+export { IconClose, IconLeaf, IconPlus, IconSearch, IconUserPlus };

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

@@ -23,7 +23,10 @@ const router = createBrowserRouter([
           </ProtectedRoute>
         ),
       },
-
+      {
+        path: 'userInvite',
+        element: <UserInvite />,
+      },
       {
         path: '/login',
         element: <LoginPage />,

src/styles/index.css

@@ -12,6 +12,8 @@
   border: 1px solid oklch(var(--b3));
   border-radius: 0.5rem;
 }
+.userInvite svg {
+  margin: auto;
 
 @media (min-width: 1024px) {
   .drawer-toggle {