Merge pull request #292 from boostcampwm-2024/Fix/290

[Fix] 불필요한 Promise & try-catch 삭제 및 화면 공유 중단 시 처리 추가
boostcampwm-2024 · Nov 28, 2024 · b43e292 · b43e292
2 parents 33dd21c + c18b418
commit b43e292
Show file tree

Hide file tree

Showing 25 changed files with 213 additions and 246 deletions.
diff --git a/apps/chat/src/auth/jwt-auth.strategy.ts b/apps/chat/src/auth/jwt-auth.strategy.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { PassportStrategy } from '@nestjs/passport';
 import { ExtractJwt, Strategy } from 'passport-jwt';
-import { IPayLoad } from './\bpayload.interface';
+import { IPayLoad } from './payload.interface';
 
 @Injectable()
 export class JWTAuthStrategy extends PassportStrategy(Strategy) {

diff --git a/apps/client/src/components/Icons/BlogIcon.tsx b/apps/client/src/components/Icons/BlogIcon.tsx
@@ -9,7 +9,7 @@ function BlogIcon({ size = 24, className = '' }: IconProps) {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       width={size}
       height={size}

diff --git a/apps/client/src/components/Icons/CloseIcon.tsx b/apps/client/src/components/Icons/CloseIcon.tsx
@@ -9,7 +9,7 @@ function CloseIcon({ size = 24, className }: IconProps) {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className={className}
       width={size}

diff --git a/apps/client/src/components/Icons/EditIcon.tsx b/apps/client/src/components/Icons/EditIcon.tsx
@@ -4,7 +4,7 @@ function EditIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/ExpandIcon.tsx b/apps/client/src/components/Icons/ExpandIcon.tsx
@@ -4,7 +4,7 @@ function ExpandIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/MailIcon.tsx b/apps/client/src/components/Icons/MailIcon.tsx
@@ -9,7 +9,7 @@ function MailIcon({ size = 24, className = '' }: IconProps) {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       width={size}
       height={size}

diff --git a/apps/client/src/components/Icons/MicrophoneOffIcon.tsx b/apps/client/src/components/Icons/MicrophoneOffIcon.tsx
@@ -4,7 +4,7 @@ function MicrophoneOffIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/MicrophoneOnIcon.tsx b/apps/client/src/components/Icons/MicrophoneOnIcon.tsx
@@ -4,7 +4,7 @@ function MicrophoneOnIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/MonitorShareIcon.tsx b/apps/client/src/components/Icons/MonitorShareIcon.tsx
diff --git a/apps/client/src/components/Icons/PauseIcon.tsx b/apps/client/src/components/Icons/PauseIcon.tsx
@@ -4,7 +4,7 @@ function PauseIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/PlayIcon.tsx b/apps/client/src/components/Icons/PlayIcon.tsx
@@ -4,7 +4,7 @@ function PlayIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/ScreenShareIcon.tsx b/apps/client/src/components/Icons/ScreenShareIcon.tsx
@@ -0,0 +1,22 @@
+interface IconProps {
+  size?: number;
+  className?: string;
+}
+
+function ScreenShareIcon({ size = 24, className = '' }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      strokeWidth={1.5}
+      width={size}
+      height={size}
+      className={className}
+    >
+      <path d="M22,15.184v-7.184c0-2.757-2.243-5-5-5H7c-2.757,0-5,2.243-5,5v7.184c-1.161,.414-2,1.514-2,2.816,0,1.654,1.346,3,3,3H21c1.654,0,3-1.346,3-3,0-1.302-.839-2.402-2-2.816ZM7,5h10c1.654,0,3,1.346,3,3v7h-4.5c-.265,0-.52,.105-.707,.293l-.707,.707h-4.172l-.707-.707c-.188-.188-.442-.293-.707-.293H4v-7c0-1.654,1.346-3,3-3Zm14,14H3c-.551,0-1-.449-1-1s.449-1,1-1h5.086l.707,.707c.188,.188,.442,.293,.707,.293h5c.265,0,.52-.105,.707-.293l.707-.707h5.086c.551,0,1,.449,1,1s-.449,1-1,1ZM8.337,10.751c-.391-.391-.391-1.023,0-1.414l2.256-2.256c.775-.775,2.038-.775,2.812,0l2.257,2.257c.391,.391,.391,1.023,0,1.414-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-1.249-1.249v3.497c0,.552-.448,1-1,1s-1-.448-1-1v-3.506l-1.249,1.257c-.391,.391-1.023,.391-1.414,0Z" />
+    </svg>
+  );
+}
+
+export default ScreenShareIcon;
diff --git a/apps/client/src/components/Icons/ScreenShareOffIcon.tsx b/apps/client/src/components/Icons/ScreenShareOffIcon.tsx
@@ -0,0 +1,23 @@
+interface IconProps {
+  size?: number;
+  className?: string;
+}
+
+function ScreenShareIconOff({ size = 24, className = '' }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      strokeWidth={1.5}
+      width={size}
+      height={size}
+      className={className}
+    >
+      <path d="M22,15.184v-7.184c0-2.757-2.243-5-5-5H7c-2.757,0-5,2.243-5,5v7.184c-1.161,.414-2,1.514-2,2.816,0,1.654,1.346,3,3,3H21c1.654,0,3-1.346,3-3,0-1.302-.839-2.402-2-2.816ZM7,5h10c1.654,0,3,1.346,3,3v7h-4.5c-.265,0-.52,.105-.707,.293l-.707,.707h-4.172l-.707-.707c-.188-.188-.442-.293-.707-.293H4v-7c0-1.654,1.346-3,3-3Zm14,14H3c-.551,0-1-.449-1-1s.449-1,1-1h5.086l.707,.707c.188,.188,.442,.293,.707,.293h5c.265,0,.52-.105,.707-.293l.707-.707h5.086c.551,0,1,.449,1,1s-.449,1-1,1ZM8.337,10.751c-.391-.391-.391-1.023,0-1.414l2.256-2.256c.775-.775,2.038-.775,2.812,0l2.257,2.257c.391,.391,.391,1.023,0,1.414-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-1.249-1.249v3.497c0,.552-.448,1-1,1s-1-.448-1-1v-3.506l-1.249,1.257c-.391,.391-1.023,.391-1.414,0Z" />
+      <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" rx="2" />
+    </svg>
+  );
+}
+
+export default ScreenShareIconOff;
diff --git a/apps/client/src/components/Icons/SmileIcon.tsx b/apps/client/src/components/Icons/SmileIcon.tsx
@@ -4,7 +4,7 @@ function SmileIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/VideoOffIcon.tsx b/apps/client/src/components/Icons/VideoOffIcon.tsx
@@ -4,7 +4,7 @@ function VideoOffIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/VideoOnIcon.tsx b/apps/client/src/components/Icons/VideoOnIcon.tsx
@@ -4,7 +4,7 @@ function VideoOnIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/VolumeOffIcon.tsx b/apps/client/src/components/Icons/VolumeOffIcon.tsx
@@ -4,7 +4,7 @@ function VolumeOffIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/VolumeOnIcon.tsx b/apps/client/src/components/Icons/VolumeOnIcon.tsx
@@ -4,7 +4,7 @@ function VolumeOnIcon() {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      strokeWidth={2}
       stroke="currentColor"
       className="size-6"
     >

diff --git a/apps/client/src/components/Icons/index.ts b/apps/client/src/components/Icons/index.ts
@@ -9,7 +9,8 @@ export { default as Logo } from './Logo';
 export { default as MailIcon } from './MailIcon';
 export { default as MicrophoneOffIcon } from './MicrophoneOffIcon';
 export { default as MicrophoneOnIcon } from './MicrophoneOnIcon';
-export { default as MonitorShareIcon } from './MonitorShareIcon';
+export { default as ScreenShareIcon } from './ScreenShareIcon';
+export { default as ScreenShareIconOff } from './ScreenShareOffIcon';
 export { default as GoogleIcon } from './GoogleIcon';
 export { default as PauseIcon } from './PauseIcon';
 export { default as PlayIcon } from './PlayIcon';

diff --git a/apps/client/src/hooks/useConsumer.ts b/apps/client/src/hooks/useConsumer.ts
@@ -52,49 +52,36 @@ export const useConsumer = ({ socket, device, roomId, transportInfo, isConnected
 
     setError(null);
 
-    try {
-      const newTransport = device.createRecvTransport({
-        id: transportInfo.transportId,
-        iceParameters: transportInfo.iceParameters,
-        iceCandidates: transportInfo.iceCandidates,
-        dtlsParameters: transportInfo.dtlsParameters,
-      });
-
-      transport.current = newTransport;
-
-      transport.current.on('connect', async ({ dtlsParameters }, callback) => {
-        try {
-          const response = await new Promise<ConnectTransportResponse>((resolve, reject) => {
-            socket.emit(
-              'connectTransport',
-              {
-                roomId,
-                dtlsParameters,
-                transportId: transportInfo.transportId,
-              },
-              (response: ConnectTransportResponse) => {
-                if (response.connected) {
-                  resolve(response);
-                } else {
-                  reject(new Error('Transport connection failed'));
-                }
-              },
-            );
-          });
-
-          callback();
-          return response;
-        } catch (error) {
-          const err = error instanceof Error ? error : new Error('Unknown transport error');
-          setError(err);
-          throw err;
-        }
+    const newTransport = device.createRecvTransport({
+      id: transportInfo.transportId,
+      iceParameters: transportInfo.iceParameters,
+      iceCandidates: transportInfo.iceCandidates,
+      dtlsParameters: transportInfo.dtlsParameters,
+    });
+
+    transport.current = newTransport;
+
+    transport.current.on('connect', async ({ dtlsParameters }, callback) => {
+      const response = await new Promise<ConnectTransportResponse>((resolve, reject) => {
+        socket.emit(
+          'connectTransport',
+          {
+            roomId,
+            dtlsParameters,
+            transportId: transportInfo.transportId,
+          },
+          (response: ConnectTransportResponse) => {
+            if (response.connected) {
+              resolve(response);
+            } else {
+              reject(new Error('Transport connection failed'));
+            }
+          },
+        );
       });
-    } catch (error) {
-      const err = error instanceof Error ? error : new Error('Transport creation failed');
-      setError(err);
-      throw err;
-    }
+      callback();
+      return response;
+    });
   };
 
   const createConsumer = async ({ socket, roomId, transportInfo, transport }: CreateConsumerParams) => {
@@ -107,46 +94,34 @@ export const useConsumer = ({ socket, device, roomId, transportInfo, isConnected
 
     setError(null);
 
-    try {
-      socket.emit(
-        'createConsumer',
-        {
-          roomId,
-          transportId: transportInfo.transportId,
-        },
-        async ({ consumers }: CreateConsumerResponse) => {
-          console.log('createConsumer emit!');
-          const newMediastream = new MediaStream();
-          for (const consumerData of consumers) {
-            try {
-              const consumer = await transport.consume({
-                id: consumerData.consumerId,
-                producerId: consumerData.producerId,
-                rtpParameters: consumerData.rtpParameters,
-                kind: consumerData.kind,
-              });
-
-              if (consumer.track.kind === 'video') {
-                consumer.track.enabled = true;
-              }
-              console.log(consumer);
-              newMediastream.addTrack(consumer.track);
-              consumer.resume();
-            } catch (err) {
-              const error = err instanceof Error ? err : new Error('Consumer creation failed');
-              setError(error);
-              console.error(error);
-            }
+    socket.emit(
+      'createConsumer',
+      {
+        roomId,
+        transportId: transportInfo.transportId,
+      },
+      async ({ consumers }: CreateConsumerResponse) => {
+        console.log('createConsumer emit!');
+        const newMediastream = new MediaStream();
+        for (const consumerData of consumers) {
+          const consumer = await transport.consume({
+            id: consumerData.consumerId,
+            producerId: consumerData.producerId,
+            rtpParameters: consumerData.rtpParameters,
+            kind: consumerData.kind,
+          });
+
+          if (consumer.track.kind === 'video') {
+            consumer.track.enabled = true;
           }
+          console.log(consumer);
+          newMediastream.addTrack(consumer.track);
+          consumer.resume();
+        }
 
-          setMediastream(newMediastream);
-        },
-      );
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error('Consumer initialization failed');
-      setError(error);
-      throw error;
-    }
+        setMediastream(newMediastream);
+      },
+    );
   };
 
   useEffect(() => {