Merge pull request #100 from Devminjeong-eum/fix/DEV-156

[DEV-156] 트렌딩 단어 페이지에서 순위 아이템 클릭시 바로 디테일 페이지로 이동되도록 수정

Author: dotory0829

src/components/pages/home/index.tsx

@@ -22,7 +22,7 @@ const HomeClientPage = () => {
   );
 
   return (
-    <main className="py-5 rounded-[24px] bg-[#FBFCFE] -mt-[20px] z-50 flex flex-col gap-[8px]">
+    <main className="py-5 rounded-[24px] bg-[#FBFCFE] min-h-screen -mt-[20px] z-50 flex flex-col gap-[8px]">
       <div className="px-5">
         <HomeToggleZone handleToggle={handleToggle} isTrending={isTrending} />
       </div>

src/components/pages/home/trending-posts/GeneralRanking.tsx

@@ -1,19 +1,21 @@
 import { TrendWord } from '@/fetcher/types';
 import clsx from 'clsx';
 import { RankChange } from './RankChange';
+import { getWordDetailPath } from '@/routes/path';
+import Link from 'next/link';
 
 type Props = {
   generalRankingList: TrendWord[];
 };
 
 export default function GeneralRanking({ generalRankingList }: Props) {
   return (
-    <div className="w-full mt-[22px] border-[#F2F4F9] border-[1px] rounded-2xl py-[22px]">
+    <div className="w-full mt-[22px] border-[#F2F4F9] border-[1px] rounded-2xl py-[8px] ">
       {generalRankingList.map((trendWord, index) => (
         <div
-          key={index}
+          key={trendWord.id}
           className={clsx(
-            'h-[54px] border-[#ECEEF5] border-b-[1px] w-full flex items-center',
+            'h-[54px] border-[#ECEEF5] border-b-[1px] w-full flex items-center ',
             index === 0 && '-mt-[6px]',
             index === 6 && 'border-none',
           )}
@@ -24,13 +26,17 @@ export default function GeneralRanking({ generalRankingList }: Props) {
           </p>
 
           {/* 영단어 컨테이너 */}
-          <span className="flex ml-[29px] gap-[6px] flex-1 items-end ">
-            <p className="text-[16px] text-main-black">{trendWord.name}</p>
-            <span className="text-[#F2F4F9]">|</span>
-            <p className="text-[#6F6F80] text-[14px]">
+          <Link
+            href={getWordDetailPath(trendWord.name)}
+            className="flex ml-[29px] gap-[6px] flex-1 items-center group"
+          >
+            <p className="text-[16px] leading-[17px] font-medium text-main-black group-hover:underline underline-offset-2">
+              {trendWord.name}
+            </p>
+            <p className="text-[#6F6F80] text-[14px] font-medium">
               {trendWord.pronunciation}
             </p>
-          </span>
+          </Link>
 
           {/* 순위 등락 컨테이너  */}
           <RankChange

src/components/pages/home/trending-posts/TopRanking.tsx

@@ -5,6 +5,8 @@ import type { TrendWord } from '@/fetcher/types';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { RankChange } from './RankChange';
+import { useRouter } from 'next/navigation';
+import { getWordDetailPath } from '@/routes/path';
 
 const TopRankingItem = ({
   trendWord,
@@ -15,19 +17,23 @@ const TopRankingItem = ({
   index: number;
   isMount: boolean;
 }) => {
+  const router = useRouter();
+  const { rank, rankChange, name, pronunciation, diacritic } = trendWord;
   const gradientStyles = [
     'bg-rank-gradient-one duration-700 w-[340px] xs:w-[390px]',
     'bg-rank-gradient-two duration-1000 w-[316px] xs:w-[366px]',
     'bg-rank-gradient-three h-[67px] duration-[1300ms] w-[292px] xs:w-[342px]',
   ];
 
-  const { rank, rankChange, name, pronunciation, diacritic } = trendWord;
+  const moveToDetailPage = () => {
+    router.push(getWordDetailPath(name));
+  };
 
   return (
     <div
-      key={`item_${index}`}
+      onClick={moveToDetailPage}
       className={clsx(
-        'h-[72px] rounded-r-[100px] flex items-center pl-[34px] transition-transform',
+        'h-[72px] rounded-r-[100px] flex items-center pl-[34px] transition-transform cursor-pointer',
         index !== 0 && 'mt-[4px]',
         gradientStyles[index],
         isMount ? 'translate-x-0' : '-translate-x-full',