feat: related article router push

Author: jiohjung98

src/components/learning/SubscriptionBanner.tsx

@@ -1,6 +1,9 @@
+import { useRouter } from 'next/navigation';
 import React from 'react';
 
 const SubscriptionBanner = () => {
+  const router = useRouter();
+
   return (
     <div className="w-full flex items-center justify-between bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl px-12 py-16 shadow-md max-w-[1000px] mx-auto mt-12">
       <div className="text-left">
@@ -10,7 +13,8 @@ const SubscriptionBanner = () => {
         </h2>
       </div>
       <div>
-        <button className="bg-gradient2 px-8 py-4 rounded-full shadow-md hover:bg-gradient2 text-neutral-50 text-lg font-bold font-['Inter'] transition duration-300 ">
+        <button className="bg-gradient2 px-8 py-4 rounded-full shadow-md hover:bg-gradient2 text-neutral-50 text-lg font-bold font-['Inter'] transition duration-300"
+          onClick={() => router.push('/payment')}>
           첫달 무료 구독하기
         </button>
       </div>

src/components/learning/article/RelatedArticles.tsx

@@ -3,12 +3,14 @@ import { RelatedArticle } from "@/types/learning";
 import Image from "next/image";
 import { getRelatedArticles } from "@/factory/Article/GetArticle";
 import { getValidImageSrc } from "@/utils/checkImageProperty";
+import { useRouter } from "next/navigation";
 
 interface RelatedArticlesProps {
   articleId: number;
 }
 
 const RelatedArticles = ({ articleId }: RelatedArticlesProps) => {
+  const router = useRouter();
   const [relatedArticles, setRelatedArticles] = useState<RelatedArticle[] | string>("");
 
   useEffect(() => {
@@ -25,6 +27,10 @@ const RelatedArticles = ({ articleId }: RelatedArticlesProps) => {
     fetchData();
   }, [articleId]);
 
+  const handleContentClick = (item: any) => {
+    router.push(`/learning/detail/${item.article.articleId}`);
+  };
+
   // 데이터가 없을 때 처리
   if (typeof relatedArticles === "string") {
     return (
@@ -44,7 +50,8 @@ const RelatedArticles = ({ articleId }: RelatedArticlesProps) => {
       </h2>
       <div className="grid grid-cols-3 gap-4">
         {relatedArticles.map((item) => (
-          <div key={item.article.articleId} className="flex flex-col justify-between h-full">
+          <div key={item.article.articleId} className="flex flex-col justify-between h-full cursor-pointer"
+            onClick={() => handleContentClick(item)}>
             <div
               className="w-full relative overflow-hidden rounded-[25px]"
               style={{ aspectRatio: "409 / 255" }}