From 0e613b67b9ca1348e4e50fdc4a9dfdd5efc25f25 Mon Sep 17 00:00:00 2001 From: skdltn210 Date: Mon, 2 Dec 2024 17:41:36 +0900 Subject: [PATCH 01/41] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=ED=99=94=20=EC=8B=9C=20activeTool=EB=8F=84=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/store/useStudioStore.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/Frontend/src/store/useStudioStore.ts b/Frontend/src/store/useStudioStore.ts index 0908729c..27b5f565 100644 --- a/Frontend/src/store/useStudioStore.ts +++ b/Frontend/src/store/useStudioStore.ts @@ -92,6 +92,7 @@ export const useStudioStore = create(set => ({ texts: [], images: [], drawingState: initialDrawingState, + activeTool: null, }), deleteModal: { From 3cfeddeece8c49f34ed0039a3386d10ea266d441 Mon Sep 17 00:00:00 2001 From: skdltn210 Date: Mon, 2 Dec 2024 18:07:56 +0900 Subject: [PATCH 02/41] =?UTF-8?q?=F0=9F=92=84=20Style:=20=ED=8C=94?= =?UTF-8?q?=EB=A0=88=ED=8A=B8=20=EC=B1=84=ED=8C=85=EC=B0=BD=EB=B3=B4?= =?UTF-8?q?=EB=8B=A4=20=EC=9C=84=EB=A1=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/components/chat/ChatSettingsMenu.tsx | 2 +- Frontend/src/pages/StudioPage/Modals/Palette.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Frontend/src/components/chat/ChatSettingsMenu.tsx b/Frontend/src/components/chat/ChatSettingsMenu.tsx index 136eec4d..7157a8b8 100644 --- a/Frontend/src/components/chat/ChatSettingsMenu.tsx +++ b/Frontend/src/components/chat/ChatSettingsMenu.tsx @@ -28,7 +28,7 @@ function ChatSettingsMenu({ }: ChatSettingsMenuProps) { return ( <> - - - LICO - +
+ + LICO + +
+
- -
- - 전체 방송 -
- - -
- - 카테고리 -
- - -
- - 팔로잉 -
- + } label="전체 방송" isExpanded={isExpanded} /> + } + label="카테고리" + isExpanded={isExpanded} + /> + } label="팔로잉" isExpanded={isExpanded} />
- -
- - 스튜디오 -
- + } + label="스튜디오" + isExpanded={isExpanded} + />
{user ? ( <> - -
- - 마이페이지 -
- + } + label="마이페이지" + isExpanded={isExpanded} + /> ) : ( - -
- - 로그인 -
- + } label="로그인" isExpanded={isExpanded} /> )}
diff --git a/Frontend/src/components/layout/NavbarMini.tsx b/Frontend/src/components/layout/NavbarMini.tsx deleted file mode 100644 index 4e776a37..00000000 --- a/Frontend/src/components/layout/NavbarMini.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { NavLink } from 'react-router-dom'; -import { LuMonitor, LuLayoutGrid, LuHeart, LuVideo, LuMenu, LuLogIn, LuLogOut, LuUser } from 'react-icons/lu'; -import useLayoutStore from '@store/useLayoutStore'; -import { useAuthStore } from '@store/useAuthStore'; -import { useAuth } from '@hooks/useAuth'; - -interface NavLinkProps { - isActive: boolean; -} - -export default function NavbarMini(): JSX.Element { - const { toggleNavbar } = useLayoutStore(); - const user = useAuthStore(state => state.user); - const { logout } = useAuth(); - - const linkClass = ({ isActive }: NavLinkProps): string => - `flex justify-center items-center rounded-lg px-4 py-3 transition-colors text-lico-gray-1 hover:bg-lico-gray-3 hover:text-lico-orange-2 ${ - isActive ? 'text-lico-orange-2' : '' - }`; - - const handleLogout = (e: React.MouseEvent) => { - e.preventDefault(); - logout(); - }; - - return ( - - ); -} diff --git a/Frontend/src/layouts/Layout.tsx b/Frontend/src/layouts/Layout.tsx index 30cabeea..2c802c55 100644 --- a/Frontend/src/layouts/Layout.tsx +++ b/Frontend/src/layouts/Layout.tsx @@ -1,18 +1,17 @@ import { Outlet } from 'react-router-dom'; import Navbar from '@components/layout/Navbar'; -import NavbarMini from '@components/layout/NavbarMini'; -import useLayoutStore from '@store/useLayoutStore'; +import { useState } from 'react'; export default function Layout() { - const { navbarState } = useLayoutStore(); - const isHidden = navbarState === 'hidden'; - const isCollapsed = navbarState === 'collapsed'; + const [isExpanded, setIsExpanded] = useState(true); + const handleNavbarToggle = () => setIsExpanded(!isExpanded); return (
- {isHidden ? '' : isCollapsed ? : } + +
From 99e1ac3ed6c88d0f68c046be60eb738a0a36d2cc Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Mon, 2 Dec 2024 21:18:47 +0900 Subject: [PATCH 08/41] =?UTF-8?q?=F0=9F=92=84=20Style:=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20transition-colors=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/components/layout/NavItem.tsx | 4 ++-- Frontend/src/components/layout/Navbar.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Frontend/src/components/layout/NavItem.tsx b/Frontend/src/components/layout/NavItem.tsx index 25f2fe0c..6b6b38aa 100644 --- a/Frontend/src/components/layout/NavItem.tsx +++ b/Frontend/src/components/layout/NavItem.tsx @@ -15,14 +15,14 @@ export default function NavItem({ to, icon, label, isExpanded }: NavItemProps) { - `relative flex h-12 items-center rounded-lg px-4 text-lico-gray-1 transition-colors hover:bg-lico-gray-3 hover:text-lico-orange-2 ${isActive ? 'text-lico-orange-2' : ''} ` + `relative flex h-12 items-center rounded-lg px-4 text-lico-gray-1 hover:bg-lico-gray-3 hover:text-lico-orange-2 ${isActive ? 'text-lico-orange-2' : ''} ` } onMouseEnter={() => !isExpanded && setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)} >
{icon}
{label}
diff --git a/Frontend/src/components/layout/Navbar.tsx b/Frontend/src/components/layout/Navbar.tsx index ba942d42..2210d945 100644 --- a/Frontend/src/components/layout/Navbar.tsx +++ b/Frontend/src/components/layout/Navbar.tsx @@ -79,7 +79,7 @@ export default function Navbar({ isExpanded, onToggle }: NavbarProps) { onClick={handleLogout} onMouseEnter={() => !isExpanded && setShowLogoutTooltip(true)} onMouseLeave={() => setShowLogoutTooltip(false)} - className="relative flex h-12 items-center rounded-lg px-4 text-left text-lico-gray-1 transition-colors hover:bg-lico-gray-3 hover:text-lico-orange-2" + className="relative flex h-12 items-center rounded-lg px-4 text-left text-lico-gray-1 hover:bg-lico-gray-3 hover:text-lico-orange-2" >
From 53f88cad02427577c1e83380b21444990ad045dc Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Mon, 2 Dec 2024 21:24:22 +0900 Subject: [PATCH 09/41] =?UTF-8?q?=F0=9F=92=84=20Style:=20LICO=20=EB=A1=9C?= =?UTF-8?q?=EA=B3=A0=20=EA=B0=84=EA=B2=A9=20=EC=A1=B0=EC=A0=95,=20NavItem?= =?UTF-8?q?=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=84=20=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/components/layout/NavItem.tsx | 2 +- Frontend/src/components/layout/Navbar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Frontend/src/components/layout/NavItem.tsx b/Frontend/src/components/layout/NavItem.tsx index 6b6b38aa..e88f0f23 100644 --- a/Frontend/src/components/layout/NavItem.tsx +++ b/Frontend/src/components/layout/NavItem.tsx @@ -22,7 +22,7 @@ export default function NavItem({ to, icon, label, isExpanded }: NavItemProps) { >
{icon}
{label}
diff --git a/Frontend/src/components/layout/Navbar.tsx b/Frontend/src/components/layout/Navbar.tsx index 2210d945..00223d03 100644 --- a/Frontend/src/components/layout/Navbar.tsx +++ b/Frontend/src/components/layout/Navbar.tsx @@ -38,7 +38,7 @@ export default function Navbar({ isExpanded, onToggle }: NavbarProps) {
- + LICO
From f8d292df044b925d027d815f48eed3cdc7512e77 Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Mon, 2 Dec 2024 21:35:45 +0900 Subject: [PATCH 10/41] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EB=93=9C=20=EB=B0=94=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/layouts/Layout.tsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/Frontend/src/layouts/Layout.tsx b/Frontend/src/layouts/Layout.tsx index 2c802c55..05996c09 100644 --- a/Frontend/src/layouts/Layout.tsx +++ b/Frontend/src/layouts/Layout.tsx @@ -1,10 +1,27 @@ +import { useEffect, useState } from 'react'; import { Outlet } from 'react-router-dom'; import Navbar from '@components/layout/Navbar'; -import { useState } from 'react'; +import useMediaQuery from '@hooks/useMediaQuery'; export default function Layout() { const [isExpanded, setIsExpanded] = useState(true); - const handleNavbarToggle = () => setIsExpanded(!isExpanded); + const [isLocked, setIsLocked] = useState(false); + const isMedium = useMediaQuery('(min-width: 700px)'); + + const handleNavbarToggle = () => { + if (!isExpanded) { + setIsLocked(false); + } else { + setIsLocked(true); + } + setIsExpanded(!isExpanded); + }; + + useEffect(() => { + if (!isLocked) { + setIsExpanded(isMedium); + } + }, [isMedium, isLocked]); return (
From 55c46857da33b3cc61b2752b47ac48daf5f6ce82 Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Mon, 2 Dec 2024 22:14:39 +0900 Subject: [PATCH 11/41] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=A1=B4=EC=9E=AC?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EA=B2=BD=EB=A1=9C?= =?UTF-8?q?=EC=97=90=20=EB=8C=80=ED=95=9C=20404=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/routes/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Frontend/src/routes/index.tsx b/Frontend/src/routes/index.tsx index 7f0ff65f..f46a2a0f 100644 --- a/Frontend/src/routes/index.tsx +++ b/Frontend/src/routes/index.tsx @@ -11,6 +11,7 @@ import LoginPage from '@pages/LoginPage'; import MyPage from '@pages/MyPage'; import LoginCallback from '@pages/LoginPage/LoginCallback'; import ChatPopupPage from '@pages/ChatPopupPage'; +import NotFound from '@components/error/NotFound'; import ProtectedRoute from './ProtectedRoute'; export default function AppRoutes() { @@ -27,6 +28,7 @@ export default function AppRoutes() { } /> } /> } /> + } /> Date: Mon, 2 Dec 2024 22:21:45 +0900 Subject: [PATCH 12/41] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EA=B2=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/apis/auth.ts | 5 +++++ Frontend/src/config/env.ts | 4 ++++ Frontend/src/hooks/useAuth.ts | 23 ++++++++++++++++++++--- Frontend/src/pages/LoginPage/index.tsx | 6 ++++++ Frontend/src/types/auth.ts | 2 +- 5 files changed, 36 insertions(+), 4 deletions(-) diff --git a/Frontend/src/apis/auth.ts b/Frontend/src/apis/auth.ts index 35996e29..8d0977b7 100644 --- a/Frontend/src/apis/auth.ts +++ b/Frontend/src/apis/auth.ts @@ -14,6 +14,11 @@ export const authApi = { async handleCallback(params: AuthCallbackParams): Promise { const { provider, code, state } = params; + if (provider === 'lico') { + const response = await api.get(`/auth/${provider}/callback`); + return response.data; + } + const response = await api.get(`/auth/${provider}/callback`, { params: { code, state }, }); diff --git a/Frontend/src/config/env.ts b/Frontend/src/config/env.ts index ac268678..7ccb055d 100644 --- a/Frontend/src/config/env.ts +++ b/Frontend/src/config/env.ts @@ -20,6 +20,10 @@ export const config = { clientId: import.meta.env.VITE_GITHUB_CLIENT_ID, redirectUri: `${import.meta.env.VITE_AUTH_REDIRECT_BASE_URL}/auth/github/callback`, }, + lico: { + clientId: '', + redirectUri: '', + }, }, webrtcUrl: import.meta.env.VITE_WEBRTC_URL, whipUrl: import.meta.env.VITE_WHIP_URL, diff --git a/Frontend/src/hooks/useAuth.ts b/Frontend/src/hooks/useAuth.ts index 4b2e6571..397d6b83 100644 --- a/Frontend/src/hooks/useAuth.ts +++ b/Frontend/src/hooks/useAuth.ts @@ -37,9 +37,26 @@ export function useAuth() { } }; - const login = (provider: Provider) => { - const url = getOAuthUrl(provider); - window.location.href = url; + const login = async (provider: Provider) => { + try { + if (provider === 'lico') { + const response = await authApi.handleCallback({ provider, code: '', state: null }); + if (response.success) { + setAuth({ + accessToken: response.accessToken, + user: response.user, + }); + navigate(-2); + } + return; + } + + const url = getOAuthUrl(provider); + window.location.href = url; + } catch (error) { + console.error('로그인 처리 중 오류:', error); + navigate('/login'); + } }; const handleCallback = async (params: AuthCallbackParams) => { diff --git a/Frontend/src/pages/LoginPage/index.tsx b/Frontend/src/pages/LoginPage/index.tsx index 50bb4318..c4f4fceb 100644 --- a/Frontend/src/pages/LoginPage/index.tsx +++ b/Frontend/src/pages/LoginPage/index.tsx @@ -34,6 +34,12 @@ export default function LoginPage() { 깃허브 로그인 +
diff --git a/Frontend/src/types/auth.ts b/Frontend/src/types/auth.ts index 67c66c75..101cc9cd 100644 --- a/Frontend/src/types/auth.ts +++ b/Frontend/src/types/auth.ts @@ -1,4 +1,4 @@ -export type Provider = 'google' | 'naver' | 'github'; +export type Provider = 'google' | 'naver' | 'github' | 'lico'; export interface AuthResponse { success: boolean; From 55c8683b5debb518a956834d6c9fbf8616b9ce45 Mon Sep 17 00:00:00 2001 From: skdltn210 Date: Mon, 2 Dec 2024 22:27:58 +0900 Subject: [PATCH 13/41] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20ChannelCard,=20Cate?= =?UTF-8?q?goryBadge=20=EC=A4=91=EC=B2=A9=20=EB=A7=81=ED=81=AC=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/channel/ChannelCard/index.tsx | 18 +++++++++++----- .../common/Badges/CategoryBadge.tsx | 21 +++++++++++-------- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/Frontend/src/components/channel/ChannelCard/index.tsx b/Frontend/src/components/channel/ChannelCard/index.tsx index b640e676..113dd978 100644 --- a/Frontend/src/components/channel/ChannelCard/index.tsx +++ b/Frontend/src/components/channel/ChannelCard/index.tsx @@ -1,4 +1,4 @@ -import { Link } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import ChannelThumbnail from '@components/channel/ChannelCard/ChannelThumbnail'; import HoverPreviewPlayer from '@components/channel/ChannelCard/HoverPreviewPlayer'; import { useRef, useState } from 'react'; @@ -27,6 +27,7 @@ export default function ChannelCard({ }: ChannelCardProps) { const [showPreview, setShowPreview] = useState(false); const timerRef = useRef(); + const navigate = useNavigate(); const handleMouseEnter = () => { timerRef.current = setTimeout(() => { @@ -41,13 +42,20 @@ export default function ChannelCard({ setShowPreview(false); }; + const handleCardClick = (e: React.MouseEvent) => { + const target = e.target as HTMLElement; + if (!target.closest('[data-category-badge]')) { + navigate(`/live/${id}`); + } + }; + return ( -
@@ -64,6 +72,6 @@ export default function ChannelCard({ categoryId={categoryId} profileImgUrl={profileImgUrl} /> - +
); } diff --git a/Frontend/src/components/common/Badges/CategoryBadge.tsx b/Frontend/src/components/common/Badges/CategoryBadge.tsx index 722a3517..0e491790 100644 --- a/Frontend/src/components/common/Badges/CategoryBadge.tsx +++ b/Frontend/src/components/common/Badges/CategoryBadge.tsx @@ -1,4 +1,4 @@ -import { Link } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; interface CategoryBadgeProps { category: string; @@ -7,17 +7,20 @@ interface CategoryBadgeProps { } export default function CategoryBadge({ category, categoryId, className }: CategoryBadgeProps) { + const navigate = useNavigate(); + + const handleCategoryClick = (e: React.MouseEvent) => { + e.stopPropagation(); + navigate(`/category/${categoryId}`); + }; + return ( - { - e.stopPropagation(); - e.preventDefault(); - window.location.href = `/category/${categoryId}`; - }} + {category} - + ); } From b3518411fefe40878d8715c537846e749184006a Mon Sep 17 00:00:00 2001 From: skdltn210 Date: Mon, 2 Dec 2024 22:30:02 +0900 Subject: [PATCH 14/41] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20li=20=EC=9A=94?= =?UTF-8?q?=EC=86=8C=EC=97=90=20key=20prop=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/pages/FollowingPage/OfflineGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Frontend/src/pages/FollowingPage/OfflineGrid.tsx b/Frontend/src/pages/FollowingPage/OfflineGrid.tsx index 65054730..371f0ccf 100644 --- a/Frontend/src/pages/FollowingPage/OfflineGrid.tsx +++ b/Frontend/src/pages/FollowingPage/OfflineGrid.tsx @@ -9,7 +9,7 @@ export default function OfflineGrid({ channels }: OfflineGridProps) { return (
    {channels.map(channel => ( -
  • +
    • ))} From d1f567239207f6815b9135866fce6413ec4f90f1 Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Mon, 2 Dec 2024 22:46:12 +0900 Subject: [PATCH 15/41] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20Link=20=EC=A4=91?= =?UTF-8?q?=EC=B2=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 채널 카드 내부에 카테고리 배지 Link가 겹처서 뜨는 콘솔 에러를 수정했습니다. - Link를 태그 별로 세분화했습니다. --- .../channel/ChannelCard/ChannelInfo.tsx | 21 ++++++++--- .../components/channel/ChannelCard/index.tsx | 35 ++++++++++--------- 2 files changed, 36 insertions(+), 20 deletions(-) diff --git a/Frontend/src/components/channel/ChannelCard/ChannelInfo.tsx b/Frontend/src/components/channel/ChannelCard/ChannelInfo.tsx index fe77ad9a..22e53109 100644 --- a/Frontend/src/components/channel/ChannelCard/ChannelInfo.tsx +++ b/Frontend/src/components/channel/ChannelCard/ChannelInfo.tsx @@ -1,6 +1,8 @@ import CategoryBadge from '@components/common/Badges/CategoryBadge'; +import { Link } from 'react-router-dom'; interface ChannelInfoProps { + id: string; title: string; streamerName: string; category: string; @@ -8,13 +10,24 @@ interface ChannelInfoProps { profileImgUrl: string; } -export default function ChannelInfo({ title, streamerName, category, categoryId, profileImgUrl }: ChannelInfoProps) { +export default function ChannelInfo({ + id, + title, + streamerName, + category, + categoryId, + profileImgUrl, +}: ChannelInfoProps) { return (
    - {streamerName} + + {streamerName} +
    -

    {title}

    -

    {streamerName}

    + +

    {title}

    +

    {streamerName}

    +
    diff --git a/Frontend/src/components/channel/ChannelCard/index.tsx b/Frontend/src/components/channel/ChannelCard/index.tsx index b640e676..32616c7a 100644 --- a/Frontend/src/components/channel/ChannelCard/index.tsx +++ b/Frontend/src/components/channel/ChannelCard/index.tsx @@ -42,28 +42,31 @@ export default function ChannelCard({ }; return ( - -
    - - {showPreview && ( -
    - -
    - )} -
    +
    + +
    + + {showPreview && ( +
    + +
    + )} +
    + - +
    ); } From a507bf9a51d1c69162b22c7c47bbf41d1864618c Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Mon, 2 Dec 2024 23:11:19 +0900 Subject: [PATCH 16/41] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=EB=A6=AC=EC=95=A1?= =?UTF-8?q?=ED=8A=B8=20=EC=BF=BC=EB=A6=AC=20staleTime=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 라이브 목록, 팔로우 목록, 카테고리 목록 같은 사이드바에서 직접 접근 가능한 페이지의 경우, 기존 staleTime이 5분으로 지나치게 길어 실시간으로 데이터를 받아오지 못했습니다. 해당 페이지들은 staleTime 10초를 적용하여 빠르게 업데이트가 가능하도록 수정했습니다. --- Frontend/src/hooks/useCategory.ts | 2 ++ Frontend/src/hooks/useFollow.ts | 1 + Frontend/src/hooks/useLive.ts | 1 + 3 files changed, 4 insertions(+) diff --git a/Frontend/src/hooks/useCategory.ts b/Frontend/src/hooks/useCategory.ts index d69d3897..f4c3d93f 100644 --- a/Frontend/src/hooks/useCategory.ts +++ b/Frontend/src/hooks/useCategory.ts @@ -16,6 +16,7 @@ export const useCategories = () => { return useQuery({ queryKey: categoryKeys.all, queryFn: categoryApi.getCategories, + staleTime: 1000 * 10, }); }; @@ -35,6 +36,7 @@ export const useCategoryLives = (categoryId: string) => { limit: ITEMS_PER_PAGE, offset: pageParam as number, }), + staleTime: 1000 * 10, getNextPageParam: (lastPage, allPages) => { if (!lastPage.length || lastPage.length < 20) return undefined; return allPages.length * 20; diff --git a/Frontend/src/hooks/useFollow.ts b/Frontend/src/hooks/useFollow.ts index 026a1113..67d7cba8 100644 --- a/Frontend/src/hooks/useFollow.ts +++ b/Frontend/src/hooks/useFollow.ts @@ -11,6 +11,7 @@ export const useFollow = () => { const { data: follows, isLoading: isLoadingFollows } = useQuery({ queryKey: ['follows'], queryFn: followApi.getFollow, + staleTime: 1000 * 10, enabled: isLoggedIn, }); diff --git a/Frontend/src/hooks/useLive.ts b/Frontend/src/hooks/useLive.ts index ca5633a8..70fb4a45 100644 --- a/Frontend/src/hooks/useLive.ts +++ b/Frontend/src/hooks/useLive.ts @@ -17,6 +17,7 @@ export const useLives = (params: Omit) => { return useInfiniteQuery({ queryKey: liveKeys.sorted(params), queryFn: ({ pageParam }) => liveApi.getLives({ ...params, offset: pageParam as number }), + staleTime: 1000 * 10, getNextPageParam: (lastPage, allPages) => { if (!lastPage.length || lastPage.length < 20) return undefined; return allPages.length * 20; From f120c689d90808177e466ee8b89f4ffc510609f7 Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Mon, 2 Dec 2024 23:52:58 +0900 Subject: [PATCH 17/41] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20mock=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/mocks/mockChannels.ts | 226 ----------------------------- 1 file changed, 226 deletions(-) delete mode 100644 Frontend/src/mocks/mockChannels.ts diff --git a/Frontend/src/mocks/mockChannels.ts b/Frontend/src/mocks/mockChannels.ts deleted file mode 100644 index bee80e65..00000000 --- a/Frontend/src/mocks/mockChannels.ts +++ /dev/null @@ -1,226 +0,0 @@ -import { ChannelCardProps } from '@components/channel/ChannelCard'; - -const mockChannels: (ChannelCardProps & { createdAt: string })[] = [ - { - id: 'stream_1', - title: '이번주 마스터 달성 가능?!', - streamerName: '눈송이', - viewers: 15234, - category: '리그 오브 레전드', - categoryId: 1, - profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream1', - thumbnailUrl: 'https://picsum.photos/seed/stream1/1920/1080', - createdAt: '2024-11-05T10:30:00Z', - }, - // { - // id: 'stream_2', - // title: '롤드컵 결승전 같이보기', - // streamerName: '게임러버', - // viewers: 8761, - // category: 'Just Chatting', - // categoryId: 2, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream2', - // thumbnailUrl: 'https://picsum.photos/seed/stream2/1920/1080', - // createdAt: '2024-11-05T11:15:00Z', - // }, - // { - // id: 'stream_3', - // title: '발로란트 레디언트 찍기', - // streamerName: '에임신', - // viewers: 4521, - // category: 'VALORANT', - // categoryId: 3, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream3', - // thumbnailUrl: 'https://picsum.photos/seed/stream3/1920/1080', - // createdAt: '2024-11-05T09:45:00Z', - // }, - // { - // id: 'stream_4', - // title: '새벽 배그 1등 도전', - // streamerName: '배틀매니아', - // viewers: 2845, - // category: 'BATTLEGROUNDS', - // categoryId: 4, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream4', - // thumbnailUrl: 'https://picsum.photos/seed/stream4/1920/1080', - // createdAt: '2024-11-05T12:00:00Z', - // }, - // { - // id: 'stream_5', - // title: '메이플 보스레이드 가실분?', - // streamerName: '메이플여신', - // viewers: 3156, - // category: '메이플스토리', - // categoryId: 5, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream5', - // thumbnailUrl: 'https://picsum.photos/seed/stream5/1920/1080', - // createdAt: '2024-11-05T08:30:00Z', - // }, - // { - // id: 'stream_6', - // title: 'FIFA 위클리 매치 도전', - // streamerName: '축구황제', - // viewers: 5789, - // category: 'EA FC 24', - // categoryId: 6, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream6', - // thumbnailUrl: 'https://picsum.photos/seed/stream6/1920/1080', - // createdAt: '2024-11-05T13:20:00Z', - // }, - // { - // id: 'stream_7', - // title: '던파 신캐릭터 육성중', - // streamerName: '던파고수', - // viewers: 1234, - // category: '던전앤파이터', - // categoryId: 7, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream7', - // thumbnailUrl: 'https://picsum.photos/seed/stream7/1920/1080', - // createdAt: '2024-11-05T14:45:00Z', - // }, - // { - // id: 'stream_8', - // title: '스타 래더 클라이밍', - // streamerName: '테란장인', - // viewers: 6543, - // category: '스타크래프트', - // categoryId: 8, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream8', - // thumbnailUrl: 'https://picsum.photos/seed/stream8/1920/1080', - // createdAt: '2024-11-05T07:15:00Z', - // }, - // { - // id: 'stream_9', - // title: '디아블로4 시즌2 스타트!', - // streamerName: '악마사냥꾼', - // viewers: 4891, - // category: '디아블로 IV', - // categoryId: 9, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream9', - // thumbnailUrl: 'https://picsum.photos/seed/stream9/1920/1080', - // createdAt: '2024-11-05T15:30:00Z', - // }, - // { - // id: 'stream_10', - // title: '오버워치 그마 달성기', - // streamerName: '워치맨', - // viewers: 3567, - // category: '오버워치 2', - // categoryId: 10, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream10', - // thumbnailUrl: 'https://picsum.photos/seed/stream10/1920/1080', - // createdAt: '2024-11-05T06:45:00Z', - // }, - // { - // id: 'stream_11', - // title: '쿠키런 신캐 뽑기 가즈아', - // streamerName: '쿠키마스터', - // viewers: 2134, - // category: '쿠키런: 킹덤', - // categoryId: 11, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream11', - // thumbnailUrl: 'https://picsum.photos/seed/stream11/1920/1080', - // createdAt: '2024-11-05T16:10:00Z', - // }, - // { - // id: 'stream_12', - // title: '마인크래프트 건축 방송', - // streamerName: '마크장인', - // viewers: 1876, - // category: 'Minecraft', - // categoryId: 12, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream12', - // thumbnailUrl: 'https://picsum.photos/seed/stream12/1920/1080', - // createdAt: '2024-11-05T05:30:00Z', - // }, - // { - // id: 'stream_13', - // title: '폴가이즈 우승 달리기', - // streamerName: '폴가이저', - // viewers: 945, - // category: 'Fall Guys', - // categoryId: 13, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream13', - // thumbnailUrl: 'https://picsum.photos/seed/stream13/1920/1080', - // createdAt: '2024-11-05T17:00:00Z', - // }, - // { - // id: 'stream_14', - // title: 'apex 프레데터 가보자', - // streamerName: '에이펙신', - // viewers: 7823, - // category: 'Apex Legends', - // categoryId: 14, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream14', - // thumbnailUrl: 'https://picsum.photos/seed/stream14/1920/1080', - // createdAt: '2024-11-05T04:45:00Z', - // }, - // { - // id: 'stream_15', - // title: '로스트아크 일일숙제', - // streamerName: '로아달인', - // viewers: 5432, - // category: 'Lost Ark', - // categoryId: 15, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream15', - // thumbnailUrl: 'https://picsum.photos/seed/stream15/1920/1080', - // createdAt: '2024-11-05T17:45:00Z', - // }, - // { - // id: 'stream_16', - // title: '고양이랑 게임방송', - // streamerName: '냥스트리머', - // viewers: 2567, - // category: 'Just Chatting', - // categoryId: 16, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream16', - // thumbnailUrl: 'https://picsum.photos/seed/stream16/1920/1080', - // createdAt: '2024-11-05T03:15:00Z', - // }, - // { - // id: 'stream_17', - // title: '홀리데이 스페셜 방송', - // streamerName: '파티퀸', - // viewers: 3891, - // category: 'Just Chatting', - // categoryId: 17, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream17', - // thumbnailUrl: 'https://picsum.photos/seed/stream17/1920/1080', - // createdAt: '2024-11-05T18:30:00Z', - // }, - // { - // id: 'stream_18', - // title: '스팀 신작 리뷰', - // streamerName: '게임평론가', - // viewers: 4123, - // category: 'Just Chatting', - // categoryId: 18, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream18', - // thumbnailUrl: 'https://picsum.photos/seed/stream18/1920/1080', - // createdAt: '2024-11-05T02:00:00Z', - // }, - // { - // id: 'stream_19', - // title: '모바일 게임 정보 방송', - // streamerName: '모바일러', - // viewers: 1567, - // category: 'Just Chatting', - // categoryId: 19, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream19', - // thumbnailUrl: 'https://picsum.photos/seed/stream19/1920/1080', - // createdAt: '2024-11-05T19:15:00Z', - // }, - // { - // id: 'stream_20', - // title: 'PS5 신작 플레이', - // streamerName: '콘솔킹', - // viewers: 6789, - // category: 'Just Chatting', - // categoryId: 20, - // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream20', - // thumbnailUrl: 'https://picsum.photos/seed/stream20/1920/1080', - // createdAt: '2024-11-05T01:30:00Z', - // }, -]; - -export default mockChannels; From 8d228db8939d77687a9b46899e50dace1f6e4e69 Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Mon, 2 Dec 2024 23:53:36 +0900 Subject: [PATCH 18/41] =?UTF-8?q?=F0=9F=92=84=20Style:=20=EC=A0=95?= =?UTF-8?q?=EB=A0=AC=20=EB=B2=84=ED=8A=BC=EA=B3=BC=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?=EA=B0=84=20=EA=B0=84=EA=B2=A9=20=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/pages/LivesPage/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Frontend/src/pages/LivesPage/index.tsx b/Frontend/src/pages/LivesPage/index.tsx index 8ff6f2e4..3f6e98cc 100644 --- a/Frontend/src/pages/LivesPage/index.tsx +++ b/Frontend/src/pages/LivesPage/index.tsx @@ -48,7 +48,7 @@ export default function LivesPage() { return (
    전체 방송
    -
    +
    setSortType('recommendation')} />
    + ({ id: live.channelId, From b484976129de6e53141b8d5f711c4e041a5d1b6e Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Mon, 2 Dec 2024 23:54:57 +0900 Subject: [PATCH 19/41] =?UTF-8?q?=F0=9F=92=84=20Style:=20=EC=B9=B4?= =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EC=A0=81=EC=9A=A9,=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20main=20=EC=B5=9C=EC=86=8C=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EC=A7=80=EC=A0=95,=20=EB=AA=A9=EB=A1=9D?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/category/CategoryCard/index.tsx | 2 +- .../components/category/CategoryGrid/index.tsx | 16 +++++++++------- .../src/components/channel/ChannelCard/index.tsx | 3 +-- .../src/components/channel/ChannelGrid/index.tsx | 2 +- Frontend/src/layouts/Layout.tsx | 2 +- Frontend/src/pages/CategoryPage/index.tsx | 2 +- 6 files changed, 14 insertions(+), 13 deletions(-) diff --git a/Frontend/src/components/category/CategoryCard/index.tsx b/Frontend/src/components/category/CategoryCard/index.tsx index 4077cc17..61d43ae0 100644 --- a/Frontend/src/components/category/CategoryCard/index.tsx +++ b/Frontend/src/components/category/CategoryCard/index.tsx @@ -20,7 +20,7 @@ export default function CategoryCard({ id, name, image, totalViewers, totalLives return ( ); From 002ac29f60864d52a9eac30e198ea786f59b37a1 Mon Sep 17 00:00:00 2001 From: pc5401 Date: Tue, 3 Dec 2024 00:49:29 +0900 Subject: [PATCH 21/41] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20Fix:=20OAuht=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=EC=97=90=20lico=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Backend/apps/api/src/auth/auth.service.ts | 2 +- Backend/apps/api/src/users/dto/create.user.dto.ts | 4 ++-- Backend/apps/api/src/users/users.service.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Backend/apps/api/src/auth/auth.service.ts b/Backend/apps/api/src/auth/auth.service.ts index ae9e2b66..69647f1d 100644 --- a/Backend/apps/api/src/auth/auth.service.ts +++ b/Backend/apps/api/src/auth/auth.service.ts @@ -3,7 +3,7 @@ import { JwtService } from '@nestjs/jwt'; import { UsersService } from '../users/users.service'; import { ConfigService } from '@nestjs/config'; -type OAuthPlatform = 'google' | 'github' | 'naver'; +type OAuthPlatform = 'google' | 'github' | 'naver' | 'lico'; @Injectable() export class AuthService { diff --git a/Backend/apps/api/src/users/dto/create.user.dto.ts b/Backend/apps/api/src/users/dto/create.user.dto.ts index b8a40444..f300fb89 100644 --- a/Backend/apps/api/src/users/dto/create.user.dto.ts +++ b/Backend/apps/api/src/users/dto/create.user.dto.ts @@ -3,8 +3,8 @@ export class CreateUserDto { @IsString() oauthUid: string; - @IsEnum(['naver', 'github', 'google']) - oauthPlatform: 'naver' | 'github' | 'google'; + @IsEnum(['naver', 'github', 'google', 'lico']) + oauthPlatform: 'naver' | 'github' | 'google'| 'lico'; @IsString() @IsOptional() diff --git a/Backend/apps/api/src/users/users.service.ts b/Backend/apps/api/src/users/users.service.ts index d5d7aff1..36f49e33 100644 --- a/Backend/apps/api/src/users/users.service.ts +++ b/Backend/apps/api/src/users/users.service.ts @@ -41,7 +41,7 @@ export class UsersService { async findByOAuthUid( oauthUid: string, - oauthPlatform: 'naver' | 'github' | 'google', + oauthPlatform: 'naver' | 'github' | 'google'|'lico', ): Promise { return this.usersRepository.findOne({ where: { oauthUid, oauthPlatform }, From 6b123fdc8c6eb9eff395b4b16b95d546a2ac0722 Mon Sep 17 00:00:00 2001 From: pc5401 Date: Tue, 3 Dec 2024 01:04:35 +0900 Subject: [PATCH 22/41] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=ED=8C=94=EB=A1=9C?= =?UTF-8?q?=EC=9B=8C=20=EC=88=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Backend/apps/api/src/follow/follow.service.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/Backend/apps/api/src/follow/follow.service.ts b/Backend/apps/api/src/follow/follow.service.ts index 59ef1f33..473c24f3 100644 --- a/Backend/apps/api/src/follow/follow.service.ts +++ b/Backend/apps/api/src/follow/follow.service.ts @@ -89,12 +89,13 @@ export class FollowService { // 팔로워 수 async getFollowerCount(streamerId: number): Promise { - const count = await this.usersRepository + const result = await this.usersRepository .createQueryBuilder('user') - .innerJoin('user.followers', 'follower') + .leftJoin('user.followers', 'follower') .where('user.id = :streamerId', { streamerId }) - .getCount(); + .select('COUNT(follower.id)', 'count') + .getRawOne(); - return count; + return parseInt(result.count, 10); } } \ No newline at end of file From 080fb0bb54a6b2319a69e66be59562c1e93bbc7c Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Tue, 3 Dec 2024 01:05:40 +0900 Subject: [PATCH 23/41] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20useLayou?= =?UTF-8?q?tStore=EC=9D=84=20=EC=82=AD=EC=A0=9C=ED=95=98=EA=B3=A0=20useVie?= =?UTF-8?q?wMode=EB=A1=9C=20=EC=88=98=EC=A0=95=ED=96=88=EC=8A=B5=EB=8B=88?= =?UTF-8?q?=EB=8B=A4.=20=EC=A0=84=EC=97=AD=20=EC=83=81=ED=83=9C=EB=A1=9C?= =?UTF-8?q?=20=EA=B7=B9=EC=9E=A5=20=EB=AA=A8=EB=93=9C=EB=A7=8C=20=ED=8C=90?= =?UTF-8?q?=EB=8B=A8=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 채팅 토글, 사이드바 토글은 각 페이지에서 상태로 관리합니다. - 극장모드만 전역 상태로 관리하게 변경되었습니다. --- Frontend/src/store/useLayoutStore.ts | 76 ---------------------------- Frontend/src/store/useViewMode.ts | 17 +++++++ 2 files changed, 17 insertions(+), 76 deletions(-) delete mode 100644 Frontend/src/store/useLayoutStore.ts create mode 100644 Frontend/src/store/useViewMode.ts diff --git a/Frontend/src/store/useLayoutStore.ts b/Frontend/src/store/useLayoutStore.ts deleted file mode 100644 index 03f1b294..00000000 --- a/Frontend/src/store/useLayoutStore.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { create } from 'zustand'; - -type NavbarState = 'expanded' | 'collapsed' | 'hidden'; -type ChatState = 'expanded' | 'vertical' | 'hidden'; -type VideoPlayerState = 'default' | 'theater'; -type BreakpointType = 'CHAT_HIDDEN' | 'NAV_COLLAPSED' | 'FULL'; - -interface LayoutState { - navbarState: NavbarState; - chatState: ChatState; - isChatLocked: boolean; - videoPlayerState: VideoPlayerState; - - toggleNavbar: () => void; - toggleChat: () => void; - toggleVideoPlayer: () => void; - handleBreakpoint: (breakpoint: BreakpointType) => void; -} - -const BREAKPOINT_STATES: Record Partial> = { - CHAT_HIDDEN: () => ({ - navbarState: 'collapsed', - chatState: 'hidden', - }), - NAV_COLLAPSED: isChatLocked => ({ - navbarState: 'collapsed', - chatState: isChatLocked ? 'hidden' : 'expanded', - }), - FULL: isChatLocked => ({ - navbarState: 'expanded', - chatState: isChatLocked ? 'hidden' : 'expanded', - }), -}; - -const useLayoutState = create()((set, get) => ({ - navbarState: 'expanded', - chatState: 'expanded', - videoPlayerState: 'default', - isChatLocked: false, - - toggleNavbar: () => { - const { navbarState } = get(); - set({ - navbarState: navbarState === 'expanded' ? 'collapsed' : 'expanded', - }); - }, - - toggleChat: () => { - const { chatState, isChatLocked } = get(); - set({ - chatState: chatState === 'expanded' ? 'hidden' : 'expanded', - isChatLocked: !isChatLocked, - }); - }, - - toggleVideoPlayer: () => { - const { videoPlayerState } = get(); - set({ - videoPlayerState: videoPlayerState === 'default' ? 'theater' : 'default', - navbarState: videoPlayerState === 'default' ? 'hidden' : 'expanded', - }); - }, - - handleBreakpoint: (breakpoint: BreakpointType) => { - const { videoPlayerState, isChatLocked } = get(); - - if (videoPlayerState === 'default') { - const stateUpdater = BREAKPOINT_STATES[breakpoint]; - if (stateUpdater) { - set(stateUpdater(isChatLocked)); - } - } - }, -})); - -export default useLayoutState; diff --git a/Frontend/src/store/useViewMode.ts b/Frontend/src/store/useViewMode.ts new file mode 100644 index 00000000..c220b354 --- /dev/null +++ b/Frontend/src/store/useViewMode.ts @@ -0,0 +1,17 @@ +import { create } from 'zustand'; + +interface LayoutState { + isTheaterMode: boolean; + toggleTheaterMode: () => void; +} + +const useViewMode = create(set => ({ + isTheaterMode: false, + + toggleTheaterMode: () => + set(state => ({ + isTheaterMode: !state.isTheaterMode, + })), +})); + +export default useViewMode; From 0b356490426c14757625b752748ab35477a7f0ab Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Tue, 3 Dec 2024 01:07:57 +0900 Subject: [PATCH 24/41] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20?= =?UTF-8?q?=EC=B1=84=ED=8C=85=EC=B0=BD=EC=97=90=20=EB=B0=94=EB=80=90=20?= =?UTF-8?q?=EC=B1=84=ED=8C=85=20=ED=86=A0=EA=B8=80=20=EC=83=81=ED=83=9C,?= =?UTF-8?q?=20=EA=B7=B9=EC=9E=A5=EB=AA=A8=EB=93=9C=EB=A5=BC=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/VideoPlayer/Control/index.tsx | 8 +-- Frontend/src/components/VideoPlayer/index.tsx | 8 +-- Frontend/src/components/chat/ChatHeader.tsx | 6 +-- Frontend/src/components/chat/ChatWindow.tsx | 7 ++- Frontend/src/pages/ChatPopupPage/index.tsx | 2 +- Frontend/src/pages/LivePage/index.tsx | 54 +++++++++++-------- Frontend/src/pages/StudioPage/index.tsx | 22 ++++---- 7 files changed, 59 insertions(+), 48 deletions(-) diff --git a/Frontend/src/components/VideoPlayer/Control/index.tsx b/Frontend/src/components/VideoPlayer/Control/index.tsx index e47d3b31..fd92998f 100644 --- a/Frontend/src/components/VideoPlayer/Control/index.tsx +++ b/Frontend/src/components/VideoPlayer/Control/index.tsx @@ -6,7 +6,7 @@ import type { HLSQuality } from '@/types/hlsQuality'; interface ControlsProps { isPlaying: boolean; isFullScreen: boolean; - videoPlayerState: string; + isTheaterMode: boolean; showControls: boolean; volume: number; isMuted: boolean; @@ -26,7 +26,7 @@ const CONTROL_ICON_SIZE = 24; export default function Controls({ isPlaying, isFullScreen, - videoPlayerState, + isTheaterMode, showControls, volume, isMuted, @@ -91,8 +91,8 @@ export default function Controls({ type="button" onClick={onFullScreenToggle} className="hover:text-lico-orange-2" - aria-label={videoPlayerState === 'theater' ? '전체화면 종료' : '전체화면'} - aria-pressed={videoPlayerState === 'theater'} + aria-label={isTheaterMode ? '전체화면 종료' : '전체화면'} + aria-pressed={isTheaterMode} > {isFullScreen ? : } diff --git a/Frontend/src/components/VideoPlayer/index.tsx b/Frontend/src/components/VideoPlayer/index.tsx index b04e235f..fab5d9c0 100644 --- a/Frontend/src/components/VideoPlayer/index.tsx +++ b/Frontend/src/components/VideoPlayer/index.tsx @@ -1,9 +1,9 @@ import { useState, useRef, useEffect } from 'react'; -import useLayoutStore from '@store/useLayoutStore'; import useHls from '@hooks/useHls'; import LoadingSpinner from '@components/common/LoadingSpinner'; import Badge from '@components/common/Badges/Badge'; import OfflinePlayer from '@components/VideoPlayer/OfflinePlayer'; +import useViewMode from '@store/useViewMode'; import Controls from './Control/index'; interface VideoPlayerProps { @@ -18,7 +18,7 @@ export default function VideoPlayer({ streamUrl, onAir }: VideoPlayerProps) { const [isFullScreen, setIsFullScreen] = useState(false); const [showControls, setShowControls] = useState(true); const [showCursor, setShowCursor] = useState(true); - const { videoPlayerState, toggleVideoPlayer } = useLayoutStore(); + const { isTheaterMode, toggleTheaterMode } = useViewMode(); const videoRef = useRef(null); const containerRef = useRef(null); @@ -162,7 +162,7 @@ export default function VideoPlayer({ streamUrl, onAir }: VideoPlayerProps) { void; @@ -9,7 +9,7 @@ type ChatHeaderProps = { }; export default function ChatHeader({ onClose, onSettingsClick }: ChatHeaderProps) { - const { videoPlayerState } = useLayoutStore(); + const { isTheaterMode } = useViewMode(); const isVerticalMode = !useMediaQuery('(min-width: 700px)'); return ( @@ -24,7 +24,7 @@ export default function ChatHeader({ onClose, onSettingsClick }: ChatHeaderProps onClick={onClose} className="rounded-md p-2 text-lico-gray-2 hover:bg-lico-gray-3" > - {videoPlayerState && isVerticalMode ? : } + {isTheaterMode && isVerticalMode ? : }

    채팅

    LICO @@ -45,14 +45,24 @@ export default function Navbar({ isExpanded, onToggle }: NavbarProps) {
    - } label="전체 방송" isExpanded={isExpanded} /> + } + label="전체 방송" + isExpanded={isNavbarExpanded} + /> } label="카테고리" - isExpanded={isExpanded} + isExpanded={isNavbarExpanded} + /> + } + label="팔로잉" + isExpanded={isNavbarExpanded} /> - } label="팔로잉" isExpanded={isExpanded} />
    @@ -60,7 +70,7 @@ export default function Navbar({ isExpanded, onToggle }: NavbarProps) { to={`/studio/${user?.channelId}`} icon={} label="스튜디오" - isExpanded={isExpanded} + isExpanded={isNavbarExpanded} />
    @@ -72,12 +82,12 @@ export default function Navbar({ isExpanded, onToggle }: NavbarProps) { to={`/mypage/${user.id}`} icon={} label="마이페이지" - isExpanded={isExpanded} + isExpanded={isNavbarExpanded} />
    로그아웃
    - {!isExpanded && showLogoutTooltip && ( + {!isNavbarExpanded && showLogoutTooltip && (
    로그아웃
    @@ -97,7 +107,7 @@ export default function Navbar({ isExpanded, onToggle }: NavbarProps) { ) : ( - } label="로그인" isExpanded={isExpanded} /> + } label="로그인" isExpanded={isNavbarExpanded} /> )}
    diff --git a/Frontend/src/layouts/Layout.tsx b/Frontend/src/layouts/Layout.tsx index 51950ec6..369b113b 100644 --- a/Frontend/src/layouts/Layout.tsx +++ b/Frontend/src/layouts/Layout.tsx @@ -2,33 +2,45 @@ import { useEffect, useState } from 'react'; import { Outlet } from 'react-router-dom'; import Navbar from '@components/layout/Navbar'; import useMediaQuery from '@hooks/useMediaQuery'; +import useViewMode from '@store/useViewMode'; + +const NAVBAR_BREAKPOINT = '(min-width: 1000px)'; + +const NAV_WIDTH = { + expanded: 'ml-60', // 240px + collapsed: 'ml-[76px]', // 76px + hidden: 'ml-0', // 0px +}; export default function Layout() { - const [isExpanded, setIsExpanded] = useState(true); - const [isLocked, setIsLocked] = useState(false); - const isMedium = useMediaQuery('(min-width: 700px)'); + const [isNavbarExpanded, setIsNavbarExpanded] = useState(true); + const [isNavbarLocked, setIsNavbarLocked] = useState(false); + + const isMediumScreen = useMediaQuery(NAVBAR_BREAKPOINT); + const { isTheaterMode } = useViewMode(); const handleNavbarToggle = () => { - if (!isExpanded) { - setIsLocked(false); - } else { - setIsLocked(true); - } - setIsExpanded(!isExpanded); + setIsNavbarLocked(!isNavbarExpanded); + setIsNavbarExpanded(!isNavbarExpanded); }; useEffect(() => { - if (!isLocked) { - setIsExpanded(isMedium); + if (!isNavbarLocked) { + setIsNavbarExpanded(isMediumScreen); } - }, [isMedium, isLocked]); + }, [isMediumScreen, isNavbarLocked]); + + const getMainMargin = () => { + if (isTheaterMode) return NAV_WIDTH.hidden; + return isNavbarExpanded ? NAV_WIDTH.expanded : NAV_WIDTH.collapsed; + }; return (
    - + {!isTheaterMode && }
    From 5f35c2487e517066482fa90e3f641fd269861264 Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Tue, 3 Dec 2024 01:25:01 +0900 Subject: [PATCH 26/41] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20mocks=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=20=EB=B3=B5=EC=9B=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 우선 mocks 폴더 복원했습니다. 은수님이 mock 삭제하고 HomePage 변경하신 것 같아서 그 때 적용하면 될 것 같스빈다. --- Frontend/src/mocks/mockChannels.ts | 226 ++++++++++++++++++++++++++ Frontend/src/pages/HomePage/index.tsx | 2 +- 2 files changed, 227 insertions(+), 1 deletion(-) create mode 100644 Frontend/src/mocks/mockChannels.ts diff --git a/Frontend/src/mocks/mockChannels.ts b/Frontend/src/mocks/mockChannels.ts new file mode 100644 index 00000000..bee80e65 --- /dev/null +++ b/Frontend/src/mocks/mockChannels.ts @@ -0,0 +1,226 @@ +import { ChannelCardProps } from '@components/channel/ChannelCard'; + +const mockChannels: (ChannelCardProps & { createdAt: string })[] = [ + { + id: 'stream_1', + title: '이번주 마스터 달성 가능?!', + streamerName: '눈송이', + viewers: 15234, + category: '리그 오브 레전드', + categoryId: 1, + profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream1', + thumbnailUrl: 'https://picsum.photos/seed/stream1/1920/1080', + createdAt: '2024-11-05T10:30:00Z', + }, + // { + // id: 'stream_2', + // title: '롤드컵 결승전 같이보기', + // streamerName: '게임러버', + // viewers: 8761, + // category: 'Just Chatting', + // categoryId: 2, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream2', + // thumbnailUrl: 'https://picsum.photos/seed/stream2/1920/1080', + // createdAt: '2024-11-05T11:15:00Z', + // }, + // { + // id: 'stream_3', + // title: '발로란트 레디언트 찍기', + // streamerName: '에임신', + // viewers: 4521, + // category: 'VALORANT', + // categoryId: 3, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream3', + // thumbnailUrl: 'https://picsum.photos/seed/stream3/1920/1080', + // createdAt: '2024-11-05T09:45:00Z', + // }, + // { + // id: 'stream_4', + // title: '새벽 배그 1등 도전', + // streamerName: '배틀매니아', + // viewers: 2845, + // category: 'BATTLEGROUNDS', + // categoryId: 4, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream4', + // thumbnailUrl: 'https://picsum.photos/seed/stream4/1920/1080', + // createdAt: '2024-11-05T12:00:00Z', + // }, + // { + // id: 'stream_5', + // title: '메이플 보스레이드 가실분?', + // streamerName: '메이플여신', + // viewers: 3156, + // category: '메이플스토리', + // categoryId: 5, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream5', + // thumbnailUrl: 'https://picsum.photos/seed/stream5/1920/1080', + // createdAt: '2024-11-05T08:30:00Z', + // }, + // { + // id: 'stream_6', + // title: 'FIFA 위클리 매치 도전', + // streamerName: '축구황제', + // viewers: 5789, + // category: 'EA FC 24', + // categoryId: 6, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream6', + // thumbnailUrl: 'https://picsum.photos/seed/stream6/1920/1080', + // createdAt: '2024-11-05T13:20:00Z', + // }, + // { + // id: 'stream_7', + // title: '던파 신캐릭터 육성중', + // streamerName: '던파고수', + // viewers: 1234, + // category: '던전앤파이터', + // categoryId: 7, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream7', + // thumbnailUrl: 'https://picsum.photos/seed/stream7/1920/1080', + // createdAt: '2024-11-05T14:45:00Z', + // }, + // { + // id: 'stream_8', + // title: '스타 래더 클라이밍', + // streamerName: '테란장인', + // viewers: 6543, + // category: '스타크래프트', + // categoryId: 8, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream8', + // thumbnailUrl: 'https://picsum.photos/seed/stream8/1920/1080', + // createdAt: '2024-11-05T07:15:00Z', + // }, + // { + // id: 'stream_9', + // title: '디아블로4 시즌2 스타트!', + // streamerName: '악마사냥꾼', + // viewers: 4891, + // category: '디아블로 IV', + // categoryId: 9, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream9', + // thumbnailUrl: 'https://picsum.photos/seed/stream9/1920/1080', + // createdAt: '2024-11-05T15:30:00Z', + // }, + // { + // id: 'stream_10', + // title: '오버워치 그마 달성기', + // streamerName: '워치맨', + // viewers: 3567, + // category: '오버워치 2', + // categoryId: 10, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream10', + // thumbnailUrl: 'https://picsum.photos/seed/stream10/1920/1080', + // createdAt: '2024-11-05T06:45:00Z', + // }, + // { + // id: 'stream_11', + // title: '쿠키런 신캐 뽑기 가즈아', + // streamerName: '쿠키마스터', + // viewers: 2134, + // category: '쿠키런: 킹덤', + // categoryId: 11, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream11', + // thumbnailUrl: 'https://picsum.photos/seed/stream11/1920/1080', + // createdAt: '2024-11-05T16:10:00Z', + // }, + // { + // id: 'stream_12', + // title: '마인크래프트 건축 방송', + // streamerName: '마크장인', + // viewers: 1876, + // category: 'Minecraft', + // categoryId: 12, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream12', + // thumbnailUrl: 'https://picsum.photos/seed/stream12/1920/1080', + // createdAt: '2024-11-05T05:30:00Z', + // }, + // { + // id: 'stream_13', + // title: '폴가이즈 우승 달리기', + // streamerName: '폴가이저', + // viewers: 945, + // category: 'Fall Guys', + // categoryId: 13, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream13', + // thumbnailUrl: 'https://picsum.photos/seed/stream13/1920/1080', + // createdAt: '2024-11-05T17:00:00Z', + // }, + // { + // id: 'stream_14', + // title: 'apex 프레데터 가보자', + // streamerName: '에이펙신', + // viewers: 7823, + // category: 'Apex Legends', + // categoryId: 14, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream14', + // thumbnailUrl: 'https://picsum.photos/seed/stream14/1920/1080', + // createdAt: '2024-11-05T04:45:00Z', + // }, + // { + // id: 'stream_15', + // title: '로스트아크 일일숙제', + // streamerName: '로아달인', + // viewers: 5432, + // category: 'Lost Ark', + // categoryId: 15, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream15', + // thumbnailUrl: 'https://picsum.photos/seed/stream15/1920/1080', + // createdAt: '2024-11-05T17:45:00Z', + // }, + // { + // id: 'stream_16', + // title: '고양이랑 게임방송', + // streamerName: '냥스트리머', + // viewers: 2567, + // category: 'Just Chatting', + // categoryId: 16, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream16', + // thumbnailUrl: 'https://picsum.photos/seed/stream16/1920/1080', + // createdAt: '2024-11-05T03:15:00Z', + // }, + // { + // id: 'stream_17', + // title: '홀리데이 스페셜 방송', + // streamerName: '파티퀸', + // viewers: 3891, + // category: 'Just Chatting', + // categoryId: 17, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream17', + // thumbnailUrl: 'https://picsum.photos/seed/stream17/1920/1080', + // createdAt: '2024-11-05T18:30:00Z', + // }, + // { + // id: 'stream_18', + // title: '스팀 신작 리뷰', + // streamerName: '게임평론가', + // viewers: 4123, + // category: 'Just Chatting', + // categoryId: 18, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream18', + // thumbnailUrl: 'https://picsum.photos/seed/stream18/1920/1080', + // createdAt: '2024-11-05T02:00:00Z', + // }, + // { + // id: 'stream_19', + // title: '모바일 게임 정보 방송', + // streamerName: '모바일러', + // viewers: 1567, + // category: 'Just Chatting', + // categoryId: 19, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream19', + // thumbnailUrl: 'https://picsum.photos/seed/stream19/1920/1080', + // createdAt: '2024-11-05T19:15:00Z', + // }, + // { + // id: 'stream_20', + // title: 'PS5 신작 플레이', + // streamerName: '콘솔킹', + // viewers: 6789, + // category: 'Just Chatting', + // categoryId: 20, + // profileImgUrl: 'https://api.dicebear.com/7.x/personas/svg?seed=stream20', + // thumbnailUrl: 'https://picsum.photos/seed/stream20/1920/1080', + // createdAt: '2024-11-05T01:30:00Z', + // }, +]; + +export default mockChannels; diff --git a/Frontend/src/pages/HomePage/index.tsx b/Frontend/src/pages/HomePage/index.tsx index 4b995410..06c672ec 100644 --- a/Frontend/src/pages/HomePage/index.tsx +++ b/Frontend/src/pages/HomePage/index.tsx @@ -1,5 +1,5 @@ -import mockChannels from '@mocks/mockChannels'; import ChannelGrid from '@components/channel/ChannelGrid'; +import mockChannels from '@mocks/mockChannels'; function HomePage() { return ( From 7dd5d872798c41d7cad5e0e862579a05b6e0b383 Mon Sep 17 00:00:00 2001 From: pc5401 Date: Tue, 3 Dec 2024 01:36:40 +0900 Subject: [PATCH 27/41] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EA=B0=80=EA=B3=84?= =?UTF-8?q?=EC=A0=95=20=EB=8B=89=EB=84=A4=EC=9E=84=20=ED=98=95=EC=9A=A9?= =?UTF-8?q?=EC=82=AC=20+=20=EB=AA=85=EC=82=AC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/src/auth/strategies/lico.strategy.ts | 10 ++++++-- .../api/src/auth/strategies/nickname-data.ts | 25 +++++++++++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 Backend/apps/api/src/auth/strategies/nickname-data.ts diff --git a/Backend/apps/api/src/auth/strategies/lico.strategy.ts b/Backend/apps/api/src/auth/strategies/lico.strategy.ts index 9bf70442..7fcf8dcf 100644 --- a/Backend/apps/api/src/auth/strategies/lico.strategy.ts +++ b/Backend/apps/api/src/auth/strategies/lico.strategy.ts @@ -2,6 +2,7 @@ import { Strategy } from 'passport-custom'; import { PassportStrategy } from '@nestjs/passport'; import { Injectable } from '@nestjs/common'; import * as crypto from 'crypto'; +import { adjectives, nouns } from './nickname-data' @Injectable() export class LicoStrategy extends PassportStrategy(Strategy, 'lico') { @@ -9,10 +10,15 @@ export class LicoStrategy extends PassportStrategy(Strategy, 'lico') { try { const oauthUid = crypto.randomBytes(16).toString('hex'); + // 랜덤 닉네임 생성 + const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)]; + const randomNoun = nouns[Math.floor(Math.random() * nouns.length)]; + const nickname = `${randomAdjective} ${randomNoun}`; + const userData = { oauthUid, provider: 'lico' as 'lico', - nickname: `User_${oauthUid.substring(0, 8)}`, + nickname, profileImage: null, email: null, }; @@ -22,4 +28,4 @@ export class LicoStrategy extends PassportStrategy(Strategy, 'lico') { done(error, false); } } -} +} \ No newline at end of file diff --git a/Backend/apps/api/src/auth/strategies/nickname-data.ts b/Backend/apps/api/src/auth/strategies/nickname-data.ts new file mode 100644 index 00000000..79163381 --- /dev/null +++ b/Backend/apps/api/src/auth/strategies/nickname-data.ts @@ -0,0 +1,25 @@ +export const adjectives = [ + '용감한', '배고픈', '행복한', '슬픈', '귀여운', + '똑똑한', '멋진', '예쁜', '강한', '부드러운', + '신나는', '즐거운', '차가운', '뜨거운', '재미있는', + '친절한', '성실한', '조용한', '시끄러운', '빠른', + '느린', '젊은', '늙은', '건강한', '아픈', + '화난', '놀란', '긴장한', '자신감있는', '호기심많은', + '사랑스러운', '섹시한', '차분한', '활발한', '용의주도한', + '검소한', '풍요로운', '예의바른', '거친', '부지런한', + '게으른', '독특한', '평범한', '엄격한', '유연한', + '진지한', '명랑한', '냉정한', '따뜻한', '낙천적인', +]; + +export const nouns = [ + '사자', '호랑이', '토끼', '코끼리', '독수리', + '고래', '감자', '토마토', '사과', '바나나', + '강아지', '고양이', '여우', '늑대', '곰', + '펭귄', '기린', '원숭이', '돼지', '닭', + '양', '염소', '소', '말', '다람쥐', + '독사', '표범', '하마', '코뿔소', '캥거루', + '수달', '돌고래', '새우', '게', '불가사리', + '달팽이', '나비', '벌', '개미', '거미', + '두꺼비', '개구리', '뱀', '도마뱀', '악어', + '코알라', '판다', '사슴', '너구리', '오소리', +]; From e0841cfb891ad7681cd530cf5159a5fc5c21afcb Mon Sep 17 00:00:00 2001 From: pc5401 Date: Tue, 3 Dec 2024 01:47:17 +0900 Subject: [PATCH 28/41] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=9C=A0=EC=A0=80=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=8B=9C=20live=20=EC=A0=95=EB=B3=B4=20de?= =?UTF-8?q?fault=20=EA=B0=92=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Backend/apps/api/src/users/users.service.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Backend/apps/api/src/users/users.service.ts b/Backend/apps/api/src/users/users.service.ts index 36f49e33..89fc2cb8 100644 --- a/Backend/apps/api/src/users/users.service.ts +++ b/Backend/apps/api/src/users/users.service.ts @@ -59,10 +59,10 @@ export class UsersService { async createUser(createUserDto: CreateUserDto): Promise { return this.connection.transaction(async manager => { const live = manager.create(LiveEntity, { - categoriesId: null, + categoriesId: 4, channelId: randomUUID(), - name: null, - description: null, + name: `${createUserDto.nickname}의 라이브 방송`, + description: `${createUserDto.nickname}의 라이브 방송입니다`, streamingKey: randomUUID(), onAir: false, startedAt: null, From bf42846801a3b08d61f0868499c9d3193ef368e8 Mon Sep 17 00:00:00 2001 From: skdltn210 Date: Tue, 3 Dec 2024 04:27:47 +0900 Subject: [PATCH 29/41] =?UTF-8?q?=F0=9F=92=84=20Style:=20WebStudio=20UI=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/StudioPage/Modals/CamMicSetting.tsx | 6 +++--- .../src/pages/StudioPage/Modals/StreamGuide.tsx | 13 +++++++++++-- Frontend/src/pages/StudioPage/index.tsx | 2 +- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/Frontend/src/pages/StudioPage/Modals/CamMicSetting.tsx b/Frontend/src/pages/StudioPage/Modals/CamMicSetting.tsx index 969823fd..8352ab84 100644 --- a/Frontend/src/pages/StudioPage/Modals/CamMicSetting.tsx +++ b/Frontend/src/pages/StudioPage/Modals/CamMicSetting.tsx @@ -254,17 +254,17 @@ export default function CamMicSetting({ isOpen, onClose }: CamMicSettingProps) {
    -
    +
    From b3b471ebb355e3a2c5e7368082367bb28ab03c46 Mon Sep 17 00:00:00 2001 From: pc5401 Date: Tue, 3 Dec 2024 10:57:10 +0900 Subject: [PATCH 31/41] =?UTF-8?q?=F0=9F=94=A7=20Chore:=20=EA=B0=80?= =?UTF-8?q?=EA=B3=84=EC=A0=95=20url=20lico/guest=EB=A1=9C=20=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Backend/apps/api/src/auth/auth.controller.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Backend/apps/api/src/auth/auth.controller.ts b/Backend/apps/api/src/auth/auth.controller.ts index b26a5c16..e2e6147e 100644 --- a/Backend/apps/api/src/auth/auth.controller.ts +++ b/Backend/apps/api/src/auth/auth.controller.ts @@ -34,7 +34,7 @@ export class AuthController { return this.handleOAuthCallback(req, res); } - @Get('lico/callback') + @Get('lico/guest') @UseGuards(AuthGuard('lico')) async licoAuthCallback(@Req() req: Request & { user: any }, @Res() res: Response) { return this.handleOAuthCallback(req, res); From 015e9eb461bb04a613acd1842a0e5c6f9de19598 Mon Sep 17 00:00:00 2001 From: skdltn210 Date: Tue, 3 Dec 2024 11:21:51 +0900 Subject: [PATCH 32/41] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20?= =?UTF-8?q?=EA=B2=8C=EC=8A=A4=ED=8A=B8=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EA=B3=BC=EC=A0=95=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/apis/auth.ts | 10 +++---- Frontend/src/config/env.ts | 4 --- Frontend/src/hooks/useAuth.ts | 36 ++++++++++++-------------- Frontend/src/pages/LoginPage/index.tsx | 4 +-- Frontend/src/types/auth.ts | 2 +- 5 files changed, 24 insertions(+), 32 deletions(-) diff --git a/Frontend/src/apis/auth.ts b/Frontend/src/apis/auth.ts index 8d0977b7..543c5f96 100644 --- a/Frontend/src/apis/auth.ts +++ b/Frontend/src/apis/auth.ts @@ -14,14 +14,14 @@ export const authApi = { async handleCallback(params: AuthCallbackParams): Promise { const { provider, code, state } = params; - if (provider === 'lico') { - const response = await api.get(`/auth/${provider}/callback`); - return response.data; - } - const response = await api.get(`/auth/${provider}/callback`, { params: { code, state }, }); return response.data; }, + + async guestLogin(): Promise { + const response = await api.post('/auth/lico/guest'); + return response.data; + }, }; diff --git a/Frontend/src/config/env.ts b/Frontend/src/config/env.ts index 7ccb055d..ac268678 100644 --- a/Frontend/src/config/env.ts +++ b/Frontend/src/config/env.ts @@ -20,10 +20,6 @@ export const config = { clientId: import.meta.env.VITE_GITHUB_CLIENT_ID, redirectUri: `${import.meta.env.VITE_AUTH_REDIRECT_BASE_URL}/auth/github/callback`, }, - lico: { - clientId: '', - redirectUri: '', - }, }, webrtcUrl: import.meta.env.VITE_WEBRTC_URL, whipUrl: import.meta.env.VITE_WHIP_URL, diff --git a/Frontend/src/hooks/useAuth.ts b/Frontend/src/hooks/useAuth.ts index 397d6b83..b21edc80 100644 --- a/Frontend/src/hooks/useAuth.ts +++ b/Frontend/src/hooks/useAuth.ts @@ -37,26 +37,9 @@ export function useAuth() { } }; - const login = async (provider: Provider) => { - try { - if (provider === 'lico') { - const response = await authApi.handleCallback({ provider, code: '', state: null }); - if (response.success) { - setAuth({ - accessToken: response.accessToken, - user: response.user, - }); - navigate(-2); - } - return; - } - - const url = getOAuthUrl(provider); - window.location.href = url; - } catch (error) { - console.error('로그인 처리 중 오류:', error); - navigate('/login'); - } + const login = (provider: Provider) => { + const url = getOAuthUrl(provider); + window.location.href = url; }; const handleCallback = async (params: AuthCallbackParams) => { @@ -95,10 +78,23 @@ export function useAuth() { } }; + const guestLogin = async () => { + try { + const response = await authApi.guestLogin(); + setAuth({ + accessToken: response.accessToken, + user: response.user, + }); + } catch { + navigate('/login'); + } + }; + return { login, handleCallback, logout, refreshToken, + guestLogin, }; } diff --git a/Frontend/src/pages/LoginPage/index.tsx b/Frontend/src/pages/LoginPage/index.tsx index c4f4fceb..e37bd3ec 100644 --- a/Frontend/src/pages/LoginPage/index.tsx +++ b/Frontend/src/pages/LoginPage/index.tsx @@ -2,7 +2,7 @@ import { useAuth } from '@hooks/useAuth'; import { Naver, Google, Github } from '@assets/icons/socialLoginIcons'; export default function LoginPage() { - const { login } = useAuth(); + const { login, guestLogin } = useAuth(); return (
    @@ -35,7 +35,7 @@ export default function LoginPage() { 깃허브 로그인
    - {/*
    - -
    - - -
    -
    */}