FIRE-327-fe-유저목록-및-스크린쉐어-위치에-아바타-적절히-배치

src/components/room/ScreenShare.tsx

@@ -1,9 +1,53 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
+import mockPeople from '../../mockPoeple.json';
+import SingleScreen from './SingleScreen';
 
 export default function ScreenShare() {
-  return <Component>1</Component>;
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (!localStorage.getItem('uid') || !localStorage.getItem('nickname')) {
+      alert('로그인 후 이용해주세요');
+      navigate('/main');
+    }
+  }, []);
+  return (
+    <Container>
+      <ScreenWrapper>
+        <SingleScreen
+          nickname={localStorage.getItem('nickname')}
+          avatar={localStorage.getItem('avatar')}
+        />
+        {mockPeople.people.map((person) => (
+          <SingleScreen
+            key={person.nickname}
+            nickname={person.nickname}
+            avatar={person.avatar}
+          />
+        ))}
+      </ScreenWrapper>
+    </Container>
+  );
 }
 
-const Component = styled.div`
-  padding: 5.6rem 2.5rem;
+const ScreenWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  overflow: auto;
+  @media (max-width: 900px) {
+    flex-direction: column;
+    flex-wrap: unset;
+    gap: 10%;
+  }
+  gap: 0 8%;
+  height: 100%;
+`;
+
+const Container = styled.div`
+  margin: 3rem 0 0 1.6rem;
+  width: calc(100% - 46.5rem);
+  height: calc(100% - 5rem);
 `;

src/components/room/Sidebar.tsx

@@ -19,7 +19,6 @@ const Component = styled.div`
   border-radius: 1rem;
   padding: 3rem 2rem;
   width: 40rem;
-  margin: 2rem;
   right: 0;
   top: 0;
   height: -webkit-fill-available;

src/components/room/SingleScreen.tsx

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import MyAvatar from '../../assets/avatar/MyAvatar';
+
+export default function SingkleScreen({
+  nickname,
+  avatar,
+}: {
+  nickname: string;
+  avatar: string;
+}) {
+  return (
+    <Screen>
+      <AvatarPosition>
+        <MyAvatar num={Number(avatar)} />
+        <NameContainer>{nickname}</NameContainer>
+      </AvatarPosition>
+    </Screen>
+  );
+}
+
+const NameContainer = styled.div`
+  padding: 1%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.6rem;
+  font-family: IBMPlexSansKRRegular;
+  color: #f9fafb;
+`;
+
+const AvatarPosition = styled.div`
+  bottom: calc(-5% - 4rem);
+  height: calc(10% + 6rem);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  svg {
+    height: 100%;
+  }
+  position: absolute;
+`;
+
+const Screen = styled.div`
+  background-color: #4a4a4a;
+  display: flex;
+  justify-content: center;
+  @media (max-width: 900px) {
+    width: 60%;
+    height: 0;
+    padding-bottom: 38%;
+  }
+  width: 36%;
+  height: 0;
+  border-radius: 1rem;
+  padding-bottom: 22%;
+  position: relative;
+`;

src/mockPoeple.json

@@ -0,0 +1,15 @@
+{
+  "roomName": "영기의 테스트방",
+  "current": 3,
+  "total": 4,
+  "people": [
+    {
+      "nickname": "groot",
+      "avatar": "10"
+    },
+    {
+      "nickname": "halang",
+      "avatar": "27"
+    }
+  ]
+}

src/mockPoeple2.json

@@ -0,0 +1,6 @@
+{
+  "roomName": "영기의 테스트방",
+  "current": 3,
+  "total": 4,
+  "people": []
+}

src/pages/Room.tsx

@@ -23,5 +23,6 @@ const Contents = styled.div`
   /* background-color: rgba(14, 19, 33, 1); */
   background-color: #18181b;
   height: calc(100% - 10rem);
+  display: flex;
   position: relative;
 `;