랭킹 페이지 추가

Author: liberaldev

src/app/(main)/ranking/page.tsx

@@ -1,19 +1,20 @@
 import type {Metadata} from "next";
+import {Header} from "@/app/components/main-layout/header";
+import {RakingList} from "@/app/components/main-layout/raking/raking-list";
+import {getRaking} from "@/app/lib/raking";
 
 export const metadata: Metadata = {
     title: "랭킹",
     description: "비비노 평점 랭킹을 기반으로한 랭킹입니다",
-    //준비중일때는 색인 안되게 하기
-    robots: {
-        index: false,
-    }
 };
 
 
-export default function Page() {
+export default async function Page() {
+    const initialRaking = await getRaking()
     return (
-        <div className={"min-h-96 md:container md:mx-auto"}>
-            <p className={"text-lg"}>준비 중 입니다.</p>
+        <div className={"mt-4 flex flex-col gap-4 px-4 md:container md:mx-auto"}>
+            <Header>랭킹</Header>
+            <RakingList initialRaking={initialRaking}/>
         </div>
     )
 }

src/app/components/main-layout/raking/raking-list.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import {useEffect, useState} from "react";
+import {useInView} from "react-intersection-observer";
+import {Wine} from "@/app/types/wine";
+import {Alert, List, Spinner} from "flowbite-react";
+import Link from "next/link";
+import {WineListItemSummaryInformation} from "@/app/components/main-layout/wine-list-item-summary-information";
+import {getRaking} from "@/app/lib/raking";
+
+export function RakingList({initialRaking}: {initialRaking: Wine[]}) {
+    const [raking, setRaking] = useState(initialRaking);
+    const [page, setPage] = useState(2);
+    const [isMoreRaking, setIsMoreRaking] = useState<boolean>(true);
+    const {ref, inView} = useInView();
+
+    async function loadMoreRakingResults() {
+        const moreSearchResult = await getRaking(page);
+        setRaking(prevResults => [...prevResults, ...moreSearchResult]);
+        if (moreSearchResult.length <= 0) {
+            setIsMoreRaking(false);
+        }
+    }
+
+    useEffect(() => {
+        if (inView) {
+            // noinspection JSIgnoredPromiseFromCall
+            loadMoreRakingResults();
+            setPage(prevPage => prevPage + 1);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inView]);
+
+    const searchResultItem = raking.map((item, index) => (
+        <List.Item key={item.id} className={"" + (
+            (index === 0) ? "gold-number" : (index === 1 ? "sliver-number" : ((index === 2) && "bronze-number")))}>
+            <Link href={"/wine/" + item.id}
+                  className={"inline-block py-3"}>
+                <div className={"inline-flex flex-col"}>
+                    <div className={"hover:underline"}>
+                        {item.name}
+                    </div>
+                    <WineListItemSummaryInformation item={item} />
+                </div>
+            </Link>
+        </List.Item>
+    ));
+
+    return (
+        <>
+            <Alert color="info">
+                와인 이름이 중복된 경우에는 와이너리, 산도 등이 달라 실제로는 다른 와인이니 착오 없으시길 바랍니다. 비비노 평점과 리뷰 개수는 현재의 수치와 다를 수 있습니다.
+            </Alert>
+            <List ordered className="divide-y space-y-0 divide-gray-200 dark:divide-gray-700 text-black items-center bold-list-numbers">
+                {searchResultItem}
+                {isMoreRaking && (
+                    <li ref={ref} className={"py-3 block text-center"}>
+                        <Spinner size="xl" color={"rose"} />
+                    </li>
+                )}
+            </List>
+        </>
+    );
+}

src/app/lib/raking.ts

@@ -0,0 +1,25 @@
+'use server'
+
+import {Wine} from "@/app/types/wine";
+import {notFound} from "next/navigation";
+
+export async function getRaking(page?: number): Promise<Wine[]> {
+    let url = 'http://localhost:8000/ranking'
+
+    if (page !== undefined) {
+        url += '?page=' + page
+    }
+
+    const res = await fetch(url, {
+        cache: 'no-store',
+    })
+
+    if (!res.ok) {
+        if (res.status >= 500)
+            throw new Error('ops!')
+
+        notFound()
+    }
+
+    return res.json()
+}