Merge pull request #198 from SCBJ-7/feat/#163-purchaselist-api

검색페이지 무한스크롤 설정 이슈 해결 및 구매내역 판매내역 뒤로가기 안됨 이슈 해결

index.html

@@ -24,6 +24,8 @@
     <div id="modal-root"></div>
     <div id="root"></div>
     <div id="overlay-root"></div>
+    <div id="modalTwo-root"></div>
+
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

src/apis/fetchPurchaseList.ts

@@ -1,10 +1,13 @@
-import axios from "axios";
+import { BASE_URL, END_POINTS } from "@constants/api";
+import { axiosInstance } from "./axiosInstance";
 
 export const fetchPurchaseList = async () => {
   try {
-    const response = await axios.get("/v1/members/purchased-history");
-    return response.data;
+    const response = await axiosInstance.get(
+      BASE_URL + END_POINTS.PURCHASE_HISTORY,
+    );
+    return response.data.data;
   } catch (err) {
-    alert("⚠️예기치 못한 에러가 발생하였습니다.");
+    throw new Error("⚠️예기치 못한 에러가 발생하였습니다.");
   }
 };

src/apis/fetchSeachList.ts

@@ -1,3 +1,4 @@
+import { BASE_URL, END_POINTS } from "@constants/api";
 import axios from "axios";
 
 export const fetchSearchList = async (
@@ -14,7 +15,7 @@ export const fetchSearchList = async (
 ) => {
   try {
     const response = await axios.post(
-      "https://3.34.147.187.nip.io/v1/products/search",
+      BASE_URL + END_POINTS.SEARCH,
       {
         location: location,
         checkIn: checkIn,

src/components/layout/header/HeaderTop.tsx

@@ -42,16 +42,16 @@ const Header = () => {
       title = "판매할 내역 선택";
       undo = false;
       break;
-    case PATH.PURCHASE_LIST:
+    case PATH.MY_PAGE:
       alarmIC = true;
       settingIC = true;
-      title = "구매내역";
-      undo = true;
+      title = "마이페이지";
+      undo = false;
       break;
     case PATH.SALE_LIST:
       alarmIC = true;
       settingIC = true;
-      title = "판매내역";
+      title = "마이페이지";
       undo = true;
       break;
     case PATH.PURCAHSE_DEATAIL:

src/components/portal/ModalPortal.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import ReactDom from "react-dom";
+
+interface Props {
+  children: ReactNode;
+}
+
+const ModalPortal = ({ children }: Props) => {
+  const el = document.getElementById("modalTwo-root") as HTMLElement;
+
+  return ReactDom.createPortal(children, el);
+};
+
+export default ModalPortal;

src/constants/api.ts

@@ -26,6 +26,7 @@ export const END_POINTS = {
     `/v1/products/pay-cancel?paymentType=${paymentType}`,
   STOCK: (productId: string) => `/v1/products/${productId}/stock`,
   NEW_TOKEN: "/v1/token/refresh",
+  SEARCH: "/v1/products/search",
 } as const;
 
 export const ERROR_CODE = {

src/constants/sale.ts

@@ -1,5 +1,5 @@
 export const NAV_LIST = [
-  { status: "all", label: "전체" },
+  { status: "", label: "전체" },
   { status: "for-sale", label: "판매중" },
   { status: "sale-completed", label: "판매완료" },
   { status: "calculate-completed", label: "정산완료" },

src/pages/myPage/components/myPageNav/MyPageNav.style.ts

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { NavLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 export const MyPageNavContainer = styled.section`
   width: 100%;
   height: 49px;
@@ -11,7 +11,7 @@ export const MyPageNavContainer = styled.section`
   color: ${({ theme }) => theme.color.greyScale3};
 `;
 
-export const MyPageNavCell = styled(NavLink)`
+export const MyPageNavCell = styled(Link)`
   width: 50%;
   height: 100%;
   display: flex;

src/pages/myPage/components/myPageNav/MyPageNav.tsx

@@ -1,27 +1,22 @@
 import * as S from "./MyPageNav.style";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { PATH } from "../../../../constants/path";
-import { useEffect } from "react";
 const MyPageNav = () => {
   const { pathname } = useLocation();
-  const navigate = useNavigate();
-  useEffect(() => {
-    if (pathname === PATH.MY_PAGE || pathname === "/my-page") {
-      navigate(PATH.PURCHASE_LIST);
-    }
-  }, [pathname, navigate]);
+
   const navList = [
     {
       id: 1,
       name: "구매내역",
-      path: PATH.PURCHASE_LIST,
+      path: PATH.MY_PAGE,
     },
     {
       id: 2,
       name: "판매내역",
       path: PATH.SALE_LIST,
     },
   ];
+
   return (
     <S.MyPageNavContainer>
       {navList.map((item) => {

src/pages/purchaseDetailPage/PurchaseDetail.tsx

@@ -11,7 +11,6 @@ const PurchaseDetail = () => {
   const id = searchParams.get("id");
   if (!id) throw new Error("존재하지 않는 roomId 입니다.");
   const navigate = useNavigate();
-  const indexFee = 5000;
   const { data } = useSuspenseQuery<IPurchaseData, AxiosError>({
     queryKey: ["roomasDetail", id],
     queryFn: () => fetchPurchaseDetail(id),
@@ -110,9 +109,7 @@ const PurchaseDetail = () => {
           </S.PayInfo>
           <S.StandardFlex>
             <S.TotalPrice>총 결제 금액</S.TotalPrice>
-            <S.TotalPriceInfo>
-              {(data.price - indexFee).toLocaleString()}원
-            </S.TotalPriceInfo>
+            <S.TotalPriceInfo>{data.price.toLocaleString()}원</S.TotalPriceInfo>
           </S.StandardFlex>
         </S.PayContainer>
       </S.MainSection>

src/pages/searchPage/Search.style.ts

@@ -22,7 +22,7 @@ interface TopButtonProps {
 }
 
 export const TopButton = styled(TopButtonIcon)<TopButtonProps>`
-  z-index: 10;
+  z-index: 100;
   position: absolute;
   bottom: 100px;
   right: 23px;

src/pages/searchPage/Search.tsx

@@ -8,17 +8,28 @@ import { useSearchFilterInfoStore } from "@store/store";
 import { fetchSearchList } from "@apis/fetchSeachList";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import UseIntersectionObserver from "@hooks/useIntersectionObserver";
+import Loading from "@components/loading/Loading";
 
 const Search = () => {
   const pageSize = 10;
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [scrollPosition, setScrollPosition] = useState(0);
   const searchInfo = useSearchFilterInfoStore((state) => state.searchInfo);
-  const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
-    useInfiniteQuery({
-      queryKey: [
-        "searchItems",
+  const { data, fetchNextPage, isLoading, hasNextPage } = useInfiniteQuery({
+    queryKey: [
+      "searchItems",
+      searchInfo.location,
+      searchInfo.checkIn,
+      searchInfo.checkOut,
+      searchInfo.quantityPeople,
+      searchInfo.sorted,
+      searchInfo.brunch,
+      searchInfo.pool,
+      searchInfo.oceanView,
+    ],
+    queryFn: ({ pageParam = 0 }) =>
+      fetchSearchList(
         searchInfo.location,
         searchInfo.checkIn,
         searchInfo.checkOut,
@@ -27,29 +38,17 @@ const Search = () => {
         searchInfo.brunch,
         searchInfo.pool,
         searchInfo.oceanView,
-      ],
-      queryFn: ({ pageParam = 1 }) =>
-        fetchSearchList(
-          searchInfo.location,
-          searchInfo.checkIn,
-          searchInfo.checkOut,
-          searchInfo.quantityPeople,
-          searchInfo.sorted,
-          searchInfo.brunch,
-          searchInfo.pool,
-          searchInfo.oceanView,
-          pageParam,
-          pageSize,
-        ),
-      initialPageParam: 0,
-      getNextPageParam: (lastPage, pages) => {
-        const lastData = lastPage?.content;
-        console.log("last", lastData.length);
-        return lastData && lastData.length === pageSize
-          ? pages[0]?.number + 1
-          : undefined;
-      },
-    });
+        pageParam,
+        pageSize,
+      ),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      const lastData = lastPage?.content;
+      return lastData && lastData.length === pageSize
+        ? lastPage?.number + 1
+        : undefined;
+    },
+  });
 
   const handleIntersect: IntersectionObserverCallback = (entries) => {
     entries.forEach((entry) => {
@@ -58,10 +57,12 @@ const Search = () => {
       }
     });
   };
+
   const { setTarget } = UseIntersectionObserver({
     onIntersect: handleIntersect,
     threshold: 0.5,
   });
+
   const MoveToTop = () => {
     if (scrollContainerRef.current) {
       scrollContainerRef.current.scrollTo({
@@ -75,6 +76,7 @@ const Search = () => {
     const handleScroll = () => {
       if (scrollContainerRef.current) {
         const currentPosition = scrollContainerRef.current.scrollTop;
+        console.log(currentPosition);
         setScrollPosition(currentPosition);
       }
     };
@@ -88,16 +90,14 @@ const Search = () => {
         container.removeEventListener("scroll", handleScroll);
       };
     }
-  }, [scrollContainerRef]);
-  console.log("isFetchingNextPage", isFetchingNextPage);
+  }, []);
   return (
     <>
       <SearchBar />
       <SearchNav />
 
-      <S.SearchContainer>
-        {isLoading && <div></div>}
-
+      <S.SearchContainer ref={scrollContainerRef}>
+        {isLoading && <Loading />}
         {!isLoading && data && !data?.pages?.[0]?.content?.length && (
           <S.NoResultCover>
             <S.NoResultText>검색 조건에 맞는 호텔이 없어요</S.NoResultText>
@@ -106,22 +106,21 @@ const Search = () => {
             </S.NoResultTextTwo>
           </S.NoResultCover>
         )}
-
+        <S.TopButton $visible={scrollPosition > 500} onClick={MoveToTop} />
         <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>
-        <div ref={(node) => setTarget(node)} />
-      </S.SearchContainer>
 
-      <S.TopButton $visible={scrollPosition > 500} onClick={MoveToTop} />
+        <div ref={setTarget} />
+      </S.SearchContainer>
     </>
   );
 };
+
 export default Search;

src/pages/searchPage/components/descriptionModal/DescriptionModal.style.ts

@@ -0,0 +1,50 @@
+import styled from "styled-components";
+import CloseButton from "@assets/icons/ic_close-button.svg?react";
+
+export const ModalTwoContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 120;
+`;
+
+export const ModalTwoContent = styled.div`
+  width: 260px;
+  height: 111px;
+  position: fixed;
+  background-color: white;
+  padding: 1rem;
+  border-radius: 20px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const ModalTwoTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+`;
+export const ModaltTwoTitle = styled.div`
+  ${({ theme }) => theme.typo.body3}
+`;
+export const ModalTwoText = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 38px;
+  color: black;
+  ${({ theme }) => theme.typo.body6}
+`;
+export const ModalCloseButton = styled(CloseButton)`
+  margin-right: auto;
+  cursor: pointer;
+`;