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([]) 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() { 프로젝트 공유 -
- {/* All */} + 🔥 금주의 인기 프로젝트 +
+ {rankData.map((item: DataObject) => ( +
+ +
+ ))}
-
+
+
All
{data.pages.map((group, i) => (
{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"