chore: 🤖 update next config

sweatpotato13 · Jan 11, 2025 · 57cd8b0 · 57cd8b0
1 parent 94e62dc
commit 57cd8b0
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 21 deletions.
diff --git a/next.config.js b/next.config.js
@@ -14,6 +14,17 @@ const nextConfig = {
             },
         ];
     },
+    images: {
+        domains: ["mabires2.pril.cc"],
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'mabires2.pril.cc',
+            },
+        ],
+        deviceSizes: [40, 120, 200],
+        imageSizes: [40, 120, 200],
+    },
 };
 
 module.exports = nextConfig;
diff --git a/src/app/api/item-image/route.ts b/src/app/api/item-image/route.ts
@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const { BASE_URL } = process.env;
+
+export async function GET(request: NextRequest) {
+    const searchParams = request.nextUrl.searchParams;
+    const itemId = searchParams.get("id");
+    const allowedDomain = BASE_URL || "http://localhost:3000";
+
+    const referer = request.headers.get("referer");
+
+    if (!referer || !referer.startsWith(allowedDomain)) {
+        return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    if (!itemId) {
+        return new NextResponse("Missing item ID", { status: 400 });
+    }
+
+    try {
+        const imageUrl = `https://mabires2.pril.cc/invimage/kr/${itemId}/${itemId}.png`;
+        const imageResponse = await fetch(imageUrl);
+
+        if (!imageResponse.ok) {
+            return new NextResponse("Image not found", { status: 404 });
+        }
+
+        const imageBuffer = await imageResponse.arrayBuffer();
+
+        return new NextResponse(imageBuffer, {
+            status: 200,
+            headers: {
+                "Content-Type": "image/png",
+                "Cache-Control": "public, max-age=86400",
+                "X-Frame-Options": "DENY",
+                "X-Content-Type-Options": "nosniff",
+            },
+        });
+    } catch (error) {
+        console.error("Error fetching image:", error);
+        return new NextResponse("Error fetching image", { status: 500 });
+    }
+}
diff --git a/src/app/auction/page.tsx b/src/app/auction/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { ChevronLeft, ChevronRight, Loader } from "lucide-react";
+import Image from "next/image";
 import { useEffect, useState } from "react";
 
 import OptionRenderer from "@/components/option-renderer";
@@ -335,7 +336,8 @@ export default function AuctionPage() {
                     <table className="table w-full">
                         <thead>
                             <tr>
-                                <th className="w-[50%]">아이템명</th>
+                                <th className="w-[50px] hidden md:table-cell"></th>
+                                <th className="w-[45%]">아이템명</th>
                                 <th>가격</th>
                                 <th>갯수</th>
                                 <th>만료 시간</th>
@@ -346,7 +348,7 @@ export default function AuctionPage() {
                             errorMessage === null &&
                             loading === false ? (
                                 <tr>
-                                    <td colSpan={4} className="text-center">
+                                    <td colSpan={5} className="text-center">
                                         결과가 없습니다.
                                     </td>
                                 </tr>
@@ -356,25 +358,54 @@ export default function AuctionPage() {
                                         (currentPage - 1) * itemsPerPage,
                                         currentPage * itemsPerPage
                                     )
-                                    .map((item: any, index: number) => (
-                                        <tr
-                                            key={`item-${item.item_display_name}-${item.auction_price_per_unit}-${item.date_auction_expire}-${index}`}
-                                            onClick={() =>
-                                                handleItemClick(item)
-                                            }
-                                            className="cursor-pointer"
-                                        >
-                                            <td className="font-medium">
-                                                {item.item_display_name}
-                                            </td>
-                                            <td>
-                                                {item.auction_price_per_unit.toLocaleString()}{" "}
-                                                Gold
-                                            </td>
-                                            <td>{item.item_count}</td>
-                                            <td>{item.date_auction_expire}</td>
-                                        </tr>
-                                    ))
+                                    .map((item: any, index: number) => {
+                                        const itemInfo = AllItemList.find(
+                                            listItem =>
+                                                listItem.name === item.item_name
+                                        );
+
+                                        return (
+                                            <tr
+                                                key={`item-${item.item_display_name}-${item.auction_price_per_unit}-${item.date_auction_expire}-${index}`}
+                                                onClick={() =>
+                                                    handleItemClick(item)
+                                                }
+                                                className="cursor-pointer hover:bg-gray-100"
+                                            >
+                                                <td className="w-[50px] hidden md:table-cell">
+                                                    {itemInfo && (
+                                                        <>
+                                                            <Image
+                                                                src={`/api/item-image?id=${itemInfo.id}`}
+                                                                alt={
+                                                                    item.item_name
+                                                                }
+                                                                width={40}
+                                                                height={40}
+                                                                sizes="40px"
+                                                                className="object-contain cursor-pointer"
+                                                                priority={false}
+                                                                unoptimized={
+                                                                    true
+                                                                }
+                                                            />
+                                                        </>
+                                                    )}
+                                                </td>
+                                                <td className="font-medium">
+                                                    {item.item_display_name}
+                                                </td>
+                                                <td>
+                                                    {item.auction_price_per_unit.toLocaleString()}{" "}
+                                                    Gold
+                                                </td>
+                                                <td>{item.item_count}</td>
+                                                <td>
+                                                    {item.date_auction_expire}
+                                                </td>
+                                            </tr>
+                                        );
+                                    })
                             )}
                         </tbody>
                     </table>

diff --git a/src/constant/changelog.ts b/src/constant/changelog.ts
@@ -143,4 +143,12 @@ export const changelogData = [
             },
         ],
     },
+    {
+        date: "2025-01-11",
+        changes: [
+            {
+                description: "경매장 아이템 이미지 추가",
+            },
+        ],
+    },
 ];