') ?? '' + }" + }`, + 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(() => { + if (stomp) { + textAreaRef.current?.addEventListener('keypress', (event) => { + if (event.key === 'Enter' && !event.shiftKey) { + event.preventDefault(); + sendChat(); + } + }); + } else { + joinChat(); + } + 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..259c0c6a
--- /dev/null
+++ b/apps/web/src/components/live/Publisher.tsx
@@ -0,0 +1,279 @@
+import {
+ Button,
+ Wrapper,
+ applyMediaQuery,
+ deviceQuery,
+} from '@supercarmarket/ui';
+import { useRouter } from 'next/router';
+import {
+ Device,
+ OpenVidu,
+ Publisher as Publishers,
+ Session,
+} from 'openvidu-browser';
+import * as React from 'react';
+import SubscriberIcon from 'public/images/live/icons/SubscriberIcon.svg';
+import MicIcon from 'public/images/live/icons/MicIcon.svg';
+import DisMicIcon from 'public/images/live/icons/DisMicIcon.svg';
+import CameraCloseIcon from 'public/images/live/icons/CameraCloseIcon.svg';
+import CameraOnIcon from 'public/images/live/icons/CameraOnIcon.svg';
+import CameraChangeIcon from 'public/images/live/icons/CameraChangeIcon.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';
+import { css } from 'styled-components';
+import { useMedia } from '@supercarmarket/hooks';
+
+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 [isCamera, setIsCamera] = React.useState
+
+
+
+ {data?.userName}
+
+
+ {props.liveViewCount || 0}
+
+
+ {data?.title}
+
+
+ {data?.tags.map((data) => `#${data}`)}
+
+
+
+ {isMic ?
+
+ {isMobile && (
+
+ )}
+
+
+
+
+
+
+
+ {data?.userName}
+
+
+ {liveViewCount || 0}
+
+
+ {data?.title}
+
+
+ {data?.tags.map((data) => `#${data}`)}
+
+ {!isMobile && (
+
+
+
+ )}
+
+ {volume > 0 ?
+
+
+
+
+
+
+ {
+ event.stopPropagation();
+ }}
+ >
+
,
+ el
+ );
+ } else return null;
+};
+
+export default Modal;
diff --git a/apps/web/src/components/magazine/magazineBanner/magazineBanner.tsx b/apps/web/src/components/magazine/magazineBanner/magazineBanner.tsx
index 5ec6df07..40881e9a 100644
--- a/apps/web/src/components/magazine/magazineBanner/magazineBanner.tsx
+++ b/apps/web/src/components/magazine/magazineBanner/magazineBanner.tsx
@@ -115,7 +115,7 @@ const MagazineBanner = ({
lineHeight="150%"
className={clsx('mb-contents-heading')}
>
- {initialData.title}
+ {truncateOnWord(initialData.title, 50)}
+ {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..520dd0d1
--- /dev/null
+++ b/apps/web/src/pages/live/[Channel].tsx
@@ -0,0 +1,148 @@
+import * as React from 'react';
+import {
+ Container,
+ Wrapper,
+ applyMediaQuery,
+ deviceQuery,
+} 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';
+import { css } from 'styled-components';
+import { useMedia } from '@supercarmarket/hooks';
+import { useRecoilState } from 'recoil';
+import { layoutPropsRecoil } from 'src/recoil/atom';
+
+export interface broadContextParm {
+ liveViewCount: number;
+ setLiveViewCount: React.SetStateAction deleteTagsHandler(index)}
+ style={{ marginLeft: '2px', cursor: 'pointer' }}
+ >
+
+ loading..
;
+
+ 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