feat: 호스트 멤버 초대 API 연동

src/features/event/ui/EventFunnel.tsx

@@ -11,7 +11,7 @@ import { useNavigate } from 'react-router-dom';
 import { EventFunnelInterface, StepNames } from '../../../shared/types/funnelType';
 import { useFunnelState } from '../model/FunnelContext';
 import { useEventCreation } from '../hooks/useEventHook';
-import { useHostCreation } from '../hooks/useHostHook';
+import { useHostCreation } from '../../host/hook/useHostHook';
 
 const EventFunnel = ({ onNext, onPrev, Funnel, Step, currentStep }: EventFunnelInterface) => {
   const navigate = useNavigate();

src/features/host/api/host.ts

@@ -1,8 +1,17 @@
 import { axiosClient } from '../../../shared/types/api/http-client';
-import { UpdateHostChannelInfoRequest } from '../model/host';
+import { HostCreationRequest, UpdateHostChannelInfoRequest } from '../model/host';
 
-const updateHostInfo = async (hostChannelId: number, dto: UpdateHostChannelInfoRequest) => {
+export const createHost = async (data: HostCreationRequest) => {
+  const response = await axiosClient.post('/host-channels', data);
+  return response.data;
+};
+
+export const updateHostInfo = async (hostChannelId: number, dto: UpdateHostChannelInfoRequest) => {
   const response = await axiosClient.put(`/host-channels/${hostChannelId}`, dto);
   return response.data;
 };
-export default updateHostInfo;
+
+export const deleteHost = async (hostChannelId: number) => {
+  const response = await axiosClient.delete(`/host-channels/${hostChannelId}`);
+  return response.data;
+};

src/features/host/api/hostInvitation.ts

@@ -0,0 +1,7 @@
+import { axiosClient } from '../../../shared/types/api/http-client';
+import { HostInvitationRequest } from '../model/hostInvitation';
+
+export const inviteMember = async (hostChannelId: number, data: HostInvitationRequest) => {
+  const response = await axiosClient.post(`/host-channels/${hostChannelId}/members`, data);
+  return response.data;
+};

src/features/host/hook/useHostHook.ts

@@ -1,10 +1,27 @@
 import { useMutation } from '@tanstack/react-query';
-import updateHostInfo from '../api/host';
-import { UpdateHostChannelInfoRequest } from '../model/host';
+import { HostCreationRequest, UpdateHostChannelInfoRequest } from '../model/host';
+import { ApiResponse } from '../../../shared/types/api/apiResponse';
+import { createHost, deleteHost, updateHostInfo } from '../api/host';
+
+export const useHostCreation = () => {
+  return useMutation<ApiResponse<null>, Error, HostCreationRequest>({
+    mutationFn: async (requestBody: HostCreationRequest) => {
+      return await createHost(requestBody);
+    },
+  });
+};
 
 export const useUpdateHostChannelInfo = (hostChannelId: number) => {
   const mutation = useMutation({
     mutationFn: (dto: UpdateHostChannelInfoRequest) => updateHostInfo(hostChannelId, dto),
   });
   return mutation;
 };
+
+export const useHostDeletion = () => {
+  return useMutation<ApiResponse<null>, Error, number>({
+    mutationFn: async (hostChannelId: number) => {
+      return await deleteHost(hostChannelId);
+    },
+  });
+};

src/features/host/hook/useHostInfoHook.ts

@@ -0,0 +1,36 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useUpdateHostChannelInfo } from './useHostHook';
+import { HostChannelInfoResponse } from '../../../entities/host/model/hostChannelInfo';
+
+export const useHostInfoSave = (
+  hostChannelId: number,
+  hostInfo: HostChannelInfoResponse,
+  channelDescription: string
+) => {
+  const queryClient = useQueryClient();
+  const { mutate } = useUpdateHostChannelInfo(hostChannelId);
+
+  const handleSave = () => {
+    if (!hostInfo?.result.id) return;
+
+    const updatedData = {
+      hostChannelId,
+      profileImageUrl: hostInfo.result.profileImageUrl,
+      hostChannelName: hostInfo.result.hostChannelName,
+      hostEmail: hostInfo.result.email,
+      channelDescription,
+    };
+
+    mutate(updatedData, {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['hostInfo', hostChannelId] });
+        alert('저장되었습니다.');
+      },
+      onError: () => {
+        alert('저장에 실패했습니다.');
+      },
+    });
+  };
+
+  return { handleSave };
+};

src/features/host/hook/useHostInvitation.ts

@@ -0,0 +1,12 @@
+import { useMutation } from '@tanstack/react-query';
+import { ApiResponse } from '../../../shared/types/api/apiResponse';
+import { HostInvitationRequest } from '../model/hostInvitation';
+import { inviteMember } from '../api/hostInvitation';
+
+export const useHostInvitation = (hostChannelId: number) => {
+  return useMutation<ApiResponse<null>, Error, HostInvitationRequest>({
+    mutationFn: async (requestBody: HostInvitationRequest) => {
+      return await inviteMember(hostChannelId, requestBody);
+    },
+  });
+};

src/features/host/hook/useInviteHostHook.ts

@@ -0,0 +1,40 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useHostInvitation } from './useHostInvitation';
+
+export const useInviteMembers = (hostChannelId: number) => {
+  const queryClient = useQueryClient();
+  const { mutate: inviteMember } = useHostInvitation(hostChannelId);
+
+  const inviteMembers = (emails: string[], onSuccess?: () => void, onError?: () => void) => {
+    if (emails.length === 0) {
+      alert('초대할 이메일을 입력해주세요.');
+      return;
+    }
+
+    const invitationPromises = emails.map(
+      email =>
+        new Promise((resolve, reject) => {
+          inviteMember(
+            { email },
+            {
+              onSuccess: resolve,
+              onError: reject,
+            }
+          );
+        })
+    );
+
+    Promise.all(invitationPromises)
+      .then(() => {
+        alert('초대가 전송되었습니다.');
+        queryClient.invalidateQueries({ queryKey: ['hostInfo', hostChannelId] });
+        onSuccess?.();
+      })
+      .catch(() => {
+        alert('초대 중 일부 실패했습니다.');
+        onError?.();
+      });
+  };
+
+  return { inviteMembers };
+};

src/features/host/model/host.ts

@@ -1,3 +1,10 @@
+export interface HostCreationRequest {
+  profileImageUrl: string;
+  hostChannelName: string;
+  hostEmail: string;
+  channelDescription: string;
+}
+
 export interface UpdateHostChannelInfoRequest {
   profileImageUrl: string;
   hostChannelName: string;

src/features/host/model/hostInvitation.ts

@@ -0,0 +1,3 @@
+export interface HostInvitationRequest {
+  email: string;
+}

src/features/menu/ui/MemberEmailInput.tsx

@@ -1,8 +1,12 @@
 import { useState, KeyboardEvent } from 'react';
 import EmailInputBase from '../../../shared/ui/EmailInputBase';
 
-const MemberEmailInput = () => {
-  const [emails, setEmails] = useState<string[]>([]);
+interface MemberEmailInputProps {
+  emails: string[];
+  setEmails: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+const MemberEmailInput = ({ emails, setEmails }: MemberEmailInputProps) => {
   const [inputValue, setInputValue] = useState('');
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {

src/pages/event/ui/host/HostSelectionPage.tsx

@@ -4,7 +4,7 @@ import { useFunnelState } from '../../../../features/event/model/FunnelContext';
 import useHostChannelList from '../../../../entities/host/hook/useHostChannelListHook';
 import IconButton from '../../../../../design-system/ui/buttons/IconButton';
 import CloseButton from '../../../../../public/assets/event-manage/creation/CloseBtn.svg';
-import { useHostDeletion } from '../../../../features/event/hooks/useHostHook';
+import { useHostDeletion } from '../../../../features/host/hook/useHostHook';
 
 interface HostSelectionPageProps {
   onNext: (nextStep: string) => void;

src/pages/menu/ui/myHost/HostEditPage.tsx

@@ -7,21 +7,21 @@ import TertiaryButton from '../../../../../design-system/ui/buttons/TertiaryButt
 import { useParams } from 'react-router-dom';
 import MemberEmailInput from '../../../../features/menu/ui/MemberEmailInput';
 import useHostChannelInfo from '../../../../entities/host/hook/useHostChannelInfoHook';
-import { useUpdateHostChannelInfo } from '../../../../features/host/hook/useHostHook';
-import { useQueryClient } from '@tanstack/react-query';
+import { useHostInfoSave } from '../../../../features/host/hook/useHostInfoHook';
+import { useInviteMembers } from '../../../../features/host/hook/useInviteHostHook';
 
 const HostEditPage = () => {
   const { id } = useParams<{ id: string }>();
   const [selectedHost, setSelectedHost] = useState(true);
   const [selectedInfo, setSelectedInfo] = useState(false);
-  const [tags, setTags] = useState<string[]>([]);
-  const [inputValue, setInputValue] = useState('');
   const [channelDescription, setChannelDescription] = useState('');
+  const [emails, setEmails] = useState<string[]>([]);
 
   const hostChannelId = Number(id);
   const { data: hostInfo } = useHostChannelInfo(hostChannelId);
-  const { mutate } = useUpdateHostChannelInfo(hostChannelId);
-  const queryClient = useQueryClient();
+  const { inviteMembers } = useInviteMembers(hostChannelId);
+
+  const { handleSave } = useHostInfoSave(hostChannelId, hostInfo!, channelDescription);
 
   const handeHostInfoClick = () => {
     setSelectedHost(true);
@@ -32,35 +32,10 @@ const HostEditPage = () => {
     setSelectedHost(false);
   };
 
-  const handleSave = () => {
+  const handleInviteMembers = () => {
     if (!hostInfo?.result.id) return;
 
-    const updatedData = {
-      hostChannelId,
-      profileImageUrl: hostInfo.result.profileImageUrl,
-      hostChannelName: hostInfo.result.hostChannelName,
-      hostEmail: hostInfo.result.email,
-      channelDescription,
-    };
-
-    mutate(updatedData, {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: ['hostInfo', hostChannelId],
-        });
-        alert('저장되었습니다.');
-      },
-      onError: () => {
-        alert('저장에 실패했습니다.');
-      },
-    });
-  };
-
-  const handleAddClick = () => {
-    if (inputValue.trim() && !tags.includes(inputValue.trim())) {
-      setTags([...tags, inputValue.trim()]);
-      setInputValue('');
-    }
+    inviteMembers(emails, () => setEmails([]));
   };
 
   useEffect(() => {
@@ -144,13 +119,13 @@ const HostEditPage = () => {
                   이메일로 회원을 검색해 추가 할 수 있습니다. 삭제 하려면 추가된 이메일 아이콘의 x를 눌러주세요.{' '}
                 </p>
               </div>
-              <MemberEmailInput />
+              <MemberEmailInput emails={emails} setEmails={setEmails} />
               <TertiaryButton
                 type="button"
                 label="전송"
                 size="large"
                 color="pink"
-                onClick={handleAddClick}
+                onClick={handleInviteMembers}
                 className="mb-4"
               />
             </div>