Merge branch 'develop' of https://github.com/woowacourse-teams/2024-c…

…orea
woowacourse-teams · Sep 27, 2024 · ffdb560 · ffdb560
2 parents c722855 + 084d5f6
commit ffdb560
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts
@@ -100,7 +100,9 @@ export const RoomContentSmall = styled.span`
   align-items: center;
 
   font: ${({ theme }) => theme.TEXT.small_bold};
+  line-height: 2rem;
   color: ${({ theme }) => theme.COLOR.black};
+  white-space: pre-line;
 
   span {
     font: ${({ theme }) => theme.TEXT.small};

diff --git a/frontend/src/components/shared/roomCard/RoomCard.style.ts b/frontend/src/components/shared/roomCard/RoomCard.style.ts
@@ -57,12 +57,15 @@ export const RoomInformation = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
+
+  width: 100%;
   padding: 1rem;
 `;
 
 export const RoomTitle = styled.h2`
   overflow: hidden;
 
+  width: 100%;
   padding: 1rem 0;
 
   font: ${({ theme }) => theme.TEXT.medium_bold};

diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModal.style.ts b/frontend/src/components/shared/roomCardModal/RoomCardModal.style.ts
@@ -173,6 +173,8 @@ export const KeywordText = styled.span`
 
 export const ContentContainer = styled.p`
   font: ${({ theme }) => theme.TEXT.small};
+  line-height: 2rem;
+  white-space: pre-line;
 `;
 
 // 버튼

diff --git a/frontend/src/components/shared/roomList/RoomList.style.ts b/frontend/src/components/shared/roomList/RoomList.style.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import media from "@/styles/media";
 
 export const EmptyContainer = styled.div`
   display: flex;
@@ -26,10 +27,18 @@ export const RoomListSection = styled.div`
 
 export const RoomListContainer = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 3rem;
-  justify-content: space-between;
+  gap: 2rem;
+  justify-content: center;
 
   width: 100%;
+  ${media.small`
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  `};
+  ${media.medium`
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  `};
+  ${media.large`
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  `};
   padding-bottom: 1rem;
 `;