✨ Feat - open seminar api 데이터 처리 #44

src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import Image from 'next/image';
 import { motion } from 'framer-motion';
@@ -18,7 +20,7 @@ import SeminarDetailBannerInform from '../../seminarDetail/banner/SeminarDetailB
  * Renders the header component for the recruitment section.
  * @returns The rendered header component.
  */
-const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => {
+const OpenSeminarDetailBanner = ({ openSeminar }: { openSeminar: OpenSeminar }) => {
   return (
     <div className="w-full mt-8 flex desktop:flex-row tablet:flex-col flex-col flex-col gap-8">
       {/* 왼쪽 컨텐츠 */}
@@ -32,12 +34,11 @@ const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => {
     style={{ transformOrigin: '10% 60%' }}
   >
         <Image
-          src={data.image_url}
-          alt={`${data.seminar_month_date}'s open_seminarimage`}
+          src={openSeminar.image_url}
+          alt={`${openSeminar.date}'s open_seminarimage`}
           width={1600}
           height={900}
           quality={100}
-          priority
         />
         </motion.section>
       </div>
@@ -51,11 +52,10 @@ const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => {
           width={352}
           height={56}
           quality={100}
-          priority
         />
         </div>
-        <SeminarDetailBannerInform type='Date' data={data.seminar_opening_date} speaker_data=''/>
-        <SeminarDetailBannerInform type='Location' data={data.location} speaker_data=''/>
+        <SeminarDetailBannerInform type='Date' data={openSeminar.date} speaker_data=''/>
+        <SeminarDetailBannerInform type='Location' data={openSeminar.location} speaker_data=''/>
         <div>
         <motion.section
     initial={{ y: 20, opacity: 0 }}
@@ -66,13 +66,13 @@ const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => {
     style={{ transformOrigin: '10% 60%' }}
   >
           <motion.button
-           key={data.id}
-           whileHover={{ scale: data.status ? 1.05 : 1.0 }}
+           key={openSeminar.id}
+           whileHover={{ scale: openSeminar.status ? 1.05 : 1.0 }}
            whileTap={{ scale: 0.8 }}
            transition={{ duration: 0.2 }}
-           className={`w-full rounded py-4 text-[0.75rem] font-medium ${data.status === false ? "text-mono_500 border border-mono_500 pointer-events-none" : "text-mono_black bg-white"}`}
+           className={`w-full rounded py-4 text-[0.75rem] font-medium ${openSeminar.status === false ? "text-mono_500 border border-mono_500 pointer-events-none" : "text-mono_black bg-white"}`}
          >
-        {data.status === false ? '모집 기간이 아니에요.' : '모집 신청하기'}
+        {openSeminar.status === false ? '모집 기간이 아니에요.' : '모집 신청하기'}
       </motion.button>
       </motion.section>
         </div>

src/components/seminar/openSeminarDetail/header/OpenSeminarDetailHeader.tsx

@@ -14,8 +14,8 @@ import React, { useState } from 'react';
  * Renders the header component for the recruitment section.
  * @returns The rendered header component.
  */
-const OpenSeminarDetailHeader = ({ data }: { data: OpenSeminar }) => {
-  const [categoryData, setCategoryData] = useState([data.type, `${data.flag}st`]);
+const OpenSeminarDetailHeader = ({ openSeminar }: { openSeminar: OpenSeminar }) => {
+  const [categoryData, setCategoryData] = useState([openSeminar.type, `${openSeminar.flag}st`]);
 
   return (
     <> 
@@ -30,10 +30,10 @@ const OpenSeminarDetailHeader = ({ data }: { data: OpenSeminar }) => {
       ))}
       </div>
     <p className="w-full px-3 pt-8 H3">
-      {data.seminar_month_date}{" "}{data.type}
+      {openSeminar.title}
     </p>
     <p className="w-full px-3 pt-3 H6">
-    {data.description}
+    {openSeminar.description}
     </p>
   </>
   );

src/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
 import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
@@ -14,7 +16,7 @@ import { motion } from 'framer-motion';
  * Renders the header component for the recruitment section.
  * @returns The rendered header component.
  */
-const OpenSeminarDetailInformation = ({ data }: { data: OpenSeminar }) => {
+const OpenSeminarDetailInformation = ({ openSeminar }: { openSeminar: OpenSeminar }) => {
 
   return (
     <div className="w-full flex mt-10 pt-6 flex-col inline-flex min-h-fit relative"> 
@@ -32,12 +34,6 @@ const OpenSeminarDetailInformation = ({ data }: { data: OpenSeminar }) => {
           style={{ transformOrigin: '10% 60%' }}
           className="w-full"
         >
-   {data.information.split('<br>').map((line, index) => (
-          <React.Fragment key={index}>
-            {line}
-            <br />
-          </React.Fragment>
-        ))}
         </motion.section>
    </div>
   </div>

src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx

@@ -1,9 +1,12 @@
+'use client';
+
 import React from 'react';
 import OpenSeminarsDetailBox from './OpenSeminarsDetailBox';
-import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import { OpenSeminar, OpenSeminarDetailSeminar } from '@/interfaces/seminar/openSeminar';
 import Link from 'next/link';
 import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
 import { motion } from 'framer-motion';
+import { SeminarMember } from '@/interfaces/seminar/seminarMember';
 
 /**
  * @description
@@ -16,7 +19,7 @@ import { motion } from 'framer-motion';
  * Renders the header component for the recruitment section.
  * @returns The rendered header component.
  */
-const OpenSeminarDetailSeminars = ({ data }: { data: OpenSeminar }) => {
+const OpenSeminarDetailSeminars = ({ detailSeminars }: { detailSeminars:OpenSeminarDetailSeminar[] }) => {
 
   return (
     <div className="w-full mt-10 pt-6 flex-col inline-flex min-h-fit relative"> 
@@ -25,7 +28,7 @@ const OpenSeminarDetailSeminars = ({ data }: { data: OpenSeminar }) => {
     </p>
     <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) => (
+    {detailSeminars.map((seminar) => (
        <motion.section
        key={seminar.id}
        initial={{ y: 20, opacity: 0 }}
@@ -37,11 +40,11 @@ const OpenSeminarDetailSeminars = ({ data }: { data: OpenSeminar }) => {
        className="w-full"
      >
       <Link
-      href={`/seminar/0${data.id}${seminar.id}`}
+      href={`/seminar/${seminar.id}`}
     >
     <OpenSeminarsDetailBox
-      key={`${seminar.id}_${index}_seminar`} 
-      data={seminar}
+      key={`${seminar.id}_seminar`} 
+      seminar={seminar}
     />
     </Link>
     </motion.section>

src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarsDetailBox.tsx

@@ -1,3 +1,5 @@
+import { OpenSeminarDetailSeminar } from '@/interfaces/seminar/openSeminar';
+import { SeminarMember } from '@/interfaces/seminar/seminarMember';
 import { SeminarThumbnail } from '@/interfaces/seminar/seminarThumbnail';
 import Image from 'next/image';
 import React from 'react';
@@ -13,25 +15,24 @@ import React from 'react';
  * Renders the header component for the recruitment section.
  * @returns The rendered header component.
  */
-const OpenSeminarsDetailBox = ({ data }: { data: SeminarThumbnail }) => {
+const OpenSeminarsDetailBox = ({ seminar }: { seminar:OpenSeminarDetailSeminar }) => {
 
   return (
     <div className="w-full flex flex-row p-4 bg-mono_900 rounded gap-4"> 
     <div className='rounded overflow-hidden'>
       <Image
-          src={data.presenter_image_url}
+          src={seminar.member_profile_image}
           alt="translate_img"
           width={64}
           height={64}
           quality={100}
-          priority
         />
         </div>
         <div className='flex flex-col justify-center'>
         <div className="B1 flex gap-2">
-            {data.presenter_name} <p className="B1 text-mono_200">{data.presenter_role}</p>
+            {seminar.member_name} <p className="B1 text-mono_200">{seminar.member_role}</p>
         </div>
-        <p className='className="B1'>{data.title}</p>
+        <p className='className="B1'>{seminar.seminar_title}</p>
         </div>
   </div>
   );

src/hooks/seminar/changePathtoNumber.ts

@@ -1,8 +1,8 @@
 
 // path 'seminar/${seminar.id} 중 seminar.id만 반환
-export const changePathtoSeperate = (pathname: string) => {
+export const changePathtoSeperate = (pathname: string, value: string) => {
     // URL에서 '/seminar/' 다음에 오는 부분을 추출하여 직접 반환
-    const basePath = '/seminar/';
+    const basePath = `/${value}/`;
     const start = pathname.indexOf(basePath) + basePath.length;
     const seminarId = pathname.substring(start); // 이 부분이 바로 seminarId
 

src/hooks/seminar/notionDataRefactor.ts

@@ -3,23 +3,51 @@ import { SeminarReview } from "@/interfaces/seminar/seminarReview";
 import { SeminarThumbnail } from "@/interfaces/seminar/seminarThumbnail";
 import SeminarThumbnailCardImg from '@/svg/seminar/seminar_thumbnail_card.png';
 import PresenterProfileImg from '@/svg/seminar/presenter_profile_img.png';
+import { OpenSeminar, OpenSeminarDetailSeminar, Relation } from "@/interfaces/seminar/openSeminar";
 
 // seminar data
 export function refactorSeminarData(items: any[]): SeminarThumbnail[] {
     return items.map(item => ({
-      id: item.id,
+      id: item.id ?? '',
       flag: 1,
       type: item.properties.Tags?.multi_select[0]?.name ?? 'Unknown',
-      topic: item.properties.Topic?.select?.name ?? 'all', // static value as per example
+      topic: item.properties.Topic?.select?.name ?? 'all', 
       date: item.properties.Date?.date?.start ?? 'Unknown Date',
-      location: item.properties.Location?.rich_text[0]?.plain_text ?? 'No Location', // static value as per example
+      location: item.properties.Location?.rich_text[0]?.plain_text ?? 'No Location', 
       title: item.properties.Name?.title[0]?.plain_text ?? 'Unknown Title',
-      description: item.properties.Description?.rich_text[0]?.plain_text ?? 'No Description', // static value as per example
+      description: item.properties.Description?.rich_text[0]?.plain_text ?? 'No Description',
       seminar_image_url: item.cover?.file?.url ?? SeminarThumbnailCardImg.src,
       pdf_url: item.properties['Files & media']?.files[0]?.file?.url ?? PresenterProfileImg.src, // 임시 pdf 데이터
     }));
   }
 
+  // open seminar data
+export function refactorOpenSeminarData(items: any[]): OpenSeminar[] {
+  return items.map(item => ({
+    id: item.id ?? '',
+    flag: 1,
+    type: item.properties['다중 선택'].multi_select[0]?.name ?? 'Unknown',
+    date: item.properties.Date?.date?.start ?? 'Unknown Date',
+    location: item.properties.Location?.rich_text[0]?.plain_text ?? 'No Location', // static value as per example
+    title: item.properties['이름']?.title[0]?.plain_text ?? 'Unknown Title',
+    description: item.properties.Description?.rich_text[0]?.plain_text ?? 'No Description',
+    image_url: item.cover?.file?.url ?? SeminarThumbnailCardImg.src,
+    status: (item.properties.status?.status?.name === "종료" ? false : true) ?? false,
+    seminars: item.properties.Seminars?.relation ?? [{id: '1'}, {id: '2'}, {id: '3'}, {id: '4'}],
+  }));
+}
+
+/*
+export function refactorOpenSeminarInformationData(items: any[]): SeminarThumbnail[] {
+  return items.map(item => ({
+    id: item.id,
+    open_seminar_id:
+    information:
+  }));
+}
+*/
+
+
   // seminar review data
   export function refactorSeminarReviewData(items: any[]): SeminarReview[] {
     return items.map(item => ({
@@ -30,14 +58,33 @@ export function refactorSeminarData(items: any[]): SeminarThumbnail[] {
     }));
   }
 
-    // seminar review data
-    export function refactorSeminarMemberData(item: any): SeminarMember {
+    // seminar member data
+    export function refactorSeminarMemberData(item: any, id:string): SeminarMember {
         return {
             id: item.id ?? 'Unknown',
-            seminar_id: item.properties.Seminars?.relation[0]?.id ?? 'Unknown',
+            seminar_id: id ?? 'Unknown',
             name: item.properties['이름']?.title[0]?.plain_text ?? 'Unknown',
             role: item.properties.Part?.multi_select[0]?.name ?? 'Unknown',
             profile_img: item.properties.ProfileImage?.url ?? PresenterProfileImg.src,
         };
       }
-
+
+        // seminar review data
+        export function refactorOpenSeminarDetailSeminarsData(seminar: any, member: any): OpenSeminarDetailSeminar {
+            return {
+              id: seminar.id,
+              seminar_id: seminar.id,
+              member_id: member.id ?? '',
+              member_name: member.name ?? 'Unknown',
+              member_role: member.role ?? 'Unknown',
+              member_profile_image: member.profileImage ?? PresenterProfileImg.src,
+              seminar_title: seminar.title,
+            };
+        }
+
+
+      // open seminar ids로 seminar 데이터 반환
+export function findSeminarsByIds(seminars: SeminarThumbnail[], ids: Relation[]): SeminarThumbnail[] {
+        const idList = ids.map(relation => relation.id);
+        return seminars.filter(seminar => idList.includes(seminar.id));
+}

src/interfaces/seminar/openSeminar.ts

@@ -1,15 +1,34 @@
 import { SeminarThumbnail } from "./seminarThumbnail";
 
 export interface OpenSeminar {
-    id: number;
+    id: string;
     flag: number;
     type: string;
-    seminar_opening_date: string;
-    seminar_month_date: string;
+    date: string;
     location: string;
+    title: string,
     description: string;
-    information: string;
     image_url: string;
     status: boolean;
-    seminars: SeminarThumbnail[];
+    seminars: Relation[];
+}
+
+export interface OpenSeminarInfo {
+    id: number;
+    open_seminar_id: string;
+    information: string;
+}
+
+export interface Relation {
+    id: string;
+}
+
+export interface OpenSeminarDetailSeminar {
+    id: number;
+    seminar_id: string;
+    member_id: string;
+    member_name: string;
+    member_role: string;
+    member_profile_image: string;
+    seminar_title: string;
 }