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

[MERGE] dev-fe to prod-fe

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/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/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/replay/useCheckReplayExist.ts

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

frontend/src/apis/queries/replay/useFetchReplay.ts

@@ -1,12 +1,15 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { fetchReplay } from '@apis/fetchReplay';
-import { ReplayStream } from '@type/replay';
+import { ClientReplayResponse, ReplayStream } from '@type/replay';
 
 export const useClientReplay = ({ videoId }: { videoId: string }) => {
-  return useQuery<ReplayStream, Error>({
+  return useQuery<ClientReplayResponse, Error>({
     queryKey: ['clientReplay'],
-    queryFn: () => fetchReplay({ videoId: videoId }),
-    refetchOnWindowFocus: false
+    queryFn: () => fetchReplay({ videoId }),
+    refetchOnWindowFocus: false,
+    initialData: { info: {} as ReplayStream },
+    throwOnError: true,
+    retry: 0
   });
 };

frontend/src/components/chat/ChatInput.tsx

@@ -5,7 +5,7 @@ import SpeakerIcon from '@assets/icons/speaker.svg';
 import SendIcon from '@assets/icons/send.svg';
 import { useRef, useEffect, useState, ChangeEvent, KeyboardEvent, memo } from 'react';
 import { CHATTING_SOCKET_SEND_EVENT, CHATTING_TYPES } from '@constants/chat';
-import { ChattingTypes } from '@type/chat';
+import { ChattingSendTypes } from '@type/chat';
 import { getStoredId } from '@utils/id';
 import { UserType } from '@type/user';
 
@@ -20,7 +20,7 @@ const INITIAL_TEXTAREA_HEIGHT = 20;
 export const ChatInput = ({ worker, userType, roomId }: ChatInputProps) => {
   const [hasInput, setHasInput] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
-  const [msgType, setMsgType] = useState<ChattingTypes>(CHATTING_TYPES.NORMAL);
+  const [msgType, setMsgType] = useState<ChattingSendTypes>(CHATTING_TYPES.NORMAL);
   const [message, setMessage] = useState('');
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);