Merge pull request #346 from SCBJ-7/feature/#342-refactor-search

Feature/#342 refactor search
SCBJ-7 · Apr 14, 2024 · 41f6096 · 41f6096
2 parents 5dc0018 + 0eeb46c
commit 41f6096
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 40 deletions.
diff --git a/src/pages/searchPage/Search.style.ts b/src/pages/searchPage/Search.style.ts
@@ -8,9 +8,9 @@ export const Container = styled.div`
 export const SearchContainer = styled.div`
   width: 100%;
   height: 100%;
-  padding-top: 116px;
   color: ${({ theme }) => theme.color.black};
-  padding-bottom: 100px;
+  padding: 130px 0 130px 0;
+  background-color: ${({ theme }) => theme.color.greyScale7};
 `;
 
 export const SearchItemFlex = styled.div`

diff --git a/src/pages/searchPage/components/searchItem/SearchItem.style.ts b/src/pages/searchPage/components/searchItem/SearchItem.style.ts
@@ -1,63 +1,114 @@
 import styled from "styled-components";
+import { FaStar } from "react-icons/fa6";
 
 export const ItemContainer = styled.div`
   width: 100%;
-  height: 344px;
-  padding: 1rem 0 1.5rem 0;
+  height: 373px;
   color: ${({ theme }) => theme.color.black};
   @media screen and (min-width: 568px) {
     width: calc(50% - 8px);
   }
+  background-color: white;
   cursor: pointer;
+  border-radius: 12px;
+  & > img {
+    width: 100%;
+    height: 192px;
+    object-fit: cover;
+    border-radius: 12px 12px 0 0;
+  }
 `;
 
 export const ItemContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   min-width: 240px;
+  height: 181px;
   position: relative;
+  width: 100%;
+  padding: 24px 16px;
+`;
 
+export const ItemTop = styled.div`
   width: 100%;
-  height: 100%;
+  height: 66px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
 
-  & > img {
-    width: 100%;
-    height: 192px;
-    object-fit: cover;
-    border-radius: 12px 12px 0 0;
+export const StartImg = styled(FaStar)`
+  color: ${({ theme }) => theme.color.percentOrange};
+`;
+
+export const ItemRates = styled.div`
+  display: flex;
+  ${({ theme }) => theme.typo.caption2}
+  > div {
+    padding-right: 0.1rem;
   }
 `;
 
 export const ItemName = styled.div`
   ${({ theme }) => theme.typo.body2}
-  margin-top: 1rem;
+
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
+
 export const ItemRoomName = styled.div`
   ${({ theme }) => theme.typo.body3}
-  margin-top:0.5rem;
-`;
-export const ItemOriginalPrice = styled.div`
-  color: ${({ theme }) => theme.color.greyScale2};
-  ${({ theme }) => theme.typo.body3}
-
-  text-decoration-line:  line-through;
-  margin-top: 0.5rem;
 `;
 
 export const ItemBottom = styled.div`
+  height: 35px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   ${({ theme }) => theme.typo.body1}
 `;
-export const ItemPrice = styled.span`
-  margin-right: 0.5rem;
+
+export const ItemOriginalPriceCover = styled.div`
+  width: 127px;
+  display: flex;
+  justify-content: space-between;
+  ${({ theme }) => theme.typo.body5}
+`;
+
+export const ItemOriginalPrice = styled.span`
+  color: ${({ theme }) => theme.color.greyScale3};
+  text-decoration-line: line-through;
 `;
+
 export const ItemSalePercent = styled.span`
   color: ${({ theme }) => theme.color.percentBlue};
 `;
 
+export const ItemPriceCover = styled.div`
+  width: 127px;
+  display: flex;
+  justify-content: space-between;
+  ${({ theme }) => theme.typo.body5}
+  >div:first-child {
+    margin-top: 5px;
+  }
+`;
+
+export const ItemPrice = styled.span`
+  font-size: 18px;
+  font-weight: 700;
+`;
+
+export const ItemDateCover = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
 export const ItemDate = styled.div`
   display: flex;
   justify-content: center;

diff --git a/src/pages/searchPage/components/searchItem/SearchItem.tsx b/src/pages/searchPage/components/searchItem/SearchItem.tsx
@@ -28,28 +28,50 @@ const SearchItem = ({ item }: { item: ISearchList }) => {
   };
   return (
     <>
-      <S.ItemContainer>
-        <S.ItemContent onClick={handleClickItem}>
-          <ProgressiveImg src={item.imageUrl} loading="lazy" />
-          <S.ItemName>{item.name}</S.ItemName>
-          <S.ItemRoomName>{item.roomType}</S.ItemRoomName>
-          <S.ItemOriginalPrice>
-            {item.originalPrice.toLocaleString()}
-          </S.ItemOriginalPrice>
+      <S.ItemContainer onClick={handleClickItem}>
+        <ProgressiveImg src={item.imageUrl} loading="lazy" />
+        <S.ItemContent>
+          <S.ItemTop>
+            <S.ItemRates>
+              <div>
+                <S.StartImg />
+              </div>
+              <div>{item.reviewRate}</div>
+              <div>&middot;</div>
+              <div>{`${item.hotelRate}성급`}</div>
+            </S.ItemRates>
+            <S.ItemName>{item.name}</S.ItemName>
+            <S.ItemRoomName>{item.roomType}</S.ItemRoomName>
+          </S.ItemTop>
+
           <S.ItemBottom>
+            <S.ItemDateCover>
+              <div></div>
+              <S.ItemDate>
+                {`${formatDateString(item.checkIn)} ~ ${formatDateString(
+                  item.checkOut,
+                )}`}
+              </S.ItemDate>
+            </S.ItemDateCover>
             <div>
-              <S.ItemPrice>
-                {item.salePrice.toLocaleString() + "원"}
-              </S.ItemPrice>
-              <S.ItemSalePercent>
-                {`${calculatePercentage(item.salePercentage)}%`}
-              </S.ItemSalePercent>
+              <S.ItemOriginalPriceCover>
+                <div>정가</div>
+                <div>
+                  <S.ItemSalePercent>
+                    {`${calculatePercentage(item.salePercentage)}%`}
+                  </S.ItemSalePercent>
+                  <S.ItemOriginalPrice>
+                    {" " + item.originalPrice.toLocaleString() + "원"}
+                  </S.ItemOriginalPrice>
+                </div>
+              </S.ItemOriginalPriceCover>
+              <S.ItemPriceCover>
+                <div>구매가</div>
+                <S.ItemPrice>
+                  {item.salePrice.toLocaleString() + "원"}
+                </S.ItemPrice>
+              </S.ItemPriceCover>
             </div>
-            <S.ItemDate>
-              {`${formatDateString(item.checkIn)} ~ ${formatDateString(
-                item.checkOut,
-              )}`}
-            </S.ItemDate>
           </S.ItemBottom>
           {!item.isFirstPrice && <S.SecondSaleText>마감 특가</S.SecondSaleText>}
         </S.ItemContent>

diff --git a/src/types/searchList.ts b/src/types/searchList.ts
@@ -9,4 +9,6 @@ export interface ISearchList {
   isFirstPrice: boolean;
   checkIn: string;
   checkOut: string;
+  hotelRate: number;
+  reviewRate: number;
 }