-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
285 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React from "react"; | ||
import styled from "styled-components"; | ||
|
||
const AccomodationHeader = () => { | ||
return ( | ||
<AccomodationHeaderBox> | ||
<AccomodationOptions>300개 이상의 숙소∙5월 12일 ⁃ 5월 18일∙₩100,000~₩1,000,000∙게스트 3명</AccomodationOptions> | ||
<AccomodationTitle>지도에서 선택한 지역의 숙소</AccomodationTitle> | ||
</AccomodationHeaderBox> | ||
); | ||
}; | ||
|
||
const AccomodationHeaderBox = styled.header` | ||
${({theme}) => theme.layout.flexLayoutMixin("column")}; | ||
color: ${({theme}) => theme.color.gray1}; | ||
gap: 8px; | ||
`; | ||
|
||
const AccomodationOptions = styled.div` | ||
font-size: 0.75rem; | ||
line-height: 17px; | ||
`; | ||
|
||
const AccomodationTitle = styled.h2` | ||
font-size: 2rem; | ||
font-weight: 700; | ||
line-height: 35px; | ||
`; | ||
|
||
export default AccomodationHeader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
import React from "react"; | ||
import styled from "styled-components"; | ||
import Boundary from "../../Boundary"; | ||
import AccomodationListItem from "./AccomodationListItem"; | ||
|
||
const AccomodationList = () => { | ||
const data = [ | ||
{ | ||
img: "https://placeimg.com/330/200/any", | ||
location: "서초구의 아파트 전체", | ||
relation: "Spacious and Comfortable cozy house #4", | ||
option1: "최대 인원 3명 ∙ 원룸 ∙ 침대 1개 ∙ 욕실 1개", | ||
option2: "주방 ∙ 무선 인터넷 ∙ 에어컨 ∙ 헤어드라이어", | ||
price: 82953, | ||
grade: 4.8, | ||
review: 127, | ||
id: "99", | ||
}, | ||
{ | ||
img: "https://placeimg.com/330/200/any", | ||
location: "서초구의 아파트 전체", | ||
relation: "Spacious and Comfortable cozy house #4", | ||
option1: "최대 인원 3명 ∙ 원룸 ∙ 침대 1개 ∙ 욕실 1개", | ||
option2: "주방 ∙ 무선 인터넷 ∙ 에어컨 ∙ 헤어드라이어", | ||
price: 82953, | ||
grade: 4.8, | ||
review: 127, | ||
id: "98", | ||
}, | ||
{ | ||
img: "https://placeimg.com/330/200/any", | ||
location: "서초구의 아파트 전체", | ||
relation: "Spacious and Comfortable cozy house #4", | ||
option1: "최대 인원 3명 ∙ 원룸 ∙ 침대 1개 ∙ 욕실 1개", | ||
option2: "주방 ∙ 무선 인터넷 ∙ 에어컨 ∙ 헤어드라이어", | ||
price: 82953, | ||
grade: 4.8, | ||
review: 127, | ||
id: "97", | ||
}, | ||
{ | ||
img: "https://placeimg.com/330/200/any", | ||
location: "서초구의 아파트 전체", | ||
relation: "Spacious and Comfortable cozy house #4", | ||
option1: "최대 인원 3명 ∙ 원룸 ∙ 침대 1개 ∙ 욕실 1개", | ||
option2: "주방 ∙ 무선 인터넷 ∙ 에어컨 ∙ 헤어드라이어", | ||
price: 82953, | ||
grade: 4.8, | ||
review: 127, | ||
id: "96", | ||
}, | ||
]; | ||
|
||
const condition = { | ||
backgroundColor: "#e0e0e0", | ||
direction: "horizontal", | ||
weight: "1px", | ||
length: "100%", | ||
}; | ||
|
||
return ( | ||
<AccomodationListBox> | ||
{data.map((d, ind) => { | ||
return ind === data.length - 1 ? ( | ||
<li key={d.id}> | ||
<AccomodationListItem key={d.id} {...d} /> | ||
</li> | ||
) : ( | ||
<li key={d.id}> | ||
<AccomodationListItem key={d.id} {...d} /> | ||
<Boundary key={ind} condition={condition} /> | ||
</li> | ||
); | ||
})} | ||
</AccomodationListBox> | ||
); | ||
}; | ||
|
||
const AccomodationListBox = styled.ul` | ||
${({theme}) => theme.layout.flexLayoutMixin("column")}; | ||
`; | ||
|
||
export default AccomodationList; |
127 changes: 127 additions & 0 deletions
127
src/components/main/searchMain/AccomodationListItem.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
import React from "react"; | ||
import styled from "styled-components"; | ||
import {ReactComponent as EmptyHeartIcon} from "../../../assets/emptyHeart.svg"; | ||
import {ReactComponent as FullHeartIcon} from "../../../assets/fullHeart.svg"; | ||
import {ReactComponent as FullStarIcon} from "../../../assets/fullStar.svg"; | ||
import {makePriceFormat} from "../../../util"; | ||
|
||
const AccomodationListItem = ({img, location, relation, option1, option2, price, grade, review}) => { | ||
return ( | ||
<ItemBox> | ||
<img src={img} /> | ||
<ItemDetail> | ||
<FlexBox> | ||
<ItemDetailLocation>{location}</ItemDetailLocation> | ||
<IconBox> | ||
<EmptyHeartIcon /> | ||
<FullHeartIcon style={{color: "#E84C60"}} /> | ||
</IconBox> | ||
</FlexBox> | ||
<ItemDetailRelation>{relation}</ItemDetailRelation> | ||
<ItemDetailOption> | ||
{option1} | ||
<br /> | ||
{option2} | ||
</ItemDetailOption> | ||
<FlexBox style={{flexGrow: "1"}} /> | ||
<DetailPrice>₩{makePriceFormat(price)} / 박</DetailPrice> | ||
<FlexBox> | ||
<EvaluatingBox> | ||
<IconBox> | ||
<FullStarIcon style={{color: "#E84C60"}} /> | ||
</IconBox> | ||
<DetailGrade>{grade.toFixed(2)}</DetailGrade> | ||
<DetailReview>(후기 {review}개)</DetailReview> | ||
</EvaluatingBox> | ||
<DetailTotalPrice>총액 ₩1,493,159</DetailTotalPrice> | ||
</FlexBox> | ||
</ItemDetail> | ||
</ItemBox> | ||
); | ||
}; | ||
|
||
const ItemBox = styled.div` | ||
${({theme}) => theme.layout.flexLayoutMixin()}; | ||
img { | ||
width: 50%; | ||
height: 100%; | ||
border-radius: 10px; | ||
} | ||
padding: 24px 0; | ||
`; | ||
|
||
const ItemDetail = styled.div` | ||
${({theme}) => theme.layout.flexLayoutMixin("column")}; | ||
width: 50%; | ||
padding: 4px 0 4px 24px; | ||
gap: 8px; | ||
`; | ||
|
||
const FlexBox = styled.div` | ||
${({theme}) => theme.layout.flexLayoutMixin("", "space-between")}; | ||
`; | ||
|
||
const ItemDetailLocation = styled.div` | ||
${({theme}) => theme.layout.flexLayoutMixin("", "space-between")}; | ||
color: ${({theme}) => theme.color.gray3}; | ||
font-size: 0.8rem; | ||
line-height: 17px; | ||
`; | ||
|
||
const IconBox = styled.div` | ||
color: ${({theme}) => theme.color.gray3}; | ||
width: 24px; | ||
height: 18.23px; | ||
`; | ||
|
||
const ItemDetailRelation = styled.div` | ||
color: ${({theme}) => theme.color.gray1}; | ||
font-size: 1.1rem; | ||
line-height: 20px; | ||
text-overflow: ellipsis; | ||
white-space: nowrap; | ||
overflow: hidden; | ||
width: 80%; | ||
`; | ||
|
||
const ItemDetailOption = styled.div` | ||
color: ${({theme}) => theme.color.gray3}; | ||
font-size: 0.8rem; | ||
line-height: 17px; | ||
`; | ||
|
||
const DetailPrice = styled.div` | ||
${({theme}) => theme.layout.flexLayoutMixin("", "flex-end")}; | ||
color: ${({theme}) => theme.color.gray1}; | ||
font-weight: 700; | ||
font-size: 1.1rem; | ||
line-height: 20px; | ||
`; | ||
|
||
const EvaluatingBox = styled.div` | ||
${({theme}) => theme.layout.flexLayoutMixin("", "center", "center")}; | ||
gap: 4px; | ||
`; | ||
|
||
const DetailGrade = styled.div` | ||
color: ${({theme}) => theme.color.gray1}; | ||
font-size: 1rem; | ||
line-height: 24px; | ||
padding: 8px 0 0 0; | ||
`; | ||
|
||
const DetailReview = styled.div` | ||
color: ${({theme}) => theme.color.gray3}; | ||
font-size: 1rem; | ||
line-height: 24px; | ||
padding: 8px 0 0 0; | ||
`; | ||
|
||
const DetailTotalPrice = styled.div` | ||
color: ${({theme}) => theme.color.gray3}; | ||
font-size: 1rem; | ||
line-height: 24px; | ||
padding: 8px 0 0 0; | ||
text-decoration: underline; | ||
`; | ||
export default AccomodationListItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
const makePriceFormat = (priceString) => { | ||
return priceString ? Number(priceString).toLocaleString() : ""; | ||
}; | ||
|
||
export {makePriceFormat}; |