From 4e0a3cb1b17b4d1cd7d531b902c45f3b1b88664a Mon Sep 17 00:00:00 2001 From: bukim0329 Date: Mon, 30 May 2022 21:55:47 +0900 Subject: [PATCH] =?UTF-8?q?design:=20=EA=B2=80=EC=83=89=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=88=99=EB=B0=95=EC=8B=9C=EC=84=A4=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/emptyHeart.svg | 3 + src/assets/emptyStar.svg | 3 + src/assets/fullHeart.svg | 3 + src/assets/fullStar.svg | 3 + .../main/searchMain/AccomodationHeader.jsx | 30 +++++ .../main/searchMain/AccomodationList.jsx | 83 ++++++++++++ .../main/searchMain/AccomodationListItem.jsx | 127 ++++++++++++++++++ src/pages/Search.jsx | 28 ++++ src/util.js | 5 + 9 files changed, 285 insertions(+) create mode 100644 src/assets/emptyHeart.svg create mode 100644 src/assets/emptyStar.svg create mode 100644 src/assets/fullHeart.svg create mode 100644 src/assets/fullStar.svg create mode 100644 src/components/main/searchMain/AccomodationHeader.jsx create mode 100644 src/components/main/searchMain/AccomodationList.jsx create mode 100644 src/components/main/searchMain/AccomodationListItem.jsx create mode 100644 src/util.js diff --git a/src/assets/emptyHeart.svg b/src/assets/emptyHeart.svg new file mode 100644 index 000000000..f26a34264 --- /dev/null +++ b/src/assets/emptyHeart.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/emptyStar.svg b/src/assets/emptyStar.svg new file mode 100644 index 000000000..5e3f89d65 --- /dev/null +++ b/src/assets/emptyStar.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/fullHeart.svg b/src/assets/fullHeart.svg new file mode 100644 index 000000000..cf04fe305 --- /dev/null +++ b/src/assets/fullHeart.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/fullStar.svg b/src/assets/fullStar.svg new file mode 100644 index 000000000..f4e707ae0 --- /dev/null +++ b/src/assets/fullStar.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/main/searchMain/AccomodationHeader.jsx b/src/components/main/searchMain/AccomodationHeader.jsx new file mode 100644 index 000000000..cce8b8c59 --- /dev/null +++ b/src/components/main/searchMain/AccomodationHeader.jsx @@ -0,0 +1,30 @@ +import React from "react"; +import styled from "styled-components"; + +const AccomodationHeader = () => { + return ( + + 300개 이상의 숙소∙5월 12일 ⁃ 5월 18일∙₩100,000~₩1,000,000∙게스트 3명 + 지도에서 선택한 지역의 숙소 + + ); +}; + +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; diff --git a/src/components/main/searchMain/AccomodationList.jsx b/src/components/main/searchMain/AccomodationList.jsx new file mode 100644 index 000000000..f4d44db74 --- /dev/null +++ b/src/components/main/searchMain/AccomodationList.jsx @@ -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 ( + + {data.map((d, ind) => { + return ind === data.length - 1 ? ( +
  • + +
    • + ) : ( +
  • + + +
    • + ); + })} +     + ); +}; + +const AccomodationListBox = styled.ul` + ${({theme}) => theme.layout.flexLayoutMixin("column")}; +`; + +export default AccomodationList; diff --git a/src/components/main/searchMain/AccomodationListItem.jsx b/src/components/main/searchMain/AccomodationListItem.jsx new file mode 100644 index 000000000..85e2a0ebe --- /dev/null +++ b/src/components/main/searchMain/AccomodationListItem.jsx @@ -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 ( + + + + + {location} + + + + + + {relation} + + {option1} +
    + {option2} +     + + ₩{makePriceFormat(price)} / 박 + + + + + + {grade.toFixed(2)} + (후기 {review}개) + + 총액 ₩1,493,159 + +     +     + ); +}; + +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; diff --git a/src/pages/Search.jsx b/src/pages/Search.jsx index 1fe498013..9678bd1e2 100644 --- a/src/pages/Search.jsx +++ b/src/pages/Search.jsx @@ -2,6 +2,8 @@ import React from "react"; import styled from "styled-components"; import LoginButton from "../components/header/LoginButton"; import SearchBar from "../components/header/searchBar/SearchBar"; +import AccomodationHeader from "../components/main/searchMain/AccomodationHeader"; +import AccomodationList from "../components/main/searchMain/AccomodationList"; const Search = () => { return ( @@ -13,10 +15,36 @@ const Search = () => { + + + + + + + ); }; +const SearchMain = styled.main` + ${({theme}) => theme.layout.flexLayoutMixin()}; + user-select: none; +`; + +const AccomodationBox = styled.div` + ${({theme}) => theme.layout.flexLayoutMixin("column")}; + width: 50%; + background-color: ${({theme}) => theme.color.white}; + padding: 32px 24px; + box-sizing: border-box; + gap: 12px; +`; + +const MapBox = styled.div` + width: 50%; + background-color: green; +`; + const Background = styled.div` background-color: ${({theme}) => theme.transparentColor.gray1}; height: 640px; diff --git a/src/util.js b/src/util.js new file mode 100644 index 000000000..27295c8ab --- /dev/null +++ b/src/util.js @@ -0,0 +1,5 @@ +const makePriceFormat = (priceString) => { + return priceString ? Number(priceString).toLocaleString() : ""; +}; + +export {makePriceFormat};