Merge pull request #96 from SWM-FIRE/FIRE-403-fe-room-tsx-리팩토링

SWM-FIRE · Aug 5, 2022 · 2b1657a · 2b1657a · vercel · Aug 5, 2022
2 parents 9c7dc71 + d6afbd4
commit 2b1657a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 31 deletions.
diff --git a/src/components/room/ScreenModal.tsx b/src/components/room/ScreenModal.tsx
@@ -24,18 +24,16 @@ export default function ScreenModal() {
 
   return (
     <ModalPortal>
-      <ModalBackground>
-        <ModalBox>
-          <ModalController>
-            <ArrowBox onClick={toggleModal}>
-              <LeftArrow />
-            </ArrowBox>
-            <MyAvatar num={Number(avatar)} />
-            <Nickname>{nickname}</Nickname>
-          </ModalController>
-          <ModalVideo ref={videoRef} autoPlay playsInline />
-        </ModalBox>
-      </ModalBackground>
+      <ModalBox>
+        <ModalController>
+          <ArrowBox onClick={toggleModal}>
+            <LeftArrow />
+          </ArrowBox>
+          <MyAvatar num={Number(avatar)} />
+          <Nickname>{nickname}</Nickname>
+        </ModalController>
+        <ModalVideo ref={videoRef} autoPlay playsInline />
+      </ModalBox>
     </ModalPortal>
   );
 }
@@ -69,27 +67,17 @@ const ArrowBox = styled.div`
   cursor: pointer;
 `;
 
-const ModalBackground = styled.div`
-  position: fixed;
-  width: 100%;
-  height: 100vh;
-  justify-content: center;
-  align-items: center;
-  top: -7rem;
-  display: flex;
-  z-index: 999;
-`;
-
 const ModalBox = styled.div`
-  position: absolute;
-  top: 18rem;
-  left: 3rem;
+  position: fixed;
+  top: 12rem;
+  left: 4rem;
   width: calc(100% - 50rem);
-  height: calc(100% - 22rem);
+  height: calc(100% - 14rem);
   background-color: #0d0e13;
   padding-left: 1.43rem;
   border-radius: 1rem;
   display: flex;
   flex-direction: column;
   overflow: auto;
+  z-index: 999;
 `;
diff --git a/src/components/room/sideBar/ChattingItem.tsx b/src/components/room/sideBar/ChattingItem.tsx
@@ -77,7 +77,6 @@ const Entrance = styled.div`
 const Component = styled.li<componentInterface>`
   display: flex;
   flex-direction: ${({ isMe }) => (isMe ? 'row-reverse' : 'row')};
-  width: 100%;
   gap: 1.6rem;
   margin-top: ${({ isHide }) => (isHide ? '1rem' : '2rem')};
 `;
@@ -94,6 +93,7 @@ const AvatarComponent = styled.div<hideInterface>`
 const MessageComponent = styled.div<userInterface>`
   display: flex;
   flex-direction: column;
+  width: 100%;
   align-items: ${({ isMe }) => (isMe ? 'flex-end' : 'flex-start')};
 `;
 
@@ -102,18 +102,17 @@ const Nickname = styled.div<userInterface>``;
 const MessageBox = styled.div<userInterface>`
   display: flex;
   flex-direction: ${({ isMe }) => (isMe ? 'row-reverse' : 'row')};
-  justify-content: center;
   align-items: flex-end;
   margin-top: 0.4rem;
-  overflow: hidden;
+  width: 100%;
   gap: 0.3rem;
+  word-break: break-all;
 `;
 
 const Message = styled.div<userInterface>`
   color: rgb(255, 255, 255);
   font-size: 1.5rem;
   padding: 1.6rem;
-  overflow: hidden;
   border-radius: ${({ isMe }) =>
     isMe ? '0.8rem 0 0.8rem 0.8rem' : '0 0.8rem 0.8rem 0.8rem'};
   background-color: ${({ isMe, theme }) =>