✨ Feat - open seminar information 노션 db 연결 추가 #44

GDSC-DGU · May 15, 2024 · a781686 · a781686
1 parent 6c4e33b
commit a781686
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 8 deletions.
diff --git a/src/app/api/seminar/open/info/route.tsx b/src/app/api/seminar/open/info/route.tsx
@@ -0,0 +1,48 @@
+import { Client } from '@notionhq/client';
+import { NotionToMarkdown } from "notion-to-md";
+import { NextRequest } from 'next/server';
+
+const notion = new Client({
+    auth: process.env.NOTION_SECRET_KEY,
+});  
+
+const n2m = new NotionToMarkdown({ notionClient: notion });
+
+async function getPageMarkdown(pageId: string): Promise<any> {
+    const mdblocks = await n2m.pageToMarkdown(pageId);
+    const mdString = n2m.toMarkdownString(mdblocks);
+    return mdString;
+}
+
+
+// Next.js의 API 라우트 핸들러
+export async function GET(req: NextRequest) {
+    const url = new URL(req.url);
+    const pageId = url.searchParams.get('pageId');
+
+    if (!pageId) {
+        return new Response(JSON.stringify({ message: 'pageId is required' }), {
+            status: 400,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+    }
+
+    try {
+        const pageContent = await getPageMarkdown(pageId);
+        return new Response(JSON.stringify({ data: pageContent, 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',
+            },
+        });
+    }
+}
diff --git a/src/app/seminar/open/[id]/page.tsx b/src/app/seminar/open/[id]/page.tsx
@@ -45,6 +45,10 @@ const OpenSeminarDetailPage = async () => {
       })
     );
 
+    const markDownResponse = await fetch(`http://localhost:3001/api/seminar/open/info?pageId=${openSeminar.id}`);
+    const markdown = await markDownResponse.json();
+    // console.log('real ::: ', markdown);
+
   return <section className="flex justify-center">
   <div className="max-w-[1200px] desktop:px-10 bigTablet:px-10 lg:px-10 md:px-10 tablet:px-10 px-4 bg-mono_black">
      <div className="w-full">
@@ -56,7 +60,7 @@ const OpenSeminarDetailPage = async () => {
     {/* seminars */}
     <OpenSeminarDetailSeminars key={`${openSeminar.id}_seminars`} detailSeminars={results}/>
      {/* information */}
-     <OpenSeminarDetailInformation key={`${openSeminar.id}_information`} openSeminar={openSeminar}/>
+    <OpenSeminarDetailInformation key={`${openSeminar.id}_information`} information={markdown}/>
 
 
   </div>

diff --git a/src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx b/src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx
@@ -24,7 +24,7 @@ const OpenSeminarDetailBanner = ({ openSeminar }: { openSeminar: OpenSeminar })
   return (
     <div className="w-full mt-8 flex desktop:flex-row bigTablet:flex-row lg:flex-row tablet:flex-col md:flex-col flex-col gap-8">
       {/* 왼쪽 컨텐츠 */}
-      <div className="desktop:min-w-[544px] bigTablet:min-w-[544px] lg:min-w-[544px] tablet:w-full md:w-full w-full aspect-w-16 aspect-h-9">
+      <div className="desktop:min-w-[544px] bigTablet:min-w-[544px] lg:min-w-[544px] tablet:w-full w-full aspect-w-16 aspect-h-9">
       <motion.section
     initial={{ y: 20, opacity: 0 }}
     whileInView={{ y: 0, opacity: 1 }}
@@ -39,13 +39,15 @@ const OpenSeminarDetailBanner = ({ openSeminar }: { openSeminar: OpenSeminar })
           width={1600}
           height={900}
           quality={100}
+          priority
+          rel="preload"
         />
         </motion.section>
       </div>
     {/* 오른쪽 컨텐츠 */}
-    <div className="flex desktop:items-end bigTablet:items-end lg:items-end desktop:mt-0 bigTablet:mt-0 lg:mt-0 tablet:mt-8 md:mt-8 mt-8">
+    <div className="flex desktop:items-end bigTablet:items-end desktop:mt-0 bigTablet:mt-0 tablet:mt-8 mt-8">
     <div className="w-full flex flex-col gap-6 py-3 whitespace-nowrap">
-        <div className='desktop:flex bigTablet:flex lg:flex tablet:hidden md:hidden hidden'>
+        <div className='desktop:flex bigTablet:flex tablet:hidden hidden'>
     <Image
           src={TranslateImg.src}
           alt="translate_img"

diff --git a/src/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation.tsx b/src/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation.tsx
@@ -1,9 +1,9 @@
-'use client';
+'use client'
 
 import React from 'react';
-import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
 import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants';
 import { motion } from 'framer-motion';
+import ReactMarkdown from 'react-markdown';
 
 /**
  * @description
@@ -16,15 +16,15 @@ import { motion } from 'framer-motion';
  * Renders the header component for the recruitment section.
  * @returns The rendered header component.
  */
-const OpenSeminarDetailInformation = ({ openSeminar }: { openSeminar: OpenSeminar }) => {
+const OpenSeminarDetailInformation = ({ information }: { information:any }) => {
 
   return (
     <div className="w-full flex mt-10 pt-6 flex-col inline-flex min-h-fit relative"> 
     <p className="H4 px-2 pb-4">
       Information
     </p>
     <p className="mb-3 border border-solid text-mono_700 h-0"/>
-   <div className='text-[1rem] font-normal w-full mt-8 text-mono_white'>
+   <div className='text-[1rem] font-normal mt-8 text-mono_white'>
    <motion.section
           initial={{ y: 20, opacity: 0 }}
           whileInView={{ y: 0, opacity: 1 }}
@@ -34,6 +34,7 @@ const OpenSeminarDetailInformation = ({ openSeminar }: { openSeminar: OpenSemina
           style={{ transformOrigin: '10% 60%' }}
           className="w-full"
         >
+          <ReactMarkdown>{information?.data?.parent}</ReactMarkdown>
         </motion.section>
    </div>
   </div>