Feat : status 별 페이징 기능 추가 #14

Repick-official · Dec 23, 2024 · ca2e728 · ca2e728
1 parent 7bbbb26
commit ca2e728
Show file tree

Hide file tree

Showing 6 changed files with 240 additions and 28 deletions.
diff --git a/src/app/totalItem/userItem/[...slug]/page.tsx b/src/app/totalItem/userItem/[...slug]/page.tsx
@@ -41,6 +41,9 @@ export default function Page() {
     false,
   ]);
 
+  const [page, setPage] = useState(0); // 현재 페이지 상태
+  const size = 6; // 페이지당 아이템 수
+
   const handleButtonClick = (index: number) => {
     const updatedButtons = selectedButtons.map((_, i) => i === index);
     setSelectedButtons(updatedButtons);
@@ -87,8 +90,8 @@ export default function Page() {
             const response = await getClothingSalesDetails(
               clothingSalesId,
               status,
-              "0",
-              "4"
+              String(page),
+              String(size)
             );
             return response;
           } catch (error) {
@@ -122,23 +125,29 @@ export default function Page() {
       const result = await getClothingSalesDetails(
         clothingSalesId, // path 파라미터
         state, // path 파라미터 (productState)
-        "0", // query 파라미터 (page)
-        "4" // query 파라미터 (size)
+        String(page),
+        String(size)
       );
       setItems(result);
       console.log("result", result);
     } catch (error) {
       console.error("Error fetching items for selected state:", error);
     }
   };
+  // 페이지 변경 함수
+  const handlePageChange = (newPage: number) => {
+    if (newPage >= 0 && (!items || newPage < items.result.totalPages)) {
+      setPage(newPage);
+    }
+  };
 
   useEffect(() => {
     fetchTotalElementsForAllStates(); // 처음에 전체 상태의 totalElements 불러오기
   }, []);
 
   useEffect(() => {
     fetchItemsForSelectedState(); // 선택된 상태의 아이템 불러오기
-  }, [state]);
+  }, [state, page, size]);
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -223,24 +232,50 @@ export default function Page() {
                 </div>
               ))}
             </div>
-            {/* <SellingOrSold clothing={items} /> */}
+
             <div className="mt-24pxr">
-              {selectedButtons[0] && <SellingProduct clothing={items} />}
-              {selectedButtons[1] && <SoldProduct clothing={items} />}
+              {selectedButtons[0] && (
+                <SellingProduct
+                  clothing={items}
+                  handlePageChange={handlePageChange}
+                  page={page}
+                  size={size}
+                />
+              )}
+              {selectedButtons[1] && (
+                <SoldProduct
+                  clothing={items}
+                  handlePageChange={handlePageChange}
+                  page={page}
+                  size={size}
+                />
+              )}
               {selectedButtons[2] && (
                 <RejectedProduct
                   rejectedItems={items}
                   clothingSalesId={clothingSalesId}
+                  handlePageChange={handlePageChange}
+                  page={page}
+                  size={size}
                 />
               )}
               {selectedButtons[3] && (
                 <ExpiredProduct
                   expiredItems={items}
                   clothingSalesId={clothingSalesId}
+                  handlePageChange={handlePageChange}
+                  page={page}
+                  size={size}
                 />
               )}
               {selectedButtons[4] && (
-                <KGProduct items={items} clothingSalesId={clothingSalesId} />
+                <KGProduct
+                  items={items}
+                  clothingSalesId={clothingSalesId}
+                  handlePageChange={handlePageChange}
+                  page={page}
+                  size={size}
+                />
               )}
             </div>
           </div>

diff --git a/src/components/totalItem/user/ExpiredProduct.tsx b/src/components/totalItem/user/ExpiredProduct.tsx
@@ -5,16 +5,19 @@ import Image from "next/image";
 import { getClothingSalesDetails, updateProductReturn } from "@/api/request";
 import ReExDropdown from "../dropdown/ReExDropdown";
 
-export default function ExpiredProduct({ expiredItems, clothingSalesId }: any) {
+export default function ExpiredProduct({
+  expiredItems,
+  clothingSalesId,
+  handlePageChange,
+  page,
+  size,
+}: any) {
   const [view, setView] = useState<{ [key: string]: boolean }>({});
   const [userItems, setUserItems] = useState<any>(
     expiredItems?.result?.content
   );
   //const [items, setItems] = useState(expiredItems.result.content);
 
-  const [page, setPage] = useState(0); // 현재 페이지 상태
-  const size = 10; // 페이지당 아이템 수
-
   const [reloadTrigger, setReloadTrigger] = useState(false); // 데이터 재로드 트리거
 
   // 데이터 가져오기 함수
@@ -158,8 +161,8 @@ export default function ExpiredProduct({ expiredItems, clothingSalesId }: any) {
                   <ReExDropdown
                     item={item}
                     setItems={setUserItems}
-                    page={"0"}
-                    size={"4"}
+                    page={page}
+                    size={size}
                     onStateChange={fetchItems} // 콜백 함수 전달
                   />
                 )}
@@ -169,6 +172,39 @@ export default function ExpiredProduct({ expiredItems, clothingSalesId }: any) {
           </div>
         ))}
         <div className="h-1pxr w-full bg-dark-gray"></div>
+
+        {/* 페이지네이션 버튼 */}
+        <div className="pagination mt-16pxr flex justify-center space-x-2">
+          <button
+            onClick={() => handlePageChange(page - 1)}
+            disabled={page === 0}
+            className="px-4 py-2 border rounded"
+          >
+            이전
+          </button>
+
+          {[...Array(expiredItems?.result.totalPages || 1)].map((_, index) => (
+            <button
+              key={index}
+              onClick={() => handlePageChange(index)}
+              className={`px-3 py-1 border rounded ${
+                index === page ? "bg-gray-300" : ""
+              }`}
+            >
+              {index + 1}
+            </button>
+          ))}
+
+          <button
+            onClick={() => handlePageChange(page + 1)}
+            disabled={
+              expiredItems && page + 1 >= expiredItems.result.totalPages
+            }
+            className="px-4 py-2 border rounded"
+          >
+            다음
+          </button>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/totalItem/user/KGProduct.tsx b/src/components/totalItem/user/KGProduct.tsx
@@ -2,15 +2,18 @@
 import { useState, useEffect } from "react";
 import { getClothingSalesDetails, updateProductReturn } from "@/api/request";
 
-export default function KGProduct({ items, clothingSalesId }: any) {
+export default function KGProduct({
+  items,
+  clothingSalesId,
+  handlePageChange,
+  page,
+  size,
+}: any) {
   const [view, setView] = useState<{ [key: string]: boolean }>({});
   const [userItems, setUserItems] = useState<any[]>(items?.result?.content);
   const [inputKg, setInputKg] = useState("");
   const [inputPoint, setInputPoint] = useState("");
 
-  const [page, setPage] = useState(0); // 현재 페이지 상태
-  const size = 10; // 페이지당 아이템 수
-
   const [isExpired, setIsExpired] = useState(false);
   const [arrow, setArrow] = useState(false);
 
@@ -161,6 +164,37 @@ export default function KGProduct({ items, clothingSalesId }: any) {
           </div>
         ))}
         <div className="h-1pxr w-full bg-dark-gray"></div>
+
+        {/* 페이지네이션 버튼 */}
+        <div className="pagination mt-16pxr flex justify-center space-x-2">
+          <button
+            onClick={() => handlePageChange(page - 1)}
+            disabled={page === 0}
+            className="px-4 py-2 border rounded"
+          >
+            이전
+          </button>
+
+          {[...Array(items?.result.totalPages || 1)].map((_, index) => (
+            <button
+              key={index}
+              onClick={() => handlePageChange(index)}
+              className={`px-3 py-1 border rounded ${
+                index === page ? "bg-gray-300" : ""
+              }`}
+            >
+              {index + 1}
+            </button>
+          ))}
+
+          <button
+            onClick={() => handlePageChange(page + 1)}
+            disabled={items && page + 1 >= items.result.totalPages}
+            className="px-4 py-2 border rounded"
+          >
+            다음
+          </button>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/totalItem/user/RejectedProduct.tsx b/src/components/totalItem/user/RejectedProduct.tsx
@@ -8,16 +8,16 @@ import ReExDropdown from "../dropdown/ReExDropdown";
 export default function RejectedProduct({
   rejectedItems,
   clothingSalesId,
+  handlePageChange,
+  page,
+  size,
 }: any) {
   const [view, setView] = useState<{ [key: string]: boolean }>({});
   const [userItems, setUserItems] = useState<any>(
     rejectedItems?.result?.content
   );
   //const [items, setItems] = useState(expiredItems.result.content);
 
-  const [page, setPage] = useState(0); // 현재 페이지 상태
-  const size = 10; // 페이지당 아이템 수
-
   const [reloadTrigger, setReloadTrigger] = useState(false); // 데이터 재로드 트리거
 
   // 데이터 가져오기 함수
@@ -161,8 +161,8 @@ export default function RejectedProduct({
                   <ReExDropdown
                     item={item}
                     setItems={setUserItems}
-                    page={"0"}
-                    size={"4"}
+                    page={page}
+                    size={size}
                     onStateChange={fetchItems} // 콜백 함수 전달
                   />
                 )}
@@ -172,6 +172,39 @@ export default function RejectedProduct({
           </div>
         ))}
         <div className="h-1pxr w-full bg-dark-gray"></div>
+
+        {/* 페이지네이션 버튼 */}
+        <div className="pagination mt-16pxr flex justify-center space-x-2">
+          <button
+            onClick={() => handlePageChange(page - 1)}
+            disabled={page === 0}
+            className="px-4 py-2 border rounded"
+          >
+            이전
+          </button>
+
+          {[...Array(rejectedItems?.result.totalPages || 1)].map((_, index) => (
+            <button
+              key={index}
+              onClick={() => handlePageChange(index)}
+              className={`px-3 py-1 border rounded ${
+                index === page ? "bg-gray-300" : ""
+              }`}
+            >
+              {index + 1}
+            </button>
+          ))}
+
+          <button
+            onClick={() => handlePageChange(page + 1)}
+            disabled={
+              rejectedItems && page + 1 >= rejectedItems.result.totalPages
+            }
+            className="px-4 py-2 border rounded"
+          >
+            다음
+          </button>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/totalItem/user/SellingProduct.tsx b/src/components/totalItem/user/SellingProduct.tsx
@@ -2,9 +2,14 @@
 import { useState, useEffect, use } from "react";
 import { ClothingSalesItemStatus } from "@/interface/interface";
 
-export default function SellingProduct({ clothing }: any) {
+export default function SellingProduct({
+  clothing,
+  handlePageChange,
+  page,
+  size,
+}: any) {
   const [view, setView] = useState<{ [key: string]: boolean }>({});
-  const [userItems, setUserItems] = useState<any[]>([]);
+  const [userItems, setUserItems] = useState<any>([]);
 
   useEffect(() => {
     if (clothing?.result?.content) {
@@ -60,7 +65,7 @@ export default function SellingProduct({ clothing }: any) {
           </div>
         </div>
 
-        {userItems?.map((item) => (
+        {userItems?.map((item: any) => (
           <div key={item.productCode}>
             <div className="h-92pxr flex items-center text-14pxr font-normal leading-21pxr">
               <div className="ml-15pxr w-91pxr">{item.productCode}</div>
@@ -112,10 +117,43 @@ export default function SellingProduct({ clothing }: any) {
                 </div>
               </ul>
             </div>
+
             <div className="h-1pxr w-full bg-dark-gray"></div>
           </div>
         ))}
+
         <div className="h-1pxr w-full bg-dark-gray"></div>
+
+        {/* 페이지네이션 버튼 */}
+        <div className="pagination mt-16pxr flex justify-center space-x-2">
+          <button
+            onClick={() => handlePageChange(page - 1)}
+            disabled={page === 0}
+            className="px-4 py-2 border rounded"
+          >
+            이전
+          </button>
+
+          {[...Array(clothing?.result.totalPages || 1)].map((_, index) => (
+            <button
+              key={index}
+              onClick={() => handlePageChange(index)}
+              className={`px-3 py-1 border rounded ${
+                index === page ? "bg-gray-300" : ""
+              }`}
+            >
+              {index + 1}
+            </button>
+          ))}
+
+          <button
+            onClick={() => handlePageChange(page + 1)}
+            disabled={clothing && page + 1 >= clothing.result.totalPages}
+            className="px-4 py-2 border rounded"
+          >
+            다음
+          </button>
+        </div>
       </div>
     </div>
   );