[MERGE] dev to dev-be

.github/workflows/prod-fe-docker.yml

@@ -0,0 +1,56 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches:
+      - prod-fe
+
+jobs:
+  build:
+    name: Build, Test, and Push Docker Image
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies with Yarn
+        run: yarn install
+
+      - name: Build only backend package with Yarn
+        run: yarn build:fe
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push Docker image
+        run: |
+          docker compose -f fe.build.yaml build --no-cache
+          docker compose -f fe.build.yaml push
+        env:
+          DOCKER_BUILDKIT: 1
+
+      - name: Execute deployment script on remote server
+        env:
+          SSH_PEM_KEY: ${{ secrets.SSH_PEM_KEY }}
+          SSH_USERNAME: ${{ secrets.SSH_USERNAME }}
+          SSH_PORT: ${{ secrets.SSH_PORT }}
+
+        run: |
+          mkdir -p ~/.ssh
+          echo "$SSH_PEM_KEY" > ~/.ssh/SSH_PEM_KEY.pem
+          chmod 600 ~/.ssh/SSH_PEM_KEY.pem
+          ssh -p $SSH_PORT -i ~/.ssh/SSH_PEM_KEY.pem -o StrictHostKeyChecking=no [email protected] 'cd prod && bash prod_fe.sh'
+
+

.yarnrc.yml

@@ -1,16 +1,16 @@
 nodeLinker: pnp
 
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
-
 packageExtensions:
-  '@typescript-eslint/utils@*':
+  "@typescript-eslint/type-utils@*":
     peerDependencies:
-      eslint: '*'
-      typescript: '*'
-  '@typescript-eslint/type-utils@*':
+      eslint: "*"
+      typescript: "*"
+  "@typescript-eslint/utils@*":
     peerDependencies:
-      eslint: '*'
-      typescript: '*'
-  'typescript-eslint@*':
+      eslint: "*"
+      typescript: "*"
+  typescript-eslint@*:
     peerDependencies:
-      eslint: '*'
+      eslint: "*"
+
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

backend/chatServer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatServer",
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].3",
   "version": "0.0.1",
   "description": "",
   "author": "",

backend/mainServer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mainServer",
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].3",
   "version": "0.0.1",
   "description": "",
   "author": "",

backend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "backend",
   "private": true,
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].3",
   "workspaces": [
     "mainServer",
     "rtmpServer",

backend/rtmpServer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rtmpServer",
   "private": true,
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].3",
   "dependencies": {
     "@hoeeeeeh/node-media-server": "3.0.10",
     "@types/node": "^22.9.0",

fe.build.yaml

@@ -0,0 +1,14 @@
+# docker-compose.yml
+version: '3.8'
+
+services:
+  nginx:
+    build:
+      context: nginx
+      dockerfile: dockerfile
+    image: liboost/nginx:latest
+    ports:
+      - "80:80"
+      - "443:443"
+      - "8000:8000"
+      - "1935:1935"

frontend/eslint.config.js

@@ -36,10 +36,12 @@ 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',
+    'react/prop-types': 'off'
   },
   settings: {
     ...reactRecommended.settings

frontend/index.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/pabicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LiBoo 🚀</title>
   </head>

frontend/package.json

@@ -20,12 +20,19 @@
     "@vitejs/plugin-react": "^4.3.3",
     "axios": "^1.7.7",
     "eslint-plugin-react": "^7.37.2",
+    "framer-motion": "^11.11.17",
     "hls.js": "^1.5.17",
+    "lucide-react": "^0.461.0",
     "nanoid": "^5.0.8",
     "react": "^18.3.1",
+    "react-content-loader": "^7.0.2",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.1.2",
+    "react-hook-form": "^7.53.2",
     "react-router-dom": "^6.27.0",
+    "socket.io-client": "^4.8.1",
     "styled-components": "^6.1.13",
+    "ts-pattern": "^5.5.0",
     "vite": "^5.4.10",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.0"

frontend/src/App.tsx

@@ -1,29 +1,34 @@
 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';
 
-function App() {
+function AppComponent() {
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme}>
-        <Router>
+        <Router
+          future={{
+            v7_startTransition: true,
+            v7_relativeSplatPath: true
+          }}
+        >
           <Routes>
             <Route path="/" element={<MainPage />} />
-
-            <Route path="/live" element={<ClientPage />} />
             <Route path="/live/:id" element={<ClientPage />} />
-
+            <Route path="/replay/:id" element={<ReplayPage />} />
             <Route path="/host" element={<HostPage />} />
-            <Route path="/host/:id" element={<HostPage />} />
+            <Route path="*" element={<ErrorPage />} />
           </Routes>
         </Router>
       </ThemeProvider>
     </QueryClientProvider>
   );
 }
 
+const App = withUserId(AppComponent);
+
 export default App;

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/fetchBroadcastStatus.ts

@@ -0,0 +1,17 @@
+import { fetchInstance } from '.';
+
+export type BroadcastStatusResponse = {
+  state: boolean;
+};
+
+export const fetchBroadcastStatus = async (sessionKey: string): Promise<BroadcastStatusResponse> => {
+  const response = await fetchInstance().get<BroadcastStatusResponse>('/host/state', {
+    params: {
+      sessionKey
+    }
+  });
+
+  return {
+    state: response.data.state
+  };
+};

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

@@ -0,0 +1,18 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+import { ClientLiveResponse } from '@type/live';
+
+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;
+    }
+    throw error;
+  }
+};

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;
+};

frontend/src/apis/fetchRecentLive.ts

@@ -0,0 +1,9 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+import { RecentLiveResponse } from '@type/live';
+
+export const fetchRecentLive = async (): Promise<RecentLiveResponse> => {
+  const response: AxiosResponse = await fetchInstance().get('/streams/latest');
+
+  return response.data;
+};

frontend/src/apis/fetchRecentReplay.ts

@@ -0,0 +1,9 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+import { RecentReplayResponse } from '@type/replay';
+
+export const fetchRecentReplay = async (): Promise<RecentReplayResponse> => {
+  const response: AxiosResponse = await fetchInstance().get('/replay/latest');
+
+  return response.data;
+};

frontend/src/apis/fetchReplay.ts

@@ -0,0 +1,20 @@
+import { AxiosResponse } from 'axios';
+import { fetchInstance } from '.';
+import { ClientReplayResponse } from '@type/replay';
+
+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;
+    }
+    throw error;
+  }
+};

frontend/src/apis/host/fetchStreamKey.ts → frontend/src/apis/fetchStreamKey.ts

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