Merge branch 'dev-fe' of https://github.com/boostcampwm-2024/web22-LiBoo into dev-fe

Author: spearStr

.github/workflows/pr-slack-notify.yml

@@ -34,17 +34,24 @@ jobs:
           body='${{ github.event.pull_request.body }}'
           # Remove HTML comments and their content
           body=$(echo "$body" | sed 's/<!--.*-->//g')
-          # Remove empty lines and special characters
-          body=$(echo "$body" | grep -v '^$' | tr -d '\r')
-          # Replace newlines with actual newlines in Slack message
-          body=$(echo "$body" | tr '\n' ' ')
+          # Remove image markdown
+          body=$(echo "$body" | sed 's/<img[^>]*>//g')
+          # Remove issue numbers
+          body=$(echo "$body" | sed 's/#[0-9]*//g')
+          # Clean up markdown headers and special characters
+          body=$(echo "$body" | sed 's/##/*/g' | tr -d '\r')
+          # Escape quotes and backslashes
+          body="${body//\\/\\\\}"
+          body="${body//\"/\\\"}"
+          # Convert newlines to spaces
+          body=$(echo "$body" | tr '\n' ' ' | sed 's/  */ /g')
           echo "body=${body}" >> $GITHUB_OUTPUT
 
       - name: Send Slack notification
         uses: 8398a7/action-slack@v3
         with:
           status: custom
-          custom_payload: >
+          custom_payload: |
             {
               "blocks": [
                 {
@@ -100,4 +107,4 @@ jobs:
               ]
             }
         env:
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

frontend/package.json

@@ -14,7 +14,10 @@
     "msw:init": "msw init public/"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.59.20",
+    "axios": "^1.7.7",
     "eslint-plugin-react": "^7.37.2",
+    "hls.js": "^1.5.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",

frontend/src/App.tsx

@@ -3,22 +3,26 @@ import { ThemeProvider } from 'styled-components';
 
 import { theme } from './styles/theme';
 import { MainPage, ClientPage, HostPage } from './pages';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from '@apis/index';
 
 function App() {
   return (
-    <ThemeProvider theme={theme}>
-      <Router>
-        <Routes>
-          <Route path="/" element={<MainPage />} />
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <Router>
+          <Routes>
+            <Route path="/" element={<MainPage />} />
 
-          <Route path="/live" element={<ClientPage />} />
-          <Route path="/live/:id" element={<ClientPage />} />
+            <Route path="/live" element={<ClientPage />} />
+            <Route path="/live/:id" element={<ClientPage />} />
 
-          <Route path="/host" element={<HostPage />} />
-          <Route path="/host/:id" element={<HostPage />} />
-        </Routes>
-      </Router>
-    </ThemeProvider>
+            <Route path="/host" element={<HostPage />} />
+            <Route path="/host/:id" element={<HostPage />} />
+          </Routes>
+        </Router>
+      </ThemeProvider>
+    </QueryClientProvider>
   );
 }
 

frontend/src/apis/index.ts

@@ -0,0 +1,28 @@
+import { QueryClient, DefaultOptions } from '@tanstack/react-query';
+import axios from 'axios';
+
+const BASE_URL = 'http://liboo.kr';
+
+export const initFetchInstance = (baseURL: string) =>
+  axios.create({
+    baseURL,
+    timeout: 10000,
+    headers: {
+      Accept: 'application/json'
+    }
+  });
+
+export const fetchInstance = () => initFetchInstance(BASE_URL);
+
+const defaultOptions: DefaultOptions = {
+  queries: {
+    retry: 3,
+    refetchOnMount: true,
+    refetchOnReconnect: true,
+    refetchOnWindowFocus: true
+  }
+};
+
+export const queryClient = new QueryClient({
+  defaultOptions
+});