From 0286744d3ea3c5ea2527b25df518b369b213fd52 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 30 Apr 2024 17:21:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B6=94=EA=B0=80=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EC=84=B9=EC=85=98=20=EA=B0=9C=ED=96=89=EB=A7=88=EB=8B=A4=20?=
 =?UTF-8?q?=EC=9E=98=EB=9D=BC=EC=84=9C=20mapping=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/roomDetailPage/RoomDetail.style.ts  |  8 ++---
 .../components/roomInfo/RoomInfo.tsx          | 33 ++++++++++---------
 .../components/roomNavBar/RoomNavBar.tsx      |  4 +--
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/pages/roomDetailPage/RoomDetail.style.ts b/src/pages/roomDetailPage/RoomDetail.style.ts
index 663b1101..8f8dd73b 100644
--- a/src/pages/roomDetailPage/RoomDetail.style.ts
+++ b/src/pages/roomDetailPage/RoomDetail.style.ts
@@ -38,6 +38,10 @@ export const Row = styled(Flex)`
   align-items: center;
 `;
 
+export const TitleWrapper = styled(Row)`
+  margin-bottom: 1rem;
+`;
+
 export const Row1 = styled(Row)`
   gap: 2px;
 `;
@@ -114,10 +118,6 @@ export const VStack5 = styled(Flex)`
   gap: 2rem;
 `;
 
-export const VStack3 = styled(HStack1)`
-  gap: 1rem;
-`;
-
 export const TagWrapper = styled(Flex)`
   gap: 0.5rem;
   flex-wrap: wrap;
diff --git a/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx b/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
index ae9b521c..79de7b73 100644
--- a/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
+++ b/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
@@ -98,17 +98,15 @@ const RoomInfo = ({ room, discount }: RoomInfoProps) => {
 
       {room.sellerCommentList && (
         <S.DetailSection>
-          <S.VStack3>
-            <S.Row>
-              <IconChat />
-              <S.Text variant="body2">판매자 코멘트</S.Text>
-            </S.Row>
-            <ExpandableContent>
-              {room.sellerCommentList.map((item, index) => (
-                <Tag key={index}>{item}</Tag>
-              ))}
-            </ExpandableContent>
-          </S.VStack3>
+          <S.TitleWrapper>
+            <IconChat />
+            <S.Text variant="body2">판매자 코멘트</S.Text>
+          </S.TitleWrapper>
+          <ExpandableContent>
+            {room.sellerCommentList.map((item, index) => (
+              <Tag key={index}>{item}</Tag>
+            ))}
+          </ExpandableContent>
         </S.DetailSection>
       )}
 
@@ -135,11 +133,14 @@ const RoomInfo = ({ room, discount }: RoomInfoProps) => {
           </S.HStack1>
           <S.HStack1>
             <S.Text variant="body3">추가 정보</S.Text>
-            <S.VStack5>
-              <S.Text variant="body4" color="greyScale2">
-                {room.facilityInformation}
-              </S.Text>
-            </S.VStack5>
+
+            {room.facilityInformation.split("\n").map((line) => {
+              return (
+                <S.Text variant="body4" color="greyScale2">
+                  {line}
+                </S.Text>
+              );
+            })}
           </S.HStack1>
           <a
             href={room.hotelInfoUrl}
diff --git a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx
index 11cd6f9d..8e3e4876 100644
--- a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx
+++ b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx
@@ -1,7 +1,7 @@
 import IconInfoMark from "@assets/icons/ic_question-mark.svg?react";
 import { PATH } from "@constants/path";
 import useToastConfig from "@hooks/common/useToastConfig";
-import { ReactElement, useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import * as S from "./RoomNavBar.style";
@@ -15,7 +15,7 @@ import { useStockQuery } from "@/hooks/api/useStockQuery";
 import useAuthStore from "@/store/authStore";
 
 interface ButtonProps {
-  text: ReactElement;
+  text: ReactNode;
   action: () => void;
   status: boolean;
   variant?: TButtonVariant;