feat: 🎸 add sort item price in auction page

sweatpotato13 · Feb 12, 2025 · 50c6476 · 50c6476
1 parent df68bbe
commit 50c6476
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/src/app/auction/page.tsx b/src/app/auction/page.tsx
@@ -29,6 +29,9 @@ export default function AuctionPage() {
     const [isFavoritesPopupVisible, setIsFavoritesPopupVisible] =
         useState(false);
     const [addFavoriteText, setAddFavoriteText] = useState("즐겨찾기 등록");
+    const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(
+        null
+    );
 
     useEffect(() => {
         if (searchTerm.length >= 2) {
@@ -49,6 +52,7 @@ export default function AuctionPage() {
             setLoading(true);
             setFilteredItems([]);
             setCurrentPage(1);
+            setSortDirection(null);
 
             let url = "/api/auction?";
             if (selectedCategory !== categories[0]) {
@@ -203,6 +207,22 @@ export default function AuctionPage() {
         };
     }, [isPopupVisible]); // isPopupVisible이 변경될 때마다 실행
 
+    // 정렬 처리 함수
+    const handleSortByPrice = () => {
+        const newDirection = sortDirection === "asc" ? "desc" : "asc";
+        setSortDirection(newDirection);
+
+        const sortedItems = [...filteredItems].sort((a, b) => {
+            if (newDirection === "asc") {
+                return a.auction_price_per_unit - b.auction_price_per_unit;
+            } else {
+                return b.auction_price_per_unit - a.auction_price_per_unit;
+            }
+        });
+
+        setFilteredItems(sortedItems);
+    };
+
     return (
         <div className="flex flex-col items-center justify-start min-h-screen p-6">
             <div className="w-full max-w-4xl p-6 backdrop-blur-sm rounded-lg flex-grow">
@@ -356,7 +376,17 @@ export default function AuctionPage() {
                             <tr>
                                 <th className="w-[50px] hidden md:table-cell"></th>
                                 <th className="w-[45%]">아이템명</th>
-                                <th>가격</th>
+                                <th
+                                    className="cursor-pointer hover:bg-base-200"
+                                    onClick={handleSortByPrice}
+                                >
+                                    가격{" "}
+                                    {sortDirection === "asc"
+                                        ? "↑"
+                                        : sortDirection === "desc"
+                                          ? "↓"
+                                          : ""}
+                                </th>
                                 <th>갯수</th>
                                 <th>만료 시간</th>
                             </tr>

diff --git a/src/constant/changelog.ts b/src/constant/changelog.ts
@@ -195,6 +195,9 @@ export const changelogData = [
             {
                 description: "esc로 경매장 아이템 팝업 닫기 기능 추가",
             },
+            {
+                description: "경매장 가격 정렬 기능 추가",
+            },
         ],
     },
 ];
-Original file line number
+Diff line change
@@ Expand Up / @@ -195,6 +195,9 @@ export const changelogData = [ @@
                 {
                     description: "esc로 경매장 아이템 팝업 닫기 기능 추가",
                 },
+                {
+                    description: "경매장 가격 정렬 기능 추가",
+                },
             ],
         },
     ];