Merge pull request #111 from sgdevcamp2025/fe/feat/74-WebRTC

[FE] feat: 미디어 컨트롤러 및 WebRTC 구현

Author: zelkovaria

src/frontend/package.json

@@ -24,6 +24,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.5",
+    "socket.io-client": "^4.8.1",
     "styled-components": "^6.1.14",
     "vite-plugin-mkcert": "^1.17.6",
     "websocket": "^1.0.35",

src/frontend/src/components/guild/GuildCategoriesList/index.tsx

@@ -2,6 +2,7 @@ import { BiHash } from 'react-icons/bi';
 import { BsFillMicFill } from 'react-icons/bs';
 import { TbPlus } from 'react-icons/tb';
 
+import { useChannelActionStore } from '@/stores/channelAction';
 import { GuildChannelInfo, useChannelInfoStore } from '@/stores/channelInfo';
 import { useGuildInfoStore } from '@/stores/guildInfo';
 import useModalStore from '@/stores/modalStore';
@@ -20,13 +21,18 @@ const GuildCategoriesList = ({ categories, channels }: CategoriesListProps) => {
   const { openModal } = useModalStore();
   const { guildId } = useGuildInfoStore();
   const { selectedChannel, setSelectedChannel } = useChannelInfoStore();
+  const { isInVoiceChannel, setIsInVoiceChannel } = useChannelActionStore();
 
   const handleOpenModal = (categoryId: string, guildId: string) => {
     openModal('withFooter', <CreateChannelModal categoryId={categoryId} guildId={guildId} />);
   };
 
   const handleChannelClick = (channelInfo: GuildChannelInfo) => {
     setSelectedChannel({ id: channelInfo.id, name: channelInfo.name, type: channelInfo.type });
+
+    if (channelInfo.type === 'VOICE') {
+      if (!isInVoiceChannel) setIsInVoiceChannel(true);
+    }
   };
 
   return (

src/frontend/src/components/guild/GuildCategory/index.tsx

@@ -25,6 +25,7 @@ const GuildCategory = () => {
   const { data } = useQuery<GuildResultData>({
     queryKey: ['guildInfo', guildId],
     queryFn: () => getGuild(guildId),
+    enabled: !!guildId,
   });
 
   const dropdownItems: DropdownItem[] = [

src/frontend/src/components/guild/GuildList/index.tsx

@@ -11,14 +11,19 @@ import * as S from './styles';
 
 const GuildList = () => {
   const { openModal } = useModalStore();
-  const { setGuildId } = useGuildInfoStore();
+  const { setGuildId, setGuildName } = useGuildInfoStore();
 
   const { data } = useQuery<GuildResponse[]>({ queryKey: ['guildList'], queryFn: getGuilds });
 
   const handleChangeModal = () => {
     openModal('basic', <CreateGuildModalContent />);
   };
 
+  const handleStoreGuildInfo = (guild: GuildResponse) => {
+    setGuildId(guild.guildId);
+    setGuildName(guild.name);
+  };
+
   return (
     <S.GuildList>
       <S.DMButton onClick={() => setGuildId('')}>
@@ -29,7 +34,7 @@ const GuildList = () => {
           key={guild.guildId}
           data-tooltip={guild.name}
           $imageUrl={guild.profileImageUrl}
-          onClick={() => setGuildId(guild.guildId)}
+          onClick={() => handleStoreGuildInfo(guild)}
         />
       ))}
       <S.AddGuildButton onClick={handleChangeModal}>

src/frontend/src/components/guild/VoiceChannelActions/index.tsx

@@ -0,0 +1,41 @@
+import { motion } from 'framer-motion';
+import { BiSolidVideo, BiSolidVideoOff } from 'react-icons/bi';
+import { LuScreenShare } from 'react-icons/lu';
+import { TbConfetti, TbTriangleSquareCircle } from 'react-icons/tb';
+
+import { useChannelActionStore } from '@/stores/channelAction';
+
+import * as S from './styles';
+
+const VoiceChannelActions = () => {
+  const { isInVoiceChannel } = useChannelActionStore();
+
+  const actions = {
+    video: isInVoiceChannel ? <BiSolidVideo size={24} /> : <BiSolidVideoOff size={24} />,
+    screenSharing: <LuScreenShare size={24} />,
+    startActions: <TbTriangleSquareCircle size={24} />,
+    soundBoard: <TbConfetti size={24} />,
+  };
+
+  const bounceAnimation = {
+    y: [0, -5, 0],
+    transition: {
+      duration: 0.6,
+      repeat: 3,
+      repeatType: 'reverse' as const,
+      ease: 'easeInOut',
+    },
+  };
+
+  return (
+    <S.VoiceChannelActions>
+      {Object.entries(actions).map(([key, value]) => (
+        <motion.div key={key} initial={{ y: 0 }} whileHover={bounceAnimation}>
+          <S.Action key={key}>{value}</S.Action>
+        </motion.div>
+      ))}
+    </S.VoiceChannelActions>
+  );
+};
+
+export default VoiceChannelActions;

src/frontend/src/components/guild/VoiceChannelActions/styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const VoiceChannelActions = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: space-evenly;
+
+  margin-top: 1rem;
+
+  svg {
+    color: ${({ theme }) => theme.colors.white};
+  }
+`;
+
+export const Action = styled.div`
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 5rem;
+  height: 3rem;
+  border-radius: 0.8rem;
+
+  background-color: ${({ theme }) => theme.colors.dark[500]};
+`;

src/frontend/src/components/guild/VoiceChannelController/index.tsx

@@ -0,0 +1,57 @@
+import { BsFillTelephoneXFill } from 'react-icons/bs';
+
+import { useChannelActionStore } from '@/stores/channelAction';
+import { useChannelInfoStore } from '@/stores/channelInfo';
+import { useGuildInfoStore } from '@/stores/guildInfo';
+import { useWebRTCStore } from '@/stores/webRTCStore';
+import { tokenAxios } from '@/utils/axios';
+
+import VoiceChannelActions from '../VoiceChannelActions';
+
+import * as S from './styles';
+
+const VoiceChannelController = () => {
+  const { selectedChannel } = useChannelInfoStore();
+  const { setIsInVoiceChannel } = useChannelActionStore();
+  const { guildName } = useGuildInfoStore();
+  const { setIsStompConnected, disconnectStomp } = useWebRTCStore();
+
+  const roomId = useChannelInfoStore((state) => state.selectedChannel?.name);
+
+  const handleLeaveRoom = async () => {
+    setIsInVoiceChannel(false);
+
+    if (!roomId) {
+      alert('방 ID를 입력해주세요!');
+      return;
+    }
+
+    try {
+      const response = await tokenAxios.delete(`https://api.jungeunjipi.com/room/${roomId}/leave`);
+      console.log('방 나가기 성공: ', response);
+
+      setIsStompConnected(false);
+
+      disconnectStomp();
+    } catch (error) {
+      console.error('🚨 방 나가기 오류:', error);
+    }
+  };
+
+  return (
+    <S.VoiceChannelController>
+      <S.ConnectStatusWrapper>
+        <S.InfoText>
+          <S.ConnectStatusText>음성 연결됨</S.ConnectStatusText>
+          <S.ChannelInfoText>
+            {selectedChannel?.name} / {guildName}
+          </S.ChannelInfoText>
+        </S.InfoText>
+        <BsFillTelephoneXFill size={20} onClick={handleLeaveRoom} />
+      </S.ConnectStatusWrapper>
+      <VoiceChannelActions />
+    </S.VoiceChannelController>
+  );
+};
+
+export default VoiceChannelController;

src/frontend/src/components/guild/VoiceChannelController/styles.ts

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+import { ChipText, SmallText } from '@/styles/Typography';
+
+export const VoiceChannelController = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  padding: 1rem;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.dark[450]};
+
+  background-color: ${({ theme }) => theme.colors.dark[750]};
+`;
+
+export const InfoText = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ConnectStatusText = styled(ChipText)`
+  font-size: 1.5rem;
+  color: ${({ theme }) => theme.colors.lightGreen};
+`;
+
+export const ChannelInfoText = styled(SmallText)`
+  color: ${({ theme }) => theme.colors.dark[350]};
+`;
+
+export const ConnectStatusWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  svg {
+    cursor: pointer;
+    color: ${({ theme }) => theme.colors.white};
+  }
+`;

src/frontend/src/constants/endPoint.ts

@@ -11,6 +11,7 @@ export const endPoint = {
     POST_AUTHENTICATION_CODE: '/users/validation/authentication-code',
     POST_SIGN_UP: '/users/sign-up',
     POST_SIGN_IN: '/users/sign-in',
+    GET_USER_ID: '/users/user/id',
   },
 
   friends: {

src/frontend/src/pages/ChannelPage/components/VideoCard/index.tsx

@@ -0,0 +1,30 @@
+import * as S from './styles';
+
+interface VideoCardProps {
+  userId: string;
+  stream?: MediaStream;
+  localRef?: React.MutableRefObject<HTMLVideoElement | null>;
+}
+
+const VideoCard = ({ userId, stream, localRef }: VideoCardProps) => {
+  return (
+    <S.VideoCard>
+      <S.UserName>{userId}</S.UserName>
+      <S.Video
+        autoPlay
+        playsInline
+        ref={(videoElement) => {
+          if (localRef) {
+            localRef.current = videoElement;
+          }
+
+          if (stream && videoElement && videoElement.srcObject !== stream) {
+            videoElement.srcObject = stream;
+          }
+        }}
+      />
+    </S.VideoCard>
+  );
+};
+
+export default VideoCard;