Merge pull request #293 from boostcampwm-2024/dev-fe

[MERGE] dev-fe to dev

Author: hoeeeeeh

frontend/src/App.tsx

@@ -1,11 +1,10 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { theme } from './styles/theme';
-import { MainPage, ClientPage, HostPage } from './pages';
+import { ClientPage, ErrorPage, HostPage, MainPage, ReplayPage } from './pages';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '@apis/index';
 import withUserId from '@hocs/withUserId';
-import ReplayPage from '@pages/ReplayPage';
 
 function AppComponent() {
   return (
@@ -19,12 +18,10 @@ function AppComponent() {
         >
           <Routes>
             <Route path="/" element={<MainPage />} />
-            <Route path="/live" element={<ClientPage />} />
             <Route path="/live/:id" element={<ClientPage />} />
-            <Route path="/replay" element={<ReplayPage />} />
             <Route path="/replay/:id" element={<ReplayPage />} />
             <Route path="/host" element={<HostPage />} />
-            <Route path="/host/:id" element={<HostPage />} />
+            <Route path="*" element={<ErrorPage />} />
           </Routes>
         </Router>
       </ThemeProvider>

frontend/src/apis/checkLiveExist.ts

@@ -0,0 +1,13 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+import { LiveExistenceResponse } from '@type/live';
+
+export const checkLiveExist = async ({ liveId }: { liveId: string }): Promise<LiveExistenceResponse> => {
+  const response: AxiosResponse<LiveExistenceResponse> = await fetchInstance().get('/streams/existence', {
+    params: {
+      sessionKey: liveId
+    }
+  });
+
+  return response.data;
+};

frontend/src/apis/checkReplayExist.ts

@@ -0,0 +1,13 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+import { ReplayExistenceResponse } from '@type/replay';
+
+export const checkReplayExist = async ({ videoId }: { videoId: string }): Promise<ReplayExistenceResponse> => {
+  const response: AxiosResponse<ReplayExistenceResponse> = await fetchInstance().get('/replay/existence', {
+    params: {
+      videoId
+    }
+  });
+
+  return response.data;
+};

frontend/src/apis/fetchChatRule.ts

@@ -0,0 +1,17 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+
+export type ChatRuleResponse = {
+  notice: string;
+  channelName: string;
+};
+
+export const fetchChatRule = async ({ sessionKey }: { sessionKey: string }): Promise<ChatRuleResponse> => {
+  const response: AxiosResponse<ChatRuleResponse> = await fetchInstance().get('/streams/notice', {
+    params: {
+      sessionKey
+    }
+  });
+
+  return response.data;
+};

frontend/src/apis/fetchLive.ts

@@ -1,17 +1,18 @@
 import { AxiosResponse } from 'axios';
 import { fetchInstance } from '.';
-import { ClientLive } from '@type/live';
+import { ClientLiveResponse } from '@type/live';
 
-type ClientLiveResponse = {
-  info: ClientLive;
-};
-
-export const fetchLive = async ({ liveId }: { liveId: string }): Promise<ClientLive> => {
-  const response: AxiosResponse<ClientLiveResponse> = await fetchInstance().get('/streams/live', {
-    params: {
-      liveId
+export const fetchLive = async ({ liveId }: { liveId: string }): Promise<ClientLiveResponse> => {
+  try {
+    const response: AxiosResponse = await fetchInstance().get('/streams/live', {
+      params: { liveId }
+    });
+    return response.data;
+  } catch (error: any) {
+    if (error.response && error.response.status === 400) {
+      console.log('error', error);
+      throw error;
     }
-  });
-
-  return response.data.info;
+    throw error;
+  }
 };

frontend/src/apis/fetchReplay.ts

@@ -1,17 +1,20 @@
 import { AxiosResponse } from 'axios';
 import { fetchInstance } from '.';
-import { ReplayStream } from '@type/replay';
+import { ClientReplayResponse } from '@type/replay';
 
-type ReplayStreamResponse = {
-  info: ReplayStream;
-};
-
-export const fetchReplay = async ({ videoId }: { videoId: string }): Promise<ReplayStream> => {
-  const response: AxiosResponse<ReplayStreamResponse> = await fetchInstance().get('/replay/video', {
-    params: {
-      videoId
+export const fetchReplay = async ({ videoId }: { videoId: string }): Promise<ClientReplayResponse> => {
+  try {
+    const response: AxiosResponse = await fetchInstance().get('/replay/video', {
+      params: {
+        videoId
+      }
+    });
+    return response.data;
+  } catch (error: any) {
+    if (error.response && error.response.status === 400) {
+      console.log('error', error);
+      throw error;
     }
-  });
-
-  return response.data.info;
+    throw error;
+  }
 };

frontend/src/apis/queries/chat/useFetchChatRule.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+import { ChatRuleResponse, fetchChatRule } from '@apis/fetchChatRule';
+
+export const useFetchChatRule = ({ sessionKey }: { sessionKey: string }) => {
+  return useQuery<ChatRuleResponse, Error>({
+    queryKey: ['chatRule'],
+    queryFn: () => fetchChatRule({ sessionKey }),
+    refetchOnWindowFocus: false
+  });
+};

frontend/src/apis/queries/client/useCheckLiveExist.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { checkLiveExist } from '@apis/checkLiveExist';
+import { LiveExistenceResponse } from '@type/live';
+
+export const useCheckLiveExist = ({ liveId }: { liveId: string }) => {
+  return useQuery<LiveExistenceResponse, Error>({
+    queryKey: ['checkLiveExist'],
+    queryFn: () => checkLiveExist({ liveId }),
+    refetchOnWindowFocus: false,
+    initialData: { existed: true }
+  });
+};

frontend/src/apis/queries/client/useFetchLive.ts

@@ -1,12 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
-
 import { fetchLive } from '@apis/fetchLive';
-import { ClientLive } from '@type/live';
+import { ClientLive, ClientLiveResponse } from '@type/live';
 
 export const useClientLive = ({ liveId }: { liveId: string }) => {
-  return useQuery<ClientLive, Error>({
+  return useQuery<ClientLiveResponse, Error>({
     queryKey: ['clientLive'],
-    queryFn: () => fetchLive({ liveId: liveId }),
-    refetchOnWindowFocus: false
+    queryFn: () => fetchLive({ liveId }),
+    refetchOnWindowFocus: false,
+    initialData: { info: {} as ClientLive },
+    throwOnError: true,
+    retry: 0,
   });
 };

frontend/src/apis/queries/main/useFetchMainLive.ts

@@ -7,6 +7,6 @@ export const useMainLive = () => {
   return useSuspenseQuery<MainLive[], Error>({
     queryKey: ['mainLive'],
     queryFn: fetchMainLive,
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus: false
   });
 };