Feat : 오래된 순 정렬 #14

src/api/request.tsx

@@ -98,17 +98,13 @@ export const updateOrderState = async (
 export const getClothingSales = async (
   page: string,
   size: string,
-  userId?: number
+  type: string = "latest" // 기본값으로 "latest" 설정,
 ) => {
   try {
-    const url = new URL(process.env.API_URL + "/product/count");
-    if (userId !== undefined) {
-      url.searchParams.append("userId", userId.toString());
-    }
-    url.searchParams.append("page", page);
-    url.searchParams.append("size", size);
+    // URL에 동적으로 파라미터 추가
+    let url = `${process.env.API_URL}/product/count?type=${type}&page=${page}&size=${size}`;
 
-    const response = await fetch(url.toString(), {
+    const response = await fetch(url, {
       method: "GET",
       headers: {
         "Content-Type": "application/json",

src/app/totalItem/page.tsx

@@ -1,36 +1,51 @@
-'use client';
-import MainTitle from '@/components/titles/MainTitle';
-import TotalItemContent from '@/components/totalItem/TotalItemContent';
-import TopInfo from '@/components/wardrobe/TopInfo';
-import { useState, useEffect } from 'react';
-import { getClothingSales } from '@/api/request';
-import { ClothingSalesStatus } from '@/interface/interface';
+"use client";
+import MainTitle from "@/components/titles/MainTitle";
+import TotalItemContent from "@/components/totalItem/TotalItemContent";
+import TopInfo from "@/components/wardrobe/TopInfo";
+import { useState, useEffect } from "react";
+import { getClothingSales } from "@/api/request";
+import { ClothingSalesStatus } from "@/interface/interface";
 
 function Totalitem() {
-	const [clothing, setClothing] = useState<ClothingSalesStatus | null>(null);
+  const [clothing, setClothing] = useState<ClothingSalesStatus | null>(null);
+  const [page, setPage] = useState(0); // 현재 페이지 상태
+  const size = 10; // 페이지당 아이템 수
+  const [sortType, setSortType] = useState("latest"); // 정렬 기준 상태
 
-	useEffect(() => {
-		const fetchItem = async () => {
-			const requestPurchase = await getClothingSales('0', '10');
-			setClothing(requestPurchase);
+  const fetchItem = async () => {
+    const requestPurchase = await getClothingSales(
+      String(page),
+      String(size),
+      sortType
+    );
+    setClothing(requestPurchase);
+    console.log("requestPurchase", requestPurchase);
+  };
 
-			console.log('requestPurchase', requestPurchase);
-		};
-		fetchItem();
-	}, []);
+  // 데이터 가져오기 함수
+  useEffect(() => {
+    fetchItem();
+  }, [page, sortType]);
 
-	console.log(clothing?.result.content.length);
+  // 정렬 기준 변경 함수
+  const handleSortChange = (sort: string) => {
+    setSortType(sort);
+  };
 
-	return (
-		<div className="mt-69pxr ml-104pxr">
-			<div>
-				<MainTitle mainTitleName="상품 종합 현황" />
-				<div>
-					<TopInfo total={clothing?.result.totalElements} />
-					<TotalItemContent clothing={clothing} />
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className="mt-69pxr ml-104pxr">
+      <div>
+        <MainTitle mainTitleName="상품 종합 현황" />
+        <div>
+          <TopInfo
+            total={clothing?.result.totalElements}
+            onSortChange={handleSortChange}
+            currentSort={sortType}
+          />
+          <TotalItemContent clothing={clothing} />
+        </div>
+      </div>
+    </div>
+  );
 }
 export default Totalitem;