feat: queries에 들어갈 fetch 훅 구현

frontend/src/apis/host/fetchStreamKey.ts

@@ -1,9 +1,14 @@
+import { AxiosResponse } from 'axios';
 import { BASE_URL, fetchInstance } from '..';
 
+type StreamKeyResponse = {
+  'stream-key': string;
+  'session-key': string;
+};
+
 type NanoId = string;
 
-export const fetchStreamKey = (userId: NanoId) => {
-  return fetchInstance().post(`${BASE_URL}/host/key`, {
-    userId
-  });
+export const fetchStreamKey = async (userId: NanoId): Promise<StreamKeyResponse> => {
+  const response: AxiosResponse<StreamKeyResponse> = await fetchInstance().post(`${BASE_URL}/host/key`, { userId });
+  return response.data;
 };

frontend/src/queries/host/useFetchStreamKey.ts

@@ -0,0 +1,24 @@
+import { fetchStreamKey } from '@apis/host/fetchStreamKey';
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+
+type StreamKeyResponse = {
+  'stream-key': string;
+  'session-key': string;
+};
+
+type Params = {
+  onSuccess?: (data: StreamKeyResponse) => void;
+  onError?: (error: Error) => void;
+};
+
+export default function useFetchStreamKey({ onSuccess, onError }: Params = {}): UseMutationResult<
+  StreamKeyResponse,
+  Error,
+  string
+> {
+  return useMutation({
+    mutationFn: fetchStreamKey,
+    onSuccess,
+    onError
+  });
+}