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};