fix:page 형식으로 nav바 변경

Moaguide-develop · Sep 5, 2024 · 1f587ad · 1f587ad
2 parents 2d39ebd + 17a30a5
commit 1f587ad
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 99 deletions.
diff --git a/src/app/newissue/page.tsx b/src/app/newissue/page.tsx
@@ -0,0 +1,15 @@
+import RecentlyIssueIndex from '@/components/recentlyIssue/Index';
+import Navbar from '@/components/common/Navbar';
+import { Suspense } from 'react';
+const NewIssuePage = () => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <div>
+        <Navbar />
+        <RecentlyIssueIndex />
+      </div>
+    </Suspense>
+  );
+};
+
+export default NewIssuePage;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,67 +1,15 @@
 import Navbar from '@/components/common/Navbar';
 import HomeIndex from '@/components/home/Index';
-import RecentlyIssueIndex from '@/components/recentlyIssue/Index';
-import React from 'react';
-import { IProductDetailData, IReport, IReportData, ISummaryData } from '@/types/Diviend';
-import Product from '@/components/product/Product';
-import ReportIndex from '@/components/report/ReportIndex';
-
-const HomePage = async ({
-  searchParams
-}: {
-  searchParams: { [key: string]: string | string[] | undefined };
-}) => {
-  const pages = searchParams['page'] || 1;
-  console.log(pages);
-  const buildingDiviedResponse = await fetch(
-    `https://api.moaguide.com/summary/recent/building`,
-    {
-      cache: 'no-store'
-    }
-  );
-
-  const buildingReportResponse = await fetch(
-    'https://api.moaguide.com/summary/report/building',
-    {
-      cache: 'no-store'
-    }
-  );
-  const productDetailResponse = await fetch(
-    `https://api.moaguide.com/summary/list/all?page=${pages}&size=10&sort=views`,
-    {
-      next: { revalidate: 300 }
-    }
-  );
-
-  const buildingDiviedData: ISummaryData = await buildingDiviedResponse.json();
-
-  const buildingReportData: IReport[] = await buildingReportResponse.json();
-
-  const productDetailData: IProductDetailData = await productDetailResponse.json();
-
-  // console.log(productDetailData);
+import React, { Suspense } from 'react';
 
+const HomePage = () => {
   return (
-    <div>
-      <Navbar />
-
-      {searchParams['category'] === 'newissue' ? (
-        <RecentlyIssueIndex />
-      ) : searchParams['category'] === 'product' ? (
-        <Product
-          divide={buildingDiviedData.divide}
-          summary={buildingDiviedData.summary}
-          report={buildingReportData}
-          content={productDetailData.content}
-          pageNumber={productDetailData?.pageable?.pageNumber}
-          totalPages={productDetailData?.totalPages}
-        />
-      ) : searchParams['category'] === 'report' ? (
-        <ReportIndex />
-      ) : (
+    <Suspense fallback={<div>Loading...</div>}>
+      <div>
+        <Navbar />
         <HomeIndex />
-      )}
-    </div>
+      </div>
+    </Suspense>
   );
 };
 

diff --git a/src/app/product/page.tsx b/src/app/product/page.tsx
@@ -1,5 +1,6 @@
+import Navbar from '@/components/common/Navbar';
 import Product from '@/components/product/Product';
-import { ISummaryData } from '@/types/Diviend';
+import { IProductDetailData, IReport, ISummaryData } from '@/types/Diviend';
 
 const ProductPage = async ({
   params,
@@ -8,37 +9,47 @@ const ProductPage = async ({
   params: { slug: string };
   searchParams: { [key: string]: string | string[] | undefined };
 }) => {
-  const response = await fetch(`https://api.moaguide.com/summary/recent/building`, {
-    cache: 'no-store'
-  });
-  const data: ISummaryData = await response.json();
-  // console.log(data);
-
-  console.log(params);
-  console.log(searchParams);
-
-  return <div></div>;
-  // <Product divide={data.divide} summary={data.summary} />;
+  const pages = searchParams['page'] || 1;
+  console.log(pages);
+  const buildingDiviedResponse = await fetch(
+    `https://api.moaguide.com/summary/recent/building`,
+    {
+      cache: 'no-store'
+    }
+  );
+
+  const buildingReportResponse = await fetch(
+    'https://api.moaguide.com/summary/report/building',
+    {
+      cache: 'no-store'
+    }
+  );
+  const productDetailResponse = await fetch(
+    `https://api.moaguide.com/summary/list/all?page=${pages}&size=10&sort=views`,
+    {
+      next: { revalidate: 300 }
+    }
+  );
+
+  const buildingDiviedData: ISummaryData = await buildingDiviedResponse.json();
+
+  const buildingReportData: IReport[] = await buildingReportResponse.json();
+
+  const productDetailData: IProductDetailData = await productDetailResponse.json();
+
+  return (
+    <div>
+      <Navbar />
+      <Product
+        divide={buildingDiviedData.divide}
+        summary={buildingDiviedData.summary}
+        report={buildingReportData}
+        content={productDetailData.content}
+        pageNumber={productDetailData?.pageable?.pageNumber}
+        totalPages={productDetailData?.totalPages}
+      />
+    </div>
+  );
 };
 
 export default ProductPage;
-// try {
-//   const response = await fetch(`https://api.moaguide.com/summary/recent/building`, {
-//     cache: 'no-store'
-//   });
-
-//   if (!response.ok) {
-//     throw new Error(`HTTP error! status: ${response.status}`);
-//   }
-
-//   const data: SummaryData = await response.json();
-
-//   console.log(params);
-//   console.log(searchParams);
-
-//   return <Product divide={data.divide} summary={data.summary} />;
-// } catch (error) {
-//   console.error('Error fetching data:', error);
-//   return <div>Failed to load product data.</div>;
-// }
-// };
diff --git a/src/app/reportpage/page.tsx b/src/app/reportpage/page.tsx
@@ -0,0 +1,15 @@
+import ReportIndex from '@/components/report/ReportIndex';
+import Navbar from '@/components/common/Navbar';
+import { Suspense } from 'react';
+const ReportPage = () => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <div>
+        <Navbar />
+        <ReportIndex />
+      </div>
+    </Suspense>
+  );
+};
+
+export default ReportPage;
diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
@@ -7,9 +7,9 @@ import { Suspense } from 'react';
 const Navbar = () => {
   const params = useSearchParams();
   const router = useRouter();
-  const pathname = usePathname(); 
+  const pathname = usePathname();
   const category = params.get('category');
-
+  console.log(pathname);
   const isHomeActive = pathname === '/' && (category === null || category === '');
 
   return (
@@ -26,28 +26,28 @@ const Navbar = () => {
         </div>
         <div
           onClick={() => {
-            router.push('/?category=newissue');
+            router.push('/newissue');
           }}
           className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
-        ${category === 'newissue' ? 'text-black border-b-[2px] border-black' : 'text-gray300'}
+        ${pathname === '/newissue' ? 'text-black border-b-[2px] border-black' : 'text-gray300'}
         `}>
           최신이슈
         </div>
         <div
           onClick={() => {
-            router.push('/?category=product');
+            router.push('/product');
           }}
           className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
-        ${category === 'product' ? 'text-black border-b-[2px] border-black' : 'text-gray300'}
+        ${pathname === '/product' ? 'text-black border-b-[2px] border-black' : 'text-gray300'}
         `}>
           조각투자 상품
         </div>
         <div
           onClick={() => {
-            router.push('/?category=report');
+            router.push('/reportpage');
           }}
           className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
-        ${category === 'report' ? 'text-black border-b-[2px] border-black' : 'text-gray300'}
+        ${pathname === '/reportpage' ? 'text-black border-b-[2px] border-black' : 'text-gray300'}
         `}>
           리포트
         </div>