') ?? '' + }" + }`, + headers: { + 'content-type': 'application/json', + }, + }); + } + if (textAreaRef.current) textAreaRef.current.value = ''; + }; + + const exitChat = () => { + if (stomp) { + stomp.publish({ + destination: `/pub/chat/${props.data?.sessionId}`, + body: `{ + "type": "EXIT", + "sender": "${userName}", + "channelId": "${props.data?.sessionId}", + "data": "'${userName}' 님이 종료하셨습니다." + }`, + }); + } + setTimeout(() => { + if (chatWrapRef.current) { + chatWrapRef.current.scrollTop = chatWrapRef.current.scrollHeight; + } + stomp?.deactivate(); + }, 100); + }; + + React.useEffect(() => { + joinChat(); + }, []); + + React.useEffect(() => { + if (stomp) { + textAreaRef.current?.addEventListener('keypress', (event) => { + if (event.key === 'Enter' && !event.shiftKey) { + event.preventDefault(); + sendChat(); + } + }); + } + return () => { + exitChat(); + }; + }, [stomp]); + + return ( +
+ {chats.map((data, idx) => {
+ if (data.type === 'ENTER' || data.type === 'EXIT') {
+ return (
+
+
+ {nickname}{' '}
+
+
+ );
+};
+
+const MyChat = ({ chat }: { chat: string }) => {
+ return (
+
+
+
+ );
+};
+
+const InitUserChat = ({ chat }: { chat: string }) => {
+ return (
+
+ {chat}
+
+ );
+};
+
+export default ChatInfo;
diff --git a/apps/web/src/components/live/Publisher.tsx b/apps/web/src/components/live/Publisher.tsx
new file mode 100644
index 00000000..7ca12cef
--- /dev/null
+++ b/apps/web/src/components/live/Publisher.tsx
@@ -0,0 +1,211 @@
+import { Button } from '@supercarmarket/ui';
+import { useRouter } from 'next/router';
+import { OpenVidu, Publisher as Publishers, Session } from 'openvidu-browser';
+import * as React from 'react';
+import SubscriberIcon from 'public/images/live/icons/SubscriberIcon.svg';
+import VolumeIcon from 'public/images/live/icons/VolumeIcon.svg';
+import CameraCloseIcon from 'public/images/live/icons/CameraCloseIcon.svg';
+import { getOpenViduSessionToken } from 'http/server/live';
+import { useDeleteBroadCastRoom } from 'http/server/live/mutaitons';
+import { useQueryClient } from '@tanstack/react-query';
+import { QUERY_KEYS } from 'http/server/live/keys';
+import { getSession } from 'next-auth/react';
+
+interface Props {
+ sessionId: string;
+ data: Live.LiveRoomDto;
+ setIsBroad: (broad: boolean) => void;
+ isBroad: boolean;
+ liveViewCount: number | undefined;
+}
+
+function Publisher(props: Props) {
+ const { isBroad, setIsBroad, sessionId, data } = props;
+ const newOV = new OpenVidu();
+ const [volume, setVolume] = React.useState
+
+ );
+}
+
+export default Publisher;
+
+const publisherStyle = {
+ fontSize: '16px',
+ fontWeight: '500',
+ lineHeight: '150%',
+};
+
+const subscriberStyle = {
+ marginLeft: '8px',
+ fontSize: '16px',
+ lineHeight: '120%',
+};
+
+const liveTitleStyle = {
+ marginTop: '8px',
+ fontSize: '20px',
+ fontWeight: '700',
+ lineHeight: '120%',
+};
+
+const hashtagStyle = {
+ color: '#725B30',
+ fontSize: '14px',
+ lineHeight: '150%',
+};
diff --git a/apps/web/src/components/live/Subscriber.tsx b/apps/web/src/components/live/Subscriber.tsx
new file mode 100644
index 00000000..3cf75d30
--- /dev/null
+++ b/apps/web/src/components/live/Subscriber.tsx
@@ -0,0 +1,165 @@
+import * as React from 'react';
+import { useRouter } from 'next/router';
+import { OpenVidu, Session, Subscriber } from 'openvidu-browser';
+import { Button } from '@supercarmarket/ui';
+import SubscriberIcon from 'public/images/live/icons/SubscriberIcon.svg';
+import VolumeIcon from 'public/images/live/icons/VolumeIcon.svg';
+import { getOpenViduSessionToken } from 'http/server/live';
+import { getSession } from 'next-auth/react';
+
+interface Props {
+ sessionId: string;
+ data: Live.LiveRoomDto;
+ setIsBroad: (broad: boolean) => void;
+ isBroad: boolean;
+ liveViewCount: number | undefined;
+}
+
+function Subscribers(props: Props) {
+ const { isBroad, setIsBroad, sessionId, data, liveViewCount } = props;
+ const newOV = new OpenVidu();
+ const [volume, setVolume] = React.useState
+
+
+
+
+
+
+
+
+
+ {data?.userName}
+
+
+ {props.liveViewCount || 0}
+
+
+ {data?.title}
+
+
+ {data?.tags.map((data) => `#${data}`)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Subscribers;
+
+const publisherStyle = {
+ fontSize: '16px',
+ fontWeight: '500',
+ lineHeight: '150%',
+};
+
+const subscriberStyle = {
+ marginLeft: '8px',
+ fontSize: '16px',
+ lineHeight: '120%',
+};
+
+const liveTitleStyle = {
+ marginTop: '8px',
+ fontSize: '20px',
+ fontWeight: '700',
+ lineHeight: '120%',
+};
+
+const hashtagStyle = {
+ color: '#725B30',
+ fontSize: '14px',
+ lineHeight: '150%',
+};
diff --git a/apps/web/src/components/live/modal/index.tsx b/apps/web/src/components/live/modal/index.tsx
new file mode 100644
index 00000000..72747c83
--- /dev/null
+++ b/apps/web/src/components/live/modal/index.tsx
@@ -0,0 +1,58 @@
+import React, { ReactNode, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+
+interface I_modalProps {
+ open: boolean;
+ children?: ReactNode;
+}
+
+/**
+ * @param open isOpen Modal boolean, Default: false
+ */
+const Modal = ({ open, children }: I_modalProps) => {
+ useEffect(() => {
+ if (open) window.document.body.style.overflow = 'hidden';
+ else window.document.body.style.overflow = 'auto';
+ }, [open]);
+
+ if (open) {
+ const el = document.body;
+ return ReactDOM.createPortal(
+
+
+
+
+
+
+
+
+
+ {data?.userName}
+
+
+ {liveViewCount || 0}
+
+
+ {data?.title}
+
+
+ {data?.tags.map((data) => `#${data}`)}
+
+
+
+
+
+
+
+
+
+
+ {
+ event.stopPropagation();
+ }}
+ >
+
,
+ el
+ );
+ } else return null;
+};
+
+export default Modal;
diff --git a/apps/web/src/constants/form/live.ts b/apps/web/src/constants/form/live.ts
new file mode 100644
index 00000000..22d50027
--- /dev/null
+++ b/apps/web/src/constants/form/live.ts
@@ -0,0 +1,6 @@
+export interface FormState {
+ title: string;
+ file: File[];
+ show: string;
+ password?: string;
+}
diff --git a/apps/web/src/http/core/index.ts b/apps/web/src/http/core/index.ts
index 91bb682a..c1ead123 100644
--- a/apps/web/src/http/core/index.ts
+++ b/apps/web/src/http/core/index.ts
@@ -21,7 +21,8 @@ const setRequest = async (
) => {
const session = await getSession();
- if (!session?.accessToken) throw 'require logged in';
+ if (!session?.accessToken)
+ throw new HttpError({ message: '로그인이 필요합니다.', statusCode: 401 });
if (config && config.headers)
config.headers = {
@@ -40,6 +41,9 @@ const setResponse = async (response: AxiosResponse) => {
authRequest.interceptors.request.use(setRequest);
authRequest.interceptors.response.use(setResponse, (error) => {
const { request, response } = error;
+
+ if (!response) throw error;
+
const errorJson = response.data;
const customErr = HttpError.fromRequest(request, {
diff --git a/apps/web/src/http/server/live/apis.ts b/apps/web/src/http/server/live/apis.ts
new file mode 100644
index 00000000..d4d8bcc5
--- /dev/null
+++ b/apps/web/src/http/server/live/apis.ts
@@ -0,0 +1,78 @@
+import { post } from '@supercarmarket/lib';
+import { authRequest } from 'http/core';
+
+export const getBroadCast = async (
+ query: {
+ page: number;
+ pageSize: number;
+ } = {
+ page: 1,
+ pageSize: 16,
+ }
+) => {
+ return authRequest('/live', {
+ method: 'GET',
+ params: query,
+ }).then((result) => {
+ return result as unknown as Common.PaginationResponse
+ {children}
+
+
+
+ {tags}
+
+ );
+};
diff --git a/apps/web/src/pages/live/[Channel].tsx b/apps/web/src/pages/live/[Channel].tsx
new file mode 100644
index 00000000..ce602594
--- /dev/null
+++ b/apps/web/src/pages/live/[Channel].tsx
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { Container } from '@supercarmarket/ui';
+import Layout from 'components/layout';
+import Publisher from 'components/live/Publisher';
+import Subscriber from 'components/live/Subscriber';
+import ChatInfo from 'components/live/ChatInfo';
+import { useBroadCastRoom } from 'http/server/live/queries';
+import {
+ type GetServerSideProps,
+ type InferGetServerSidePropsType,
+} from 'next';
+import { type NextPageWithLayout } from '@supercarmarket/types/base';
+
+export interface broadContextParm {
+ liveViewCount: number;
+ setLiveViewCount: React.SetStateAction deleteTagsHandler(index)}
+ style={{ marginLeft: '2px', cursor: 'pointer' }}
+ >
+
+ loading..
;
+
+ return (
+
+ {broadCastRoom.data && (
+ <>
+
+
+ {data ? (
+ data.isMine ? (
+
+ );
+};
diff --git a/apps/web/src/pages/live/index.tsx b/apps/web/src/pages/live/index.tsx
new file mode 100644
index 00000000..82cfb0e2
--- /dev/null
+++ b/apps/web/src/pages/live/index.tsx
@@ -0,0 +1,306 @@
+import * as React from 'react';
+import {
+ Button,
+ Container,
+ Title,
+ Wrapper,
+ Pagination,
+ Typography,
+ applyMediaQuery,
+ Input,
+} from '@supercarmarket/ui';
+import Layout from 'components/layout';
+import { css } from 'styled-components';
+import { useBroadCast } from 'http/server/live/queries';
+import { type NextPageWithLayout } from '@supercarmarket/types/base';
+import { useRouter } from 'next/router';
+import Modal from 'components/live/modal';
+import { checkIsMakeRoom, checkPasswordRoom } from 'http/server/live';
+
+import LockerIcon from 'public/images/live/icons/LockerIcon.svg';
+
+const Index: NextPageWithLayout = () => {
+ const {
+ data: broadCast,
+ isLoading,
+ isFetching,
+ } = useBroadCast({
+ page: 1,
+ pageSize: 16,
+ });
+
+ const router = useRouter();
+
+ if (isLoading || isFetching || !broadCast) return loading..
;
+
+ const checkUserAuth = async () => {
+ let isMakeRoom = false;
+
+ await checkIsMakeRoom()
+ .then((response) => {
+ isMakeRoom = true;
+ })
+ .catch((error) => {
+ alert(error);
+ });
+
+ if (!isMakeRoom) {
+ return;
+ }
+ router.push('/live/Create');
+ };
+
+ return (
+
+
+
+ 
+ {data.isPrivate && (
+ <>
+
+
+
+ )}
+
+
+
+ {data.name}
+
+
+ {data.title}
+
+
+ {data.tags.map((data: string) => {
+ return `#${data}`;
+ })}
+
+
+
+
+
+
+ );
+};
+
+const PasswordModal = ({
+ roomData,
+ setIsOpen,
+}: {
+ roomData: LiveItem;
+ setIsOpen: (prev: boolean) => void;
+}) => {
+ const router = useRouter();
+
+ const passwordInputRef = React.useRef