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

feat : 아티클 페이지 카테고리 별 이미지 처리

Author: jiohjung98

public/images/learning/art_background.png

@@ -124,7 +124,7 @@ const FilteredContents = ({
             );
           })
         ) : (
-          <div className="text-center text-gray-500">데이터가 없습니다.</div>
+          <div className="text-center text-gray-500">콘텐츠 준비중입니다.</div>
         )}
       </div>
 

public/images/learning/building_background.png

@@ -9,12 +9,12 @@ import LatestNewsClipping from '@/components/learning/LatestNewsClipping';
 import FilteredContents from '@/components/learning/FilteredContents';
 import HomeIcon from '../../../public/images/learning/learning_home.svg';
 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 { fetchContentsWithPage } from '@/factory/Article/GetArticle';
 import { resetSessionValues } from '@/utils/resetSessionValues';
+import { categoryConfig } from '@/utils/categoryConfig';
 
 const LearningPageClient = ({ initialData }: { initialData: OverviewResponse }) => {
 
@@ -81,17 +81,25 @@ const LearningPageClient = ({ initialData }: { initialData: OverviewResponse })
           likedByMe: item.likedByMe,
         }))
       : [];
+    
+  const categoryInfo = categoryConfig[selectedCategory as keyof typeof categoryConfig] || categoryConfig.all;
+
 
   return (
     <div>
       <div className="hidden sm:flex relative w-full h-[300px] lg:h-[400px]">
-        <Image
-          src={BackgroundImage}
-          alt="Background"
-          layout="fill"
-          objectFit="cover"
-          className="w-full"
-        />
+      <Image
+        src={categoryInfo.backgroundImage}
+        alt="Background"
+        layout="fill"
+        objectFit="cover"
+        className="w-full"
+      />
+      <div className="absolute inset-0 bg-black opacity-30"></div>
+     <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
+      <h2 className="text-white text-3xl font-bold">{categoryInfo.title}</h2>
+      <p className="text-white text-lg mt-2">{categoryInfo.description}</p>
+    </div>
         <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}

public/images/learning/content_background.png

@@ -0,0 +1,57 @@
+import NewsBackground from '../../public/images/learning/news_background.png';
+import GuideBackground from '../../public/images/learning/guide_background.png';
+import BuildingBackground from '../../public/images/learning/building_background.png';
+import ArtBackground from '../../public/images/learning/art_background.png';
+import MusicBackground from '../../public/images/learning/music_background.png';
+import ContentBackground from '../../public/images/learning/content_background.png';
+import CowBackground from '../../public/images/learning/cow_background.png';
+import MoneyBackground from '../../public/images/learning/money_background.png';
+import DefaultBackground from '../../public/images/learning/learning_background.png';
+
+export const categoryConfig = {
+  all: {
+    title: '학습하기',
+    backgroundImage: DefaultBackground,
+    description: '다양한 학습 콘텐츠를 탐색해보세요.',
+  },
+  news: {
+    title: '오늘의 뉴스',
+    backgroundImage: NewsBackground,
+    description: '오늘의 뉴스 소식을 확인해보세요',
+  },
+  guide: {
+    title: '조각투자 기초 가이드',
+    backgroundImage: GuideBackground,
+    description: '조각투자 기초 가이드 소식을 확인해보세요',
+  },
+  building: {
+    title: '부동산',
+    backgroundImage: BuildingBackground,
+    description: '부동산 소식을 확인해보세요',
+  },
+  art: {
+    title: '미술품',
+    backgroundImage: ArtBackground,
+    description: '미술품 소식을 확인해보세요',
+  },
+  music: {
+    title: '음악 저작권',
+    backgroundImage: MusicBackground,
+    description: '음악 저작권 소식을 확인해보세요',
+  },
+  content: {
+    title: '콘텐츠',
+    backgroundImage: ContentBackground,
+    description: '콘텐츠 소식을 확인해보세요',
+  },
+  cow: {
+    title: '한우',
+    backgroundImage: CowBackground,
+    description: '한우 소식을 확인해보세요',
+  },
+  money: {
+    title: '재테크 가이드',
+    backgroundImage: MoneyBackground,
+    description: '재테크 가이드 소식을 확인해보세요',
+  },
+};