#19 feat: 음성통화 구현 (#31)

* #19 design: 통화전 배경 수정

* #19 feat: 종속성 추가 & 사용자 마이크 불러오기

* #19 feat: WebRTC 시그널링서버 통신 구현

* #19 fix: 전화 수신 로직 변경

* #19 feat: 통화녹음 구현

* #19 feat: 마이크 뮤트 구현

* #19 feat: 스피커폰(wip) & 통화시간 표시

* #19 fix: 전화 수신 로직 변경

* temp: ChattingPage preoffer적용

* #19 wip: preoffer 수신

* #19 hotfix

* #19 hotfix 2

* #19  hotfix 3

* #19 chore: 주석 정리

package.json

@@ -13,12 +13,14 @@
     "@craco/craco": "^7.1.0",
     "@lottiefiles/dotlottie-react": "^0.10.0",
     "@types/node": "^22.9.0",
+    "@types/recordrtc": "^5.6.14",
     "axios": "^1.7.7",
     "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-calendar": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",
+    "recordrtc": "^5.6.2",
     "require": "^2.4.20",
     "socket.io-client": "^4.8.1",
     "styled-components": "^6.1.13",

src/common/style/voicecall/VoiceCallStyle.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const VoiceCallStyle = {
-  Wrapper: styled.div<{$profileSrc?:string; $dark?:boolean}>`
+  Wrapper: styled.div<{$profileSrc?:string;}>`
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -12,7 +12,7 @@ export const VoiceCallStyle = {
       margin: 0 auto;
       padding: 15vh 2rem 5.6rem 2rem;
       
-      color: ${props => props.$dark ? "white" : props.theme.colors.gray700};
+      color: white;
       ${(props) => props.$profileSrc && `
         background: no-repeat center/cover url("${props.$profileSrc}");
         `}

src/page/component/ComponetsTest.tsx

@@ -7,8 +7,14 @@ import Profile from './Profile';
 import IconExample from '@image/tabBar/chat.svg?react'
 import { ProfileCardMentee, ProfileCardMento } from './ProfileCard';
 import Notification from './Notification';
+import { useNavigate } from 'react-router-dom';
 
 const Index = () => {
+  const navigate = useNavigate();
+  const handleCall = ()=>{
+    const data = {sdp: "sdpdata"}
+    navigate("/voice-call", {state: data})
+  }
   return (
     <St.BtnTestWrapper>
       <St.HomeTitle>테스트</St.HomeTitle>
@@ -27,6 +33,7 @@ const Index = () => {
       <Notification variant='notice' subtitle='상대와 함께 자세한 내용을...'>멘토링이 확정되었어요</Notification>
       <Notification>예약한 시간 10분전부터 전화가 가능해요</Notification>
       <Notification variant='notice' LeftIcon={IconExample} subtitle='with custom Icon'>Notification</Notification>
+      <Button onClick={handleCall}>전화걸기 테스트</Button>
       <ProfileCardMento 
         name='이름' keyword='키워드' profileSrc='https://avatars.githubusercontent.com/u/80196807?s=80&v=4'/>
       <ProfileCardMentee 

src/page/main/chat/chatting/ChattingPage.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import io, { Socket } from 'socket.io-client';
+import { io, Socket } from 'socket.io-client';
+import { useNavigate } from 'react-router-dom';
 
 import Navigation from '@page/component/navi/Navigation';
 import Chatting from './component/Chatting';
@@ -17,9 +18,12 @@ interface MessageData {
   date: string;
 }
 
+const signalUri = import.meta.env.VITE_SOCKET_BASE_URL;
+
 const ChattingPage = () => {
   const [messages, setMessages] = useState<MessageData[]>([]);
   const [showCallButton, setShowCallButton] = useState(true);
+  const navigate = useNavigate();
   let userId = 0;
 
   const handleUserInfo = async () => {
@@ -41,8 +45,8 @@ const ChattingPage = () => {
 
   // Socket 연결
   useEffect(() => {
-    const socket = io(`${import.meta.env.VITE_SOCKET_BASE_URL}`, {
-      query: { roomId: 2 },
+    const socket = io(signalUri, {
+      query: { roomId: 3 },
       withCredentials: true,
     });
     socketRef.current = socket;
@@ -60,9 +64,16 @@ const ChattingPage = () => {
         date: new Date().toLocaleDateString(),
       };
 
+
       setMessages((prevMessages) => [...prevMessages, formattedMessage]);
     });
-
+    socket.on('pre_offer', () => {
+      console.log("got pre_offer");
+      navigate("/voice-call", {state: { 
+        preoffer: true,
+      } });
+    })
+
     return () => {
       socket.disconnect();
     };
@@ -86,8 +97,15 @@ const ChattingPage = () => {
     });
   };
 
+  const handleCall = ({}) => {
+    console.log('handleCall');
+    if(!socketRef.current) return;
+    socketRef.current.emit("pre_offer", {});
+    navigate("/voice-call", { state: {} });
+  };
+
   // 전화 버튼 표시 조건 업데이트
-  const mentoringStartTime = '2024-11-23T17:41:00'; // 임시 시간 데이터
+  const mentoringStartTime = '2024-11-24T03:40:00'; // 임시 시간 데이터
   useEffect(() => {
     const updateCallButtonVisibility = () => {
       const currentTime = new Date();
@@ -117,7 +135,7 @@ const ChattingPage = () => {
       {showCallButton && (
         <St.CallBoxWrapper>
           <CallDescription />
-          <CallButton onClick={() => console.log('handleCall')} />
+          <CallButton onClick={handleCall} />
         </St.CallBoxWrapper>
       )}
       <St.ChattingWrapper>