💄 Style - 세미나 썸네일 반응형, 스타일 양식 맞춤 #40

- 세미나 썸네일 svg -> png 이미지로 변경
- 피그마에 맞춰 폰트 굵기, 크기, 색상 등 스타일 양식으로 수정
- 세미나 interface, 더미 데이터 수정
- desktop, tablet, mobile에 따른 페이지네이션, 무한 스크롤 반응형 처리

src/app/seminar/[id]/page.tsx

@@ -22,7 +22,9 @@ const SeminarDetailPage = () => {
   }
 
 
-  return <div className="w-4/5 px-10 my-20 mx-auto">
+  return <section className="flex justify-center">
+  <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4 bg-mono_black">
+     <div className="w-full">
     {/* header */}
     <SeminarDetailHeader key={`${seminar.id}_header`} data={seminar}/>
 
@@ -33,8 +35,12 @@ const SeminarDetailPage = () => {
     <SeminarDetailPdf key={`${seminar.id}_pdf`}/>
 
     {/* review */}
-    <SeminarDetailReview />
-  </div>;
+    <SeminarDetailReview key={`${seminar.id}_review`} />
+
+  </div>
+  <div className="h-[120px]"></div>
+  </div>
+  </section>;
 };
 
 export default SeminarDetailPage;

src/components/seminar/thumbnail/SeminarThumbnail.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
-import GDSCLOGO from '@/svg/seminar/gdsc_logo.svg';
 import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
+import Image from 'next/image';
 
 /**
  * @description
@@ -15,43 +14,15 @@ import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
  */
 const SeminarThumbnail = ({ data }: { data: SeminarThumnail }) => {
   return (
-    <div className="scale-container flex relative p-2">
-      {/* 왼쪽 컨텐츠 */}
-    <div className="flex-6 mr-10">
-      <GDSCLOGO />
-      <p className="text-md font-bold tracking-wide truncate">GDSC DGU {data.flag}st</p>
-      <p className="mt-1 text-md font-bold tracking-wide truncate">{data.type}</p>
-      <p className="mt-1 text-sm font-thin tracking-wide truncate">{data.date}</p>
-      <p className="mt-2 w-14 border border-solid text-zinc-500 h-0 tracking-wide"></p>
-      <p className="text-2xl font-normal mt-[1rem] tracking-wide">{data.title}</p>
-      <p className="mt-2 text-xs font-thin tracking-wide">{data.description}</p>
-    </div>
-    {/* 오른쪽 컨텐츠 */}
-    <div className='flex flex-col justify-between text-end align-end h-full'>
-      <p className="py-2 px-5 text-md font-normal rounded-xl bg-zinc-900">
-        {data.topic}
-      </p>
-      <div
-        className="relative" 
-        style={{
-          backgroundImage: `url(${data.profile_image_url})`,
-          backgroundSize: "cover",
-          borderRadius: 100,
-          aspectRatio: 1/1,
-          height: 100,
-          width: 100,
-        }}
-      >
-        <div className="flex flex-col absolute bottom-0 right-0 gap-1.5">
-          <p className="text-center py-0.5 px-1 bg-[#fff] text-[#000] text-[0.6rem] font-bold rounded-2xl">
-            {data.presenter}
-          </p>
-          <p className="text-center py-0.5 px-1 bg-[#fff] text-[#000] text-[0.6rem] font-bold rounded-2xl">
-            {data.flag}st {data.role}
-          </p>
-        </div>
-      </div>
-    </div>
+    <div className="w-full aspect-w-16 aspect-h-9">
+    <Image
+      src={data.image_url}
+      alt={`${data.presenter}'s_seminarimage`}
+      width={1600}
+      height={900}
+      quality={100}
+      priority
+    />
   </div>
   );
 };

src/components/seminar/thumbnail/SeminarThumbnailList.tsx

@@ -35,7 +35,7 @@ const SeminarThumbnailList = ({ selectedCategory }: { selectedCategory: string }
 
   // 페이지 번호 계산
     const pageNumbers = [];
-    for (let i = 1; i <= Math.ceil(SEMINAR_DATA.length / itemsPerPage); i++) {
+    for (let i = 1; i <= Math.ceil(filteredData.length / itemsPerPage); i++) {
       pageNumbers.push(i);
     }
 
@@ -47,11 +47,11 @@ const SeminarThumbnailList = ({ selectedCategory }: { selectedCategory: string }
 
 
     return (
-        <div className="w-full mt-20">
-          {/* 썸네일 레스트 */}
-        <div className="grid grid-cols-2 lg:grid-cols-3 gap-10 mb-20" style={{
-          aspectRatio: 16/9,
-        }}>
+        <div className="mt-10">
+          {/* 썸네일 리스트 */}
+
+          {/* desktop인 경우 */}
+        <div className="desktop:grid tablet:hidden hidden desktop:grid-cols-3 gap-x-8 gap-y-10">
         {currentItems.map((seminar) => (
           <Link
           href={`/seminar/${seminar.id}`}
@@ -63,14 +63,31 @@ const SeminarThumbnailList = ({ selectedCategory }: { selectedCategory: string }
           />
           </Link>
         ))}
+        </div>
+
+         {/*tablet, mobile인 경우 */}
+        <div className="desktop:hidden grid tablet:grid-cols-2 grid-cols-1 gap-x-8 gap-y-10">
+        {SEMINAR_DATA.map((seminar) => (
+          <Link
+          href={`/seminar/${seminar.id}`}
+          key={seminar.id}
+        >
+          <SeminarThumbnail
+          key={seminar.id}
+          data={seminar}
+          />
+          </Link>
+        ))}
         </div>
         {/* 페이지네이션 버튼 */}
-        <div className="flex justify-center gap-4">
+
+         {/* desktop인 경우에만 보이기 */}
+        <div className="pt-10 mt-5 desktop:flex tablet:hidden hidden justify-center gap-3">
           {pageNumbers.map(number => (
             <button
             key={number}
             onClick={() => paginate(number)}
-            className={`px-2 py-1 text-xs border border-2 rounded-lg ${currentPage === number ? 'text-zinc-1000' : 'text-zinc-500 border-zinc-500'}`}
+            className={`text-[0.75rem] font-medium w-5 y-5 justify-center items-center text-center border rounded ${currentPage === number ? 'text-mono_white border-mono_white' : 'text-mono_500 border-mono_500'}`}
           >
               {number}
             </button>