Merge pull request #22 from bukim0329/21-검색-페이지-ui-구현

design: 검색 페이지 숙박시설 리스트 구현
codesquad-members-2022 · May 31, 2022 · fd34a3f · fd34a3f
2 parents ebe0f5b + 4e0a3cb
commit fd34a3f
Show file tree

Hide file tree

Showing 9 changed files with 285 additions and 0 deletions.
diff --git a/src/assets/emptyHeart.svg b/src/assets/emptyHeart.svg
diff --git a/src/assets/emptyStar.svg b/src/assets/emptyStar.svg
diff --git a/src/assets/fullHeart.svg b/src/assets/fullHeart.svg
diff --git a/src/assets/fullStar.svg b/src/assets/fullStar.svg
diff --git a/src/components/main/searchMain/AccomodationHeader.jsx b/src/components/main/searchMain/AccomodationHeader.jsx
@@ -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;
diff --git a/src/components/main/searchMain/AccomodationList.jsx 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 (
+        <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;
diff --git a/src/components/main/searchMain/AccomodationListItem.jsx 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 (
+        <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;
diff --git 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 = () => {
                     <LoginButton />
                 </HeaderBox>
             </Background>
+            <SearchMain>
+                <AccomodationBox>
+                    <AccomodationHeader />
+                    <AccomodationList />
+                </AccomodationBox>
+                <MapBox></MapBox>
+            </SearchMain>
         </>
     );
 };
 
+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
@@ -0,0 +1,5 @@
+const makePriceFormat = (priceString) => {
+    return priceString ? Number(priceString).toLocaleString() : "";
+};
+
+export {makePriceFormat};