Merge pull request #51 from sweatpotato13/develop

Mergo to main
sweatpotato13 · Feb 13, 2025 · 305db92 · 305db92
2 parents 983b970 + e3b767b
commit 305db92
Show file tree

Hide file tree

Showing 6 changed files with 255 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,8 @@
     "yup": "^1.6.1"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.20.0",
     "@types/eslint-plugin-security": "^3",
     "@types/node": "^22",
     "@types/nodemailer": "^6.4.17",
@@ -38,13 +40,13 @@
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^15.14.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "prettier": "3.4.2",
     "tailwindcss": "^3",
     "ts-jest": "29.2.5",
     "typescript": "5.7.2",
-    "globals": "^15.14.0",
     "typescript-eslint": "8.19.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
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]) {
@@ -185,6 +189,40 @@ export default function AuctionPage() {
         }
     }, [addFavoriteText]);
 
+    // ESC 키 이벤트 리스너 추가
+    useEffect(() => {
+        const handleEsc = (event: KeyboardEvent) => {
+            if (event.key === "Escape") {
+                handleClosePopup();
+            }
+        };
+
+        if (isPopupVisible) {
+            window.addEventListener("keydown", handleEsc);
+        }
+
+        // 컴포넌트가 언마운트되거나 isPopupVisible이 false가 될 때 이벤트 리스너 제거
+        return () => {
+            window.removeEventListener("keydown", handleEsc);
+        };
+    }, [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">
@@ -338,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/components/option-renderer/index.tsx b/src/components/option-renderer/index.tsx
@@ -137,6 +137,13 @@ function OptionRenderer({ options }: OptionRendererProps) {
                                                     ? valueStr
                                                     : parseInt(valueStr);
 
+                                                // 수리비 증가는 부정적인 효과이므로 빨간색으로 표시
+                                                const isNegativeEffect =
+                                                    (changeType === "증가" &&
+                                                        statType.trim() ===
+                                                            "수리비") ||
+                                                    changeType === "감소";
+
                                                 const enchantStat =
                                                     enchantInfo?.stats.find(
                                                         s =>
@@ -154,10 +161,9 @@ function OptionRenderer({ options }: OptionRendererProps) {
                                                     <div
                                                         key={`enchant-stat-${statIndex}`}
                                                         className={
-                                                            changeType ===
-                                                            "증가"
-                                                                ? "text-blue-400"
-                                                                : "text-red-400"
+                                                            isNegativeEffect
+                                                                ? "text-red-400"
+                                                                : "text-blue-400"
                                                         }
                                                     >
                                                         • {statType} {value}{" "}
@@ -226,7 +232,7 @@ function OptionRenderer({ options }: OptionRendererProps) {
                         </div>
                     )}
                     {/* 보석 개조 */}
-                    {upgrades.find(u => u.option_type === "보석 개��") && (
+                    {upgrades.find(u => u.option_type === "보석 개조") && (
                         <div className="text-white">
                             보석 개조
                             <div className="pl-4">