빌드 오류 수정

src/app/(user)/products/[category]/[subCategory]/page.jsx

@@ -11,60 +11,111 @@ import * as api from 'src/services';
 export const dynamic = 'error';
 export const revalidate = 10;
 
+// Static params generation with error handling
 export async function generateStaticParams() {
-  const { data } = await api.getSubCategorySlugs();
-  return data?.map((cat) => {
-    return {
-      subCategory: cat.slug,
-      category: cat.parentCategory.slug
-    };
-  });
+  try {
+    const { data } = await api.getSubCategorySlugs();
+    if (!data) throw new Error('No data returned from getSubCategorySlugs');
+
+    return data
+      .filter(cat => cat?.slug && cat?.parentCategory?.slug) // 필터링 추가
+      .map((cat) => ({
+        subCategory: cat.slug,
+        category: cat.parentCategory.slug,
+      }));
+  } catch (error) {
+    console.error('Error generating static params:', error.message);
+    return []; // 빈 배열 반환
+  }
 }
 
+// Metadata generation with error handling
 export async function generateMetadata({ params }) {
-  const { data: response } = await api.getSubCategoryBySlug(params.subCategory);
+  try {
+    const { data: response } = await api.getSubCategoryBySlug(params.subCategory);
+    if (!response) throw new Error('No data returned from getSubCategoryBySlug');
 
-  return {
-    title: response.metaTitle,
-    description: response.metaDescription,
-    title: response.name,
-    openGraph: {
-      images: [response.cover.url]
-    }
-  };
+    return {
+      title: response.metaTitle || 'Default Title', // 기본값 추가
+      description: response.metaDescription || 'Default Description',
+      openGraph: {
+        images: [response.cover?.url || '/default-image.jpg'], // 기본 이미지 추가
+      },
+    };
+  } catch (error) {
+    console.error('Error generating metadata:', error.message);
+    return {
+      title: 'Error',
+      description: 'An error occurred while generating metadata.',
+      openGraph: {
+        images: ['/default-image.jpg'], // 기본 이미지
+      },
+    };
+  }
 }
 
+// Main component with error handling
 export default async function Listing({ params }) {
   const { category, subCategory } = params;
-  const { data: subCategoryData } = await api.getSubCategoryTitle(subCategory);
 
-  return (
-    <Box>
-      <Box sx={{ bgcolor: 'background.default' }}>
-        <Container maxWidth="xl">
-          <HeaderBreadcrumbs
-            heading={subCategoryData?.name}
-            links={[
-              {
-                name: 'Home',
-                href: '/'
-              },
-              {
-                name: 'Products',
-                href: '/products'
-              },
-              {
-                name: subCategoryData?.parentCategory?.name,
-                href: `/products/${category}`
-              },
-              {
-                name: subCategoryData?.name
-              }
-            ]}
-          />
-          <ProductList subCategory={subCategoryData} />
-        </Container>
+  try {
+    const { data: subCategoryData } = await api.getSubCategoryTitle(subCategory);
+
+    if (!subCategoryData) throw new Error('No data found for the given subCategory');
+
+    return (
+      <Box>
+        <Box sx={{ bgcolor: 'background.default' }}>
+          <Container maxWidth="xl">
+            <HeaderBreadcrumbs
+              heading={subCategoryData?.name || 'Unknown Category'}
+              links={[
+                {
+                  name: 'Home',
+                  href: '/',
+                },
+                {
+                  name: 'Products',
+                  href: '/products',
+                },
+                {
+                  name: subCategoryData?.parentCategory?.name || 'Unknown Parent Category',
+                  href: `/products/${category}`,
+                },
+                {
+                  name: subCategoryData?.name || 'Unknown SubCategory',
+                },
+              ]}
+            />
+            <ProductList subCategory={subCategoryData} />
+          </Container>
+        </Box>
       </Box>
-    </Box>
-  );
+    );
+  } catch (error) {
+    console.error('Error rendering Listing component:', error.message);
+
+    return (
+      <Box>
+        <Box sx={{ bgcolor: 'background.default' }}>
+          <Container maxWidth="xl">
+            <HeaderBreadcrumbs
+              heading="Error"
+              links={[
+                {
+                  name: 'Home',
+                  href: '/',
+                },
+                {
+                  name: 'Products',
+                  href: '/products',
+                },
+              ]}
+            />
+            <Box>Error loading subcategory. Please try again later.</Box>
+          </Container>
+        </Box>
+      </Box>
+    );
+  }
 }