feat: 초대할 멤버 래스트 보여주기

Author: Rose4tune

src/components/common/Dialog.tsx

@@ -34,7 +34,7 @@ const Dialog = forwardRef<DialogElement, Props>((props, ref) => {
     <dialog ref={dialogRef} className="modal modal-middle" onClick={handleClose}>
       <div className="modal-box" onClick={(e) => e.stopPropagation()}>
         {title && <h3 className="text-lg font-bold">{title}</h3>}
-        <p className={descClassName}>{desc}</p>
+        {desc && <p className={descClassName}>{desc}</p>}
         {children && <div>{children}</div>}
         <form method="dialog" className="modal-action flex justify-center">
           <button type="button" className="btn bg-primary text-base-100" onClick={() => dialogRef.current?.close()}>

src/components/common/InputForm.tsx

@@ -22,9 +22,13 @@ const InputForm: React.FC<Props> = ({ title, placeholder, hint, onChange, error
         onChange={onChange}
         {...rest}
       />
-      <div className="label flex h-8 flex-row items-center">
-        <span className={`label-text-alt ${error ? 'text-error' : ''}`}>{error ? errorText : hint}</span>
-      </div>
+      {error || hint ? (
+        <div className="label flex h-8 flex-row items-center">
+          <span className={`label-text-alt ${error ? 'text-error' : ''}`}>{error ? errorText : hint}</span>
+        </div>
+      ) : (
+        ''
+      )}
     </label>
   );
 };

src/components/common/UserPlus.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import DialogButton from '@/components/common/DialogButton';
+import IconUserPlus from '@/assets/icons/IconUserPlus';
+import UserPlusDialog from '@/components/common/UserPlusDialog';
+
+const AddCalendarPage: FC = () => {
+  return (
+    <div>
+      멤버 초대하기 *
+      <DialogButton
+        classname={'userplus'}
+        name={<IconUserPlus />}
+        title={'멤버 찾기'}
+        desc={''}
+        children={<UserPlusDialog />}
+      />
+    </div>
+  );
+};
+
+export default AddCalendarPage;

src/components/common/UserPlusDialog.tsx

@@ -0,0 +1,37 @@
+import InputForm from './InputForm.tsx';
+import { searchUser } from '../../apis/authApis.ts';
+import { FC, useState } from 'react';
+import IconSearch from '@/assets/icons/IconSearch.tsx';
+import UserPlusList from './UserPlusList.tsx';
+
+const UserPlus: 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((value) => {
+      setList(value.map(({ user_nickname, id }) => <UserPlusList user_nickname={user_nickname} id={id} />));
+      return list;
+    });
+  };
+
+  return (
+    <div>
+      <div className="flex items-end">
+        <InputForm title={'닉네임으로 검색하기'} placeholder={'닉네임을 입력하세요'} hint={''} onChange={onChange} />
+        <button className="btn btn-outline btn-primary" onClick={onSearchClick}>
+          <IconSearch />
+        </button>
+      </div>
+      <ul id="searchList" role="list" className="divide-y divide-gray-100">
+        {list}
+      </ul>
+    </div>
+  );
+};
+
+export default UserPlus;

src/components/common/UserPlusList.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import IconPlus from '@/assets/icons/IconPlus.tsx';
+
+interface Props {
+  user_nickname: any;
+  id: string;
+}
+
+const UserPlusList: 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}>
+        {user_nickname}
+        <IconPlus />
+      </button>
+    </li>
+  );
+};
+
+const onPlusClick = () => {
+  console.log('aa');
+};
+
+export default UserPlusList;

src/main.tsx

@@ -7,6 +7,8 @@ import TextInputForm from './pages/InputFormTest.tsx';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { JoinPage, LoginPage, ResetPwPage, NotFound, Policy } from './pages/index.ts';
 
+import UserPlus from './components/common/UserPlus.tsx';
+
 const router = createBrowserRouter([
   {
     path: '/',
@@ -35,6 +37,10 @@ const router = createBrowserRouter([
         path: 'inputForm',
         element: <TextInputForm />,
       },
+      {
+        path: 'userPlus',
+        element: <UserPlus />,
+      },
     ],
   },
   {

src/styles/index.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.userplus {
+  padding: 2rem 1.3rem;
+  border: 1px solid oklch(var(--b3));
+  border-radius: 0.5rem;
+  background-color: oklch(var(--b2));
+}
+.userplus:hover {
+  background-color: oklch(var(--b3));
+}