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; `;