feat: 추가정보 섹션 개행마다 잘라서 mapping하도록 구현

SCBJ-7 · Jun 13, 2024 · 0286744 · 0286744
1 parent 4442e28
commit 0286744
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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;