FE/#306 메인 페이지 프로젝트 랭킹 기능 추가

frontend/.eslintrc.json

@@ -19,6 +19,7 @@
           "some": ["nesting", "id"]
         }
       }
-    ]
+    ],
+    "global-require": 0
   }
 }

frontend/package.json

@@ -46,6 +46,7 @@
     "sass": "^1.68.0",
     "short-uuid": "^4.2.2",
     "swiper": "^10.3.0",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2",
     "uuid": "^9.0.1",

frontend/src/app/project/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useInfiniteQuery } from '@tanstack/react-query'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useRecoilValue } from 'recoil'
 import Image from 'next/image'
@@ -22,6 +22,7 @@ type DataObject = {
 
 export default function ProjectMain() {
   const searchText = useRecoilValue(searchTextState)
+  const [rankData, setRankData] = useState<DataObject[]>([])
 
   const router = useRouter()
 
@@ -52,6 +53,24 @@ export default function ProjectMain() {
     return data.data
   }
 
+  async function getRankData() {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_BASE_URL}/projects/rank`,
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    )
+
+    if (!res.ok) {
+      throw new Error('프로젝트 검색에 실패했습니다.')
+    }
+
+    const data = await res.json()
+    setRankData(data.data)
+  }
+
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } =
     useInfiniteQuery(['projects'], getData, {
       getNextPageParam: (lastPage, pages) =>
@@ -71,6 +90,7 @@ export default function ProjectMain() {
       }
       window.addEventListener('scroll', handleScroll)
     }
+    getRankData()
   }, [fetchNextPage, isFetchingNextPage, searchText])
 
   if (status === 'loading') {
@@ -103,14 +123,20 @@ export default function ProjectMain() {
           <span className="shrink-0 font-semibold">프로젝트 공유</span>
         </button>
 
-        <div className="mx-10 border-b-2 border-b-neutral-300 pt-0 font-ng-b text-2xl sm:mx-28 sm:mb-5 sm:pt-5">
-          {/* All */}
+        <span className="mx-28 text-lg font-ng-b">🔥 금주의 인기 프로젝트</span>
+        <div className="mx-28 flex sm:pt-8 border-b-lime-800 overflow-x-auto scrollbar-hide">
+          {rankData.map((item: DataObject) => (
+            <div className="mx-8 mb-10" key={item.id}>
+              <ProjectCard items={item} index={0} />
+            </div>
+          ))}
         </div>
 
-        <div>
+        <div className="mt-8">
+          <div className="mx-28 pl-2 text-xl font-ng-b border-b-2">All</div>
           {data.pages.map((group, i) => (
             <div
-              className="mx-8 flex justify-center pt-6 sm:pt-8"
+              className="mx-8 flex flex-wrap justify-center pt-6 sm:pt-8"
               key={group[i]?.id}
             >
               {group.map((item: DataObject) => (

frontend/tailwind.config.cjs

@@ -63,5 +63,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require('tailwind-scrollbar-hide')],
 }

frontend/yarn.lock

@@ -4110,6 +4110,11 @@ swiper@^10.3.0:
   resolved "https://registry.yarnpkg.com/swiper/-/swiper-10.3.1.tgz#4d19d7e9d0bd184c30accf2c1b180cfe41b9f4af"
   integrity sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==
 
+tailwind-scrollbar-hide@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz#90b481fb2e204030e3919427416650c54f56f847"
+  integrity sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==
+
 [email protected]:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"