From 02ee86dba548eb6c3bc664bc305d1d0a0d781575 Mon Sep 17 00:00:00 2001 From: Hoeeeeeh Date: Sat, 23 Nov 2024 15:07:24 +0900 Subject: [PATCH 01/52] Update fe.build.yaml --- fe.build.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fe.build.yaml b/fe.build.yaml index 6049b94e..41ead9cc 100644 --- a/fe.build.yaml +++ b/fe.build.yaml @@ -6,7 +6,7 @@ services: build: context: nginx dockerfile: dockerfile - image: liboost/nginx:latest + image: liboost/test-nginx:latest ports: - "80:80" - "443:443" From e961f6f7e46e36778a2d3b0b1ae9ddc2498ef066 Mon Sep 17 00:00:00 2001 From: hoeeeeeh Date: Sat, 23 Nov 2024 15:32:32 +0900 Subject: [PATCH 02/52] =?UTF-8?q?chore:=20test=20=EC=84=9C=EB=B2=84?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/prod-fe-docker.yml | 2 +- docker-compose.yaml | 4 ++-- frontend/src/apis/index.ts | 2 +- frontend/src/components/chat/ChatRoom.tsx | 2 +- frontend/src/components/chat/HostChatRoom.tsx | 2 +- frontend/src/components/host/SettingInfo.tsx | 4 ++-- nginx/conf.d/api.conf | 6 +++--- nginx/conf.d/rtmp.conf | 6 +++--- nginx/conf.d/ssl.conf | 14 +++++++------- 9 files changed, 21 insertions(+), 21 deletions(-) diff --git a/.github/workflows/prod-fe-docker.yml b/.github/workflows/prod-fe-docker.yml index f981db39..9a52cf9c 100644 --- a/.github/workflows/prod-fe-docker.yml +++ b/.github/workflows/prod-fe-docker.yml @@ -51,6 +51,6 @@ jobs: mkdir -p ~/.ssh echo "$SSH_PEM_KEY" > ~/.ssh/SSH_PEM_KEY.pem chmod 600 ~/.ssh/SSH_PEM_KEY.pem - ssh -p $SSH_PORT -i ~/.ssh/SSH_PEM_KEY.pem -o StrictHostKeyChecking=no $SSH_USERNAME@liboo.kr 'cd prod && bash prod_fe.sh' + ssh -p $SSH_PORT -i ~/.ssh/SSH_PEM_KEY.pem -o StrictHostKeyChecking=no $SSH_USERNAME@test.liboo.kr 'cd prod && bash prod_fe.sh' diff --git a/docker-compose.yaml b/docker-compose.yaml index 677d241f..42280275 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -13,8 +13,8 @@ services: - "8000:8000" - "1935:1935" volumes: - - /etc/letsencrypt/live/liboo.kr:/etc/letsencrypt/live/liboo.kr:ro - - /etc/letsencrypt/archive/liboo.kr:/etc/letsencrypt/archive/liboo.kr:ro + - /etc/letsencrypt/live/test.liboo.kr:/etc/letsencrypt/live/test.liboo.kr:ro + - /etc/letsencrypt/archive/test.liboo.kr:/etc/letsencrypt/archive/test.liboo.kr:ro - /etc/nginx/ssl/dhparams.pem:/etc/nginx/ssl/dhparams.pem:ro networks: diff --git a/frontend/src/apis/index.ts b/frontend/src/apis/index.ts index 3161afa7..f588b827 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'; -export const BASE_URL = 'https://liboo.kr'; +export const BASE_URL = 'https://test.liboo.kr'; export const RTMP_PORT = '1935'; export const RTMP_HTTP_PORT = '8000'; export const API_PORT = '3000'; diff --git a/frontend/src/components/chat/ChatRoom.tsx b/frontend/src/components/chat/ChatRoom.tsx index 03217c00..dcba2f57 100644 --- a/frontend/src/components/chat/ChatRoom.tsx +++ b/frontend/src/components/chat/ChatRoom.tsx @@ -13,7 +13,7 @@ import { ChatProvider } from 'src/contexts/chatContext'; import { getStoredId } from '@utils/id'; import { UserType } from '@type/user'; -const TEST_SOCKET_URL = 'https://liboo.kr'; +const TEST_SOCKET_URL = 'https://test.liboo.kr'; interface ChatRoomProps { userType: UserType; diff --git a/frontend/src/components/chat/HostChatRoom.tsx b/frontend/src/components/chat/HostChatRoom.tsx index f7b49e2c..c13387c8 100644 --- a/frontend/src/components/chat/HostChatRoom.tsx +++ b/frontend/src/components/chat/HostChatRoom.tsx @@ -13,7 +13,7 @@ import { getStoredId } from '@utils/id'; import { UserType } from '@type/user'; import useFetchStreamKey from '@apis/queries/host/useFetchStreamKey'; -const TEST_SOCKET_URL = 'https://liboo.kr'; +const TEST_SOCKET_URL = 'https://test.liboo.kr'; interface ChatRoomProps { userType: UserType; diff --git a/frontend/src/components/host/SettingInfo.tsx b/frontend/src/components/host/SettingInfo.tsx index 128e9478..8294cad1 100644 --- a/frontend/src/components/host/SettingInfo.tsx +++ b/frontend/src/components/host/SettingInfo.tsx @@ -57,8 +57,8 @@ export default function SettingInfo({ closeModal }: SettingInfoProps) { - rtmp://liboo.kr:1935/live - navigator.clipboard.writeText('rtmp://liboo.kr:1935/live')}> + rtmp://test.liboo.kr:1935/live + navigator.clipboard.writeText('rtmp://test.liboo.kr:1935/live')}> 복사 diff --git a/nginx/conf.d/api.conf b/nginx/conf.d/api.conf index 449ecb79..df6fdeea 100644 --- a/nginx/conf.d/api.conf +++ b/nginx/conf.d/api.conf @@ -1,12 +1,12 @@ server { listen 3000 ssl; # HTTPS 8000 포트 수신 - server_name liboo.kr; + server_name test.liboo.kr; client_max_body_size 200M; - ssl_certificate "/etc/letsencrypt/live/liboo.kr/fullchain.pem"; + ssl_certificate "/etc/letsencrypt/live/test.liboo.kr/fullchain.pem"; ssl_protocols TLSv1.2 TLSv1.3; - ssl_certificate_key "/etc/letsencrypt/live/liboo.kr/privkey.pem"; + ssl_certificate_key "/etc/letsencrypt/live/test.liboo.kr/privkey.pem"; ssl_dhparam "/etc/nginx/ssl/dhparams.pem"; add_header Strict-Transport-Security "max-age=31536000"; diff --git a/nginx/conf.d/rtmp.conf b/nginx/conf.d/rtmp.conf index b9fe4645..3a4a7254 100644 --- a/nginx/conf.d/rtmp.conf +++ b/nginx/conf.d/rtmp.conf @@ -1,10 +1,10 @@ server { listen 8000 ssl; # HTTPS 8000 포트 수신 - server_name liboo.kr; + server_name test.liboo.kr; - ssl_certificate "/etc/letsencrypt/live/liboo.kr/fullchain.pem"; + ssl_certificate "/etc/letsencrypt/live/test.liboo.kr/fullchain.pem"; ssl_protocols TLSv1.2 TLSv1.3; - ssl_certificate_key "/etc/letsencrypt/live/liboo.kr/privkey.pem"; + ssl_certificate_key "/etc/letsencrypt/live/test.liboo.kr/privkey.pem"; ssl_dhparam "/etc/nginx/ssl/dhparams.pem"; add_header Strict-Transport-Security "max-age=31536000"; diff --git a/nginx/conf.d/ssl.conf b/nginx/conf.d/ssl.conf index be4b6549..71686184 100644 --- a/nginx/conf.d/ssl.conf +++ b/nginx/conf.d/ssl.conf @@ -5,12 +5,12 @@ server { # listen [::]:443 ssl http2 default_server; client_max_body_size 10M; - ssl_certificate "/etc/letsencrypt/live/liboo.kr/fullchain.pem"; + ssl_certificate "/etc/letsencrypt/live/test.liboo.kr/fullchain.pem"; ssl_protocols TLSv1.2 TLSv1.3; - ssl_certificate_key "/etc/letsencrypt/live/liboo.kr/privkey.pem"; + ssl_certificate_key "/etc/letsencrypt/live/test.liboo.kr/privkey.pem"; ssl_dhparam "/etc/nginx/ssl/dhparams.pem"; add_header Strict-Transport-Security "max-age=31536000"; - server_name liboo.kr; + server_name test.liboo.kr; location / { proxy_set_header Host $host; @@ -21,23 +21,23 @@ server { proxy_set_header X-Real-IP $remote_addr; proxy_pass http://localhost:80; } - + location /chat/ { proxy_pass http://backend-chat-server:4000; # NestJS Socket.IO 서버 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; - + # 클라이언트 IP 전달 (선택 사항) proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; - + # WebSocket timeout 설정 proxy_read_timeout 60s; proxy_send_timeout 60s; - + # /chat 경로를 /socket.io로 리매핑 rewrite ^/chat(/.*)$ /socket.io$1 break; } From 2f27d6150eccfcd5ab3479e052128547e159dd5f Mon Sep 17 00:00:00 2001 From: Hoeeeeeh Date: Sat, 23 Nov 2024 15:34:38 +0900 Subject: [PATCH 03/52] Update prod-fe-docker.yml --- .github/workflows/prod-fe-docker.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/prod-fe-docker.yml b/.github/workflows/prod-fe-docker.yml index 9a52cf9c..79b53903 100644 --- a/.github/workflows/prod-fe-docker.yml +++ b/.github/workflows/prod-fe-docker.yml @@ -3,7 +3,7 @@ name: Build and Push Docker Image on: push: branches: - - prod-fe + - test-prod-fe jobs: build: From 9ecbfa063ac5d6be54a117f4a9e16805f29c6622 Mon Sep 17 00:00:00 2001 From: Changhyun-Hong Date: Thu, 28 Nov 2024 15:33:19 +0900 Subject: [PATCH 04/52] =?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 2eb1fbe63079c889bcdaec020f556feee0fbf6c3 Mon Sep 17 00:00:00 2001 From: hoeeeeeh Date: Fri, 29 Nov 2024 00:17:10 +0900 Subject: [PATCH 05/52] refactor: nginx 80 redirect, ssl --- nginx/conf.d/default.conf | 25 ++----------------------- nginx/conf.d/ssl.conf | 16 +++++++++------- 2 files changed, 11 insertions(+), 30 deletions(-) diff --git a/nginx/conf.d/default.conf b/nginx/conf.d/default.conf index cf810fbd..f9ebd735 100644 --- a/nginx/conf.d/default.conf +++ b/nginx/conf.d/default.conf @@ -1,27 +1,6 @@ server { listen 80; - server_name localhost; + server_name test.liboo.kr; - root /usr/share/nginx/html; - index index.html; - - location / { - try_files $uri $uri/ /index.html; - } - - location /assets/ { - expires 30d; - add_header Cache-Control "public, no-transform"; - } - - location /chat/ { - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - proxy_set_header Host $host; - - proxy_pass http://backend-chat-server:4000; - - proxy_http_version 1.1; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection "upgrade"; - } + return 301 https://$host$request_uri; } diff --git a/nginx/conf.d/ssl.conf b/nginx/conf.d/ssl.conf index 71686184..ae0cc561 100644 --- a/nginx/conf.d/ssl.conf +++ b/nginx/conf.d/ssl.conf @@ -12,14 +12,16 @@ server { add_header Strict-Transport-Security "max-age=31536000"; server_name test.liboo.kr; + root /usr/share/nginx/html; + index index.html; + location / { - proxy_set_header Host $host; - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - proxy_set_header X-Forwarded-Proto $scheme; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection "upgrade"; - proxy_set_header X-Real-IP $remote_addr; - proxy_pass http://localhost:80; + try_files $uri $uri/ /index.html; + } + + location /assets/ { + expires 30d; + add_header Cache-Control "public, no-transform"; } location /chat/ { From 980c5215f140957b4ecf84831e54fac12c1a5040 Mon Sep 17 00:00:00 2001 From: hoeeeeeh Date: Fri, 29 Nov 2024 00:24:58 +0900 Subject: [PATCH 06/52] refactor: nginx 80 redirect, ssl --- nginx/conf.d/default.conf | 26 ++------------------------ nginx/conf.d/ssl.conf | 24 +++++++++++++----------- 2 files changed, 15 insertions(+), 35 deletions(-) diff --git a/nginx/conf.d/default.conf b/nginx/conf.d/default.conf index cf810fbd..6c37d457 100644 --- a/nginx/conf.d/default.conf +++ b/nginx/conf.d/default.conf @@ -1,27 +1,5 @@ server { listen 80; - server_name localhost; - - root /usr/share/nginx/html; - index index.html; - - location / { - try_files $uri $uri/ /index.html; - } - - location /assets/ { - expires 30d; - add_header Cache-Control "public, no-transform"; - } - - location /chat/ { - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - proxy_set_header Host $host; - - proxy_pass http://backend-chat-server:4000; - - proxy_http_version 1.1; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection "upgrade"; - } + server_name liboo.kr; + return 301 https://$host$request_uri; } diff --git a/nginx/conf.d/ssl.conf b/nginx/conf.d/ssl.conf index be4b6549..20348b82 100644 --- a/nginx/conf.d/ssl.conf +++ b/nginx/conf.d/ssl.conf @@ -12,32 +12,34 @@ server { add_header Strict-Transport-Security "max-age=31536000"; server_name liboo.kr; + root /usr/share/nginx/html; + index index.html; + location / { - proxy_set_header Host $host; - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - proxy_set_header X-Forwarded-Proto $scheme; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection "upgrade"; - proxy_set_header X-Real-IP $remote_addr; - proxy_pass http://localhost:80; + try_files $uri $uri/ /index.html; } - + + location /assets/ { + expires 30d; + add_header Cache-Control "public, no-transform"; + } + location /chat/ { proxy_pass http://backend-chat-server:4000; # NestJS Socket.IO 서버 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; - + # 클라이언트 IP 전달 (선택 사항) proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; - + # WebSocket timeout 설정 proxy_read_timeout 60s; proxy_send_timeout 60s; - + # /chat 경로를 /socket.io로 리매핑 rewrite ^/chat(/.*)$ /socket.io$1 break; } From 55ab95e985c3bfe43feecdff33b536f8238e89d1 Mon Sep 17 00:00:00 2001 From: Changhyun-Hong Date: Sat, 30 Nov 2024 13:51:16 +0900 Subject: [PATCH 07/52] =?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 08/52] =?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 09/52] =?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 10/52] =?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 11/52] =?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 3f3687425d796f5a2fde6ad429bf591c1a857721 Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Sat, 30 Nov 2024 16:45:31 +0900 Subject: [PATCH 12/52] =?UTF-8?q?feat:=20RecommendLive=EC=97=90=EC=84=9C?= =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8A=94=20=ED=94=8C=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=96=B4=20=EC=83=81=ED=83=9C=EB=A5=BC=20=ED=9B=85?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EA=B5=AC=ED=98=84=ED=95=98=EC=97=AC=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B4=80=EC=8B=AC=EC=82=AC=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/queries/main/useFetchMainLive.ts | 2 +- .../src/components/main/RecommendLive.tsx | 63 +++---------------- frontend/src/hooks/useMainLiveRotation.ts | 59 +++++++++++++++++ 3 files changed, 68 insertions(+), 56 deletions(-) create mode 100644 frontend/src/hooks/useMainLiveRotation.ts diff --git a/frontend/src/apis/queries/main/useFetchMainLive.ts b/frontend/src/apis/queries/main/useFetchMainLive.ts index e7ec23c8..466da53c 100644 --- a/frontend/src/apis/queries/main/useFetchMainLive.ts +++ b/frontend/src/apis/queries/main/useFetchMainLive.ts @@ -7,6 +7,6 @@ export const useMainLive = () => { return useSuspenseQuery({ queryKey: ['mainLive'], queryFn: fetchMainLive, - refetchOnWindowFocus: false, + refetchOnWindowFocus: false }); }; diff --git a/frontend/src/components/main/RecommendLive.tsx b/frontend/src/components/main/RecommendLive.tsx index 9df3c8e7..9b04e25d 100644 --- a/frontend/src/components/main/RecommendLive.tsx +++ b/frontend/src/components/main/RecommendLive.tsx @@ -1,62 +1,20 @@ -import { useEffect, useState, useCallback, useRef, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; -import AnimatedProfileSection from './AnimatedProfileSection'; -import AnimatedLiveHeader from './AnimatedLiveHeader'; -import RecommendList from './RecommendList'; import sampleProfile from '@assets/sample_profile.png'; import { RECOMMEND_LIVE } from '@constants/recommendLive'; -import useRotatingPlayer from '@hooks/useRotatePlayer'; import { useMainLive } from '@queries/main/useFetchMainLive'; +import useMainLiveRotation from '@hooks/useMainLiveRotation'; + +import AnimatedProfileSection from './AnimatedProfileSection'; +import AnimatedLiveHeader from './AnimatedLiveHeader'; +import RecommendList from './RecommendList'; const RecommendLive = () => { const navigate = useNavigate(); - const { videoRef, initPlayer } = useRotatingPlayer(); - const { data: mainLiveData } = useMainLive(); - const [currentUrlIndex, setCurrentUrlIndex] = useState(0); - const recommendListRef = useRef(null); - const [isTransitioning, setIsTransitioning] = useState(false); - const prevUrlIndexRef = useRef(currentUrlIndex); - const isInitialMount = useRef(true); - - useEffect(() => { - if (!mainLiveData) return; - if (!mainLiveData[currentUrlIndex]) return; - const handleTransition = async () => { - const videoUrl = mainLiveData[currentUrlIndex].streamUrl; - - if (isInitialMount.current) { - initPlayer(videoUrl); - setTimeout(() => { - isInitialMount.current = false; - }, 100); - return; - } - - if (prevUrlIndexRef.current !== currentUrlIndex) { - setIsTransitioning(true); - await new Promise((resolve) => setTimeout(resolve, 200)); - - initPlayer(videoUrl); - prevUrlIndexRef.current = currentUrlIndex; - - setTimeout(() => { - setIsTransitioning(false); - }, 100); - } - }; - - handleTransition(); - }, [mainLiveData, currentUrlIndex, initPlayer]); - - const onSelect = useCallback((index: number) => { - setCurrentUrlIndex(index); - }, []); - - const currentLiveData = useMemo(() => mainLiveData?.[currentUrlIndex], [mainLiveData, currentUrlIndex]); - + const { data: mainLiveData } = useMainLive(); + const { currentLiveData, isTransitioning, videoRef, onSelect } = useMainLiveRotation(mainLiveData); const { liveId, liveTitle, concurrentUserCount, channel, category } = currentLiveData; return ( @@ -68,12 +26,7 @@ const RecommendLive = () => { - + diff --git a/frontend/src/hooks/useMainLiveRotation.ts b/frontend/src/hooks/useMainLiveRotation.ts new file mode 100644 index 00000000..44756089 --- /dev/null +++ b/frontend/src/hooks/useMainLiveRotation.ts @@ -0,0 +1,59 @@ +import { MainLive } from '@type/live'; +import { useEffect, useRef, useState } from 'react'; +import useRotatingPlayer from './useRotatePlayer'; +import { c } from 'vite/dist/node/types.d-aGj9QkWt'; + +const MOUNT_DELAY = 100; +const TRANSITION_DELAY = 300; + +const useMainLiveRotation = (mainLiveData: MainLive[]) => { + const { videoRef, initPlayer } = useRotatingPlayer(); + + const [currentUrlIndex, setCurrentUrlIndex] = useState(0); + const [isTransitioning, setIsTransitioning] = useState(false); + const prevUrlIndexRef = useRef(currentUrlIndex); + const isInitialMount = useRef(true); + + useEffect(() => { + if (!mainLiveData[currentUrlIndex]) return; + + const handleTransition = async () => { + const videoUrl = mainLiveData[currentUrlIndex].streamUrl; + + if (isInitialMount.current) { + initPlayer(videoUrl); + setTimeout(() => { + isInitialMount.current = false; + }, MOUNT_DELAY); + return; + } + + if (prevUrlIndexRef.current !== currentUrlIndex) { + setIsTransitioning(true); + await new Promise((resolve) => setTimeout(resolve, TRANSITION_DELAY)); + initPlayer(videoUrl); + prevUrlIndexRef.current = currentUrlIndex; + + setTimeout(() => { + setIsTransitioning(false); + }, MOUNT_DELAY); + } + }; + + handleTransition(); + }, [mainLiveData, currentUrlIndex, initPlayer]); + + const onSelect = (index: number) => { + setCurrentUrlIndex(index); + }; + + return { + currentLiveData: mainLiveData[currentUrlIndex], + currentUrlIndex, + isTransitioning, + videoRef, + onSelect + }; +}; + +export default useMainLiveRotation; From a8e5d97992c18928097bae4fb1cb821ab50763af Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Sat, 30 Nov 2024 17:35:27 +0900 Subject: [PATCH 13/52] =?UTF-8?q?"fix:=20=EB=AF=B8=EB=8B=88=ED=94=8C?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=96=B4=20memo=20=EC=A0=9C=EA=B1=B0"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/main/MiniPlayerItem.tsx | 52 +++++++------------ 1 file changed, 19 insertions(+), 33 deletions(-) diff --git a/frontend/src/components/main/MiniPlayerItem.tsx b/frontend/src/components/main/MiniPlayerItem.tsx index be0bff49..09f1b89e 100644 --- a/frontend/src/components/main/MiniPlayerItem.tsx +++ b/frontend/src/components/main/MiniPlayerItem.tsx @@ -1,4 +1,3 @@ -import { memo, useCallback, useMemo } from 'react'; import styled from 'styled-components'; import { MainLive } from '@type/live'; @@ -9,39 +8,26 @@ interface MiniPlayerItemProps { isSelected: boolean; } -const MiniPlayerItem = memo( - ({ item, onMouseEnter, index, isSelected }) => { - const handleMouseEnter = useCallback(() => { - onMouseEnter(index); - }, [onMouseEnter, index]); +const MiniPlayerItem = ({ item, onMouseEnter, index, isSelected }: MiniPlayerItemProps) => { + const thumbnailUrl = item.defaultThumbnailImageUrl ?? item.liveImageUrl; - const thumbnailUrl = useMemo( - () => item.defaultThumbnailImageUrl ?? item.liveImageUrl, - [item.defaultThumbnailImageUrl, item.liveImageUrl] - ); - - return ( - - - - - - {item.liveTitle} - {item.channel.channelName} - - - ); - }, - (prevProps, nextProps) => { - return ( - prevProps.isSelected === nextProps.isSelected && - prevProps.item.liveId === nextProps.item.liveId && - prevProps.index === nextProps.index - ); - } -); - -MiniPlayerItem.displayName = 'MiniPlayerItem'; + return ( + { + onMouseEnter(index); + }} + > + + + + + {item.liveTitle} + {item.channel.channelName} + + + ); +}; export default MiniPlayerItem; From 22d36fd4ed19f836b142597a142a6422925da17c Mon Sep 17 00:00:00 2001 From: jisu-kim Date: Sat, 30 Nov 2024 19:22:30 +0900 Subject: [PATCH 14/52] =?UTF-8?q?"fix:=20=EC=95=88=EC=93=B0=EB=8A=94=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=20=EC=82=AD=EC=A0=9C"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useMainLiveRotation.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/hooks/useMainLiveRotation.ts b/frontend/src/hooks/useMainLiveRotation.ts index 44756089..6e2ed2f7 100644 --- a/frontend/src/hooks/useMainLiveRotation.ts +++ b/frontend/src/hooks/useMainLiveRotation.ts @@ -1,7 +1,6 @@ import { MainLive } from '@type/live'; import { useEffect, useRef, useState } from 'react'; import useRotatingPlayer from './useRotatePlayer'; -import { c } from 'vite/dist/node/types.d-aGj9QkWt'; const MOUNT_DELAY = 100; const TRANSITION_DELAY = 300; From f2a7bab188f4e61eb7c9059ceba6a1a0891678c5 Mon Sep 17 00:00:00 2001 From: Changhyun-Hong Date: Sat, 30 Nov 2024 20:55:21 +0900 Subject: [PATCH 15/52] =?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 (

클라이언트 페이지

- +