From f6b9e82ddd52f07bf3b578d2e420249005633058 Mon Sep 17 00:00:00 2001 From: eunhak Date: Thu, 5 Sep 2024 16:24:13 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:page=20=ED=98=95=EC=8B=9D=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20nav=EB=B0=94=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/newissue/page.tsx | 18 ++++++++ src/app/page.tsx | 52 +--------------------- src/app/product/page.tsx | 75 ++++++++++++++++++-------------- src/app/reportpage/page.tsx | 19 ++++++++ src/components/common/Navbar.tsx | 16 +++---- 5 files changed, 89 insertions(+), 91 deletions(-) create mode 100644 src/app/newissue/page.tsx create mode 100644 src/app/reportpage/page.tsx diff --git a/src/app/newissue/page.tsx b/src/app/newissue/page.tsx new file mode 100644 index 0000000..2396825 --- /dev/null +++ b/src/app/newissue/page.tsx @@ -0,0 +1,18 @@ +import RecentlyIssueIndex from '@/components/recentlyIssue/Index'; +import Navbar from '@/components/common/Navbar'; +const NewIssuePage = async ({ + params, + searchParams +}: { + params: { slug: string }; + searchParams: { [key: string]: string | string[] | undefined }; +}) => { + return ( +
+ + +
+ ); +}; + +export default NewIssuePage; diff --git a/src/app/page.tsx b/src/app/page.tsx index 9d78bc2..7402349 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,66 +1,16 @@ 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); - return (
- - {searchParams['category'] === 'newissue' ? ( - - ) : searchParams['category'] === 'product' ? ( - - ) : searchParams['category'] === 'report' ? ( - - ) : ( - - )} +
); }; diff --git a/src/app/product/page.tsx b/src/app/product/page.tsx index 959a94a..4013959 100644 --- 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
; - // ; + 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 ( +
+ + +
+ ); }; 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 ; -// } catch (error) { -// console.error('Error fetching data:', error); -// return
Failed to load product data.
; -// } -// }; diff --git a/src/app/reportpage/page.tsx b/src/app/reportpage/page.tsx new file mode 100644 index 0000000..3b1a1e6 --- /dev/null +++ b/src/app/reportpage/page.tsx @@ -0,0 +1,19 @@ +import NavBar from '@/components/product/detail/NavBar'; +import ReportIndex from '@/components/report/ReportIndex'; +import Navbar from '@/components/common/Navbar'; +const ReportPage = async ({ + params, + searchParams +}: { + params: { slug: string }; + searchParams: { [key: string]: string | string[] | undefined }; +}) => { + return ( +
+ + +
+ ); +}; + +export default ReportPage; diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx index e0b28bd..ca8f43a 100644 --- 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 = () => {
{ - 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'} `}> 최신이슈
{ - 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'} `}> 조각투자 상품
{ - 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'} `}> 리포트
From 17a30a5030fe9514ff36412c79244cc6dde464c0 Mon Sep 17 00:00:00 2001 From: eunhak Date: Thu, 5 Sep 2024 16:36:55 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20prerendering=20error=20=3D>=20Suspen?= =?UTF-8?q?se=20=EB=8F=84=EC=9E=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/newissue/page.tsx | 19 ++++++++----------- src/app/page.tsx | 18 ++++++++---------- src/app/reportpage/page.tsx | 20 ++++++++------------ 3 files changed, 24 insertions(+), 33 deletions(-) diff --git a/src/app/newissue/page.tsx b/src/app/newissue/page.tsx index 2396825..e09173f 100644 --- a/src/app/newissue/page.tsx +++ b/src/app/newissue/page.tsx @@ -1,17 +1,14 @@ import RecentlyIssueIndex from '@/components/recentlyIssue/Index'; import Navbar from '@/components/common/Navbar'; -const NewIssuePage = async ({ - params, - searchParams -}: { - params: { slug: string }; - searchParams: { [key: string]: string | string[] | undefined }; -}) => { +import { Suspense } from 'react'; +const NewIssuePage = () => { return ( -
- - -
+ Loading...}> +
+ + +
+ ); }; diff --git a/src/app/page.tsx b/src/app/page.tsx index 7402349..39de870 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,17 +1,15 @@ import Navbar from '@/components/common/Navbar'; import HomeIndex from '@/components/home/Index'; -import React from 'react'; +import React, { Suspense } from 'react'; -const HomePage = async ({ - searchParams -}: { - searchParams: { [key: string]: string | string[] | undefined }; -}) => { +const HomePage = () => { return ( -
- - -
+ Loading...}> +
+ + +
+ ); }; diff --git a/src/app/reportpage/page.tsx b/src/app/reportpage/page.tsx index 3b1a1e6..a2ba301 100644 --- a/src/app/reportpage/page.tsx +++ b/src/app/reportpage/page.tsx @@ -1,18 +1,14 @@ -import NavBar from '@/components/product/detail/NavBar'; import ReportIndex from '@/components/report/ReportIndex'; import Navbar from '@/components/common/Navbar'; -const ReportPage = async ({ - params, - searchParams -}: { - params: { slug: string }; - searchParams: { [key: string]: string | string[] | undefined }; -}) => { +import { Suspense } from 'react'; +const ReportPage = () => { return ( -
- - -
+ Loading...}> +
+ + +
+ ); };