Merge pull request #192 from Moaguide-develop/feat/articleDetail

feat: 아티클 페이지 리뉴얼 작업

Author: jiohjung98

src/app/learning/detail/[articleId]/page.tsx

@@ -0,0 +1,15 @@
+import ArticleDetailClientWrapper from '@/components/learning/article/ArticleDetailClientWrapper';
+
+interface PageProps {
+  params: { articleId: string };
+}
+
+export default async function ArticleDetailPage({ params }: PageProps) {
+  const articleId = params.articleId;
+
+  return (
+    <ArticleDetailClientWrapper
+      articleId={Number(articleId)}
+    />
+  );
+}

src/components/learning/FilteredContents.tsx

@@ -1,8 +1,10 @@
+import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import defaultImage from '../../../public/images/learning/learning_img.svg';
+import { FilteredResponse } from '@/types/filterArticle';
 
 interface FilteredContentsProps {
-  contents: any[];
+  contents: FilteredResponse['content'];
   total: number;
   page: number;
   size: number;
@@ -16,39 +18,53 @@ const FilteredContents = ({
   size,
   onPageChange,
 }: FilteredContentsProps) => {
+  const router = useRouter();
   const totalPages = Math.ceil(total / size);
 
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
-    return date.toISOString().split('T')[0]; 
+    return date.toISOString().split('T')[0];
   };
 
+  const getValidImageSrc = (imgLink: string | null) => {
+    if (!imgLink || imgLink === '테스트') {
+      return defaultImage; 
+    }
+    if (imgLink.startsWith('http://') || imgLink.startsWith('https://')) {
+      return imgLink;
+    }
+    return defaultImage;
+  };
   return (
-    <div className='mt-10'>
+    <div className="mt-10">
       <div className="space-y-10">
         {contents.length > 0 ? (
           contents.map((item) => (
-            <div key={item.contentId} className="flex items-center gap-4">
+            <div
+              key={item.article.articleId}
+              className="flex items-center gap-4 cursor-pointer"
+              onClick={() => router.push(`/learning/detail/${item.article.articleId}`)}
+            >
               <div className="w-64 h-40 flex-shrink-0 overflow-hidden rounded-md">
-                <Image
-                  src={item.img_link || defaultImage}
-                  alt={item.title}
+               <Image
+                  src={getValidImageSrc(item.article.img_link)}
+                  alt={item.article.title}
                   width={128}
                   height={80}
                   className="object-cover w-full h-full"
                 />
               </div>
               <div className="h-full flex-1">
                 <h3 className="text-lg font-bold text-gray-800 mb-4 line-clamp-1">
-                  {item.title}
+                  {item.article.title}
                 </h3>
                 <p className="text-sm text-gray-600 line-clamp-2">
-                  {item.description}
+                  {item.article.description || '설명 없음'}
                 </p>
                 <div className="justify-end text-xs text-gray-500 mt-4 flex items-center gap-4">
-                  <span>{formatDate(item.date)}</span>
-                  <span>❤ {item.likes}</span>
-                  <span>👁 {item.views}</span>
+                  <span>{formatDate(item.article.date)}</span>
+                  <span>❤ {item.article.likes}</span>
+                  <span>👁 {item.article.views}</span>
                 </div>
               </div>
             </div>
@@ -58,7 +74,6 @@ const FilteredContents = ({
         )}
       </div>
 
-      {/* 페이지네이션 */}
       {totalPages > 1 && (
         <div className="flex justify-center mt-8">
           <ul className="flex items-center space-x-1">

src/components/learning/LatestNewsClipping.tsx

@@ -4,8 +4,10 @@ import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import defaultImage from '../../../public/images/learning/learning_img.svg';
 import LatestNewsClippingSkeleton from '../skeleton/LatestNewsClippingSkeleton';
+import { useRouter } from 'next/navigation';
 
 const LatestNewsClipping = ({ contents }: { contents: any[] }) => {
+  const router = useRouter();
   const [isMobile, setIsMobile] = useState<boolean | null>(null);
 
   useEffect(() => {
@@ -34,7 +36,7 @@ const LatestNewsClipping = ({ contents }: { contents: any[] }) => {
         // 모바일 레이아웃
         <div className="sm:hidden">
           {contents[0] && (
-            <div className="w-full overflow-hidden mb-4">
+            <div className="w-full overflow-hidden mb-4 cursor-pointer" onClick={() => router.push(`/learning/detail/${contents[0].articleId}`)}>
               <Image
                 src={contents[0].img_link || defaultImage}
                 alt={contents[0].title}
@@ -61,7 +63,7 @@ const LatestNewsClipping = ({ contents }: { contents: any[] }) => {
           )}
           <div className="flex flex-col gap-4">
             {contents.slice(1, 5).map((content, index) => (
-              <div key={index} className="flex gap-4 w-[90%] sm:w-[100%] mx-auto">
+              <div key={index} className="flex gap-4 w-[90%] sm:w-[100%] mx-auto cursor-pointer" onClick={() => router.push(`/learning/detail/${content.articleId}`)}>
                 <div className="w-20 h-20 flex-shrink-0 rounded-lg overflow-hidden bg-gray-200">
                   <Image
                     src={content.img_link || defaultImage}
@@ -99,7 +101,7 @@ const LatestNewsClipping = ({ contents }: { contents: any[] }) => {
         // 데스크톱 레이아웃
         <div className="hidden sm:flex gap-6">
           {contents[0] && (
-            <div className="flex-1 shadow-sm overflow-hidden rounded-lg border">
+            <div className="flex-1 shadow-sm overflow-hidden rounded-lg border cursor-pointer" onClick={() => router.push(`/learning/detail/${contents[0].articleId}`)}>
               <div className="bg-gray-200 rounded-t-lg overflow-hidden">
                 <Image
                   src={contents[0].img_link || defaultImage}
@@ -117,7 +119,7 @@ const LatestNewsClipping = ({ contents }: { contents: any[] }) => {
           )}
           <div className="flex flex-col gap-6 w-1/2">
             {contents.slice(1, 5).map((content, index) => (
-              <div key={index} className="flex items-stretch gap-4">
+              <div key={index} className="flex items-stretch gap-4 cursor-pointer" onClick={() => router.push(`/learning/detail/${content.articleId}`)}>
                 <div className="w-32 flex-shrink-0 rounded-lg overflow-hidden bg-gray-200">
                   <Image
                     src={content.img_link || defaultImage}

src/components/learning/LearningPageClient.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import Image from 'next/image';
 import PopularContents from '@/components/learning/PopularContents';
@@ -12,21 +12,24 @@ import ArrowIcon from '../../../public/images/learning/bottom_arrow_button.svg';
 import BackgroundImage from '../../../public/images/learning/learning_background.png';
 import SubscriptionBanner from './SubscriptionBanner';
 import { dropdownOptions } from '@/utils/dropdownOptions';
+import { OverviewResponse, Content } from '@/types/learning'; 
+import { FilteredContent, FilteredResponse } from '@/types/filterArticle';
 
-const LearningPageClient = ({ initialData }: { initialData: any }) => {
+const LearningPageClient = ({ initialData }: { initialData: OverviewResponse }) => {
   const [selectedType, setSelectedType] = useState<string>('');
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
   const [page, setPage] = useState<number>(1);
 
-  const fetchContentsWithPage = async () => {
+  const fetchContentsWithPage = async (): Promise<FilteredResponse> => {
     const type = selectedType || 'all';
     const category = selectedCategory || 'all';
     const endpoint = `http://43.200.90.72/contents/list?type=${type}&category=${category}&page=${page}`;
     const response = await fetch(endpoint);
     if (!response.ok) throw new Error('API 호출 실패');
     return response.json();
   };
+  
 
   const { data, isLoading } = useQuery({
     queryKey: ['contents', selectedType, selectedCategory, page],
@@ -57,6 +60,14 @@ const LearningPageClient = ({ initialData }: { initialData: any }) => {
     setActiveDropdown(null);
   };
 
+  const extractContents = (contents: Content[] | undefined) =>
+  Array.isArray(contents)
+    ? contents.map((item) => ({
+        ...item.article,
+        likedByMe: item.likedByMe,
+      }))
+    : [];
+
   return (
     <div>
       <div className="relative w-full h-[300px] lg:h-[400px]">
@@ -67,8 +78,8 @@ const LearningPageClient = ({ initialData }: { initialData: any }) => {
           objectFit="cover"
           className="w-full"
         />
-        <div className="absolute bottom-0 left-0 right-0 flex  justify-end items-center border-b shadow-sm z-50 bg-[#fffffc]/50">
-        <button
+        <div className="absolute bottom-0 left-0 right-0 flex justify-end items-center border-b shadow-sm z-50 bg-[#fffffc]/50">
+          <button
             onClick={resetFilters}
             className="flex items-center gap-2 px-6 py-4 text-lg font-semibold text-gray-800"
           >
@@ -154,22 +165,22 @@ const LearningPageClient = ({ initialData }: { initialData: any }) => {
       <div className="max-w-[360px] mx-auto desk:max-w-[1000px] w-full sm:w-[90%] lg:w-[100%] mt-8">
         {!selectedType && !selectedCategory ? (
           <>
-            <PopularContents contents={initialData.popularContents} />
-            <RecentContents contents={initialData.recentContents} />
+            <PopularContents contents={extractContents(initialData.popularContents)} />
+            <RecentContents contents={extractContents(initialData.recentContents)} />
             <div className="hidden sm:flex w-full">
-            <SubscriptionBanner/>
+              <SubscriptionBanner />
             </div>
-            <LatestNewsClipping contents={initialData.latestNewsClipping} />
+            <LatestNewsClipping contents={extractContents(initialData.newsContents)} />
           </>
         ) : isLoading ? (
           null
         ) : (
           <FilteredContents
-            contents={data?.content || []}
-            total={data?.total || 0}
-            page={page}
-            size={data?.size || 5}
-            onPageChange={(newPage) => setPage(newPage)}
+          contents={data?.content || []}
+          total={data?.total || 0}
+          page={page}
+          size={data?.size || 5}
+          onPageChange={(newPage) => setPage(newPage)}
           />
         )}
       </div>

src/components/learning/PopularContents.tsx

@@ -8,10 +8,15 @@ import defaultImage from '../../../public/images/learning/learning_img.svg';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import PopularContentsSkeleton from '../skeleton/PopularContentsSkeleton';
+import { useRouter } from 'next/navigation';
 
+/*
+todo: any 타입 변경
+*/
 const PopularContents = ({ contents }: { contents: any[] }) => {
+  const router = useRouter();
   const [isMobile, setIsMobile] = useState<boolean | null>(null);
-
+  
   useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth < 640);
@@ -45,13 +50,14 @@ const PopularContents = ({ contents }: { contents: any[] }) => {
               {contents.map((content, index) => (
                 <SwiperSlide key={index}>
                   <div
-                    className="relative w-full h-[500px] bg-cover bg-center"
+                    className="relative w-full h-[500px] bg-cover bg-center cursor-pointer"
                     style={{
                       backgroundImage: `url('${content.img_link || defaultImage.src}')`,
                       backgroundSize: 'cover',
                       backgroundPosition: 'center',
                       backgroundRepeat: 'no-repeat',
                     }}
+                    onClick={() => router.push(`/learning/detail/${content.articleId}`)}
                   >
                     <div className="absolute inset-0 bg-black bg-opacity-50 filter blur-lg"></div>
                     <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[270px] h-[300px]">
@@ -90,7 +96,8 @@ const PopularContents = ({ contents }: { contents: any[] }) => {
               {contents.map((content, index) => (
                 <div
                   key={index}
-                  className="border rounded-lg shadow-sm overflow-hidden flex flex-col bg-white"
+                  className="border rounded-lg shadow-sm overflow-hidden flex flex-col bg-white cursor-pointer"
+                  onClick={() => router.push(`/learning/detail/${content.articleId}`)}
                 >
                   <div className="relative w-full h-[180px]">
                     <Image

src/components/learning/RecentContents.tsx

@@ -8,8 +8,10 @@ import defaultImage from '../../../public/images/learning/learning_img.svg';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import RecentContentsSkeleton from '../skeleton/RecentContentsSkeleton';
+import { useRouter } from 'next/navigation';
 
 const RecentContents = ({ contents }: { contents: any[] }) => {
+  const router = useRouter();
   const [isMobile, setIsMobile] = useState<boolean | null>(null);
 
   useEffect(() => {
@@ -45,7 +47,7 @@ const RecentContents = ({ contents }: { contents: any[] }) => {
             >
               {contents.map((content, index) => (
                 <SwiperSlide key={index} className="relative">
-                  <div className="relative w-full h-[350px] bg-white shadow-lg rounded-lg overflow-hidden">
+                  <div className="relative w-full h-[350px] bg-white shadow-lg rounded-lg overflow-hidden cursor-pointer" onClick={() => router.push(`/learning/detail/${content.articleId}`)}>
                     <Image
                       src={content.img_link || defaultImage}
                       alt={content.title}
@@ -72,7 +74,8 @@ const RecentContents = ({ contents }: { contents: any[] }) => {
               {contents.map((content, index) => (
                 <div
                   key={index}
-                  className="border rounded-lg shadow-sm overflow-hidden flex flex-col bg-white"
+                  className="border rounded-lg shadow-sm overflow-hidden flex flex-col bg-white cursor-pointer"
+                  onClick={() => router.push(`/learning/detail/${contents[0].articleId}`)}
                 >
                   <div className="relative w-full h-[180px]">
                     <Image

src/components/learning/article/ArticleDetailClientWrapper.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import ArticleDetailHeader from '@/components/learning/article/ArticleDetailHeader';
+import ArticleDetailContent from '@/components/learning/article/ArticleDetailContent';
+import { getArticleDetail } from '@/factory/Article/GetArticle';
+import { ArticleDetail } from '@/types/learning';
+import { useAuthStore } from '@/store/userAuth.store';
+
+interface ArticleDetailClientWrapperProps {
+  articleId: number;
+}
+
+const ArticleDetailClientWrapper = ({ articleId }: ArticleDetailClientWrapperProps) => {
+  const { isLoggedIn } = useAuthStore();
+  const router = useRouter();
+  const [data, setData] = useState<ArticleDetail | null>(null);
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      alert('로그인이 필요한 서비스입니다.');
+      router.push('/sign');
+      return;
+    }
+
+    const fetchData = async () => {
+      try {
+        const result = await getArticleDetail(articleId);
+        setData(result);
+      } catch (error) {
+        console.error('데이터를 가져오는 중 오류 발생:', error);
+      }
+    };
+
+    fetchData();
+  }, [isLoggedIn, articleId, router]);
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <div>
+      <ArticleDetailHeader
+        categoryName={data.categoryName}
+        title={data.title}
+        createdAt={data.createdAt}
+        authorName={data.authorName}
+        imgLink={data.imgLink}
+      />
+      <div className="max-w-[1000px] mx-auto my-6 text-sm text-gray-600">
+        학습하기 &gt; 아티클 &gt; {data.categoryName}
+      </div>
+      <ArticleDetailContent
+        text={data.text}
+        createdAt={data.createdAt}
+        authorName={data.authorName}
+      />
+    </div>
+  );
+};
+
+export default ArticleDetailClientWrapper;