[feat] product 페이지 metadata 설정

next.config.mjs

@@ -20,17 +20,13 @@ const nextConfig = {
   },
 
   webpack(config) {
-    // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
-
     config.module.rules.push(
-      // Reapply the existing rule, but only for svg imports ending in ?url
       {
         ...fileLoaderRule,
         test: /\.svg$/i,
-        resourceQuery: /url/, // *.svg?url
+        resourceQuery: /url/,
       },
-      // Convert all other *.svg imports to React components
       {
         test: /\.svg$/i,
         issuer: fileLoaderRule.issuer,
@@ -56,27 +52,252 @@ const nextConfig = {
         ],
       },
     );
-
-    // Modify the file loader rule to ignore *.svg, since we have it handled now.
     fileLoaderRule.exclude = /\.svg$/i;
-
     config.module.rules.push({
       test: /\.(woff|woff2|eot|ttf|otf)$/i,
       type: 'asset/resource',
       generator: {
         filename: 'static/fonts/[name][ext]',
       },
     });
-
     return config;
   },
-
   sassOptions: {
     includePaths: ['styles'],
     additionalData: `@import "src/styles/_globals.scss";`,
   },
-
   transpilePackages: ['three'],
+
+  async redirects() {
+    return [
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*MJ12bot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*Amazonbot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*ClaudeBot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*DotBot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*Linkbot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*Iframely.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*AhrefsBot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*PetalBot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*BLEXBot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*woorankreview.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*Barkrowler.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*Neevabot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*SeoSiteCheckup.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*SemrushBot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*RSiteAuditor.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*YandexBot.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*GrapeshotCrawler.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/(.*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '(.*proximic.*)',
+          },
+        ],
+        destination: '/401',
+        permanent: false,
+      },
+      {
+        source: '/wordpress',
+        destination: '/401',
+        permanent: true,
+      },
+      {
+        source: '/wp-login.php',
+        destination: '/401',
+        permanent: true,
+      },
+    ];
+  },
 };
 
 export default nextConfig;

src/app/shop/[category]/[productId]/_utils/metadata.ts

@@ -0,0 +1,19 @@
+import { ProductType } from '@/types/productType';
+import { Metadata } from 'next';
+
+interface ProductMetadataParams {
+  product: ProductType;
+}
+
+export const createProductMetadata = ({ product }: ProductMetadataParams): Metadata => {
+  const { name, detailsImg, categoryName, reviewscount, price, scope, views } = product;
+
+  return {
+    title: `${name} - 상품 정보`,
+    description: `${name}은(는) ${categoryName} 카테고리의 제품으로, 가격은 ${price}원입니다. 총 ${reviewscount}개의 리뷰에서 평균 평점 ${scope}점을 기록했으며, ${views}회의 조회수를 기록한 인기 상품입니다.`,
+    openGraph: {
+      title: `${name} - 상품 정보`,
+      images: detailsImg,
+    },
+  };
+};

src/app/shop/[category]/[productId]/page.tsx

@@ -1,12 +1,30 @@
+import { getQueryClient } from '@/libs/client';
+import { Metadata } from 'next';
+import { fetchProductQuery } from '@/libs/prefetchers';
 import ProductDetail from './_components/Product/ProductDetail';
 import DetailTab from './_components/TabContents/DetailTab';
+import { createProductMetadata } from './_utils/metadata';
 
 interface ProductDetailParams {
   params: {
     [param: string]: string;
   };
 }
 
+export const generateMetadata = async ({ params }: ProductDetailParams): Promise<Metadata> => {
+  const { productId } = params;
+  const queryClient = getQueryClient();
+  const product = await fetchProductQuery(queryClient, productId);
+
+  if (!product) {
+    return {
+      title: '상품 정보를 불러올 수 없습니다.',
+    };
+  }
+
+  return createProductMetadata({ product });
+};
+
 export default async function ProductDetailPage({ params }: ProductDetailParams) {
   const { productId } = params;
   const localProductId = Number(productId);

src/app/shop/layout.tsx

@@ -1,22 +1,18 @@
-// import { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
-// import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
+import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
 
-// interface ShopLayoutProps {
-//   children: ReactNode;
-// }
-
-// export default function ShopLayout({ children }: ShopLayoutProps) {
-//   return (
-//     <section>
-//       <div>
-//         <Breadcrumb />
-//         {children}
-//       </div>
-//     </section>
-//   );
-// }
+interface ShopLayoutProps {
+  children: ReactNode;
+}
 
-export default function ShopLayout() {
-  return null;
+export default function ShopLayout({ children }: ShopLayoutProps) {
+  return (
+    <section>
+      <div>
+        <Breadcrumb />
+        {children}
+      </div>
+    </section>
+  );
 }