Merge pull request #65 from SWM-FIRE/FIRE-332-fe-캐릭터-위에-채팅-구현

FIRE-332-fe-캐릭터-위에-채팅-구현

src/components/room/SingleScreen.tsx

@@ -17,6 +17,16 @@ export default function SingleScreen({
   };
   return (
     <Container onClick={OpenModal}>
+      <ChatContainer>
+        <ChatInner>
+          <Chats>Lorem ipsum dolor sit amet,</Chats>
+          <Chats>Vestibulum sit amet tellus suscipit</Chats>
+          <Chats>
+            Fusce eget lacus eu magna finibus interdum vel vel felis.
+          </Chats>
+          <Chats>Last Chat</Chats>
+        </ChatInner>
+      </ChatContainer>
       <AvatarPosition>
         <MyAvatar num={Number(avatar)} />
         <NameContainer>{nickname}</NameContainer>
@@ -25,6 +35,36 @@ export default function SingleScreen({
   );
 }
 
+const ChatInner = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  gap: 1rem;
+`;
+
+const ChatContainer = styled.div`
+  width: calc(100% - 3rem);
+  height: calc(95% - 3rem);
+  position: absolute;
+  bottom: calc(5% + 3rem);
+  overflow: hidden;
+  margin-left: 1.2rem;
+`;
+
+const Chats = styled.div`
+  align-self: flex-start;
+  padding: 1.6rem;
+  background-color: rgba(53, 69, 122, 0.8);
+  font-family: IBMPlexSansKRRegular;
+  font-weight: 400;
+  border-radius: 0.8rem;
+  font-size: 15px;
+  line-height: 22px;
+  color: #ffffff;
+`;
+
 const NameContainer = styled.div`
   padding: 1%;
   display: flex;