Fire 181 기획 fe screen share 페이지 UI 설계

src/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Lobby from './pages/Lobby';
 import Layout from './components/layout/Layout';
 import Login from './pages/Login';
+import Room from './pages/Room';
 
 function Router() {
   return (
@@ -14,6 +15,9 @@ function Router() {
         <Route path="/lobby" element={<Layout />}>
           <Route index element={<Lobby />} />
         </Route>
+        <Route path="/room" element={<Layout />}>
+          <Route index element={<Room />} />
+        </Route>
       </Routes>
     </BrowserRouter>
   );

src/components/room/Screen.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import screenInterface from '../../screen.interface';
+
+export default function RoomBlock({ name, id }: screenInterface) {
+  return (
+    <Container>
+      <div>{name}</div>
+      <div>{id}</div>
+    </Container>
+  );
+}
+
+const Container = styled.video`
+  border: 3px solid red;
+  height: 46%;
+  width: 46%;
+`;

src/components/room/Screens.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import screenAPI from '../../screens.json';
+import Screen from './Screen';
+import screenInterface from '../../screen.interface';
+
+export default function Screens() {
+  return (
+    <Container>
+      {screenAPI.map(({ name, id }: screenInterface) => {
+        return <Screen key={id} name={name} id={id} />;
+      })}
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  align-content: space-around;
+  margin: 0 auto;
+  width: 86%;
+  height: 86%;
+`;

src/pages/Room.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import Screens from '../components/room/Screens';
+
+export default function MainPage() {
+  return (
+    <Component>
+      <Header>방번호</Header>
+      <Screens />
+      <Button>화면 공유 ON</Button>
+    </Component>
+  );
+}
+
+const Component = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  color: white;
+`;
+
+const Header = styled.header`
+  font-size: 5rem;
+`;
+
+const Button = styled.button`
+  color: white;
+  cursor: pointer;
+  padding: 2rem;
+  width: 15rem;
+  margin: 0 auto;
+  font-size: 2rem;
+  background-color: gray;
+  border-radius: 1rem;
+`;

src/screen.interface.ts

@@ -0,0 +1,4 @@
+export default interface screenInterface {
+  name: string;
+  id: number;
+}

src/screens.json

@@ -0,0 +1,18 @@
+[
+  {
+    "name": "screen1",
+    "id": 1
+  },
+  {
+    "name": "screen1",
+    "id": 1
+  },
+  {
+    "name": "screen1",
+    "id": 1
+  },
+  {
+    "name": "screen1",
+    "id": 1
+  }
+]

src/styles/global.ts

@@ -50,7 +50,6 @@ select,
 table,
 textarea {
   font-size: 12px;
-  line-height: 16px;
   color: #202020;
   font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",

yarn.lock

@@ -8474,7 +8474,7 @@ style-search@^0.1.0:
 
 styled-components@^5.3.5:
   version "5.3.5"
-  resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
   integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"