feat: 베스트 게시물 표시 기능 수정

src/components/community/bestArticle/bestArticleListClient.tsx

@@ -4,32 +4,43 @@ import { getArticleList } from '@/services/api/article';
 import { GetArticleListResponse } from '@/services/types/article';
 import { useQuery } from '@tanstack/react-query';
 import BestArticleCard from './bestArticleCard';
+import { useAtom } from 'jotai';
+import { screenWidthAtom } from '@/lib/store/atoms';
+import { MEDIA_QUERY } from '@/constants/mediaQuery';
 
 export default function BestArticleListClient({
   initialData,
 }: {
   initialData: GetArticleListResponse;
 }) {
+  const [screenWidth] = useAtom(screenWidthAtom);
   const { data } = useQuery({
     queryKey: ['bestArticles'],
-    queryFn: () => getArticleList({ skip: 0, take: 3, orderBy: 'recent' }),
+    queryFn: () =>
+      getArticleList({
+        skip: 0,
+        take: 3,
+        orderBy: 'recent',
+      }),
     initialData,
   });
 
   return (
     <>
-      {data.data.map((article) => {
-        return (
-          <BestArticleCard
-            key={article.id}
-            nickname='총명한 판다'
-            title={article.title}
-            likes={999}
-            createdAt={article.createdAt}
-            articleId={article.id}
-          />
-        );
-      })}
+      {data.data
+        .slice(0, MEDIA_QUERY.bestArticlePageSize[screenWidth!])
+        .map((article) => {
+          return (
+            <BestArticleCard
+              key={article.id}
+              nickname='총명한 판다'
+              title={article.title}
+              likes={999}
+              createdAt={article.createdAt}
+              articleId={article.id}
+            />
+          );
+        })}
     </>
   );
 }

src/constants/mediaQuery.ts

@@ -19,4 +19,9 @@ export const MEDIA_QUERY = Object.freeze({
     medium: 6,
     small: 4,
   }),
+  bestArticlePageSize: Object.freeze({
+    large: 3,
+    medium: 2,
+    small: 1,
+  }),
 });