[25. 05. 26 / TASK-198] Refactor - 리더보드 UI 개선 (#37)

Author: six-standard

src/app/(auth-required)/components/header/index.tsx

@@ -10,7 +10,7 @@ import { PATHS, SCREENS } from '@/constants';
 import { Icon, NameType } from '@/components';
 import { useResponsive } from '@/hooks';
 import { logout, me } from '@/apis';
-import { useModal } from '@/hooks/useModal';
+import { useModal } from '@/hooks';
 import { defaultStyle, Section, textStyle } from './Section';
 import { Modal } from '../notice/Modal';
 import { QRCode } from '../QRCode';

src/app/(auth-required)/components/notice/index.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { notiList } from '@/apis';
 import { PATHS } from '@/constants';
-import { useModal } from '@/hooks/useModal';
+import { useModal } from '@/hooks';
 import { convertDateToKST } from '@/utils/dateUtil';
 import { Modal } from './Modal';
 

src/app/(auth-required)/layout.tsx

@@ -3,8 +3,7 @@ import { ReactElement } from 'react';
 import { getQueryClient } from '@/utils/queryUtil';
 import { PATHS } from '@/constants';
 import { me, notiList } from '@/apis';
-import { Notice } from './components/notice';
-import { Header } from './components/header';
+import { Notice, Header } from './components';
 
 interface IProp {
   children: ReactElement;

src/app/(auth-required)/leaderboards/Content.tsx

@@ -4,11 +4,11 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { startHolyLoader } from 'holy-loader';
 import { Dropdown } from '@/components';
-import { PATHS, SCREENS } from '@/constants';
-import { useResponsive, useSearchParam } from '@/hooks';
-import { leaderboardList } from '@/apis/leaderboard.request';
-import { LeaderboardItemType } from '@/types/leaderboard.type';
-import { Ranker, Rank } from './components';
+import { PATHS } from '@/constants';
+import { useSearchParam } from '@/hooks';
+import { leaderboardList } from '@/apis';
+import { LeaderboardItemType } from '@/types';
+import { Rank } from './Rank';
 
 export type searchParamsType = {
   based: 'user' | 'post';
@@ -18,7 +18,6 @@ export type searchParamsType = {
 };
 
 export const Content = () => {
-  const width = useResponsive();
   const [searchParams, setSearchParams] = useSearchParam<searchParamsType>();
 
   const { data: boards } = useQuery({
@@ -86,22 +85,10 @@ export const Content = () => {
         </div>
       </div>
 
-      <div className="h-full overflow-auto flex flex-col gap-[30px] max-TBL:gap-5">
-        <div className="w-full flex gap-10 max-MBI:flex-col max-MBI:gap-5">
-          <Ranker name={data?.[1].name || '유저 없음'} rank={2} count={data?.[1].value} />
-          <Ranker
-            name={data?.[0].name || '유저 없음'}
-            rank={1}
-            count={data?.[0].value}
-            className={width < SCREENS.MBI ? 'order-first' : ''}
-          />
-          <Ranker name={data?.[2].name || '유저 없음'} rank={3} count={data?.[2].value} />
-        </div>
-        <div className="w-full flex flex-wrap gap-10 max-TBL:gap-5">
-          {data?.map(({ name, value }, index) =>
-            index >= 3 ? <Rank name={name} key={index} count={value} rank={index + 1} /> : null,
-          )}
-        </div>
+      <div className="w-full flex flex-wrap gap-5 overflow-auto">
+        {data?.map(({ name, value }, index) => (
+          <Rank name={name} key={index} count={value} rank={index + 1} />
+        ))}
       </div>
     </div>
   );

src/app/(auth-required)/leaderboards/Rank.tsx

@@ -0,0 +1,33 @@
+import { HTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface IProp extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  rank: number;
+  count?: string | number;
+  suffix?: string;
+}
+
+const colorTable = ['border-[#DAA520]', 'border-[#A9A9A9]', 'border-[#B87333]'];
+
+export const Rank = ({ name, rank, count, suffix = '회' }: IProp) => {
+  return (
+    <div
+      className={twMerge(
+        'min-w-[40%] w-full p-[25px] bg-BG-SUB rounded-[4px] gap-3 justify-between flex',
+        rank > 3 ? 'border-0' : `border-2 ${colorTable[rank - 1]}`,
+      )}
+    >
+      <span
+        data-rank={rank}
+        className="text-T3 text-TEXT-MAIN flex items-center gap-3 before:content-[attr(data-rank)_'위'] before:text-ST4 before:text-TEXT-ALT max-TBL:text-T4 max-TBL:before:text-T5 max-MBI:text-ST4 max-MBI:before:text-ST5"
+      >
+        {name}
+      </span>
+      <span className="text-ST3 shrink-0 text-TEXT-SUB max-TBL:text-T4 max-MBI:text-ST4">
+        {count}
+        {suffix}
+      </span>
+    </div>
+  );
+};

src/app/(auth-required)/leaderboards/components/Rank.tsx

@@ -2,7 +2,7 @@ import { Metadata } from 'next';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 import { getQueryClient } from '@/utils/queryUtil';
 import { PATHS } from '@/constants';
-import { leaderboardList } from '@/apis/leaderboard.request';
+import { leaderboardList } from '@/apis';
 import { Content, searchParamsType } from './Content';
 
 export const metadata: Metadata = {

src/app/(auth-required)/leaderboards/components/Ranker.tsx

@@ -3,7 +3,7 @@
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useEffect, useMemo } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { useSearchParam } from '@/hooks/useSearchParam';
+import { useSearchParam } from '@/hooks';
 import { Button, Dropdown, Check } from '@/components';
 import { postList, postSummary } from '@/apis';
 import { PATHS, SORT_TYPE } from '@/constants';