From e346fb3fab91fd55d2eae41ff7c50781317b92a7 Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Thu, 14 Nov 2024 15:42:08 +0900 Subject: [PATCH 1/8] =?UTF-8?q?chore:=20Chat=20=EB=8C=80=EC=B2=B4=20?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/host/Chat.tsx | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 frontend/src/components/host/Chat.tsx diff --git a/frontend/src/components/host/Chat.tsx b/frontend/src/components/host/Chat.tsx deleted file mode 100644 index 23f611bd..00000000 --- a/frontend/src/components/host/Chat.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import styled from 'styled-components'; - -export default function Chat() { - return ( - -

채팅

- - ); -} - -const Container = styled.section` - border: 1px solid red; - padding: 10px 20px; - flex: 3; -`; From 89a8ce3d15ebb4e4c3ba8ede22dff62e2545b67e Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Thu, 14 Nov 2024 15:52:51 +0900 Subject: [PATCH 2/8] =?UTF-8?q?chore:=20nanoid=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/package.json b/frontend/package.json index b7ac6ec8..d8de2559 100644 --- a/frontend/package.json +++ b/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", From 2997640aa026c25b0d06c738a7915b929d8c593b Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Thu, 14 Nov 2024 15:57:10 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20userId=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EC=9C=A0=ED=8B=B8=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/utils/generateId.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 frontend/src/utils/generateId.ts diff --git a/frontend/src/utils/generateId.ts b/frontend/src/utils/generateId.ts new file mode 100644 index 00000000..1516271c --- /dev/null +++ b/frontend/src/utils/generateId.ts @@ -0,0 +1,14 @@ +// utils/generateId.js (또는 utils/nanoid.js) +import { nanoid } from 'nanoid'; + +export const generateId = (key = 'userId') => { + const savedId = localStorage.getItem(key); + + if (savedId) { + return savedId; + } + + const newId = nanoid(); + localStorage.setItem(key, newId); + return newId; +}; From 7d110a1a79a6ba22814505799046d4fb4a87e5fe Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Thu, 14 Nov 2024 15:57:57 +0900 Subject: [PATCH 4/8] =?UTF-8?q?chore:=20utils=20=EA=B2=BD=EB=A1=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/tsconfig.json | 1 + yarn.lock | 10 ++++++++++ 2 files changed, 11 insertions(+) diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index bb22ab8b..168f9617 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -14,6 +14,7 @@ "@components/*": ["src/components/*"], "@hooks/*": ["src/hooks/*"], "@pages/*": ["src/pages/*"], + "@utils/*": ["src/utils/*"], "@assets/*": ["src/assets/*"], "@styles/*": ["src/styles/*"], "@type/*": ["src/type/*"], diff --git a/yarn.lock b/yarn.lock index b2acd368..983396e1 100644 --- a/yarn.lock +++ b/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" From 8d32f0b38c192c68438e3872980bb87871802659 Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Thu, 14 Nov 2024 16:04:36 +0900 Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20=EC=88=9C=EC=88=98=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/utils/generateId.ts | 14 -------------- frontend/src/utils/id.ts | 16 ++++++++++++++++ 2 files changed, 16 insertions(+), 14 deletions(-) delete mode 100644 frontend/src/utils/generateId.ts create mode 100644 frontend/src/utils/id.ts diff --git a/frontend/src/utils/generateId.ts b/frontend/src/utils/generateId.ts deleted file mode 100644 index 1516271c..00000000 --- a/frontend/src/utils/generateId.ts +++ /dev/null @@ -1,14 +0,0 @@ -// utils/generateId.js (또는 utils/nanoid.js) -import { nanoid } from 'nanoid'; - -export const generateId = (key = 'userId') => { - const savedId = localStorage.getItem(key); - - if (savedId) { - return savedId; - } - - const newId = nanoid(); - localStorage.setItem(key, newId); - return newId; -}; diff --git a/frontend/src/utils/id.ts b/frontend/src/utils/id.ts new file mode 100644 index 00000000..db78cb66 --- /dev/null +++ b/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): string => { + const savedId = getStoredId(key); + if (savedId) return savedId; + + const newId = nanoid(); + setStoredId(key, newId); + return newId; +}; From e7349912e4f432ad0d0382018bb48d069072af56 Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Thu, 14 Nov 2024 16:16:30 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20userId=20fetch=EB=A5=BC=20=EC=9C=84?= =?UTF-8?q?=ED=95=9C=20api=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/host/fetchStreamKey.ts | 9 +++++++++ frontend/src/apis/index.ts | 2 +- frontend/src/components/host/SettingInfo.tsx | 3 +++ frontend/src/components/host/index.ts | 1 - frontend/src/utils/id.ts | 2 +- 5 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 frontend/src/apis/host/fetchStreamKey.ts diff --git a/frontend/src/apis/host/fetchStreamKey.ts b/frontend/src/apis/host/fetchStreamKey.ts new file mode 100644 index 00000000..1d1e8d57 --- /dev/null +++ b/frontend/src/apis/host/fetchStreamKey.ts @@ -0,0 +1,9 @@ +import { BASE_URL, fetchInstance } from '..'; + +type NanoId = string; + +export const fetchStreamKey = (userId: NanoId) => { + return fetchInstance().post(`${BASE_URL}/host/key`, { + userId + }); +}; diff --git a/frontend/src/apis/index.ts b/frontend/src/apis/index.ts index b39d2212..0c080ffb 100644 --- a/frontend/src/apis/index.ts +++ b/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({ diff --git a/frontend/src/components/host/SettingInfo.tsx b/frontend/src/components/host/SettingInfo.tsx index 05de338b..fce5f38b 100644 --- a/frontend/src/components/host/SettingInfo.tsx +++ b/frontend/src/components/host/SettingInfo.tsx @@ -1,12 +1,15 @@ import styled from 'styled-components'; import OBSIcon from '@assets/img_studio_obs.png'; import DownloadIcon from '@assets/download.svg'; +import { getOrCreateId } from '@utils/id'; interface SettingInfoProps { closeModal: () => void; } export default function SettingInfo({ closeModal }: SettingInfoProps) { + const userId = getOrCreateId(); + return ( localStorage.getI export const setStoredId = (key: StorageKey, id: string): void => localStorage.setItem(key, id); -export const getOrCreateId = (key: StorageKey): string => { +export const getOrCreateId = (key: StorageKey = 'userId'): string => { const savedId = getStoredId(key); if (savedId) return savedId; From 68464153033051710ace02138b4b8289885168c3 Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Thu, 14 Nov 2024 16:27:31 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20queries=EC=97=90=20=EB=93=A4?= =?UTF-8?q?=EC=96=B4=EA=B0=88=20fetch=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/host/fetchStreamKey.ts | 13 ++++++---- .../src/queries/host/useFetchStreamKey.ts | 24 +++++++++++++++++++ 2 files changed, 33 insertions(+), 4 deletions(-) create mode 100644 frontend/src/queries/host/useFetchStreamKey.ts diff --git a/frontend/src/apis/host/fetchStreamKey.ts b/frontend/src/apis/host/fetchStreamKey.ts index 1d1e8d57..6fcc2fda 100644 --- a/frontend/src/apis/host/fetchStreamKey.ts +++ b/frontend/src/apis/host/fetchStreamKey.ts @@ -1,9 +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 = (userId: NanoId) => { - return fetchInstance().post(`${BASE_URL}/host/key`, { - userId - }); +export const fetchStreamKey = async (userId: NanoId): Promise => { + const response: AxiosResponse = await fetchInstance().post(`${BASE_URL}/host/key`, { userId }); + return response.data; }; diff --git a/frontend/src/queries/host/useFetchStreamKey.ts b/frontend/src/queries/host/useFetchStreamKey.ts new file mode 100644 index 00000000..adcb583f --- /dev/null +++ b/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 + }); +} From dd10564f924b0d306ec9f1fafb7d757dd64847d9 Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Thu, 14 Nov 2024 16:39:24 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20streamKey=20=EC=9A=94=EC=B2=AD=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/host/SettingInfo.tsx | 13 +++++++++++-- frontend/tsconfig.json | 3 ++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/host/SettingInfo.tsx b/frontend/src/components/host/SettingInfo.tsx index fce5f38b..51b27ec3 100644 --- a/frontend/src/components/host/SettingInfo.tsx +++ b/frontend/src/components/host/SettingInfo.tsx @@ -2,6 +2,8 @@ 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; @@ -9,6 +11,11 @@ interface SettingInfoProps { export default function SettingInfo({ closeModal }: SettingInfoProps) { const userId = getOrCreateId(); + const { mutate: fetchKey, data } = useFetchStreamKey(); + + useEffect(() => { + fetchKey(userId); + }, []); return ( @@ -57,8 +64,10 @@ export default function SettingInfo({ closeModal }: SettingInfoProps) { - - navigator.clipboard.writeText('djjrx3ufdxqbrv1apr9lo5y9ly07nuyp')}> + + data?.['stream-key'] && navigator.clipboard.writeText(data['stream-key'])} + > 복사 diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 168f9617..2abd93f0 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -18,7 +18,8 @@ "@assets/*": ["src/assets/*"], "@styles/*": ["src/styles/*"], "@type/*": ["src/type/*"], - "@apis/*": ["src/apis/*"] + "@apis/*": ["src/apis/*"], + "@queries/*": ["src/queries/*"] }, "types": ["vite/client"] },