♻️Refactor - 오픈세미나 data set refactor #41

- 오픈세미나 -> 상세세미나 이동을 위해 SeminarThumbnail interface로 통일
GDSC-DGU · May 3, 2024 · 1e24af7 · 1e24af7
1 parent f6f37ff
commit 1e24af7
Show file tree

Hide file tree

Showing 11 changed files with 193 additions and 255 deletions.
diff --git a/src/app/seminar/[id]/page.tsx b/src/app/seminar/[id]/page.tsx
@@ -1,43 +1,64 @@
 'use client';
 
-import React from 'react';
+import React, {useEffect} from 'react';
 import { usePathname } from 'next/navigation';
 import SeminarDetailHeader from '@/components/seminar/seminarDetail/header/SeminarDetailHeader';
 import SeminarDetailBanner from '@/components/seminar/seminarDetail/banner/SeminarDetailBanner';
 import { SEMINAR_DATA } from '@/constants/seminar/seminarData';
+import { OPEN_SEMINAR_DATA } from '@/constants/seminar/openSeminarData';
 import SeminarDetailPdf from '@/components/seminar/seminarDetail/pdf/SeminarDetailPdf';
 import NotFoundPage from '@/app/not-found';
 import SeminarDetailReview from '@/components/seminar/seminarDetail/review/SeminarDetailReview';
+import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
 import { changePathtoNumber } from '@/hooks/seminar/changePathtoNumber';
 
 const SeminarDetailPage = () => {
   const pathname = usePathname();
-  // 숫자 추출
-  var id = changePathtoNumber(pathname);
-
-  // 객체 찾기
-  const seminar = SEMINAR_DATA.find(seminar => Number(seminar.id) === id);
+  let id = changePathtoNumber(pathname);
+  console.log(id);
+
+  let data: SeminarThumnail | undefined;
+
+  // 일반객체
+    data = SEMINAR_DATA.find(seminar => `${seminar.id}` === `${id}`);
+
+    // 오픈 세미나 데이터
+  if (!data) {
+    let found = OPEN_SEMINAR_DATA.find(oseminar =>
+      oseminar.seminars.some(seminar => `0${oseminar.id}${seminar.id}` === `${id}`)
+    );
 
-  if (!id || !seminar) {
-    // 세미나를 찾지 못한 경우
-    return <NotFoundPage />;
+    if (found) {
+      const matchingSeminar = found.seminars.find(seminar => `0${found.id}${seminar.id}` === `${id}`);
+      console.log('match', matchingSeminar);
+
+      if (matchingSeminar) {
+        data = matchingSeminar;
+      } else {
+        // 일치하는 세미나를 찾지 못한 경우
+        return <NotFoundPage />;
+      }
+    } else {
+      // 일치하는 OpenSeminar를 찾지 못한 경우
+      return <NotFoundPage />;
+    }
   }
 
 
   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}/>
+    <SeminarDetailHeader key={`${data.id}_header`} data={data}/>
 
     {/* banner */}
-    <SeminarDetailBanner key={`${seminar.id}_banner`} data={seminar}/>
+    <SeminarDetailBanner key={`${data.id}_banner`} data={data}/>
 
     {/* pdf file */}
-    <SeminarDetailPdf key={`${seminar.id}_pdf`}/>
+    <SeminarDetailPdf key={`${data.id}_pdf`}/>
 
     {/* review */}
-    <SeminarDetailReview key={`${seminar.id}_review`} />
+    <SeminarDetailReview key={`${data.id}_review`} />
 
   </div>
   <div className="h-[120px]"></div>

diff --git a/src/components/seminar/openSeminarDetail/header/OpenSeminarDetailHeader.tsx b/src/components/seminar/openSeminarDetail/header/OpenSeminarDetailHeader.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { OpenDetailSeminar, OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
 import React, { useState } from 'react';
 
 /**

diff --git a/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx b/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import OpenSeminarsDetailBox from './OpenSeminarsDetailBox';
 import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
-import { OPEN_SEMINAR_DATA } from '@/constants/seminar/openSeminarData';
 import Link from 'next/link';
 
 /**
@@ -25,10 +24,15 @@ const OpenSeminarDetailSeminars = ({ data }: { data: OpenSeminar }) => {
     <p className="mb-3 border border-solid text-mono_700 h-0"/>
     <div className='mt-5 flex grid desktop:grid-cols-2 tablet:grid-cols-1 gap-8'>
     {data.seminars.map((seminar, index) => (
+      <Link
+      href={`/seminar/0${data.id}${seminar.id}`}
+      key={seminar.id}
+    >
     <OpenSeminarsDetailBox
       key={`${seminar.id}_${index}_seminar`} 
       data={seminar}
     />
+    </Link>
   ))}
   </div>
   </div>

diff --git a/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarsDetailBox.tsx b/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarsDetailBox.tsx
@@ -1,4 +1,5 @@
-import { OpenDetailSeminar, OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
 import Image from 'next/image';
 import React from 'react';
 
@@ -13,7 +14,7 @@ import React from 'react';
  * Renders the header component for the recruitment section.
  * @returns The rendered header component.
  */
-const OpenSeminarsDetailBox = ({ data }: { data: OpenDetailSeminar }) => {
+const OpenSeminarsDetailBox = ({ data }: { data: SeminarThumnail }) => {
 
   return (
     <div className="w-full flex flex-row p-4 bg-mono_900 rounded gap-4"> 
@@ -29,9 +30,9 @@ const OpenSeminarsDetailBox = ({ data }: { data: OpenDetailSeminar }) => {
         </div>
         <div className='flex flex-col justify-center'>
         <div className="B1 font-medium flex gap-2">
-            {data.presenter} <p className="B1 font-normal text-mono_200">{data.presenter_role}</p>
+            {data.presenter_name} <p className="B1 font-normal text-mono_200">{data.presenter_role}</p>
         </div>
-        <p className='className="B1 font-normal'>{data.seminar_title}</p>
+        <p className='className="B1 font-normal'>{data.title}</p>
         </div>
   </div>
   );

diff --git a/src/components/seminar/seminarDetail/banner/SeminarDetailBanner.tsx b/src/components/seminar/seminarDetail/banner/SeminarDetailBanner.tsx
@@ -21,8 +21,8 @@ const SeminarDetailBanner = ({ data }: { data: SeminarThumnail }) => {
       {/* 왼쪽 컨텐츠 */}
       <div className="desktop:min-w-[544px] tablet:w-full w-full aspect-w-16 aspect-h-9">
         <Image
-          src={data.image_url}
-          alt={`${data.presenter}'s_seminarimage`}
+          src={data.seminar_image_url}
+          alt={`${data.presenter_name}'s_seminarimage`}
           width={1600}
           height={900}
           quality={100}
@@ -63,7 +63,7 @@ const SeminarDetailBanner = ({ data }: { data: SeminarThumnail }) => {
             Speaker
         </p>
         <div className="B1 font-medium flex gap-2">
-            {data.presenter} <p className="B1 font-normal text-mono_200">{data.role}</p>
+            {data.presenter_name} <p className="B1 font-normal text-mono_200">{data.presenter_role}</p>
         </div>
         </div>
     </div>

diff --git a/src/components/seminar/thumbnail/SeminarThumbnail.tsx b/src/components/seminar/thumbnail/SeminarThumbnail.tsx
@@ -16,8 +16,8 @@ const SeminarThumbnail = ({ data }: { data: SeminarThumnail }) => {
   return (
     <div className="w-full aspect-w-16 aspect-h-9">
     <Image
-      src={data.image_url}
-      alt={`${data.presenter}'s_seminarimage`}
+      src={data.seminar_image_url}
+      alt={`${data.presenter_name}'s_seminarimage`}
       width={1600}
       height={900}
       quality={100}

diff --git a/src/constants/seminar/openSeminarData.ts b/src/constants/seminar/openSeminarData.ts
@@ -1,34 +1,87 @@
 import SeminarThumbnailCardImg from '@/svg/seminar/seminar_thumbnail_card.png';
 import PresenterProfileImg from '@/svg/seminar/presenter_profile_img.png';
-import { OpenDetailSeminar, OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
 
-export const OPEN_DETAIL_SEMINAR_DATA:OpenDetailSeminar [] = [
+export const OPEN_DETAIL_SEMINAR_DATA:SeminarThumnail [] = [
     {
-        id: 4,
-        presenter: `서희찬`,
-        seminar_title: `세미나 제목`,
-        presenter_role: `Lead`,
+        id: 1,
+        flag: 1,
+        type: 'Open Seminar',
+        topic: 'DevTalk',
+        date: '2023.09.22 (FRI) 19:30',
+        location: '동국대학교 원흥관 PBL',
+        title: `
+        휴, 하마터면 
+        의사 될 뻔...
+        `,
+        description: `
+        의사를 목표로 공부를 하다가,
+        프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들
+        `,
+        presenter_name: '서희찬',
+        presenter_role: 'Lead',
+        seminar_image_url: SeminarThumbnailCardImg.src,
         presenter_image_url: PresenterProfileImg.src,
     },
     {
-        id: 3,
-        presenter: `서희찬`,
-        seminar_title: `세미나 제목`,
-        presenter_role: `Lead`,
+        id: 2,
+        flag: 1,
+        type: 'Open Seminar',
+        topic: 'DevTalk',
+        date: '2023.09.22 (FRI) 19:30',
+        location: '동국대학교 원흥관 PBL',
+        title: `
+        휴, 하마터면 
+        의사 될 뻔...
+        `,
+        description: `
+        의사를 목표로 공부를 하다가,
+        프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들
+        `,
+        presenter_name: '서희찬',
+        presenter_role: 'Lead',
+        seminar_image_url: SeminarThumbnailCardImg.src,
         presenter_image_url: PresenterProfileImg.src,
     },
     {
-        id: 2,
-        presenter: `서희찬`,
-        seminar_title: `세미나 제목`,
-        presenter_role: `Lead`,
+        id: 3,
+        flag: 1,
+        type: 'Open Seminar',
+        topic: 'DevTalk',
+        date: '2023.09.22 (FRI) 19:30',
+        location: '동국대학교 원흥관 PBL',
+        title: `
+        휴, 하마터면 
+        의사 될 뻔...
+        `,
+        description: `
+        의사를 목표로 공부를 하다가,
+        프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들
+        `,
+        presenter_name: '서희찬',
+        presenter_role: 'Lead',
+        seminar_image_url: SeminarThumbnailCardImg.src,
         presenter_image_url: PresenterProfileImg.src,
     },
     {
-        id: 1,
-        presenter: `서희찬`,
-        seminar_title: `세미나 제목`,
-        presenter_role: `Lead`,
+        id: 4,
+        flag: 1,
+        type: 'Open Seminar',
+        topic: 'DevTalk',
+        date: '2023.09.22 (FRI) 19:30',
+        location: '동국대학교 원흥관 PBL',
+        title: `
+        휴, 하마터면 
+        의사 될 뻔...
+        `,
+        description: `
+        의사를 목표로 공부를 하다가,
+        프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들
+        `,
+        presenter_name: '서희찬',
+        presenter_role: 'Lead',
+        seminar_image_url: SeminarThumbnailCardImg.src,
         presenter_image_url: PresenterProfileImg.src,
     },
 ]
@@ -75,6 +128,7 @@ export const OPEN_SEMINAR_DATA: OpenSeminar[] = [
         seminar_opening_date: '2024.05.16 (THU) 18:30',
         seminar_month_date: '2024/5',
         location: '동국대학교 원흥관 PBL',
+
         description: `
         GDSC DGU의 소속이 아니더라도 기술과 경험을 공유하는 것에 관심이 있는 학생들을 대상으로 진행하는 세미나입니다.
         `,