[FEAT] 호스트 페이지 모달 api 연동

frontend/package.json

@@ -18,6 +18,7 @@
     "axios": "^1.7.7",
     "eslint-plugin-react": "^7.37.2",
     "hls.js": "^1.5.17",
+    "nanoid": "^5.0.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",

frontend/src/apis/host/fetchStreamKey.ts

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

frontend/src/apis/index.ts

@@ -1,7 +1,7 @@
 import { QueryClient, DefaultOptions } from '@tanstack/react-query';
 import axios from 'axios';
 
-const BASE_URL = 'http://liboo.kr';
+export const BASE_URL = 'http://liboo.kr';
 
 export const initFetchInstance = (baseURL: string) =>
   axios.create({

frontend/src/components/host/SettingInfo.tsx

@@ -1,12 +1,22 @@
 import styled from 'styled-components';
 import OBSIcon from '@assets/img_studio_obs.png';
 import DownloadIcon from '@assets/download.svg';
+import { getOrCreateId } from '@utils/id';
+import useFetchStreamKey from '@queries/host/useFetchStreamKey';
+import { useEffect } from 'react';
 
 interface SettingInfoProps {
   closeModal: () => void;
 }
 
 export default function SettingInfo({ closeModal }: SettingInfoProps) {
+  const userId = getOrCreateId();
+  const { mutate: fetchKey, data } = useFetchStreamKey();
+
+  useEffect(() => {
+    fetchKey(userId);
+  }, []);
+
   return (
     <PopupOverlay onClick={closeModal}>
       <PopupContainer
@@ -54,8 +64,10 @@
                   <SettingRow>
                     <Label htmlFor="stream-key">스트림 키</Label>
                     <ValueWithButton>
-                      <StreamKeyInput type="password" readOnly value="djjrx3ufdxqbrv1apr9lo5y9ly07nuyp" />
-                      <CopyButton onClick={() => navigator.clipboard.writeText('djjrx3ufdxqbrv1apr9lo5y9ly07nuyp')}>
+                      <StreamKeyInput type="password" readOnly value={data?.['stream-key'] ?? ''} />
+                      <CopyButton
+                        onClick={() => data?.['stream-key'] && navigator.clipboard.writeText(data['stream-key'])}
+                      >
                         복사
                       </CopyButton>
                     </ValueWithButton>

frontend/src/components/host/index.ts

@@ -1,3 +1,2 @@
 export { default as Header } from './Header';
 export { default as Setting } from './Setting';
-export { default as Chat } from './Chat';

frontend/src/queries/host/useFetchStreamKey.ts

@@ -0,0 +1,24 @@
+import { fetchStreamKey } from '@apis/host/fetchStreamKey';
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+
+type StreamKeyResponse = {
+  'stream-key': string;
+  'session-key': string;
+};
+
+type Params = {
+  onSuccess?: (data: StreamKeyResponse) => void;
+  onError?: (error: Error) => void;
+};
+
+export default function useFetchStreamKey({ onSuccess, onError }: Params = {}): UseMutationResult<
+  StreamKeyResponse,
+  Error,
+  string
+> {
+  return useMutation({
+    mutationFn: fetchStreamKey,
+    onSuccess,
+    onError
+  });
+}

frontend/src/utils/id.ts

@@ -0,0 +1,16 @@
+import { nanoid } from 'nanoid';
+
+type StorageKey = 'userId';
+
+export const getStoredId = (key: StorageKey): string | null => localStorage.getItem(key);
+
+export const setStoredId = (key: StorageKey, id: string): void => localStorage.setItem(key, id);
+
+export const getOrCreateId = (key: StorageKey = 'userId'): string => {
+  const savedId = getStoredId(key);
+  if (savedId) return savedId;
+
+  const newId = nanoid();
+  setStoredId(key, newId);
+  return newId;
+};

frontend/tsconfig.json

@@ -14,10 +14,12 @@
       "@components/*": ["src/components/*"],
       "@hooks/*": ["src/hooks/*"],
       "@pages/*": ["src/pages/*"],
+      "@utils/*": ["src/utils/*"],
       "@assets/*": ["src/assets/*"],
       "@styles/*": ["src/styles/*"],
       "@type/*": ["src/type/*"],
-      "@apis/*": ["src/apis/*"]
+      "@apis/*": ["src/apis/*"],
+      "@queries/*": ["src/queries/*"]
     },
     "types": ["vite/client"]
   },

yarn.lock

@@ -4226,6 +4226,7 @@ __metadata:
     eslint-plugin-react-refresh: "npm:^0.4.14"
     globals: "npm:^15.11.0"
     hls.js: "npm:^1.5.17"
+    nanoid: "npm:^5.0.8"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-router-dom: "npm:^6.27.0"
@@ -5384,6 +5385,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^5.0.8":
+  version: 5.0.8
+  resolution: "nanoid@npm:5.0.8"
+  bin:
+    nanoid: bin/nanoid.js
+  checksum: 10c0/0281d3cc0f3d03fb3010b479f28e8ddedfafb9b5d60e54315589ef0a54a0e9cfcb0bf382dd3b620fdad6b72b8c1f5b89a15d55c6b6a9134b58b16eb230b3a3d7
+  languageName: node
+  linkType: hard
+
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"