Merge pull request #121 from sayyyho/dev

Fix: WebRTC UI 수정
KakaoTech-BootCamp-Team-2 · Sep 10, 2024 · edb31ae · edb31ae
2 parents 8608dc0 + 29c77f0
commit edb31ae
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 38 deletions.
diff --git a/docker-compose-chat-test-db.yml b/docker-compose-chat-test-db.yml
diff --git a/src/components/Common/Layout.jsx b/src/components/Common/Layout.jsx
@@ -4,12 +4,12 @@ import Header from "./Header";
 import Footer from "./Footer";
 import { LayoutContainer, MainContent } from "./Layout.styled";
 
-const Layout = ({ children }) => {
+const Layout = ({ children, noneHeader }) => {
   return (
     <>
       <Background></Background>
       <LayoutContainer>
-        <Header />
+        {!noneHeader && <Header />}
         <MainContent>{children}</MainContent>
         <Footer />
       </LayoutContainer>

diff --git a/src/components/Common/miniLayout.styled.js b/src/components/Common/miniLayout.styled.js
@@ -8,7 +8,7 @@ export const LayoutContainer = styled.div`
 export const HeaderBox = styled.div`
   width: 100%;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
 `;
 

diff --git a/src/pages/WebRTC/VideoPage.jsx b/src/pages/WebRTC/VideoPage.jsx
@@ -125,12 +125,8 @@ const RTCPage = () => {
   }, [roomName]); // Add roomName to the dependency array to ensure updates
 
   return (
-    <Layout>
-      <MiniLayout
-        text={"000님과의 실시간 커넥션"}
-        layerWidth={"70%"}
-        isButton={true}
-      >
+    <Layout noneHeader={true}>
+      <MiniLayout text={"실시간 커넥션"} layerWidth={"70%"} isButton={true}>
         <S.VideoLayout>
           <div
             style={{
@@ -140,13 +136,13 @@ const RTCPage = () => {
               flexDirection: "column",
             }}
           >
-            <h1>나의 화면</h1>
+            <h3>나의 화면</h3>
             <video
               ref={myVideoRef}
               autoPlay
               playsInline
               style={{
-                width: "400px",
+                width: "300px",
                 borderRadius: "20px",
                 transform: "rotateY(180deg)",
                 WebkitTransform: "rotateY(180deg)",
@@ -162,14 +158,14 @@ const RTCPage = () => {
               flexDirection: "column",
             }}
           >
-            <h1>000님의 화면</h1>
+            <h3>상대 화면</h3>
 
             <video
               ref={remoteVideoRef}
               autoPlay
               playsInline
               style={{
-                width: "400px",
+                width: "300px",
                 borderRadius: "20px",
                 transform: "rotateY(180deg)",
                 WebkitTransform: "rotateY(180deg)",

diff --git a/src/pages/WebRTC/style.jsx b/src/pages/WebRTC/style.jsx
@@ -10,13 +10,13 @@ export const VideoLayout = ({ children }) => {
   return (
     <div
       css={css`
-        height: 50vh;
-        width: 100%;
+        width: 50%;
         border-radius: 20px;
         display: flex;
         justify-content: center;
-        gap: 10rem;
+        gap: 2rem;
         align-items: center;
+        flex-direction: column;
       `}
     >
       {children}