Skip to content

Commit 583b1e3

Browse files
im-na0im-na0
committed
design: 상세페이지 별점, 성급 정보 섹션 추가, 전체적인 레이아웃 수정
1 parent 36d161b commit 583b1e3

File tree

3 files changed

+151
-54
lines changed

3 files changed

+151
-54
lines changed

‎src/pages/roomDetailPage/RoomDetail.style.ts

+44-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
import type { ColorKeys, TypoKeys } from "@styles/theme";
1+
import ArrowSvg from "@assets/icons/ic_arrow.svg?react";
2+
import { Link } from "react-router-dom";
23
import styled from "styled-components";
34

5+
import type { ColorKeys, TypoKeys } from "@styles/theme";
6+
47
export const Container = styled.main`
58
background-color: ${({ theme }) => theme.color.greyScale7};
69
padding-bottom: 62px;
@@ -17,20 +20,35 @@ export const ItemWrapper = styled.div`
1720
justify-content: space-between;
1821
align-items: center;
1922
20-
${({ theme }) => theme.typo.body3}
23+
${({ theme }) => theme.typo.body2}
2124
`;
2225

2326
const Flex = styled.div`
2427
display: flex;
2528
`;
2629

2730
export const Col = styled(Flex)`
31+
padding-top: 2rem;
2832
flex-direction: column;
29-
gap: 0.5rem;
33+
gap: 8px;
3034
`;
3135

3236
export const Row = styled(Flex)`
33-
gap: 0.5rem;
37+
gap: 4px;
38+
align-items: center;
39+
`;
40+
41+
export const Row1 = styled(Row)`
42+
gap: 2px;
43+
`;
44+
45+
export const MapWrapper = styled.div`
46+
padding: 1rem 0 1.5rem;
47+
`;
48+
49+
export const MapLink = styled(Link)`
50+
display: flex;
51+
gap: 4px;
3452
align-items: center;
3553
`;
3654

@@ -69,12 +87,18 @@ export type VariantProps = {
6987
export const Text = styled.p.withConfig({
7088
shouldForwardProp: (prop) => !["variant", "color"].includes(prop),
7189
})<VariantProps>`
72-
${({ variant, theme }) => variant && theme.typo[variant]}
73-
color: ${({ color, theme }) => color && theme.color[color]}
90+
${({ variant, theme }) => variant && theme.typo[variant]};
91+
color: ${({ color, theme }) => color && theme.color[color]};
92+
93+
&.underline {
94+
text-decoration: underline;
95+
text-underline-position: under;
96+
}
7497
`;
7598

7699
export const VStack1 = styled(Flex)`
77-
gap: 0.375rem;
100+
padding: 1rem 0;
101+
gap: 0.5rem;
78102
`;
79103

80104
export const HStack1 = styled(Flex)`
@@ -90,8 +114,21 @@ export const VStack5 = styled(Flex)`
90114
gap: 2rem;
91115
`;
92116

117+
export const VStack3 = styled(HStack1)`
118+
gap: 1rem;
119+
`;
120+
121+
export const TagWrapper = styled(Flex)`
122+
gap: 0.5rem;
123+
flex-wrap: wrap;
124+
`;
125+
93126
export const MoreInfoWrapper = styled(Flex)`
94127
justify-content: flex-end;
95128
align-items: center;
96129
gap: 0.3rem;
97130
`;
131+
132+
export const IconArrow = styled(ArrowSvg)`
133+
margin-left: auto;
134+
`;

‎src/pages/roomDetailPage/RoomDetail.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const RoomDetail = () => {
4444
draggable={true}
4545
/>
4646
<RoomInfo room={rawData} discount={discountRate} />
47-
<RoomNavBar room={rawData} discount={discountRate} roomId={productId} />
47+
<RoomNavBar room={rawData} roomId={productId} />
4848
</S.Container>
4949
);
5050
};

‎src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx

+106-46
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,130 @@
11
import IconBed from "@assets/icons/ic_bed.svg?react";
22
import IconCaretRight from "@assets/icons/ic_caret_right.svg?react";
3+
import IconChat from "@assets/icons/ic_chat-fill.svg?react";
4+
import IconMapPin from "@assets/icons/ic_map-pin.svg?react";
5+
import IconStar from "@assets/icons/ic_star-fill.svg?react";
36
import IconUser from "@assets/icons/ic_users.svg?react";
47
import RoomThemeOption from "@pages/roomDetailPage/components/roomThemeOption/RoomThemeOption";
58
import * as S from "@pages/roomDetailPage/RoomDetail.style";
9+
import { formatDateAndTime } from "@utils/dateFormatter";
610

711
import type { RoomData } from "@type/room";
8-
import { formatDate } from "@utils/dateFormatter";
12+
13+
import Tag from "@/components/tag/Tag";
14+
import { useLocation } from "react-router-dom";
15+
import ExpandableContent from "./ExpandableContent";
916

1017
interface RoomInfoProps {
1118
room: RoomData;
1219
discount: string;
1320
}
1421

1522
const RoomInfo = ({ room, discount }: RoomInfoProps) => {
16-
const checkInDate = formatDate(room.checkIn);
17-
const checkOutDate = formatDate(room.checkOut);
23+
const location = useLocation();
24+
const { pathname } = location;
25+
26+
const checkInDate = formatDateAndTime(room.checkIn);
27+
const checkOutDate = formatDateAndTime(room.checkOut);
28+
29+
const params = new URLSearchParams();
30+
params.append("address", room.hotelAddress);
31+
1832
return (
1933
<>
2034
<S.DetailSection>
21-
<S.HStack5>
22-
<S.HStack1>
23-
<S.Text variant="title2">{room.hotelName}</S.Text>
24-
<S.Text variant="body3">{room.roomName}</S.Text>
25-
</S.HStack1>
26-
<S.Col>
27-
<S.ItemWrapper>
28-
<S.Text>정가</S.Text>
29-
<S.Text color="greyScale3">
30-
<s>{room.originalPrice.toLocaleString()}원</s>
31-
</S.Text>
32-
</S.ItemWrapper>
33-
<S.ItemWrapper>
34-
<S.Text>판매가</S.Text>
35-
<S.Row>
36-
<S.Text variant="title2" color="percentBlue">
37-
{discount}%
38-
</S.Text>
39-
<S.Text variant="title2">
40-
{room.sellingPrice.toLocaleString()}원
41-
</S.Text>
42-
</S.Row>
43-
</S.ItemWrapper>
44-
</S.Col>
45-
<S.VStack1>
46-
<S.LeftBox>
47-
<S.Text variant="body3" color="greyScale1">
48-
체크인
35+
<S.HStack1>
36+
<S.Row1>
37+
<IconStar />
38+
<S.Text variant="body3">
39+
{room.roomAllRating + " · " + room.hotelLevel}
40+
</S.Text>
41+
</S.Row1>
42+
<S.Text variant="title2">{room.hotelName}</S.Text>
43+
<S.Text variant="body2">{room.roomName}</S.Text>
44+
</S.HStack1>
45+
46+
<S.MapWrapper>
47+
<S.MapLink to={pathname + "/map?" + params}>
48+
<IconMapPin />
49+
<S.Text variant="body4">{room.hotelAddress}</S.Text>
50+
<S.IconArrow />
51+
</S.MapLink>
52+
</S.MapWrapper>
53+
54+
<S.VStack1>
55+
<S.LeftBox>
56+
<S.Text variant="body3" color="greyScale3">
57+
체크인
58+
</S.Text>
59+
<S.Text variant="body2">
60+
{checkInDate.date}
61+
<br />
62+
{checkInDate.time}
63+
</S.Text>
64+
</S.LeftBox>
65+
<S.RightBox>
66+
<S.Text variant="body3" color="greyScale3">
67+
체크아웃
68+
</S.Text>
69+
<S.Text variant="body2">
70+
{checkOutDate.date}
71+
<br />
72+
{checkOutDate.time}
73+
</S.Text>
74+
</S.RightBox>
75+
</S.VStack1>
76+
77+
<S.Col>
78+
<S.ItemWrapper>
79+
<S.Text>야놀자 정가</S.Text>
80+
<S.Row>
81+
<S.Text variant="button4" color="percentBlue">
82+
{discount}%
4983
</S.Text>
50-
<S.Text variant="body3">{checkInDate}</S.Text>
51-
</S.LeftBox>
52-
<S.RightBox>
53-
<S.Text variant="body3" color="greyScale1">
54-
체크아웃
84+
<S.Text variant="body4" color="greyScale3">
85+
<s>{room.originalPrice.toLocaleString()}원</s>
5586
</S.Text>
56-
<S.Text variant="body3">{checkOutDate}</S.Text>
57-
</S.RightBox>
58-
</S.VStack1>
59-
</S.HStack5>
87+
</S.Row>
88+
</S.ItemWrapper>
89+
<S.ItemWrapper>
90+
<S.Text>거래 희망가</S.Text>
91+
<S.Text variant="title2">
92+
{room.sellingPrice.toLocaleString()}원
93+
</S.Text>
94+
</S.ItemWrapper>
95+
</S.Col>
6096
</S.DetailSection>
6197

98+
{room.sellerCommentList && (
99+
<S.DetailSection>
100+
<S.VStack3>
101+
<S.Row>
102+
<IconChat />
103+
<S.Text variant="body2">판매자 코멘트</S.Text>
104+
</S.Row>
105+
<ExpandableContent>
106+
{room.sellerCommentList.map((item, index) => (
107+
<Tag key={index}>{item}</Tag>
108+
))}
109+
</ExpandableContent>
110+
</S.VStack3>
111+
</S.DetailSection>
112+
)}
113+
62114
<S.DetailSection>
63115
<S.HStack5>
64116
<S.HStack1>
65117
<S.Text variant="body3">기본 정보</S.Text>
66118
<S.VStack5>
67119
<S.Row>
68120
<IconUser />
69-
<S.Text variant="body3">
121+
<S.Text variant="body4" color="greyScale2">
70122
기준 {room.standardPeople}인 / 최대 {room.maxPeople}인
71123
</S.Text>
72124
</S.Row>
73125
<S.Row>
74126
<IconBed />
75-
<S.Text variant="body3">{room.bedType}</S.Text>
127+
<S.Text variant="body4">{room.bedType}</S.Text>
76128
</S.Row>
77129
</S.VStack5>
78130
</S.HStack1>
@@ -81,8 +133,12 @@ const RoomInfo = ({ room, discount }: RoomInfoProps) => {
81133
<RoomThemeOption option={room.roomTheme} />
82134
</S.HStack1>
83135
<S.HStack1>
84-
<S.Text variant="body3">위치 정보</S.Text>
85-
<S.Text variant="body3">{room.hotelAddress}</S.Text>
136+
<S.Text variant="body3">추가 정보</S.Text>
137+
<S.VStack5>
138+
<S.Text variant="body4" color="greyScale2">
139+
{room.facilityInformation}
140+
</S.Text>
141+
</S.VStack5>
86142
</S.HStack1>
87143
<a
88144
href={room.hotelInfoUrl}
@@ -91,8 +147,12 @@ const RoomInfo = ({ room, discount }: RoomInfoProps) => {
91147
aria-label="상세 정보 보기"
92148
>
93149
<S.MoreInfoWrapper>
94-
<S.Text variant="button2" color="greyScale1">
95-
상세 정보 보기
150+
<S.Text
151+
className="underline"
152+
variant="caption3"
153+
color="greyScale1"
154+
>
155+
상세 정보 보러가기
96156
</S.Text>
97157
<IconCaretRight />
98158
</S.MoreInfoWrapper>

0 commit comments

Comments
 (0)