design : room list 길면 말줄임표

InSange · Dec 10, 2024 · 66306b4 · 66306b4
1 parent c0c39a9
commit 66306b4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/frontend/app/_components/globalstyles.tsx b/frontend/app/_components/globalstyles.tsx
@@ -26,6 +26,7 @@ export default GlobalStyle;
 
 export const ButtonStyled = styled.button<ButtonProps>`
   width: 100%;
+  flex-shrink: 0;
   background-color: ${({ theme, color }) =>
     color === 'primary' ? theme.colors.primary : theme.colors.gray};
   color: #fff;

diff --git a/frontend/app/room/_related/room.styled.ts b/frontend/app/room/_related/room.styled.ts
@@ -33,6 +33,7 @@ export const CreateRoomButtonContainer = styled.button`
 export const RoomListStyled = styled.li`
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   width: 100%;
   padding: 8px 12px;
 
@@ -51,9 +52,13 @@ export const RoomNumber = styled.h6`
 export const RoomTitle = styled.h6`
   color: #000;
   font-size: 14px;
-  flex: 1;
   margin: 0px;
   font-weight: 400;
+  max-width: 70%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
 `;
 
 export const RoomListContainer = styled.div`
@@ -63,13 +68,7 @@ export const RoomListContainer = styled.div`
   border-radius: 8px;
 `;
 
-export const RoomLeftContainer = styled(AlignCenterRowStack)`
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  flex: 1;
-`;
-export const RoomRightContainer = styled(AlignCenterRowStack)`
+export const RoomRightContainer = styled.div`
   display: flex;
   flex-direction: row;
   gap: 12px;

diff --git a/frontend/app/room/_sections/RoomList.tsx b/frontend/app/room/_sections/RoomList.tsx
@@ -9,7 +9,6 @@ import { useContext } from 'react';
 import {
   PersonCount,
   PersonCountContainer,
-  RoomLeftContainer,
   RoomListStyled,
   RoomRightContainer,
   RoomTitle,
@@ -32,16 +31,18 @@ const RoomList = ({ room }: { room: RoomModel }) => {
 
   return (
     <RoomListStyled>
-      <RoomLeftContainer>
-        <RoomTitle>{room.Name}</RoomTitle>
-      </RoomLeftContainer>
+      <RoomTitle>{room.Name}</RoomTitle>
       <RoomRightContainer>
         <PersonCountContainer>
           <PersonCount>{room.UserList?.length ?? 0}</PersonCount>
           <PersonCount>/</PersonCount>
           <PersonCount>{room.MaxUser}</PersonCount>
         </PersonCountContainer>
-        <Button size='small' onClick={handleJoinRoom}>
+        <Button
+          style={{ width: 'fit-content' }}
+          size='small'
+          onClick={handleJoinRoom}
+        >
           참가
         </Button>
       </RoomRightContainer>