From 084d5f6b0c86d567faa2c3bfbd4eb3949e3826cc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 27 Sep 2024 11:32:42 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20roomcard=EC=9D=98=20width=EA=B0=80=20?=
 =?UTF-8?q?=EB=8A=98=EC=96=B4=EB=82=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0(#499)=20(#500)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: roomcard의 width가 고정되어 있지 않는 문제 해결

* feat: 줄바꿈 추가

---------

Co-authored-by: 00kang <kdb070970@gmail.com>
---
 .../roomInfoCard/RoomInfoCard.style.ts            |  2 ++
 .../components/shared/roomCard/RoomCard.style.ts  |  3 +++
 .../shared/roomCardModal/RoomCardModal.style.ts   |  2 ++
 .../components/shared/roomList/RoomList.style.ts  | 15 ++++++++++++---
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts
index 1108d922e..f9ad90855 100644
--- 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
index 176f0fd5f..b8f6dd699 100644
--- 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
index df2a081a7..47b3698cc 100644
--- 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
index 67dde881f..bef0d300c 100644
--- 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;
 `;