From 9ecbfa063ac5d6be54a117f4a9e16805f29c6622 Mon Sep 17 00:00:00 2001 From: Changhyun-Hong Date: Thu, 28 Nov 2024 15:33:19 +0900 Subject: [PATCH 01/21] =?UTF-8?q?feat:=20=EC=95=88=EC=93=B0=EB=8A=94=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 7 ++----- frontend/src/apis/queries/client/useFetchLive.ts | 2 +- frontend/src/apis/queries/replay/useFetchReplay.ts | 2 +- frontend/src/pages/ErrorPage.tsx | 10 ++++++++++ frontend/src/pages/index.ts | 2 ++ 5 files changed, 16 insertions(+), 7 deletions(-) create mode 100644 frontend/src/pages/ErrorPage.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 387d9a93..f277c59a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,11 +1,10 @@ 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'; -import ReplayPage from '@pages/ReplayPage'; function AppComponent() { return ( @@ -19,12 +18,10 @@ function AppComponent() { > } /> - } /> } /> - } /> } /> } /> - } /> + } /> diff --git a/frontend/src/apis/queries/client/useFetchLive.ts b/frontend/src/apis/queries/client/useFetchLive.ts index a5c7a4e4..13a1c521 100644 --- a/frontend/src/apis/queries/client/useFetchLive.ts +++ b/frontend/src/apis/queries/client/useFetchLive.ts @@ -6,7 +6,7 @@ import { ClientLive } from '@type/live'; export const useClientLive = ({ liveId }: { liveId: string }) => { return useQuery({ queryKey: ['clientLive'], - queryFn: () => fetchLive({ liveId: liveId }), + queryFn: () => fetchLive({ liveId }), refetchOnWindowFocus: false }); }; diff --git a/frontend/src/apis/queries/replay/useFetchReplay.ts b/frontend/src/apis/queries/replay/useFetchReplay.ts index 24d89d32..f37045c2 100644 --- a/frontend/src/apis/queries/replay/useFetchReplay.ts +++ b/frontend/src/apis/queries/replay/useFetchReplay.ts @@ -6,7 +6,7 @@ import { ReplayStream } from '@type/replay'; export const useClientReplay = ({ videoId }: { videoId: string }) => { return useQuery({ queryKey: ['clientReplay'], - queryFn: () => fetchReplay({ videoId: videoId }), + queryFn: () => fetchReplay({ videoId }), refetchOnWindowFocus: false }); }; diff --git a/frontend/src/pages/ErrorPage.tsx b/frontend/src/pages/ErrorPage.tsx new file mode 100644 index 00000000..62d100da --- /dev/null +++ b/frontend/src/pages/ErrorPage.tsx @@ -0,0 +1,10 @@ +const ErrorPage = () => { + return ( +
+

404 - Page Not Found

+

The page you're looking for doesn't exist.

+
+ ); +}; + +export default ErrorPage; diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts index ce4b1c3e..bf521815 100644 --- a/frontend/src/pages/index.ts +++ b/frontend/src/pages/index.ts @@ -1,3 +1,5 @@ export { default as MainPage } from './MainPage'; export { default as ClientPage } from './ClientPage'; export { default as HostPage } from './HostPage'; +export { default as ReplayPage } from './ReplayPage'; +export { default as ErrorPage } from './ErrorPage'; \ No newline at end of file From 55ab95e985c3bfe43feecdff33b536f8238e89d1 Mon Sep 17 00:00:00 2001 From: Changhyun-Hong Date: Sat, 30 Nov 2024 13:51:16 +0900 Subject: [PATCH 02/21] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=EC=B0=BD=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Header.tsx | 55 ----------------------- 1 file changed, 55 deletions(-) diff --git a/frontend/src/components/common/Header.tsx b/frontend/src/components/common/Header.tsx index 5619f751..fca308b7 100644 --- a/frontend/src/components/common/Header.tsx +++ b/frontend/src/components/common/Header.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; -import SearchIcon from '@assets/icons/search_icon.svg'; import VideoIcon from '@assets/icons/video_icon.svg'; import { ASSETS } from '@constants/assets'; @@ -13,13 +12,6 @@ const Header = () => { navigate('/')}> 로고 - - - - - - - navigate('/host')}> 스튜디오 @@ -55,53 +47,6 @@ const LogoContainer = styled.div` } `; -const SearchBox = styled.div` - display: flex; - align-items: center; - width: 400px; -`; - -const SearchInputWrapper = styled.div` - position: relative; - width: 100%; -`; - -const SearchInput = styled.input` - width: 100%; - height: 100%; - padding: 10px 40px 10px 20px; - border: 1px solid ${({ theme }) => theme.colorMap.gray[900]}; - border-radius: 20px; - color: ${({ theme }) => theme.tokenColors['text-strong']}; - background-color: ${({ theme }) => theme.tokenColors['surface-default']}; - ${({ theme }) => theme.tokenTypographys['display-medium16']}; - - &:focus { - border-color: ${({ theme }) => theme.tokenColors['brand-default']}; - outline: none; - } -`; - -const SearchIconStyled = styled(SearchIcon)` - position: absolute; - top: 50%; - right: -50px; - transform: translateY(-50%); - width: 24px; - height: 24px; - cursor: pointer; -`; - -const SearchButton = styled.button` - background: ${({ theme }) => theme.tokenColors['primary-default']}; - color: ${({ theme }) => theme.tokenColors['color-white']}; - border: none; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; - margin-left: 10px; -`; - const StudioBox = styled.div` display: flex; align-items: center; From 8389eeeb8daafd0a3ce107df3015193ec7dc8ab7 Mon Sep 17 00:00:00 2001 From: Changhyun-Hong Date: Sat, 30 Nov 2024 13:52:30 +0900 Subject: [PATCH 03/21] =?UTF-8?q?fix:=20=EC=A0=84=EC=B2=B4=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/main/MainLiveSection.tsx | 5 ----- frontend/src/components/main/MainReplaySection.tsx | 5 ----- 2 files changed, 10 deletions(-) diff --git a/frontend/src/components/main/MainLiveSection.tsx b/frontend/src/components/main/MainLiveSection.tsx index db26ac18..3f5fb5ed 100644 --- a/frontend/src/components/main/MainLiveSection.tsx +++ b/frontend/src/components/main/MainLiveSection.tsx @@ -26,7 +26,6 @@ const MainLiveSection = ({ title }: MainLiveSectionProps) => {

{title}

- @@ -57,10 +56,6 @@ const MainSectionHeader = styled.div` ${({ theme }) => theme.tokenTypographys['display-bold20']} color: ${({ theme }) => theme.tokenColors['color-white']}; } - .live_section_button { - ${({ theme }) => theme.tokenTypographys['display-bold14']} - color: ${({ theme }) => theme.tokenColors['text-default']}; - } `; const MainSectionContentList = styled.div` diff --git a/frontend/src/components/main/MainReplaySection.tsx b/frontend/src/components/main/MainReplaySection.tsx index 32cc79d7..2e845c78 100644 --- a/frontend/src/components/main/MainReplaySection.tsx +++ b/frontend/src/components/main/MainReplaySection.tsx @@ -26,7 +26,6 @@ const MainReplaySection = ({ title }: MainReplaySectionProps) => {

{title}

- @@ -57,10 +56,6 @@ const MainSectionHeader = styled.div` ${({ theme }) => theme.tokenTypographys['display-bold20']} color: ${({ theme }) => theme.tokenColors['color-white']}; } - .live_section_button { - ${({ theme }) => theme.tokenTypographys['display-bold14']} - color: ${({ theme }) => theme.tokenColors['text-default']}; - } `; const MainSectionContentList = styled.div` From 856d0e97545e305bc29b0caa2d7b78359c722625 Mon Sep 17 00:00:00 2001 From: Changhyun-Hong Date: Sat, 30 Nov 2024 16:07:54 +0900 Subject: [PATCH 04/21] =?UTF-8?q?feat:=20=EB=8D=94=EB=B3=B4=EA=B8=B0,=20?= =?UTF-8?q?=EC=A0=91=EA=B8=B0=20grid=EB=B0=A9=EC=8B=9D=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/main/MainLiveSection.tsx | 37 ++++++++++--------- .../src/components/main/MainReplaySection.tsx | 35 +++++++++--------- 2 files changed, 37 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/main/MainLiveSection.tsx b/frontend/src/components/main/MainLiveSection.tsx index 3f5fb5ed..1da7f8ac 100644 --- a/frontend/src/components/main/MainLiveSection.tsx +++ b/frontend/src/components/main/MainLiveSection.tsx @@ -28,7 +28,7 @@ const MainLiveSection = ({ title }: MainLiveSectionProps) => {

{title}

- + {displayedData.map((video) => ( ))} @@ -58,26 +58,27 @@ const MainSectionHeader = styled.div` } `; -const MainSectionContentList = styled.div` - display: flex; - flex-wrap: wrap; - justify-content: flex-start; +const MainSectionContentList = styled.div<{ $textStatus: string }>` + display: grid; gap: 14px; row-gap: 30px; margin-bottom: 30px; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + overflow: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'hidden' : 'visible')}; + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px))' : 'none')}; + > div { - flex: 1 0 calc(20% - 14px); - max-width: calc(20% - 10px); - - @media (max-width: 1700px) { - flex: 1 0 calc(25% - 14px); - max-width: calc(25% - 10px); - } - - @media (max-width: 1500px) { - flex: 1 0 calc(33.33% - 14px); - max-width: calc(33.33% - 10px); - } + max-width: 100%; } -`; + + @media (max-width: 1700px) { + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px))' : 'none')}; + } + + @media (max-width: 1500px) { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (300px + 30px))' : 'none')}; + } +`; \ No newline at end of file diff --git a/frontend/src/components/main/MainReplaySection.tsx b/frontend/src/components/main/MainReplaySection.tsx index 2e845c78..78887056 100644 --- a/frontend/src/components/main/MainReplaySection.tsx +++ b/frontend/src/components/main/MainReplaySection.tsx @@ -28,7 +28,7 @@ const MainReplaySection = ({ title }: MainReplaySectionProps) => {

{title}

- + {displayedData.map((video) => ( ))} @@ -58,26 +58,27 @@ const MainSectionHeader = styled.div` } `; -const MainSectionContentList = styled.div` - display: flex; - flex-wrap: wrap; - justify-content: flex-start; +const MainSectionContentList = styled.div<{ $textStatus: string }>` + display: grid; gap: 14px; row-gap: 30px; margin-bottom: 30px; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + overflow: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'hidden' : 'visible')}; + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px))' : 'none')}; + > div { - flex: 1 0 calc(20% - 14px); - max-width: calc(20% - 10px); - - @media (max-width: 1700px) { - flex: 1 0 calc(25% - 14px); - max-width: calc(25% - 10px); - } - - @media (max-width: 1500px) { - flex: 1 0 calc(33.33% - 14px); - max-width: calc(33.33% - 10px); - } + max-width: 100%; + } + + @media (max-width: 1700px) { + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px))' : 'none')}; + } + + @media (max-width: 1500px) { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (300px + 30px))' : 'none')}; } `; From 4930f426428bd305796087ba9914ebe5395d17bc Mon Sep 17 00:00:00 2001 From: Changhyun-Hong Date: Sat, 30 Nov 2024 16:19:12 +0900 Subject: [PATCH 05/21] =?UTF-8?q?fix:=20grid=20height=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/main/MainLiveSection.tsx | 6 +++--- frontend/src/components/main/MainReplaySection.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/main/MainLiveSection.tsx b/frontend/src/components/main/MainLiveSection.tsx index 1da7f8ac..4eace827 100644 --- a/frontend/src/components/main/MainLiveSection.tsx +++ b/frontend/src/components/main/MainLiveSection.tsx @@ -66,7 +66,7 @@ const MainSectionContentList = styled.div<{ $textStatus: string }>` grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); overflow: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'hidden' : 'visible')}; - max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px))' : 'none')}; + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px) - 30px)' : 'none')}; > div { max-width: 100%; @@ -74,11 +74,11 @@ const MainSectionContentList = styled.div<{ $textStatus: string }>` @media (max-width: 1700px) { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px))' : 'none')}; + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px) - 30px)' : 'none')}; } @media (max-width: 1500px) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (300px + 30px))' : 'none')}; + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (300px + 30px) - 30px)' : 'none')}; } `; \ No newline at end of file diff --git a/frontend/src/components/main/MainReplaySection.tsx b/frontend/src/components/main/MainReplaySection.tsx index 78887056..cafe5fd5 100644 --- a/frontend/src/components/main/MainReplaySection.tsx +++ b/frontend/src/components/main/MainReplaySection.tsx @@ -66,7 +66,7 @@ const MainSectionContentList = styled.div<{ $textStatus: string }>` grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); overflow: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'hidden' : 'visible')}; - max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px))' : 'none')}; + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px) - 30px)' : 'none')}; > div { max-width: 100%; @@ -74,11 +74,11 @@ const MainSectionContentList = styled.div<{ $textStatus: string }>` @media (max-width: 1700px) { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px))' : 'none')}; + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px) - 30px)' : 'none')}; } @media (max-width: 1500px) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (300px + 30px))' : 'none')}; + max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (300px + 30px) - 30px)' : 'none')}; } `; From fee6be7484a8e726d0981ec34802c22d374bf56b Mon Sep 17 00:00:00 2001 From: Changhyun-Hong Date: Sat, 30 Nov 2024 16:33:31 +0900 Subject: [PATCH 06/21] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/icons/warning_icon.svg | 1 + frontend/src/pages/ErrorPage.tsx | 59 ++++++++++++++++++++-- 2 files changed, 56 insertions(+), 4 deletions(-) create mode 100644 frontend/src/assets/icons/warning_icon.svg diff --git a/frontend/src/assets/icons/warning_icon.svg b/frontend/src/assets/icons/warning_icon.svg new file mode 100644 index 00000000..5ed19bd8 --- /dev/null +++ b/frontend/src/assets/icons/warning_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/pages/ErrorPage.tsx b/frontend/src/pages/ErrorPage.tsx index 62d100da..2b7bb739 100644 --- a/frontend/src/pages/ErrorPage.tsx +++ b/frontend/src/pages/ErrorPage.tsx @@ -1,10 +1,61 @@ +import styled from 'styled-components'; +import { useNavigate } from 'react-router-dom'; + +import WarningIcon from '@assets/icons/warning_icon.svg'; + const ErrorPage = () => { + const navigate = useNavigate(); + return ( -
-

404 - Page Not Found

-

The page you're looking for doesn't exist.

-
+ + + 존재하지 않는 채널입니다. + 지금 입력하신 주소의 페이지는 사라졌거나 다른 페이지로 변경되었습니다. + 주소를 다시 확인해주세요. + navigate('/')}>다른 방송 보러가기 + ); }; export default ErrorPage; + +const WarningIconStyled = styled(WarningIcon)` + color: ${({ theme }) => theme.tokenColors['text-weak']}; +`; + +const ErrorContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + gap: 10px; +`; + +const ErrorMainText = styled.h1` + color: ${({ theme }) => theme.tokenColors['text-strong']}; + ${({ theme }) => theme.tokenTypographys['display-bold24']} + margin-bottom: 10px; +`; + +const ErrorSubText = styled.p` + color: ${({ theme }) => theme.tokenColors['text-weak']}; + ${({ theme }) => theme.tokenTypographys['body-medium16']} +`; + +const HomeBox = styled.div` + display: flex; + align-items: center; + margin-top: 20px; + padding: 10px 20px; + justify-content: center; + ${({ theme }) => theme.tokenTypographys['display-bold16']}; + background-color: ${({ theme }) => theme.colorMap.gray[900]}; + color: ${({ theme }) => theme.tokenColors['color-white']}; + border-radius: 20px; + cursor: pointer; + + &:hover { + background-color: ${({ theme }) => theme.colorMap.gray[700]}; + } +`; From f2a7bab188f4e61eb7c9059ceba6a1a0891678c5 Mon Sep 17 00:00:00 2001 From: Changhyun-Hong Date: Sat, 30 Nov 2024 20:55:21 +0900 Subject: [PATCH 07/21] =?UTF-8?q?feat:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20?= =?UTF-8?q?=EC=A3=BC=EC=86=8C=EC=9D=98=20id=EB=A1=9C=20=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=EC=8B=9C=20=EC=97=90=EB=9F=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=A0=8C=EB=8D=94=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/fetchLive.ts | 25 ++++---- .../src/apis/queries/client/useFetchLive.ts | 10 +-- frontend/src/components/client/Chat.tsx | 30 --------- frontend/src/components/client/ClientView.tsx | 15 +++-- frontend/src/components/client/PlayerInfo.tsx | 6 +- frontend/src/components/client/index.ts | 1 - .../components/error/PlayerStreamError.tsx | 62 +++++++++++++++++++ frontend/src/components/error/index.ts | 3 +- frontend/src/pages/ClientPage.tsx | 8 ++- frontend/src/type/live.ts | 4 ++ 10 files changed, 106 insertions(+), 58 deletions(-) delete mode 100644 frontend/src/components/client/Chat.tsx create mode 100644 frontend/src/components/error/PlayerStreamError.tsx diff --git a/frontend/src/apis/fetchLive.ts b/frontend/src/apis/fetchLive.ts index f1ff0807..102c5501 100644 --- a/frontend/src/apis/fetchLive.ts +++ b/frontend/src/apis/fetchLive.ts @@ -1,17 +1,18 @@ import { AxiosResponse } from 'axios'; import { fetchInstance } from '.'; -import { ClientLive } from '@type/live'; +import { ClientLiveResponse } from '@type/live'; -type ClientLiveResponse = { - info: ClientLive; -}; - -export const fetchLive = async ({ liveId }: { liveId: string }): Promise => { - const response: AxiosResponse = await fetchInstance().get('/streams/live', { - params: { - liveId +export const fetchLive = async ({ liveId }: { liveId: string }): Promise => { + 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; } - }); - - return response.data.info; + throw error; + } }; diff --git a/frontend/src/apis/queries/client/useFetchLive.ts b/frontend/src/apis/queries/client/useFetchLive.ts index 13a1c521..38e22ab4 100644 --- a/frontend/src/apis/queries/client/useFetchLive.ts +++ b/frontend/src/apis/queries/client/useFetchLive.ts @@ -1,12 +1,14 @@ import { useQuery } from '@tanstack/react-query'; - import { fetchLive } from '@apis/fetchLive'; -import { ClientLive } from '@type/live'; +import { ClientLive, ClientLiveResponse } from '@type/live'; export const useClientLive = ({ liveId }: { liveId: string }) => { - return useQuery({ + return useQuery({ queryKey: ['clientLive'], queryFn: () => fetchLive({ liveId }), - refetchOnWindowFocus: false + refetchOnWindowFocus: false, + initialData: { info: {} as ClientLive }, + throwOnError: true, + retry: 0, }); }; diff --git a/frontend/src/components/client/Chat.tsx b/frontend/src/components/client/Chat.tsx deleted file mode 100644 index 3d950ddc..00000000 --- a/frontend/src/components/client/Chat.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { useState } from 'react'; -import styled from 'styled-components'; - -const Chat = () => { - const [chatVisible, setChatVisible] = useState(true); - - const handleChatVisible = () => { - setChatVisible(!chatVisible); - }; - - return ( - <> - {chatVisible && ( - -

채팅

- - - )} - - ); -}; - -export default Chat; - -const ChatContainer = styled.section` - min-width: 350px; - border: 1px solid red; - padding: 10px 20px; - background-color: ${({ theme }) => theme.tokenColors['color-white']}; -`; diff --git a/frontend/src/components/client/ClientView.tsx b/frontend/src/components/client/ClientView.tsx index 8165fa08..41143190 100644 --- a/frontend/src/components/client/ClientView.tsx +++ b/frontend/src/components/client/ClientView.tsx @@ -10,18 +10,23 @@ import { getLiveURL } from '@utils/getVideoURL'; const ClientView = () => { const { id: liveId } = useParams(); - const { data: clientLiveData } = useClientLive({ liveId: liveId as string }); - if (!clientLiveData) { - return
로딩 중...
; - } + const { data: clientLiveData, isError, error } = useClientLive({ + liveId: liveId as string + }); + console.log("isError", isError); + // if (isError) { + // throw error; + // } + + const { info } = clientLiveData; return (

클라이언트 페이지

- +