Fire 317 fe 공유화면 시안대로 제작

src/App.tsx

@@ -15,9 +15,9 @@ function App() {
           <Route path="/" element={<Layout />}>
             <Route index element={<Main />} />
           </Route>
-          <Route path="/room" element={<Layout />}>
-            <Route path=":roomId" element={<Room />} />
-          </Route>
+          {/* <Route path="/room" element={<Layout />}> */}
+          <Route path="/room/*" element={<Room />} />
+          {/* </Route> */}
           <Route path="/main" element={<Main />} />
         </Routes>
       </BrowserRouter>

src/components/room/About.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { ReactComponent as Divide } from '../../assets/svg/Divide.svg';
+
+export default function About() {
+  return (
+    <Component>
+      <RoomName>파이어캠프 코딩</RoomName>
+      <Divide />
+      <Num>2 / 4</Num>
+    </Component>
+  );
+}
+
+const Component = styled.div`
+  position: absolute;
+  left: 8.1rem;
+  display: flex;
+  align-items: center;
+`;
+
+const RoomName = styled.span`
+  margin-right: 0.8rem;
+`;
+
+const Num = styled.span`
+  margin-left: 0.8rem;
+`;

src/components/room/Chatting.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { ReactComponent as MessageSend } from '../../assets/svg/MessageSend.svg';
+
+export default function Chatting() {
+  return (
+    <Component>
+      <Title>채팅</Title>
+
+      <NewMessage>
+        <Input placeholder="Write your message...." />
+        <Button>
+          <MessageSend />
+        </Button>
+      </NewMessage>
+    </Component>
+  );
+}
+
+const Component = styled.div`
+  font-family: IBMPlexSansKRRegular;
+  font-size: 1.3rem;
+  color: #6b7280;
+`;
+
+const Title = styled.div`
+  margin-top: 2.4rem;
+`;
+
+const NewMessage = styled.div`
+  position: relative;
+`;
+
+const Input = styled.input`
+  width: 100%;
+  height: 4.8rem;
+  font-size: 1.3rem;
+  border-radius: 1rem;
+  padding: 1.6rem 2rem;
+  /* background-color: rgba(30, 39, 69, 1); */
+  background-color: #1b1b1e;
+  font-family: IBMPlexSansKRRegular;
+  color: rgba(255, 255, 255, 1);
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const Button = styled.button`
+  position: absolute;
+  cursor: pointer;
+  right: 1.8rem;
+  top: 50%;
+  transform: translateY(-50%);
+`;

src/components/room/Header.tsx

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import Timer from './Timer';
+import Settings from './Settings';
+import About from './About';
+import { ReactComponent as X } from '../../assets/svg/X.svg';
+
+export default function Header() {
+  return (
+    <Component>
+      <About />
+      <Timer />
+      <Settings />
+      <Button>
+        나가기 <X />
+      </Button>
+    </Component>
+  );
+}
+
+const Component = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* background-color: rgba(30, 39, 69); */
+  background-color: #29292e;
+  width: 100%;
+  height: 10rem;
+  font-family: IBMPlexSansKRRegular;
+  color: #f9fafb;
+  font-size: 1.8rem;
+`;
+
+const Button = styled.button`
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  right: 8.1rem;
+  border: 1px solid #94a3b8;
+  border-radius: 5rem;
+  cursor: pointer;
+  color: #f9fafb;
+  font-family: IBMPlexSansKRRegular;
+  padding: 1rem 2rem;
+  font-size: 1.7rem;
+  width: 11.7rem;
+`;

src/components/room/LocalVideo.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import MyAvatar from '../../assets/avatar/MyAvatar';
+
+export const LocalVideo = forwardRef<
+  HTMLVideoElement,
+  React.HTMLProps<HTMLVideoElement>
+>((props, ref) => {
+  return (
+    <Component>
+      <Video ref={ref} autoPlay playsInline muted />
+      <User>
+        <MyAvatar num={1} />
+        <UserName>User1</UserName>
+      </User>
+    </Component>
+  );
+});
+LocalVideo.displayName = 'Video';
+
+const Component = styled.div`
+  position: relative;
+  background-color: darkgray;
+  width: 46.3rem;
+  height: 30rem;
+`;
+
+const Video = styled.video`
+  border-radius: 0.5rem;
+  height: 100%;
+  width: 100%;
+`;
+
+const User = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.4rem;
+`;
+
+const UserName = styled.span`
+  color: #f9fafb;
+`;

src/components/room/Participants.tsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+// import { ReactComponent as MicOff } from '../../assets/svg/SmallMicOff.svg';
+// import { ReactComponent as MicOn } from '../../assets/svg/SmallMicOn.svg';
+
+export default function Participants() {
+  return (
+    <Component>
+      <Title>참여자 목록</Title>
+      <UserList>
+        <User />
+      </UserList>
+    </Component>
+  );
+}
+
+const Component = styled.div`
+  font-family: IBMPlexSansKRRegular;
+  font-size: 1.3rem;
+  color: #6b7280;
+  /* border-bottom: 1px solid #374151; */
+  border-bottom: 1px solid rgba(55, 65, 81, 1);
+`;
+
+const Title = styled.div``;
+
+const UserList = styled.div``;
+
+const User = styled.div`
+  width: 6.8rem;
+`;

src/components/room/ScreenShare.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export default function ScreenShare() {
+  return <Component>1</Component>;
+}
+
+const Component = styled.div`
+  padding: 5.6rem 2.5rem;
+`;

src/components/room/Settings.tsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { ReactComponent as MicOff } from '../../assets/svg/MicOff.svg';
+import { ReactComponent as MonitorOn } from '../../assets/svg/MonitorOn.svg';
+import { ReactComponent as VolumeOn } from '../../assets/svg/VolumeOn.svg';
+
+export default function Settings() {
+  return (
+    <Component>
+      <Button>
+        <MonitorOn />
+      </Button>
+      <Button>
+        <MicOff />
+      </Button>
+      <Button>
+        <VolumeOn />
+      </Button>
+    </Component>
+  );
+}
+
+const Component = styled.div`
+  margin-left: 2.4rem;
+  display: flex;
+  gap: 2.4rem;
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+`;

src/components/room/Sidebar.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import Participants from './Participants';
+import Chatting from './Chatting';
+
+export default function Sidebar() {
+  return (
+    <Component>
+      <Participants />
+      <Chatting />
+    </Component>
+  );
+}
+
+const Component = styled.div`
+  position: absolute;
+  /* background-color: rgba(22, 29, 52, 1); */
+  background-color: #29292e;
+  margin: 2rem 2rem 2rem 2rem;
+  border-radius: 1rem;
+  padding: 3rem 2rem;
+  width: 40rem;
+  margin: 2rem;
+  right: 0;
+  top: 0;
+  height: -webkit-fill-available;
+`;

src/components/room/Timer.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { ReactComponent as Divide } from '../../assets/svg/Divide.svg';
+
+export default function Timer() {
+  return (
+    <Component>
+      <Status />
+      <Hour>03</Hour> : <Minute>17</Minute>
+      <Divide />
+    </Component>
+  );
+}
+
+const Component = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Status = styled.div`
+  width: 1.6rem;
+  height: 1.6rem;
+  background-color: #ef4444;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 0.8rem;
+`;
+
+const Hour = styled.span`
+  margin-right: 0.3rem; ;
+`;
+
+const Minute = styled.span`
+  margin: 0 2.2rem 0 0.3rem;
+`;