From a6da8fd148668549bda0e5f3c48e2e3a3d3fbff5 Mon Sep 17 00:00:00 2001
From: rachel4w2 <rachel4w2@naver.com>
Date: Thu, 30 Nov 2023 22:00:05 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8?=
 =?UTF-8?q?=20=EB=9E=AD=ED=82=B9=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.eslintrc.json           |  3 ++-
 frontend/package.json             |  1 +
 frontend/src/app/project/page.tsx | 36 ++++++++++++++++++++++++++-----
 frontend/tailwind.config.cjs      |  2 +-
 frontend/yarn.lock                |  5 +++++
 5 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 47e41c9..c72cbf3 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -19,6 +19,7 @@
           "some": ["nesting", "id"]
         }
       }
-    ]
+    ],
+    "global-require": 0
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 58c58c2..6f6d91c 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/app/project/page.tsx b/frontend/src/app/project/page.tsx
index 69849bd..410bbce 100644
--- a/frontend/src/app/project/page.tsx
+++ b/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) => (
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 7485c38..ffef45d 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -63,5 +63,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require('tailwind-scrollbar-hide')],
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 01d0448..4eac970 100644
--- a/frontend/yarn.lock
+++ b/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==
+
 tailwindcss@3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"