Design: 실시간 커넥팅 페이지 UI 수정

KakaoTech-BootCamp-Team-2 · Sep 10, 2024 · 028a383 · 028a383
1 parent 31749ad
commit 028a383
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 32 deletions.
diff --git a/src/components/Common/miniLayout.jsx b/src/components/Common/miniLayout.jsx
@@ -1,12 +1,32 @@
 /** @jsxImportSource @emotion/react */
 import React from "react";
 import Text from "../Common/Text";
-import { LayoutContainer, Line, CenterContent } from "./miniLayout.styled";
+import {
+  LayoutContainer,
+  Line,
+  CenterContent,
+  ExitButton,
+  HeaderBox,
+} from "./miniLayout.styled";
+import { useNavigate } from "react-router-dom";
 
-const MiniLayout = ({ text, children, layerWidth }) => {
+const MiniLayout = ({ text, children, layerWidth, isButton }) => {
+  const navigate = useNavigate();
   return (
     <LayoutContainer width={layerWidth}>
-      <Text value={text} fontFamily="KakaoBold" fontSize={30} color="#000" />
+      <HeaderBox>
+        <Text value={text} fontFamily="KakaoBold" fontSize={30} color="#000" />
+        {isButton && (
+          <ExitButton
+            onClick={() => {
+              window.location.href = "/";
+            }}
+          >
+            나가기
+          </ExitButton>
+        )}
+      </HeaderBox>
+
       <Line />
       <CenterContent>{children}</CenterContent>
       <Line />

diff --git a/src/components/Common/miniLayout.styled.js b/src/components/Common/miniLayout.styled.js
@@ -5,6 +5,12 @@ export const LayoutContainer = styled.div`
   width: ${({ width }) => width || "100%"};
   box-sizing: border-box;
 `;
+export const HeaderBox = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+`;
 
 export const Line = styled.div`
   width: 100%;
@@ -21,3 +27,12 @@ export const CenterContent = styled.div`
   gap: 20px;
   margin: 10px;
 `;
+
+export const ExitButton = styled.button`
+  width: 100px;
+  height: 50px;
+  border-radius: 20px;
+  border: 1px solid #ebc500;
+  background-color: #ffef61;
+  cursor: pointer;
+`;
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
@@ -15,6 +15,12 @@ function LoginPage() {
   return (
     <div>
       <h2>Login Page</h2>
+      <form
+        method="POST"
+        action={`${import.meta.env.VITE_AUTH_BASE_URL}/oauth2/authorization/kakao?client_id=${import.meta.env.VITE_KAKAO_CLIENT_ID}&redirect_uri=${import.meta.env.VITE_KAKAO_REDIRECT_URI}&response_type=code`}
+      >
+        <button>테스트</button>
+      </form>
       <Link
         to={`${import.meta.env.VITE_AUTH_BASE_URL}/oauth2/authorization/kakao`}
       >

diff --git a/src/pages/WebRTC/VideoPage.jsx b/src/pages/WebRTC/VideoPage.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from "react";
 import Layout from "../../components/Common/Layout";
 import * as S from "./style";
 import { io } from "socket.io-client";
+import MiniLayout from "../../components/Common/miniLayout";
 
 const RTCPage = () => {
   const socketRef = useRef(null);
@@ -114,27 +115,42 @@ const RTCPage = () => {
 
   return (
     <Layout>
-      <h1>실시간 화상 채팅</h1>
-
-      <S.StyledDiv>
-        <video
-          ref={myVideoRef}
-          autoPlay
-          playsInline
-          style={{ width: "300px", borderRadius: "20px" }}
-        />
-        <video
-          ref={remoteVideoRef}
-          autoPlay
-          playsInline
-          style={{
-            width: "300px",
-            transform: "rotateY(180deg)",
-            WebkitTransform: "rotateY(180deg)",
-            MozTransform: "rotateY(180deg)",
-          }}
-        />
-      </S.StyledDiv>
+      <MiniLayout
+        text={"000님과의 실시간 커넥션"}
+        layerWidth={"70%"}
+        isButton={true}
+      >
+        <S.VideoLayout>
+          <S.VideoBox>
+            <video
+              ref={myVideoRef}
+              autoPlay
+              playsInline
+              style={{
+                width: "400px",
+                borderRadius: "20px",
+                transform: "rotateY(180deg)",
+                WebkitTransform: "rotateY(180deg)",
+                MozTransform: "rotateY(180deg)",
+              }}
+            />
+          </S.VideoBox>
+          <S.VideoBox>
+            <video
+              ref={remoteVideoRef}
+              autoPlay
+              playsInline
+              style={{
+                width: "400px",
+                borderRadius: "20px",
+                transform: "rotateY(180deg)",
+                WebkitTransform: "rotateY(180deg)",
+                MozTransform: "rotateY(180deg)",
+              }}
+            />
+          </S.VideoBox>
+        </S.VideoLayout>
+      </MiniLayout>
     </Layout>
   );
 };

diff --git a/src/pages/WebRTC/style.jsx b/src/pages/WebRTC/style.jsx
@@ -1,19 +1,40 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 
-export const StyledDiv = ({ children }) => {
-  const defaultYellow = "#FFF496";
-  const defaultBrown = "#715F00";
-  const liteBrwon = "#D3CBA1";
-  const black = "#000";
+const defaultYellow = "#FFF496";
+const defaultBrown = "#715F00";
+const liteBrwon = "#D3CBA1";
+const black = "#000";
+
+export const VideoLayout = ({ children }) => {
+  return (
+    <div
+      css={css`
+        height: 50vh;
+        width: 100%;
+        border-radius: 20px;
+        display: flex;
+        justify-content: center;
+        gap: 10rem;
+        align-items: center;
+      `}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const VideoBox = ({ children }) => {
   return (
     <div
       css={css`
-        background-color: ${defaultYellow};
-        font-size: 24px;
+        width: 400px;
+        /* height: 60%; */
+        background-color: ${defaultBrown};
         border-radius: 20px;
         display: flex;
-        gap: 20px;
+        justify-content: center;
+        align-items: center;
       `}
     >
       {children}