✨ Feat - seminar detail notion api 변경(all로) #44

src/app/api/seminar/all/route.tsx

@@ -0,0 +1,52 @@
+import { Client } from '@notionhq/client';
+import { NextRequest } from 'next/server';
+
+const notion = new Client({
+  auth: process.env.NOTION_SECRET_KEY,
+});
+
+// seminar 데이터 query select, 오름차순
+async function queryAllSeminarData(databaseId: string): Promise<any[]> {
+  try {
+    const response = await notion.databases.query({
+      database_id: databaseId,
+      sorts: [
+        {
+          property: 'Date', 
+          direction: 'ascending' 
+        }
+      ]
+    });
+
+    return response.results;
+  } catch (error) {
+    console.error('Error querying Notion database and fetching member data:', JSON.stringify(error));
+    throw error;
+  }
+}
+
+type Data = {
+  items?: any[];
+  message: string;
+};
+
+export async function GET(req: NextRequest) {
+  const databaseId = process.env.NOTION_SEMINAR_DATABASE_ID || ''; 
+
+  try {
+    const data = await queryAllSeminarData(databaseId);
+    return new Response(JSON.stringify({ data, message: 'Success' }), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  } catch (error) {
+    return new Response(JSON.stringify({ message: `Failed: ${error?.toString()}` }), {
+      status: 500,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+}

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

@@ -13,12 +13,18 @@ const SeminarDetailPage = async () => {
   const header = headers();
   const pathname = header.get('next-url')
 
-  const seminarId = changePathtoSeperate(pathname ?? '');
+  const seminarId = changePathtoSeperate(pathname ?? '', 'seminar');
 
-  // seminar data 정의
-  const seminarResponse = await fetch('http://localhost:3001/api/seminar');
+  // all seminar data 정의
+  const seminarResponse = await fetch(`http://localhost:3001/api/seminar/all`);
   const seminarList = await seminarResponse.json();
   const seminars = refactorSeminarData(seminarList.data ?? []);
+    // 세미나 디테일 데이터로 분리
+    let seminar =  seminars.find(seminar => `${seminar.id}` === `${seminarId}`);
+
+    if(!seminar) {
+      return <NotFoundPage />;
+    }
 
   // reviews 데이터 정의
   const seminarReviewResponse = await fetch(`http://localhost:3001/api/seminar/review?seminarId=${seminarId}`);
@@ -28,14 +34,7 @@ const SeminarDetailPage = async () => {
   // member 데이터 정의
   const memberResponse = await fetch(`http://localhost:3001/api/member?seminarId=${seminarId}`);
   const memberList = await memberResponse.json();
-  const member = refactorSeminarMemberData(memberList.data[0] ?? SEMINAR_MEMBER_DATA);
-
-  // 세미나 디테일 데이터로 분리
-  const seminar = seminars.find(seminar => `${seminar.id}` === `${seminarId}`);
-    // 오픈 세미나 데이터
-  if (!seminar) {
-      return <NotFoundPage />;
-    }
+  const member = refactorSeminarMemberData(memberList.data[0] ?? SEMINAR_MEMBER_DATA, seminar.id);
 
   return <section className="flex justify-center">
   <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4 bg-mono_black">

src/components/seminar/seminarDetail/header/SeminarDetailHeader.tsx

@@ -2,7 +2,6 @@
 
 import { SeminarThumbnail } from '@/interfaces/seminar/seminarThumbnail';
 import React, { useState } from 'react';
-import BannerImg from '@/svg/seminar/seminar_banner.svg';
 
 /**
  * @description

src/components/seminar/thumbnail/SeminarThumbnailList.tsx

@@ -23,13 +23,13 @@ import SeminarMenuBar from '../menubar/SeminarMenuBar';
  * @returns The rendered header component.
  */
 
-const SeminarThumbnailList = ({ seminar }: { seminar:SeminarThumbnail[] }) => {     
+const SeminarThumbnailList = ({ seminars }: { seminars:SeminarThumbnail[] }) => {     
   const [currentPage, setCurrentPage] = useState(1);
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
   const itemsPerPage = 12;  // 한 페이지당 표시할 항목 수
 
     // topic으로 데이터 필터링
-  const filteredData = selectedCategory !== "all" ? seminar.filter(seminar => seminar.topic === selectedCategory) : seminar;
+  const filteredData = selectedCategory !== "all" ? seminars.filter(seminar => seminar.topic === selectedCategory) : seminars;
 
   // 페이지네이션
   const indexOfLastItem = currentPage * itemsPerPage;

src/components/seminar/toggle/SeminarToggle.tsx

@@ -3,10 +3,10 @@
 import React, { useState } from 'react';
 import SeminarToggleMenu from './SeminarToggleMenu';
 import ChervonDownIcon from '@/svg/icons/common/chervon_down.svg';
-import { OPEN_SEMINAR_DATA } from '@/constants/seminar/openSeminarData';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { toggleVariants } from '@/constants/seminar/seminarToggleVariants';
+import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
 
 /**
  * @description
@@ -20,7 +20,7 @@ import { toggleVariants } from '@/constants/seminar/seminarToggleVariants';
  * @returns The rendered header component.
  */
 
-const SeminarToggle = () => {
+const SeminarToggle = ({openSeminars}:{openSeminars:OpenSeminar[]}) => {
     const [isMenuVisible, setIsMenuVisible] = useState(false); // 오픈 세미나 목록 토클 버튼
     const toggleMenuVisibility = () => {
         setIsMenuVisible(!isMenuVisible);
@@ -47,14 +47,14 @@ const SeminarToggle = () => {
         className={isMenuVisible ? "" : "overflow-hidden"}
       >
     <div className="mt-5">
-        {OPEN_SEMINAR_DATA.map((seminar) => (
+        {openSeminars.map((seminar) => (
                <Link
                key={seminar.id} 
                href={`/seminar/open/${seminar.id}`}
              >
              <SeminarToggleMenu 
              key={seminar.id}
-             data={seminar}
+             openSeminar={seminar}
              />
              </Link>
       ))}

src/components/seminar/toggle/SeminarToggleMenu.tsx

@@ -14,23 +14,23 @@ import { motion } from 'framer-motion';
  * @returns The rendered header component.
  */
 
-const SeminarToggleMenu = ({data}: {data:OpenSeminar}) => {      
+const SeminarToggleMenu = ({openSeminar}: {openSeminar:OpenSeminar}) => {      
   return (
     <div>
         <motion.section
-           key={data.id}
+           key={openSeminar.id}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.8 }}
            transition={{ duration: 0.2 }}
          >
       <div
         className="p-3 flex justify-between items-center">
             <div className="flex-col">
-      <p className="H6">{data.seminar_month_date}{" "}{data.type}</p>
-      <p className="Cap">{data.seminar_opening_date}</p>
+      <p className="H6">{openSeminar.title}{" "}{openSeminar.type}</p>
+      <p className="Cap">{openSeminar.date}</p>
       </div>
-      <p className={`text-[0.75rem] font-medium py-2 px-3 border border-solid rounded-lg ${data.status === false ? "text-mono_500 border-mono_500" : "text-mono_white border-mono_white"}`}>
-              {data.status === false ? "종료" : "진행중"}
+      <p className={`text-[0.75rem] font-medium py-2 px-3 border border-solid rounded-lg ${openSeminar.status === false ? "text-mono_500 border-mono_500" : "text-mono_white border-mono_white"}`}>
+              {openSeminar.status === false ? "종료" : "모집중"}
             </p>
       </div>
       </motion.section>