Navbar형식 수정 + RSC 방식 query-string 라우팅 도입

Moaguide-develop · Aug 21, 2024 · cd0a3d1 · cd0a3d1
2 parents bbaf5fa + 2117dd6
commit cd0a3d1
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 13 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,15 +1,38 @@
 import Navbar from '@/components/common/Navbar';
 import HomeIndex from '@/components/home/Index';
+import RecentlyIssueIndex from '@/components/recentlyIssue/Index';
 
 // import { useNavStore } from '@/store/nav.store';
 import React from 'react';
+import ProductPage from './product/page';
+import { SummaryData } from '@/types/Diviend';
+import Product from '@/components/product/Product';
+import ReportIndex from '@/components/report/ReportIndex';
 
-const HomePage = () => {
-  // const { currentNav } = useNavStore();
+const HomePage = async ({
+  searchParams
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) => {
+  const response = await fetch(`https://api.moaguide.com/summary/recent/building`, {
+    cache: 'no-store'
+  });
+
+  const data: SummaryData = await response.json();
+  console.log(searchParams['category']);
   return (
     <div>
       <Navbar />
-      <HomeIndex />
+
+      {searchParams['category'] === 'newissue' ? (
+        <RecentlyIssueIndex />
+      ) : searchParams['category'] === 'product' ? (
+        <Product divide={data.divide} summary={data.summary} />
+      ) : searchParams['category'] === 'report' ? (
+        <ReportIndex />
+      ) : (
+        <HomeIndex />
+      )}
     </div>
   );
 };

diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
@@ -1,11 +1,13 @@
 'use client';
 import { useNavStore } from '@/store/nav.store';
 import React from 'react';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 const Navbar = () => {
   const pathname = usePathname();
+  const params = useSearchParams();
   const router = useRouter();
+
   return (
     <div className="shadow-custom-light border-b border-gray100 ">
       <div className="max-w-[1000px] mx-auto flex items-center ">
@@ -14,34 +16,34 @@ const Navbar = () => {
             router.push('/');
           }}
           className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
-        ${pathname === '/' ? ' text-black border-b-[2px] border-black' : 'text-gray300'}
+        ${params.get('category') === null ? ' text-black border-b-[2px] border-black' : 'text-gray300'}
         `}>
           홈
         </div>
         <div
           onClick={() => {
-            router.push('/newissue');
+            router.push('/?category=newissue');
           }}
           className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
-        ${pathname === '/newissue' ? ' text-black border-b-[2px] border-black' : 'text-gray300'}
+        ${params.get('category') === 'newissue' ? ' text-black border-b-[2px] border-black' : 'text-gray300'}
         `}>
           최신이슈
         </div>
         <div
           onClick={() => {
-            router.push('/product');
+            router.push('/?category=product');
           }}
           className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
-        ${pathname === '/product' ? ' text-black border-b-[2px] border-black' : 'text-gray300'}
+        ${params.get('category') === 'product' ? ' text-black border-b-[2px] border-black' : 'text-gray300'}
         `}>
           조각투자 상품
         </div>
         <div
           onClick={() => {
-            router.push('/report');
+            router.push('/?category=report');
           }}
           className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
-        ${pathname === '/report' ? ' text-black border-b-[2px] border-black' : 'text-gray300'}
+        ${params.get('category') === 'report' ? ' text-black border-b-[2px] border-black' : 'text-gray300'}
         `}>
           리포트
         </div>

diff --git a/src/components/product/Product.tsx b/src/components/product/Product.tsx
@@ -17,7 +17,7 @@ const Product = ({ divide, summary }: SummaryData) => {
   const [sort, setSort] = useState('profit');
   return (
     <div>
-      <Navbar />
+      {/* <Navbar /> */}
       <Filter />
       <div className="w-full h-[168px] bg-gradient-to-b from-[#713ce2] to-[#5100ff]">
         <Container>

diff --git a/src/components/product/detail/ProductDetail.tsx b/src/components/product/detail/ProductDetail.tsx
@@ -28,7 +28,7 @@ const ProductDetail = () => {
   //   landElevation: '평지',
   //   landShape: '가장형',
   //   zoningNational:
-  //     '도시지역,일반상업지역,지구단위계획구역,도로(접합),중로2류(폭 15m~20m)(2016-12-01)(접합)',
+  //     '도시지역,일반상업지역,지구단위계획구역,도로(접합),중로2류(폭 80m~20m)(2016-12-01)(접합)',
   //   zoningOther:
   //     '교육환경보호구역(남부교육청에 반드시 확인요망)<교육환경 보호에 관한 법률>,대공방어협조구역(위탁고도:해발165m(지반+건축+옥탑 등), 육군수도방위사령부(02-524-3146)관할)<군사기지 및 군사시설 보호법>,과밀억제권역<수도권정비계획법>',
   //   latitude: 37.509421,
@@ -54,6 +54,46 @@ const ProductDetail = () => {
 
       <div className=" text-lg font-bold mb-[20px]">상권 공실률</div>
       <CommercialVacancyRateChart />
+      <div className=" text-lg font-bold mb-[20px]">접근성</div>
+      <div className="text-gray-400 mb-[10px]"> 주요 업무 지구</div>
+
+      <div className=" bg-gray-50 rounded-xl flex flex-col">
+        <div className="flex mb-[40px]  justify-center items-center mt-[20px]">
+          <div className=" "></div>
+          <div className="text-gray-200 ml-[120px]">가까운 역까지</div>
+          <div className="text-gray-200 ml-[120px]">차량으로</div>
+          <div className="text-gray-200 ml-[120px]">대중교통으로</div>
+        </div>
+
+        <div className="flex mb-[40px] justify-center items-center ">
+          <div className="text-base">CBD(도심권역)</div>
+          <div className="text-blue-500 ml-[120px]">약 80km</div>
+          <div className="text-blue-500 ml-[120px]">평균 30분 소요</div>
+          <div className="text-blue-500 ml-[120px]">평균 10분 소요</div>
+        </div>
+        <div className="flex mb-[40px]  justify-center items-center">
+          <div className="text-base">CBD(도심권역)</div>
+          <div className="text-blue-500 ml-[120px]">약 80km</div>
+          <div className="text-blue-500 ml-[120px]">평균 30분 소요</div>
+          <div className="text-blue-500 ml-[120px]">평균 10분 소요</div>
+        </div>
+        <div className="flex mb-[40px] justify-center items-center ">
+          <div className="text-base">CBD(도심권역)</div>
+          <div className="text-blue-500 ml-[120px]">약 80km</div>
+          <div className="text-blue-500 ml-[120px]">평균 30분 소요</div>
+          <div className="text-blue-500 ml-[120px]">평균 10분 소요</div>
+        </div>
+      </div>
+      <div className="text-gray-400 mb-[10px]"> 0.5km 이내 대중교통</div>
+
+      <div className="flex max-w-[1000px] w-full mx-auto  h-[120px]">
+        <div className="bg-gray-50 rounded-xl mr-[20px] flex flex-col w-[calc(50%-10px)] p-[20px] ">
+          <div className="text-base font-bold ">주변 지하철</div>
+        </div>
+        <div className="bg-gray-50 rounded-xl  w-[calc(50%-10px)]">
+          <div className="text-base font-bold ">주변 버스정류장</div>
+        </div>
+      </div>
 
       <div className=" text-lg font-bold mb-[20px]">유동인구</div>
       <FloatingPopulationChart />

diff --git a/src/components/product/detail/Public.tsx b/src/components/product/detail/Public.tsx
@@ -1,4 +1,22 @@
+import UseNoticeLists from '@/factory/useNoticeLists';
+import { useCallback } from 'react';
+
 const Public = () => {
+  const category = 'sou.8';
+
+  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading } =
+    UseNoticeLists(category);
+
+  const loadMore = useCallback(() => {
+    if (hasNextPage && !isFetching && !isFetchingNextPage && !isLoading) {
+      setTimeout(() => {
+        fetchNextPage();
+      }, 200);
+    }
+  }, [fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading]);
+
+  const allPosts = data?.pages?.flat() || [];
+  console.log(allPosts);
   const MOCK = {
     notice: [
       {
@@ -43,6 +61,20 @@ const Public = () => {
           </div>
         );
       })}
+      {/* {isLoading ? (
+        Array.from({ length: 5 }).map((_, i) => <CategoryNewsItemSkeleton key={i} />)
+      ) : (
+        <Virtuoso
+          style={{ height: 'calc(100vh - 50px)', margin: '0px' }}
+          useWindowScroll
+          totalCount={allPosts.length}
+          data={allPosts}
+          endReached={loadMore}
+          itemContent={(index, item: IssueListItem) => (
+            <CategoryNewsItem key={item.id} {...item} />
+          )}
+        />
+      )} */}
     </div>
   );
 };

diff --git a/src/factory/useNoticeLists.ts b/src/factory/useNoticeLists.ts
@@ -0,0 +1,46 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { lastDayOfDecade } from 'date-fns';
+
+const fetchNoticeLists = async ({
+  queryKey,
+  pageParam = 1
+}: {
+  queryKey: string[];
+  pageParam: number;
+}) => {
+  const [, category] = queryKey;
+  const { data } = await axios.get(
+    `https://api.moaguide.com/detail/notice/list/${category}?page=${pageParam}&size=10`
+  );
+  return data;
+};
+
+const UseNoticeLists = (category: string) => {
+  const queryKey = ['NoticeLists', category];
+
+  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading } =
+    useInfiniteQuery({
+      queryKey,
+      queryFn: fetchNoticeLists,
+      getNextPageParam: (lastPage, allPages) => {
+        if (lastPage.length === 0) {
+          return undefined;
+        }
+        return allPages.length + 1;
+      },
+      initialPageParam: 1,
+      enabled: !!category
+    });
+
+  return {
+    data,
+    fetchNextPage,
+    hasNextPage: !!data?.pages.length,
+    isFetching,
+    isFetchingNextPage,
+    isLoading
+  };
+};
+
+export default UseNoticeLists;