diff --git a/src/apis/fetchPurchaseList.ts b/src/apis/fetchPurchaseList.ts
index 6a3b3889..c50bb810 100644
--- 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
index cc4b2cf7..825eb8cf 100644
--- 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
index a1fce87a..5d03ed06 100644
--- 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
index a9b13dd7..316477df 100644
--- 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 판매종료까지 {data.leftHour}시간 남았어요!;
+ return (
+
+ 판매종료까지 {calculateRemainingTime(data.checkIn)}시간 남았어요!
+
+ );
if (data.saleStatus === "판매만료")
return 체크인 시간이 지나 판매 종료된 상품입니다;
if (data.saleStatus === "정산완료")
@@ -107,7 +133,9 @@ const SaleDetail = () => {
- {data.secondPrice.secondPriceStartDate + "부터 2차 판매 시작"}
+ {formattedDate(
+ new Date(data.secondPrice.secondPriceStartDate),
+ ) + "부터 2차 판매 시작"}
{
)}
-
+
-
+
>
);
@@ -174,11 +202,11 @@ const SaleDetail = () => {
-
+
-
+
>
);
@@ -220,7 +248,6 @@ const SaleDetail = () => {
판매일시
- {/* FIXME: checkIn 시간이 아닌 판매된 시간으로 변경 (백엔드 수정 후) */}
{data.checkIn}
diff --git a/src/pages/searchPage/Search.tsx b/src/pages/searchPage/Search.tsx
index 9b4aef4b..00b76657 100644
--- a/src/pages/searchPage/Search.tsx
+++ b/src/pages/searchPage/Search.tsx
@@ -95,7 +95,7 @@ const Search = () => {
-
+
{isLoading && }
{!isLoading && data && !data?.pages?.[0]?.content?.length && (
@@ -109,11 +109,10 @@ const Search = () => {
{data &&
data.pages?.length > 0 &&
- data.pages.map(
- (page) =>
- page?.content.map((item: ISearchList) => (
-
- )),
+ data.pages.map((page) =>
+ page?.content.map((item: ISearchList) => (
+
+ )),
)}
diff --git a/src/pages/searchPage/components/searchItem/SearchItem.tsx b/src/pages/searchPage/components/searchItem/SearchItem.tsx
index e4bbf0c8..fb4401d3 100644
--- 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 }) => {
<>
-
+
{item.name}
{item.roomType}
diff --git a/src/pages/searchPage/components/searchModalButton/SearchModalButton.style.ts b/src/pages/searchPage/components/searchModalButton/SearchModalButton.style.ts
index a8760d2a..9cab6781 100644
--- 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
index 4856f582..5747aa2d 100644
--- 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 ;
}
@@ -78,7 +76,7 @@ const TransferPurchase = () => {
))
) : status === "done" ? (
<>
- 구매내역이 없습니다
+ 이용완료 내역이 없습니다
{!sortedPurchaseItems.length && (
지금 상품을 구매하고 호캉스 떠나보세요!
@@ -96,7 +94,7 @@ const TransferPurchase = () => {
>
) : (
<>
- 이용완료 내역이 없습니다
+ 구매내역이 없습니다
{!sortedPurchaseItems.length && (
지금 상품을 구매하고 호캉스 떠나보세요!
diff --git a/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx b/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx
index 12d089c2..0a0aa6e4 100644
--- a/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx
+++ b/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx
@@ -20,7 +20,7 @@ const PuchaseItem = (props: IPurchaseItemWithRemainDate) => {
-
+
{props.name}
{props.roomType}
diff --git a/src/pages/transferSalePage/TransferSale.tsx b/src/pages/transferSalePage/TransferSale.tsx
index fea3a756..58487f69 100644
--- 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
index a83890e3..7a07fa72 100644
--- a/src/pages/transferSalePage/components/saleItem/SaleItem.tsx
+++ b/src/pages/transferSalePage/components/saleItem/SaleItem.tsx
@@ -64,7 +64,7 @@ const SaleItem = (props: ISaleItemWithRemainDate) => {
-
+
a
{props.name}
diff --git a/src/pages/transferWritingPage/transferItem/TransferItem.tsx b/src/pages/transferWritingPage/transferItem/TransferItem.tsx
index fc4bf028..5a702f4b 100644
--- a/src/pages/transferWritingPage/transferItem/TransferItem.tsx
+++ b/src/pages/transferWritingPage/transferItem/TransferItem.tsx
@@ -90,7 +90,7 @@ const TransferItem = ({
-
+
{hotelName}
{roomName}