[Feat] 초대 메일 전송 api 연결 (#417)

* feat: 초대 메일 전송 api 연결 * feat: 성공/실패 여부 토스트로 띄우기
Team-Tiki · Jan 15, 2025 · d8e93b7 · d8e93b7
1 parent 51ca102
commit d8e93b7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/apps/client/src/shared/component/InviteModal/InviteModal.style.ts b/apps/client/src/shared/component/InviteModal/InviteModal.style.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { theme } from '@tiki/ui';
 
 export const inputWrapperStyle = css({
-  width: '68.1rem',
+  width: '22rem',
 
   height: '4rem',
 });

diff --git a/apps/client/src/shared/component/InviteModal/InviteModal.tsx b/apps/client/src/shared/component/InviteModal/InviteModal.tsx
@@ -1,11 +1,13 @@
-import { CommandButton, Flex, Input, Text } from '@tiki/ui';
+import { CommandButton, Flex, Input, Text, useToastAction } from '@tiki/ui';
 
 import { useState } from 'react';
 
+import { $api } from '@/shared/api/client';
 import { inputWrapperStyle, scrollStyle, textStyle } from '@/shared/component/InviteModal/InviteModal.style';
 import MemberItem from '@/shared/component/InviteModal/Member/MemberItem';
 import { Modal } from '@/shared/component/Modal';
 import { useFunnel } from '@/shared/hook/common/useFunnel';
+import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 
 const InviteModal = ({ step }: { step: number }) => {
   const [inputValue, setInputValue] = useState('');
@@ -14,6 +16,10 @@ const InviteModal = ({ step }: { step: number }) => {
   const isButtonActive = inputValue.trim().length > 0;
 
   const { nextStep } = useFunnel();
+  const { createToast } = useToastAction();
+
+  const teamId = useInitializeTeamId();
+  const { mutate } = $api.useMutation('post', '/api/v1/email/invitation/team/{teamId}');
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
@@ -30,6 +36,23 @@ const InviteModal = ({ step }: { step: number }) => {
     setInviteList(inviteList.filter((item) => item !== email));
   };
 
+  const handleNextStep = () => {
+    inviteList.forEach((email) => {
+      mutate(
+        { params: { path: { teamId } }, body: { email: email } },
+        {
+          onSuccess: () => {
+            createToast('메일 전송에 성공했습니다.', 'success');
+            nextStep();
+          },
+          onError: (error) => {
+            createToast(`${error.message}`, 'error');
+          },
+        }
+      );
+    });
+  };
+
   return (
     <>
       <Modal.Header step={step} />
@@ -48,7 +71,7 @@ const InviteModal = ({ step }: { step: number }) => {
               disabled={!isButtonActive}
               isCommand={false}
               onClick={handleAddInvite}
-              css={{ width: '12rem', height: '4rem' }}>
+              css={{ width: '12rem', height: '4rem', padding: '1rem' }}>
               추가
             </CommandButton>
           </Flex>
@@ -66,13 +89,7 @@ const InviteModal = ({ step }: { step: number }) => {
           </div>
         </Flex>
       </Modal.Body>
-      <Modal.Footer
-        contentType="invite"
-        buttonClick={() => {
-          nextStep();
-        }}
-        isButtonActive={!isButtonActive}
-      />
+      <Modal.Footer contentType="invite" buttonClick={handleNextStep} isButtonActive={!isButtonActive} />
     </>
   );
 };