diff --git a/.github/workflows/pr-slack-notify.yml b/.github/workflows/pr-slack-notify.yml
index 0871dff1..14294d53 100644
--- a/.github/workflows/pr-slack-notify.yml
+++ b/.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 }}
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index be0dad74..b7ac6ec8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,8 @@
     "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",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e266b931..a7d2006f 100644
--- a/frontend/src/App.tsx
+++ b/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>
   );
 }
 
diff --git a/frontend/src/apis/index.ts b/frontend/src/apis/index.ts
new file mode 100644
index 00000000..b39d2212
--- /dev/null
+++ b/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
+});
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 6a6e078f..bb22ab8b 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -16,7 +16,8 @@
       "@pages/*": ["src/pages/*"],
       "@assets/*": ["src/assets/*"],
       "@styles/*": ["src/styles/*"],
-      "@type/*": ["src/type/*"]
+      "@type/*": ["src/type/*"],
+      "@apis/*": ["src/apis/*"]
     },
     "types": ["vite/client"]
   },
diff --git a/yarn.lock b/yarn.lock
index 4c6bd688..b2acd368 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2378,6 +2378,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:5.59.20":
+  version: 5.59.20
+  resolution: "@tanstack/query-core@npm:5.59.20"
+  checksum: 10c0/c93a8d41e21db532e92c1c90916bec578729d32d1f39d655603b9e81a9d5aebc8588a4d6a75928e04d3ddc90e71a1f8dc066a61d0ba24108eaf60cc2ce024a2f
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query@npm:^5.59.20":
+  version: 5.59.20
+  resolution: "@tanstack/react-query@npm:5.59.20"
+  dependencies:
+    "@tanstack/query-core": "npm:5.59.20"
+  peerDependencies:
+    react: ^18 || ^19
+  checksum: 10c0/fc3342c3a26c51c866d54082d14f86b2f644847ea8f9051000e529a012ea5437e18e35f999fcc453b2eecb0faaf29bd1aaec0956587ade63ba02262d6737800a
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.20.5":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
@@ -2856,6 +2874,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"asynckit@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "asynckit@npm:0.4.0"
+  checksum: 10c0/d73e2ddf20c4eb9337e1b3df1a0f6159481050a5de457c55b14ea2e5cb6d90bb69e004c9af54737a5ee0917fcf2c9e25de67777bbe58261847846066ba75bc9d
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.7":
   version: 1.0.7
   resolution: "available-typed-arrays@npm:1.0.7"
@@ -2883,6 +2908,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.7.7":
+  version: 1.7.7
+  resolution: "axios@npm:1.7.7"
+  dependencies:
+    follow-redirects: "npm:^1.15.6"
+    form-data: "npm:^4.0.0"
+    proxy-from-env: "npm:^1.1.0"
+  checksum: 10c0/4499efc89e86b0b49ffddc018798de05fab26e3bf57913818266be73279a6418c3ce8f9e934c7d2d707ab8c095e837fc6c90608fb7715b94d357720b5f568af7
+  languageName: node
+  linkType: hard
+
 "backend@workspace:backend":
   version: 0.0.0-use.local
   resolution: "backend@workspace:backend"
@@ -3110,6 +3146,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"combined-stream@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "combined-stream@npm:1.0.8"
+  dependencies:
+    delayed-stream: "npm:~1.0.0"
+  checksum: 10c0/0dbb829577e1b1e839fa82b40c07ffaf7de8a09b935cadd355a73652ae70a88b4320db322f6634a4ad93424292fa80973ac6480986247f1734a1137debf271d5
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -3297,6 +3342,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"delayed-stream@npm:~1.0.0":
+  version: 1.0.0
+  resolution: "delayed-stream@npm:1.0.0"
+  checksum: 10c0/d758899da03392e6712f042bec80aa293bbe9e9ff1b2634baae6a360113e708b91326594c8a486d475c69d6259afb7efacdc3537bfcda1c6c648e390ce601b19
+  languageName: node
+  linkType: hard
+
 "depd@npm:2.0.0":
   version: 2.0.0
   resolution: "depd@npm:2.0.0"
@@ -4100,6 +4152,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.15.6":
+  version: 1.15.9
+  resolution: "follow-redirects@npm:1.15.9"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: 10c0/5829165bd112c3c0e82be6c15b1a58fa9dcfaede3b3c54697a82fe4a62dd5ae5e8222956b448d2f98e331525f05d00404aba7d696de9e761ef6e42fdc780244f
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3":
   version: 0.3.3
   resolution: "for-each@npm:0.3.3"
@@ -4119,6 +4181,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"form-data@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "form-data@npm:4.0.1"
+  dependencies:
+    asynckit: "npm:^0.4.0"
+    combined-stream: "npm:^1.0.8"
+    mime-types: "npm:^2.1.12"
+  checksum: 10c0/bb102d570be8592c23f4ea72d7df9daa50c7792eb0cf1c5d7e506c1706e7426a4e4ae48a35b109e91c85f1c0ec63774a21ae252b66f4eb981cb8efef7d0463c8
+  languageName: node
+  linkType: hard
+
 "forwarded@npm:0.2.0":
   version: 0.2.0
   resolution: "forwarded@npm:0.2.0"
@@ -4138,6 +4211,7 @@ __metadata:
   resolution: "frontend@workspace:frontend"
   dependencies:
     "@eslint/js": "npm:^9.13.0"
+    "@tanstack/react-query": "npm:^5.59.20"
     "@types/react": "npm:^18.3.12"
     "@types/react-dom": "npm:^18.3.1"
     "@types/react-router-dom": "npm:^5.3.3"
@@ -4145,6 +4219,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^8.14.0"
     "@typescript-eslint/parser": "npm:^8.14.0"
     "@vitejs/plugin-react": "npm:^4.3.3"
+    axios: "npm:^1.7.7"
     eslint: "npm:^9.13.0"
     eslint-plugin-react: "npm:^7.37.2"
     eslint-plugin-react-hooks: "npm:^5.0.0"
@@ -5141,7 +5216,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
+"mime-types@npm:^2.1.12, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
   version: 2.1.35
   resolution: "mime-types@npm:2.1.35"
   dependencies:
@@ -5703,6 +5778,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proxy-from-env@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "proxy-from-env@npm:1.1.0"
+  checksum: 10c0/fe7dd8b1bdbbbea18d1459107729c3e4a2243ca870d26d34c2c1bcd3e4425b7bcc5112362df2d93cc7fb9746f6142b5e272fd1cc5c86ddf8580175186f6ad42b
+  languageName: node
+  linkType: hard
+
 "punycode@npm:1.3.2":
   version: 1.3.2
   resolution: "punycode@npm:1.3.2"