[TASK-211 / 25.07.01] Feature - 리더보드 username 대응 개발 (#44)

Author: six-standard

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

@@ -5,7 +5,7 @@ import { startHolyLoader } from 'holy-loader';
 import { useMemo } from 'react';
 import { leaderboardList } from '@/apis';
 import { Rank } from '@/app/components';
-import { PATHS } from '@/constants';
+import { PATHS, URLS } from '@/constants';
 import { useSearchParam } from '@/hooks';
 import { Dropdown } from '@/shared';
 import { LeaderboardItemType } from '@/types';
@@ -26,13 +26,17 @@ export const Content = () => {
   });
 
   const data = useMemo(() => {
-    const value = (
-      searchParams.based === 'user' ? boards?.users : boards?.posts
-    ) as LeaderboardItemType[];
+    const isUserBased = searchParams.based === 'user';
+    const isViewBased = searchParams.sort === 'viewCount';
+
+    const value = (isUserBased ? boards?.users : boards?.posts) as LeaderboardItemType[];
+
     return (
-      value.map((item) => ({
-        name: searchParams.based === 'user' ? item.email.split('@')[0] : item.title,
-        value: searchParams.sort === 'viewCount' ? item.viewDiff : item.likeDiff,
+      value.map(({ username, title, viewDiff, likeDiff, slug }) => ({
+        key: isUserBased ? username : title,
+        username,
+        url: URLS.VELOG + `/@${username}` + (isUserBased ? '/posts' : `/${slug}`),
+        value: isViewBased ? viewDiff : likeDiff,
       })) || []
     );
   }, [boards, searchParams.based, searchParams.sort]);
@@ -86,8 +90,15 @@ export const Content = () => {
       </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} />
+        {data?.map(({ key, username, url, value }, index) => (
+          <Rank
+            name={key}
+            key={index}
+            url={url}
+            count={value}
+            rank={index + 1}
+            suffix={searchParams.based === 'post' ? username : ''}
+          />
         ))}
       </div>
     </div>

src/app/components/Rank.tsx

@@ -1,33 +1,47 @@
+'use client';
+
 import { HTMLAttributes } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export interface IProp extends HTMLAttributes<HTMLDivElement> {
   name: string;
   rank: number;
+  url: string;
   count?: string | number;
   suffix?: string;
 }
 
 const colorTable = ['border-[#DAA520]', 'border-[#A9A9A9]', 'border-[#B87333]'];
 
-export const Rank = ({ name, rank, count, suffix = '회' }: IProp) => {
+export const Rank = ({ name, rank, count, url, suffix }: IProp) => {
   return (
-    <div
+    <button
       className={twMerge(
-        'min-w-[40%] w-full p-[25px] bg-BG-SUB rounded-[4px] gap-3 justify-between flex',
+        'min-w-[40%] group w-full p-[25px] bg-BG-SUB rounded-[4px] gap-3 justify-between flex cursor-pointer items-center',
         rank > 3 ? 'border-0' : `border-2 ${colorTable[rank - 1]}`,
       )}
+      onClick={() => window.open(url, '_blank', 'noopener,noreferrer')}
     >
-      <span
-        data-rank={rank}
-        className="text-TITLE-3 text-TEXT-MAIN flex items-center gap-3 before:content-[attr(data-rank)_'위'] before:text-SUBTITLE-4 before:text-TEXT-ALT max-TBL:text-TITLE-4 max-TBL:before:text-SUBTITLE-5 max-MBI:text-SUBTITLE-4 max-MBI:before:text-SUBTITLE-5"
-      >
-        {name}
-      </span>
+      <div className="flex items-center gap-3">
+        <span className="text-SUBTITLE-4 text-TEXT-ALT shrink-0 max-TBL:text-SUBTITLE-5 max-MBI:text-SUBTITLE-5">
+          {rank + '위'}
+        </span>
+
+        <div className=" flex flex-col gap-0">
+          <span className="group-hover:underline text-TITLE-3 text-TEXT-MAIN flex items-center gap-3 max-TBL:text-TITLE-4 max-MBI:text-SUBTITLE-4">
+            {name}
+          </span>
+          {suffix !== undefined && (
+            <span className="text-SUBTITLE-4 text-TEXT-ALT max-TBL:text-SUBTITLE-5 max-MBI:text-SUBTITLE-5">
+              {String(suffix)}
+            </span>
+          )}
+        </div>
+      </div>
+
       <span className="text-SUBTITLE-3 shrink-0 text-TEXT-SUB max-TBL:text-TITLE-4 max-MBI:text-SUBTITLE-4">
-        {count}
-        {suffix}
+        {count}회
       </span>
-    </div>
+    </button>
   );
 };

src/types/leaderboard.type.ts

@@ -1,6 +1,7 @@
 type LeaderboardListUser = {
   id: string;
   email: string;
+  username: string;
   totalViews: string;
   totalLikes: string;
   totalPosts: string;
@@ -12,6 +13,7 @@ type LeaderboardListPost = {
   id: string;
   title: string;
   slug: string;
+  username: string;
   totalViews: number;
   totalLikes: number;
   viewDiff: number;