Merge pull request #284 from SCBJ-7/feature/#273-sale-purchase-part-r…

…efactor 구매 판매 리스트 구매 판매 상세 페이지 api 및 css 수정 & filterbutton 수정 &img lazyloading 처리
SCBJ-7 · Jan 27, 2024 · 6ffdb5a · 6ffdb5a
2 parents 22cc194 + 25bcf04
commit 6ffdb5a
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 36 deletions.
diff --git a/src/apis/fetchPurchaseList.ts b/src/apis/fetchPurchaseList.ts
@@ -1,11 +1,11 @@
-import { BASE_URL, END_POINTS } from "@constants/api";
+import { END_POINTS } from "@constants/api";
 import { axiosInstance } from "./axiosInstance";
 
 export const fetchPurchaseList = async () => {
   try {
-    const response = await axiosInstance.get(
-      BASE_URL + END_POINTS.PURCHASE_HISTORY,
-    );
+    const response = await axiosInstance.get(END_POINTS.PURCHASE_HISTORY);
+    console.log("res", response);
+
     return response.data.data;
   } catch (err) {
     throw new Error("⚠️예기치 못한 에러가 발생하였습니다.");

diff --git a/src/pages/purchaseDetailPage/PurchaseDetail.style.ts b/src/pages/purchaseDetailPage/PurchaseDetail.style.ts
@@ -2,11 +2,10 @@ import styled from "styled-components";
 
 export const DetailContainer = styled.div`
   width: 100%;
-  height: 100%;
   background-color: ${({ theme }) => theme.color.greyScale7};
   padding-bottom: 100px;
   color: ${({ theme }) => theme.color.black};
-  ${({ theme }) => theme.scroll};
+  margin-top: 56px;
 `;
 
 export const TopSection = styled.section`

diff --git a/src/pages/saleDetailPage/SaleDetail.style.ts b/src/pages/saleDetailPage/SaleDetail.style.ts
@@ -42,6 +42,10 @@ export const PurchasedContainer = styled.div`
 `;
 
 export const PurchasedWrapper = styled.div`
+  padding: 0.5rem 0.5rem 0 0.5rem;
+`;
+
+export const PurchasedWrapperPaddingOn = styled.div`
   padding: 0.5rem;
 `;
 
@@ -50,7 +54,13 @@ export const CardWrapper = styled.div`
 
   background-color: ${({ theme }) => theme.color.white};
   border-bottom: ${({ theme }) => theme.border.strokeThin};
-  box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.1);
+`;
+export const CardWrapperBoxShadowOn = styled.div`
+  padding: 1.5rem 1rem;
+
+  background-color: ${({ theme }) => theme.color.white};
+  border-bottom: ${({ theme }) => theme.border.strokeThin};
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
 `;
 
 export const SaleStatus = styled.div<{ $saleStatus: string }>`
@@ -133,4 +143,5 @@ export const Text = styled.p.withConfig({
 
 export const BottomWrapper = styled.div`
   padding: 1rem 1.25rem;
+  margin-bottom: 2.5rem;
 `;
diff --git a/src/pages/saleDetailPage/SaleDetail.tsx b/src/pages/saleDetailPage/SaleDetail.tsx
@@ -1,5 +1,6 @@
 import { useParams, useSearchParams } from "react-router-dom";
 import * as S from "./SaleDetail.style";
+import { parse, sub, format } from "date-fns";
 // import { useSaleDetailQuery } from "@hooks/api/query/useSaleDetailQuery";
 import Card from "@components/card/Card";
 import CardItem from "@components/cardItem/CardItem";
@@ -35,13 +36,38 @@ const SaleDetail = () => {
   useEffect(() => {
     fetch();
   }, []);
-  //
+  const formattedDate = (day: Date) => {
+    return format(day, "yy.MM.dd (EEE) HH:mm");
+  };
+  const calculateRemainingTime = (date: string) => {
+    const parsedDate = parse(date, "yy.MM.dd (EEE) HH:mm", new Date());
+
+    // 현재 날짜에서 1일을 빼서 전날로 이동하고, 시간을 자정으로 설정
+    const previousMidnight = sub(parsedDate, {
+      days: 1,
+      hours: parsedDate.getHours(),
+      minutes: parsedDate.getMinutes(),
+    });
+    const currentTime = new Date();
+
+    // previousMidnight와 currentTime의 차이를 밀리초로 계산
+    const timeDifference = previousMidnight.getTime() - currentTime.getTime();
 
+    // 밀리초를 시간으로 변환
+    const hoursDifference = Math.floor(timeDifference / (1000 * 60 * 60));
+
+    return hoursDifference;
+  };
+  console.log("data.leftHour", data?.checkIn);
   const StatusText = () => {
     if (!data) return;
 
     if (data.saleStatus === "판매중")
-      return <span>판매종료까지 {data.leftHour}시간 남았어요!</span>;
+      return (
+        <span>
+          판매종료까지 {calculateRemainingTime(data.checkIn)}시간 남았어요!
+        </span>
+      );
     if (data.saleStatus === "판매만료")
       return <span>체크인 시간이 지나 판매 종료된 상품입니다</span>;
     if (data.saleStatus === "정산완료")
@@ -107,7 +133,9 @@ const SaleDetail = () => {
             <S.PurchasedWrapper>
               <S.CardWrapper>
                 <S.SecondStartDate>
-                  {data.secondPrice.secondPriceStartDate + "부터 2차 판매 시작"}
+                  {formattedDate(
+                    new Date(data.secondPrice.secondPriceStartDate),
+                  ) + "부터 2차 판매 시작"}
                 </S.SecondStartDate>
                 <Card title="2차 판매 정산 정보">
                   <CardItem
@@ -128,11 +156,11 @@ const SaleDetail = () => {
             </S.PurchasedWrapper>
           )}
           <S.PurchasedWrapper>
-            <S.CardWrapper>
+            <S.CardWrapperBoxShadowOn>
               <Card title="입금 계좌">
                 <CardItem label={data.bank} content={data.accountNumber} />
               </Card>
-            </S.CardWrapper>
+            </S.CardWrapperBoxShadowOn>
           </S.PurchasedWrapper>
         </>
       );
@@ -174,11 +202,11 @@ const SaleDetail = () => {
             </S.CardWrapper>
           </S.PurchasedWrapper>
           <S.PurchasedWrapper>
-            <S.CardWrapper>
+            <S.CardWrapperBoxShadowOn>
               <Card title="입금 계좌">
                 <CardItem label={data.bank} content={data.accountNumber} />
               </Card>
-            </S.CardWrapper>
+            </S.CardWrapperBoxShadowOn>
           </S.PurchasedWrapper>
         </>
       );
@@ -220,7 +248,6 @@ const SaleDetail = () => {
               <S.TopSectionTitle>
                 <S.TopSectionPurchaseDate>판매일시</S.TopSectionPurchaseDate>
                 <S.TopSectionReserveNumber>
-                  {/* FIXME: checkIn 시간이 아닌 판매된 시간으로 변경 (백엔드 수정 후) */}
                   {data.checkIn}
                 </S.TopSectionReserveNumber>
               </S.TopSectionTitle>

diff --git a/src/pages/searchPage/Search.tsx b/src/pages/searchPage/Search.tsx
@@ -95,7 +95,7 @@ const Search = () => {
       <SearchBar />
       <SearchNav />
 
-      <S.SearchContainer ref={scrollContainerRef}>
+      <S.SearchContainer>
         {isLoading && <Loading />}
         {!isLoading && data && !data?.pages?.[0]?.content?.length && (
           <S.NoResultCover>
@@ -109,11 +109,10 @@ const Search = () => {
         <S.SearchItemFlex>
           {data &&
             data.pages?.length > 0 &&
-            data.pages.map(
-              (page) =>
-                page?.content.map((item: ISearchList) => (
-                  <SearchItem key={item.id} item={item} />
-                )),
+            data.pages.map((page) =>
+              page?.content.map((item: ISearchList) => (
+                <SearchItem key={item.id} item={item} />
+              )),
             )}
         </S.SearchItemFlex>
 

diff --git a/src/pages/searchPage/components/searchItem/SearchItem.tsx b/src/pages/searchPage/components/searchItem/SearchItem.tsx
@@ -27,7 +27,7 @@ const SearchItem = ({ item }: { item: ISearchList }) => {
     <>
       <S.ItemContainer>
         <S.ItemContent onClick={handleClickItem}>
-          <S.ItemImage src={item.imageUrl} />
+          <S.ItemImage src={item.imageUrl} loading="lazy" />
           <S.ItemName>{item.name}</S.ItemName>
           <S.ItemRoomName>{item.roomType}</S.ItemRoomName>
           <S.ItemOriginalPrice>

diff --git a/src/pages/searchPage/components/searchModalButton/SearchModalButton.style.ts b/src/pages/searchPage/components/searchModalButton/SearchModalButton.style.ts
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import FilterIcon from "@assets/icons/ic_arrows-down-up.svg?react";
 
 export const SearchFilterCover = styled.div`
-  width: 55px;
+  padding: 10px;
   height: 28px;
   display: flex;
   justify-content: center;

diff --git a/src/pages/transferPurchasePage/TransferPurchase.tsx b/src/pages/transferPurchasePage/TransferPurchase.tsx
@@ -24,7 +24,7 @@ const sortProductsByCheckInDate = (
         return { ...item, remainDate };
       })
       .sort((a, b) => {
-        return b.remainDate - a.remainDate;
+        return a.remainDate - b.remainDate;
       });
   } else {
     return [];
@@ -40,19 +40,17 @@ const TransferPurchase = () => {
     queryFn: fetchPurchaseList,
   });
 
-  const sortedPurchaseItems = sortProductsByCheckInDate(purchaseData?.products);
-
-  // Filter items based on status and remainDate
+  const sortedPurchaseItems = sortProductsByCheckInDate(purchaseData);
+  console.log("item", sortedPurchaseItems);
   const filteredPurchaseItems = sortedPurchaseItems.filter((item) => {
     if (status === "yet") {
-      return item.remainDate >= 0;
+      return item.remainDate > 0;
     } else if (status === "done") {
-      return item.remainDate < 0;
+      return item.remainDate <= 0;
     } else {
       return true;
     }
   });
-  console.log(sortedPurchaseItems);
   if (isLoading) {
     return <Loading />;
   }
@@ -78,7 +76,7 @@ const TransferPurchase = () => {
           ))
         ) : status === "done" ? (
           <>
-            <S.NoResult>구매내역이 없습니다</S.NoResult>
+            <S.NoResult>이용완료 내역이 없습니다</S.NoResult>
             {!sortedPurchaseItems.length && (
               <S.NoResultAll>
                 지금 상품을 구매하고 호캉스 떠나보세요!
@@ -96,7 +94,7 @@ const TransferPurchase = () => {
           </>
         ) : (
           <>
-            <S.NoResult>이용완료 내역이 없습니다</S.NoResult>
+            <S.NoResult>구매내역이 없습니다</S.NoResult>
             {!sortedPurchaseItems.length && (
               <S.NoResultAll>
                 지금 상품을 구매하고 호캉스 떠나보세요!

diff --git a/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx b/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx
@@ -20,7 +20,7 @@ const PuchaseItem = (props: IPurchaseItemWithRemainDate) => {
         <S.ArrowRightBtnIcon></S.ArrowRightBtnIcon>
       </S.PurchaseItemTitle>
       <S.PurchaseItemContent>
-        <S.PurchaseItemImage src={props.imageUrl} />
+        <S.PurchaseItemImage src={props.imageUrl} loading="lazy" />
         <S.PuchaseItemInfo>
           <S.PurchaseItemName>{props.name}</S.PurchaseItemName>
           <S.PuChaseItemType>{props.roomType}</S.PuChaseItemType>

diff --git a/src/pages/transferSalePage/TransferSale.tsx b/src/pages/transferSalePage/TransferSale.tsx
@@ -24,7 +24,7 @@ const sortProductsByCheckInDate = (
         return { ...item, remainDate };
       })
       .sort((a, b) => {
-        return b.remainDate - a.remainDate;
+        return a.remainDate - b.remainDate;
       });
   } else {
     return [];

diff --git a/src/pages/transferSalePage/components/saleItem/SaleItem.tsx b/src/pages/transferSalePage/components/saleItem/SaleItem.tsx
@@ -64,7 +64,7 @@ const SaleItem = (props: ISaleItemWithRemainDate) => {
         <S.ArrowRightBtnIcon />
       </S.SaleItemTitle>
       <S.SaleItemContent>
-        <S.SaleItemImage src={props.imageUrl} />
+        <S.SaleItemImage src={props.imageUrl} loading="lazy" />
         <S.DimmedImage $saleStatus={props.saleStatus}>a</S.DimmedImage>
         <S.SaleItemInfo>
           <S.SaleItemName>{props.name}</S.SaleItemName>

diff --git a/src/pages/transferWritingPage/transferItem/TransferItem.tsx b/src/pages/transferWritingPage/transferItem/TransferItem.tsx
@@ -90,7 +90,7 @@ const TransferItem = ({
         </S.ItemTitleBtn>
       </S.ItemTitle>
       <S.ItemInfo>
-        <S.itemInfoImg src={imageUrl} />
+        <S.itemInfoImg src={imageUrl} loading="lazy" />
         <S.itemInfoDesc>
           <S.DescHotelName>{hotelName}</S.DescHotelName>
           <S.DescRoomName>{roomName}</S.DescRoomName>