Merge pull request #118 from codeit-sprint-part3-6team/#116_기능_초대하기

✨ 초대하기 기능 구현

Author: hwiiron

src/components/common/navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import styles from './Navbar.module.css';
-import { ChangeEvent, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/redux/store';
@@ -9,44 +9,60 @@ import InvitedMember from '../invitedmember/InvitedMember';
 import GeneralModal from '../modal/general/GeneralModal';
 import Dropdown from '../dropdown/Dropdown';
 import { getDashboard, getMember } from '@/lib/navbar/getNavbar';
+import { postInvite } from '@/lib/invite/postInvite';
+import AuthModal from '../modal/auth/AuthModal';
+
+const INITIAL_VALUES = {
+  email: '',
+};
 
 function Navbar() {
   const [dashboardData, setDashboardData] = useState(null);
   const [invitedMember, setInvitedMember] = useState([]);
   const user = useSelector((state: RootState) => state.userInfo.user);
   const [clientUser, setClientUser] = useState(null);
-  const router = useRouter();
-  // 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [emailValue, setEmailValue] = useState('');
-
-  const handleCancelClick = () => {
-    setIsModalOpen(false);
-  };
+  const [emailValue, setEmailValue] = useState(INITIAL_VALUES);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [responseMessage, setResponseMessage] = useState('');
+  const [alertMessage, setAlertMessage] = useState<string | null>(null);
+  const router = useRouter();
+  const {
+    pathname,
+    query: { id },
+  } = router;
 
-  const isMyDashboard = router.pathname !== '/mydashboard';
-  const isMyPage = router.pathname !== '/mypage';
-  const isEdit = router.pathname !== '/edit';
+  const isMyDashboard = pathname !== '/mydashboard';
+  const isMyPage = pathname !== '/mypage';
+  const isEdit = pathname !== '/edit';
 
   useEffect(() => {
     setClientUser(user);
   }, [user]);
 
   useEffect(() => {
-    if (!router.query.id) {
+    if (!id) {
       return;
     }
 
     const fetchDashboardData = async () => {
-      const memberData = await getMember(router.query.id);
+      const memberData = await getMember(id);
       setInvitedMember(memberData);
 
-      const dashboardData = await getDashboard(router.query.id);
+      const dashboardData = await getDashboard(id);
       setDashboardData(dashboardData);
     };
 
     fetchDashboardData();
-  }, [router.query.id]);
+  }, [id]);
+
+  // 초대 요청을 보내고 alert
+  useEffect(() => {
+    if (!isModalOpen && alertMessage) {
+      alert(alertMessage);
+      setAlertMessage(null);
+    }
+  }, [isModalOpen, alertMessage]);
 
   const renderTitle = () => {
     if (!isMyPage) return <h3 className={styles.title}>계정관리</h3>;
@@ -70,6 +86,29 @@ function Navbar() {
     }
   };
 
+  const handleCancelClick = () => {
+    setIsModalOpen(false);
+    setIsModalVisible(false);
+  };
+
+  const submitInvite = async () => {
+    const id = Number(router.query.id);
+
+    try {
+      const response = await postInvite({ id, email: emailValue.email });
+      setIsModalOpen(false);
+      setEmailValue(INITIAL_VALUES);
+      setAlertMessage(
+        `${response.invitee.nickname}님께 초대 요청을 보냈습니다.`,
+      );
+    } catch (error) {
+      setIsModalOpen(false);
+      setResponseMessage(error.message);
+      setIsModalVisible(true);
+      setEmailValue(INITIAL_VALUES);
+    }
+  };
+
   return (
     <div className={styles.navbar}>
       {renderTitle()}
@@ -99,14 +138,21 @@ function Navbar() {
               isOpen={isModalOpen}
               onClose={handleCancelClick}
               title="초대하기"
-              inputValue={emailValue}
-              onInputChange={(value) => setEmailValue(value)}
+              inputValue={emailValue.email}
+              onInputChange={(value) => setEmailValue({ email: value })}
               cancelTitle="취소"
               adaptTitle="초대"
               handleCancelClick={handleCancelClick}
-              handleAdaptClick={() => alert('초대')}
+              handleAdaptClick={submitInvite}
             />
 
+            {isModalVisible && (
+              <AuthModal
+                message={responseMessage}
+                handleCancelClick={handleCancelClick}
+              />
+            )}
+
             <InvitedMember invitedMember={invitedMember} />
           </div>
         )}

src/lib/invite/postInvite.ts

@@ -0,0 +1,47 @@
+import instance from '../instance';
+
+type inviteProps = {
+  id: number;
+  email: string;
+};
+
+type inviteResponse = {
+  createdAt: string;
+  dashboard: {
+    id: number;
+    title: string;
+  };
+  id: number;
+  inviteAccepted: boolean;
+  invitee: {
+    email: string;
+    id: number;
+    nickname: string;
+  };
+  inviter: {
+    email: string;
+    id: number;
+    nickname: string;
+  };
+  teamId: string;
+  updatedAt: string;
+};
+
+export const postInvite = async ({
+  id,
+  email,
+}: inviteProps): Promise<inviteResponse> => {
+  try {
+    const { data } = await instance.post(`11-6/dashboards/${id}/invitations`, {
+      email,
+    });
+    return data;
+  } catch (error) {
+    if (error.response) {
+      return Promise.reject(error.response.data);
+    }
+    throw new Error(
+      error.response?.data?.message || '정보를 불러오는데 실패했습니다.',
+    );
+  }
+};