boostcampwm-2024 · jsk3342 · Nov 21, 2024 · Nov 16, 2024 · Nov 18, 2024 · Nov 18, 2024
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -36,10 +36,11 @@ export default tseslint.config({ ignores: ['.*'] }, js.configs.recommended, ...t
     ],
     'react/react-in-jsx-scope': 'off',
     eqeqeq: ['error', 'always'],
-    indent: ['error', 2],
+    indent: ['error', 2, { SwitchCase: 1 }],
     quotes: ['error', 'single'],
     semi: ['error', 'always'],
-    '@typescript-eslint/no-unused-vars': ['error']
+    '@typescript-eslint/no-unused-vars': ['error'],
+    '@typescript-eslint/no-explicit-any': 'off'
   },
   settings: {
     ...reactRecommended.settings

diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/pabicon.ico" />

diff --git a/frontend/package.json b/frontend/package.json
@@ -15,16 +15,19 @@
     "msw:init": "msw init public/"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.59.20",
     "@types/node": "^22.9.0",
     "@vitejs/plugin-react": "^4.3.3",
-    "@tanstack/react-query": "^5.59.20",
     "axios": "^1.7.7",
     "eslint-plugin-react": "^7.37.2",
+    "framer-motion": "^11.11.17",
     "hls.js": "^1.5.17",
     "nanoid": "^5.0.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
     "react-router-dom": "^6.27.0",
+    "socket.io-client": "^4.8.1",
     "styled-components": "^6.1.13",
     "vite": "^5.4.10",
     "vite-plugin-svgr": "^4.3.0",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -4,15 +4,18 @@ import { theme } from './styles/theme';
 import { MainPage, ClientPage, HostPage } from './pages';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '@apis/index';
+import withUserId from '@hocs/withUserId';
 
-function App() {
+function AppComponent() {
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme}>
-        <Router future={{ 
-          v7_startTransition: true,
-          v7_relativeSplatPath: true 
-        }}>
+        <Router
+          future={{
+            v7_startTransition: true,
+            v7_relativeSplatPath: true
+          }}
+        >
           <Routes>
             <Route path="/" element={<MainPage />} />
             <Route path="/live" element={<ClientPage />} />
@@ -26,4 +29,6 @@ function App() {
   );
 }
 
-export default App;
+const App = withUserId(AppComponent);
+
+export default App;
diff --git a/frontend/src/apis/fetchBroadcastStatus.ts b/frontend/src/apis/fetchBroadcastStatus.ts
@@ -1,13 +1,10 @@
-import { getSessionKey } from '@utils/streamKey';
 import { fetchInstance } from '.';
 
 export type BroadcastStatusResponse = {
   state: boolean;
 };
 
-export const fetchBroadcastStatus = async (): Promise<BroadcastStatusResponse> => {
-  const sessionKey = getSessionKey();
-
+export const fetchBroadcastStatus = async (sessionKey: string): Promise<BroadcastStatusResponse> => {
   const response = await fetchInstance().get<BroadcastStatusResponse>('/host/state', {
     params: {
       sessionKey

diff --git a/frontend/src/apis/fetchLive.ts b/frontend/src/apis/fetchLive.ts
@@ -0,0 +1,17 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+import { ClientLive } 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
+    }
+  });
+
+  return response.data.info;
+};
diff --git a/frontend/src/apis/fetchMainLive.ts b/frontend/src/apis/fetchMainLive.ts
@@ -0,0 +1,13 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+import { MainLive } from '@type/live';
+
+type MainLiveResponse = {
+  info: MainLive[];
+};
+
+export const fetchMainLive = async (): Promise<MainLive[]> => {
+  const response: AxiosResponse<MainLiveResponse> = await fetchInstance().get('/streams/random');
+
+  return response.data.info;
+};
diff --git a/frontend/src/apis/fetchRecentLive.ts b/frontend/src/apis/fetchRecentLive.ts
@@ -0,0 +1,13 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+import { RecentLive } from '@type/live';
+
+type RecentLiveResponse = {
+  info: RecentLive[];
+};
+
+export const fetchRecentLive = async (): Promise<RecentLive[]> => {
+  const response: AxiosResponse<RecentLiveResponse> = await fetchInstance().get('/streams/latest');
+
+  return response.data.info;
+};
diff --git a/frontend/src/apis/queries/client/useFetchLive.ts b/frontend/src/apis/queries/client/useFetchLive.ts
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { fetchLive } from '@apis/fetchLive';
+import { ClientLive } from '@type/live';
+
+export const useClientLive = ({ liveId }: { liveId: string }) => {
+  return useQuery<ClientLive, Error>({
+    queryKey: ['clientLive'],
+    queryFn: () => fetchLive({ liveId: liveId }),
+    refetchOnWindowFocus: false
+  });
+};
diff --git a/frontend/src/apis/queries/host/useBroadcastStatusPolling.ts b/frontend/src/apis/queries/host/useBroadcastStatusPolling.ts
@@ -1,10 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { fetchBroadcastStatus } from '@apis/fetchBroadcastStatus';
 
-export const useBroadcastStatusPolling = (pollingInterVal = 10000) => {
+export const useBroadcastStatusPolling = (sessionKey: string, pollingInterVal = 10000) => {
   return useQuery({
-    queryKey: ['broadcastState'],
-    queryFn: fetchBroadcastStatus,
+    queryKey: ['broadcastState', sessionKey],
+    queryFn: () => fetchBroadcastStatus(sessionKey),
     refetchInterval: pollingInterVal,
     refetchIntervalInBackground: true,
     refetchOnWindowFocus: true,

diff --git a/frontend/src/apis/queries/host/useUpdateHost.ts b/frontend/src/apis/queries/host/useUpdateHost.ts
@@ -1,5 +1,6 @@
-import { HostInfo, updateHost } from '@apis/updateHost';
+import { updateHost } from '@apis/updateHost';
 import { useMutation, UseMutationResult } from '@tanstack/react-query';
+import { HostInfo } from '@type/hostInfo';
 
 type Params = {
   onSuccess?: (data: HostInfo) => void;

diff --git a/frontend/src/apis/queries/main/useFetchMainLive.ts b/frontend/src/apis/queries/main/useFetchMainLive.ts
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { fetchMainLive } from '@apis/fetchMainLive';
+import { MainLive } from '@type/live';
+
+export const useMainLive = () => {
+  return useQuery<MainLive[], Error>({
+    queryKey: ['mainLive'],
+    queryFn: fetchMainLive,
+    refetchOnWindowFocus: false
+  });
+};
diff --git a/frontend/src/apis/queries/main/useFetchRecentLive.ts b/frontend/src/apis/queries/main/useFetchRecentLive.ts
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { fetchRecentLive } from '@apis/fetchRecentLive';
+import { RecentLive } from '@type/live';
+
+export const useRecentLive = () => {
+  return useQuery<RecentLive[], Error>({
+    queryKey: ['recentLive'],
+    queryFn: fetchRecentLive,
+    refetchOnWindowFocus: false
+  });
+};
diff --git a/frontend/src/apis/updateHost.ts b/frontend/src/apis/updateHost.ts
@@ -1,13 +1,6 @@
 import { AxiosResponse } from 'axios';
 import { fetchInstance } from '.';
-
-export interface HostInfo {
-  userId: string;
-  liveTitle: string;
-  defaultThumbnailImageUrl: string;
-  category: string;
-  tags: string[];
-}
+import { HostInfo } from '@type/hostInfo';
 
 export const updateHost = async (hostInfo: HostInfo): Promise<HostInfo> => {
   const response: AxiosResponse<HostInfo> = await fetchInstance().post('/host/update', hostInfo);

diff --git a/frontend/src/assets/icons/speaker.svg b/frontend/src/assets/icons/speaker.svg
diff --git a/frontend/src/assets/logo.gif b/frontend/src/assets/logo.gif
diff --git a/frontend/src/assets/player_loading.gif b/frontend/src/assets/player_loading.gif
diff --git a/frontend/src/assets/sampleThumbnail.png b/frontend/src/assets/sampleThumbnail.png
diff --git a/frontend/src/assets/sample_profile.png b/frontend/src/assets/sample_profile.png
diff --git a/frontend/src/components/chat/ChatHeader.tsx b/frontend/src/components/chat/ChatHeader.tsx
@@ -1,27 +1,56 @@
 import styled from 'styled-components';
 import ThreePointIcon from '@assets/icons/three-point.svg';
 import OutIcon from '@assets/icons/out.svg';
+import { useCallback, useContext, useEffect, useRef } from 'react';
+import LayerPopup from './LayerPopup';
+import { ChatContext } from 'src/contexts/chatContext';
 
 interface ChatHeaderProps {
   outBtnHandler?: () => void;
 }
 
 export const ChatHeader = ({ outBtnHandler }: ChatHeaderProps) => {
+  const { state, dispatch } = useContext(ChatContext);
+  const headerRef = useRef<HTMLDivElement>(null);
+
+  const toggleSettings = () => {
+    dispatch({ type: 'TOGGLE_SETTINGS' });
+  };
+
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (headerRef.current && !headerRef.current.contains(event.target as Node)) {
+        dispatch({ type: 'CLOSE_SETTINGS' });
+      }
+    },
+    [dispatch]
+  );
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
   return (
-    <ChatHeaderContainer>
+    <ChatHeaderContainer ref={headerRef}>
       <HeaderBtn onClick={outBtnHandler}>
         <StyledIcon as={OutIcon} />
       </HeaderBtn>
       <h2>채팅</h2>
-      <HeaderBtn>
+      <HeaderBtn onClick={toggleSettings}>
         <StyledIcon as={ThreePointIcon} />
       </HeaderBtn>
+      <PopupWrapper>{state.isSettingsOpen && <LayerPopup />}</PopupWrapper>
     </ChatHeaderContainer>
   );
 };
+
 export default ChatHeader;
 
 const ChatHeaderContainer = styled.div`
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -42,3 +71,10 @@ const StyledIcon = styled.svg`
   height: 25px;
   cursor: pointer;
 `;
+
+const PopupWrapper = styled.div`
+  position: absolute;
+  top: 60px;
+  right: 0;
+  z-index: 1000;
+`;