[FE] FEAT: 음성채팅 구현 #258

src/frontend/package.json

@@ -23,6 +23,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3",
+    "socket.io-client": "^4.8.1",
     "sockjs-client": "1.5.1",
     "stompjs": "^2.3.3",
     "storybook": "^8.4.7",
@@ -45,6 +46,7 @@
     "@testing-library/react": "^16.1.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@types/socket.io-client": "^3.0.0",
     "@types/styled-components": "^5.1.34",
     "@types/youtube": "^0.1.0",
     "@vitejs/plugin-react": "^4.3.4",

src/frontend/src/components/Sidebar/VoiceChat/index.css.ts

@@ -1,13 +1,77 @@
 import styled from 'styled-components';
 
+import {
+  VoiceChatFooter as OriginalFooter,
+  ActionButton as OriginalActionButton,
+  JoinButton as OriginalJoinButton,
+} from '@/components/Sidebar/UserList/index.css.ts';
+
 export const Container = styled.div`
   height: 100%;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: space-between;
 `;
 
+export const ParticipantsPreview = styled.div`
+  flex: 0 0 auto;
+  border-bottom: 1px solid #ddd;
+  overflow-y: auto;
+`;
+
+export const VideoSection = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  justify-content: space-between;
+`;
+
+export const MyVideoSection = styled.p`
+  display: flex;
+  background-color: #eeeeee;
+  border-radius: 10px;
+
+  padding: 10px;
+  align-items: center;
+`;
+
+export const RemoteVideoGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-top: 10px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+`;
+
+export const FooterBar = styled(OriginalFooter)`
+  margin-top: auto;
+  position: static;
+  padding: 10px;
+  border-top: 1px solid #ddd;
+  display: flex;
+  justify-content: center;
+`;
+
+export const ActionButton = styled(OriginalActionButton)`
+  margin: 0 5px;
+`;
+
+export const JoinButton = styled(OriginalJoinButton)`
+  margin-left: 10px;
+`;
+
+//
+
+// export const Container = styled.div`
+//   height: 100%;
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   justify-content: space-between;
+// `;
+
 export const UserList = styled.div`
   display: flex;
   flex-direction: column;
@@ -31,24 +95,24 @@ export const VoiceChatFooter = styled.div`
   border-top: 1px solid var(--palette-line-solid-neutral);
 `;
 
-export const ActionButton = styled.button`
-  border: none;
-  padding: 10px;
-  border-radius: 50%;
-  background-color: #f4f4f4;
-  cursor: pointer;
-`;
+// export const ActionButton = styled.button`
+//   border: none;
+//   padding: 10px;
+//   border-radius: 50%;
+//   background-color: #f4f4f4;
+//   cursor: pointer;
+// `;
 
-export const JoinButton = styled.button`
-  width: 194px;
-  border: none;
-  background-color: #ff9100;
-  padding: 10px 20px;
-  color: white;
-  font-weight: bold;
-  border-radius: 5px;
-  cursor: pointer;
-`;
+// export const JoinButton = styled.button`
+//   width: 194px;
+//   border: none;
+//   background-color: #ff9100;
+//   padding: 10px 20px;
+//   color: white;
+//   font-weight: bold;
+//   border-radius: 5px;
+//   cursor: pointer;
+// `;
 
 export const ProfileWrapper = styled.div`
   position: relative;