Add/#83/service guide(swm 344)

package.json

@@ -24,11 +24,13 @@
     "framer-motion": "^10.12.18",
     "next": "13.4.7",
     "next-auth": "^4.22.1",
+    "notion-client": "^6.16.0",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-loading-skeleton": "^3.3.1",
+    "react-notion-x": "^6.16.0",
     "react-simplemde-editor": "^5.2.0",
     "react-youtube": "^10.1.0",
     "sharp": "^0.32.6",

src/app/@modal/(.)search/[lecture_code]/error.tsx

@@ -4,7 +4,7 @@ import useAuth from '@/src/hooks/useAuth';
 import setErrorToast from '@/src/util/toast/setErrorToast';
 import { useRouter } from 'next/navigation';
 
-export default async function ErrorHandler({
+export default function ErrorHandler({
   error,
   reset
 }: {
@@ -19,7 +19,7 @@ export default async function ErrorHandler({
       router.back();
     } else if (error.cause === SESSION_ERROR) {
       setErrorToast(error);
-      await logout();
+      logout();
     } else {
       setErrorToast(new Error(ErrorMessage.DEFAULT));
     }

src/app/dashboard/error.tsx

@@ -8,7 +8,7 @@ import useAuth from '@/src/hooks/useAuth';
 import setErrorToast from '@/src/util/toast/setErrorToast';
 import { useRouter } from 'next/navigation';
 
-export default async function ErrorHandler({
+export default function ErrorHandler({
   error,
   reset
 }: {
@@ -22,7 +22,7 @@ export default async function ErrorHandler({
     setErrorToast(error);
   } else if (error.cause === SESSION_ERROR) {
     setErrorToast(error);
-    await logout();
+    logout();
   } else {
     setErrorToast(new Error(ErrorMessage.DEFAULT));
   }

src/app/dashboard/page.tsx

@@ -1,24 +1,34 @@
 import { fetchDashboardInfo } from '@/src/api/dashboards/dashboards';
 import DashboardHeader from '@/src/components/dashboard/header/DashboardHeader';
+import ServiceGuideModal from '@/src/components/dashboard/header/ServiceGuideModal';
 import LatestLearningCoursesList from '@/src/components/dashboard/latestLearning/LatestLearningCoursesList';
 import MainDashboard from '@/src/components/dashboard/main/MainDashboard';
 import LectureRecommendationsList from '@/src/components/recommendations/LectureRecommendationsList';
+import { SERVICE_GUIDE } from '@/src/constants/serviceGuides/serviceGuides';
+import { NotionAPI } from 'notion-client';
+import { ExtendedRecordMap } from 'notion-types';
 
 export const metadata = {
-  title: '대시보드',
+  title: '대시보드'
 };
 
 export default async function Dashboard() {
+  const notion = new NotionAPI();
+  const recordMapList: ExtendedRecordMap[] = await Promise.all(
+    SERVICE_GUIDE.map((service) => notion.getPage(service.key))
+  );
   const dashboardInfo = await fetchDashboardInfo();
-
   const latestLearningCourses = dashboardInfo.latest_lectures;
-  const isEnrolled = latestLearningCourses.length > 0;
+  const isExistingUser = latestLearningCourses.length > 0;
 
   return (
-    <div>
-      <DashboardHeader isEnrolled={isEnrolled} />
+    <div className='w-full'>
+      <DashboardHeader
+        isExistingUser={isExistingUser}
+        recordMapList={recordMapList}
+      />
       <MainDashboard dashboardInfo={dashboardInfo} />
-      {isEnrolled && (
+      {isExistingUser && (
         <LatestLearningCoursesList
           latestLearningCourses={latestLearningCourses}
         />

src/app/error.tsx

@@ -8,7 +8,7 @@ import {
 } from '../api/ErrorMessage';
 import useAuth from '../hooks/useAuth';
 
-export default async function ErrorHandler({
+export default function ErrorHandler({
   error,
   reset
 }: {
@@ -23,7 +23,7 @@ export default async function ErrorHandler({
     router.back();
   } else if (error.cause === SESSION_ERROR) {
     setErrorToast(error);
-    await logout();
+    logout();
   } else {
     setErrorToast(new Error(ErrorMessage.DEFAULT));
   }

src/app/layout.tsx

@@ -14,6 +14,7 @@ import NaverAnalytics from '../components/tools/NaverAnalytics/NaverAnalytics';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata = {
+  metadataBase: new URL('https://sroom.kr'),
   title: {
     template: '%s | 스룸',
     default: '스룸'
@@ -23,10 +24,8 @@ export const metadata = {
     title: '스룸',
     description: '나만을 위한 유튜브 강의 관리 플랫폼 스룸',
     type: 'website',
-    locale: 'ko_KR',
-    url: 'https://sroom.kr',
     images: {
-      url: 'https://sroom.kr/image/opengraph/opengraph-image.jpg',
+      url: '/image/opengraph/opengraph-image.jpg',
       width: 1200,
       height: 630,
       alt: '나만을 위한 유튜브 강의 관리 플랫폼, 스룸'

src/app/search/[lecture_code]/error.tsx

@@ -8,7 +8,7 @@ import useAuth from '@/src/hooks/useAuth';
 import setErrorToast from '@/src/util/toast/setErrorToast';
 import { useRouter } from 'next/navigation';
 
-export default async function ErrorHandler({
+export default function ErrorHandler({
   error,
   reset
 }: {
@@ -24,7 +24,7 @@ export default async function ErrorHandler({
     router.refresh();
   } else if (error.cause === SESSION_ERROR) {
     setErrorToast(error);
-    await logout();
+    logout();
   } else {
     setErrorToast(new Error(ErrorMessage.DEFAULT));
   }

src/components/course/drawer/courseMaterial/CourseMaterialContent.tsx

@@ -44,7 +44,7 @@ export default function CourseMaterialContent({
     }
   );
   return (
-    <div className='w-full h-full max-h-full px-3 overflow-y-scroll'>
+    <div className='h-full max-w-full max-h-full min-w-full px-3 overflow-y-scroll'>
       <div className='sticky top-0 z-10'>
         <CourseMaterialTopNav
           activeTab={activeTab}

src/components/course/drawer/courseMaterial/lectureNotes/CourseMaterialLectureNotes.tsx

@@ -120,7 +120,7 @@ export default function CourseMaterialLectureNotes({
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
-        className={`w-full my-10 flex flex-col justify-center items-center gap-10 overflow-x-scroll`}
+        className={`min-w-full max-w-full my-10 flex flex-col justify-center items-center gap-10 overflow-x-scroll`}
       >
         <div>
           {isEditMode ? (

src/components/course/drawer/courseMaterial/quizzes/CourseMaterialQuizzes.tsx

@@ -113,7 +113,7 @@ export default function CourseMaterialQuizzes({
   return (
     <AnimatePresence>
       <div
-        className={`w-full my-10 flex flex-col justify-center items-between gap-10`}
+        className={`min-w-full max-w-full my-10 flex flex-col justify-center items-between gap-10`}
       >
         {quizzes?.map((quiz, idx) => {
           const selectedAnswer = selectedAnswerList.find(

src/components/dashboard/header/DashboardHeader.tsx

@@ -1,12 +1,30 @@
+'use client';
 import Image from 'next/image';
 import GuideBox from './GuideBox';
+import { showModalHandler } from '@/src/util/modal/modalHandler';
+import ServiceGuideModal from './ServiceGuideModal';
+import { ExtendedRecordMap } from 'notion-types';
+import { useState } from 'react';
+import { SERVICE_GUIDE } from '@/src/constants/serviceGuides/serviceGuides';
 
 type Props = {
-  isEnrolled: boolean;
+  isExistingUser: boolean;
+  recordMapList: ExtendedRecordMap[];
 };
 
-export default function DashboardHeader({ isEnrolled }: Props) {
-  if (isEnrolled) {
+export default function DashboardHeader({
+  isExistingUser,
+  recordMapList
+}: Props) {
+  const [selectedGuide, setSelectedGuide] = useState<number>(0);
+
+  const boxClickHandler = (service: (typeof SERVICE_GUIDE)[number]['type']) => {
+    const idx = SERVICE_GUIDE.findIndex((guide) => guide.type === service);
+    setSelectedGuide(() => idx);
+    showModalHandler('SERVICE_GUIDE');
+  };
+
+  if (isExistingUser) {
     return (
       <section className='px-4 mx-auto lg:px-24 pt-14 text-sroom-black-400 max-w-screen-2xl'>
         <h2 className='text-2xl font-bold md:text-3xl lg:text-4xl md:mb-2 lg:mb-3'>
@@ -19,58 +37,80 @@ export default function DashboardHeader({ isEnrolled }: Props) {
     );
   } else {
     return (
-      <div className='bg-sroom-gray-200 h-[23rem] lg:h-[36rem] text-sroom-black-400'>
-        <section className='flex flex-col justify-between h-full px-4 pt-12 mx-auto lg:px-24 lg:pt-20 max-w-screen-2xl'>
-          <div className='flex flex-col items-center'>
-            <h2 className='mb-5 text-3xl font-bold md:text-4xl lg:text-5xl'>반가워요!</h2>
-            <h3 className='flex flex-col items-center text-base font-normal md:text-lg text-sroom-black-200'>
-              <p>유튜브에 저장만 해놨던 강의, 듣다가 중간에 포기해버린 강의</p>
-              <p>이젠 스룸과 함께 체계적으로 학습을 시작해 보세요!</p>
-            </h3>
-          </div>
-          <div className='flex items-end justify-between w-full gap-7'>
-            <GuideBox title='스마트한' description='유튜브 강의 검색･추천'>
-              <div className='absolute bottom-4 right-4 lg:bottom-7 lg:right-7 w-[47%]'>
-                <div className='pb-[38.88%] relative object-cover'>
-                  <Image
-                    className='transition-all lg:opacity-0 group-hover:opacity-100 group-hover:-translate-y-2'
-                    src={'/image/dashboard/search.webp'}
-                    alt='검색창'
-                    fill={true}
-                    quality={100}
-                  />
+      <>
+        <div className='bg-sroom-gray-200 h-[23rem] lg:h-[36rem] text-sroom-black-400'>
+          <section className='flex flex-col justify-between h-full px-4 pt-12 mx-auto lg:px-24 lg:pt-20 max-w-screen-2xl'>
+            <div className='flex flex-col items-center'>
+              <h2 className='mb-3 text-3xl font-bold md:mb-5 lg:mb-10 md:text-4xl lg:text-5xl'>
+                반가워요!
+              </h2>
+              <h3 className='flex flex-col items-center text-base font-normal md:text-lg text-sroom-black-200'>
+                <p>
+                  유튜브에 저장만 해놨던 강의, 듣다가 중간에 포기해버린 강의
+                </p>
+                <p>이젠 스룸과 함께 체계적으로 학습을 시작해 보세요!</p>
+                <p className='mt-3 text-xs md:mt-4 lg:mt-7 md:text-sm text-sroom-black-100'>
+                  아래 섹션을 클릭하면 스룸의 서비스 이용 가이드를 볼 수 있어요
+                </p>
+              </h3>
+            </div>
+            <div className='flex items-end justify-between w-full gap-7'>
+              <GuideBox
+                title='스마트한'
+                description='유튜브 강의 검색･추천'
+                onClick={() => boxClickHandler('SEARCH')}
+              >
+                <div className='absolute bottom-4 right-4 lg:bottom-7 lg:right-7 w-[47%]'>
+                  <div className='pb-[38.88%] relative object-cover'>
+                    <Image
+                      className='transition-all lg:opacity-0 group-hover:opacity-100 group-hover:-translate-y-2'
+                      src={'/image/dashboard/search.webp'}
+                      alt='검색창'
+                      fill={true}
+                      quality={100}
+                    />
+                  </div>
                 </div>
-              </div>
-            </GuideBox>
-            <GuideBox title='체계적인' description='학습 일정 관리'>
-              <div className='absolute bottom-4 right-4 lg:bottom-7 lg:right-7 w-[43%]'>
-                <div className='pb-[56.62%] relative object-cover'>
-                  <Image
-                    className='transition-all lg:opacity-0 group-hover:opacity-100 group-hover:-translate-y-2'
-                    src={'/image/dashboard/calendar.webp'}
-                    alt='달력'
-                    fill={true}
-                    quality={100}
-                  />
+              </GuideBox>
+              <GuideBox
+                title='체계적인'
+                description='학습 일정 관리'
+                onClick={() => boxClickHandler('SCHEDULING')}
+              >
+                <div className='absolute bottom-4 right-4 lg:bottom-7 lg:right-7 w-[43%]'>
+                  <div className='pb-[56.62%] relative object-cover'>
+                    <Image
+                      className='transition-all lg:opacity-0 group-hover:opacity-100 group-hover:-translate-y-2'
+                      src={'/image/dashboard/calendar.webp'}
+                      alt='달력'
+                      fill={true}
+                      quality={100}
+                    />
+                  </div>
                 </div>
-              </div>
-            </GuideBox>
-            <GuideBox title='쪽집게 AI가 생성한' description='퀴즈･요약본'>
-              <div className='absolute bottom-4 right-4 lg:bottom-7 lg:right-7 w-[42%]'>
-                <div className='pb-[46.30%] relative object-cover'>
-                  <Image
-                    className='transition-all lg:opacity-0 group-hover:opacity-100 group-hover:-translate-y-2'
-                    src={'/image/dashboard/quiz.webp'}
-                    alt='퀴즈'
-                    fill={true}
-                    quality={100}
-                  />
+              </GuideBox>
+              <GuideBox
+                title='쪽집게 AI가 생성한'
+                description='퀴즈･요약본'
+                onClick={() => boxClickHandler('MATERIALS')}
+              >
+                <div className='absolute bottom-4 right-4 lg:bottom-7 lg:right-7 w-[42%]'>
+                  <div className='pb-[46.30%] relative object-cover'>
+                    <Image
+                      className='transition-all lg:opacity-0 group-hover:opacity-100 group-hover:-translate-y-2'
+                      src={'/image/dashboard/quiz.webp'}
+                      alt='퀴즈'
+                      fill={true}
+                      quality={100}
+                    />
+                  </div>
                 </div>
-              </div>
-            </GuideBox>
-          </div>
-        </section>
-      </div>
+              </GuideBox>
+            </div>
+          </section>
+        </div>
+        <ServiceGuideModal recordMap={recordMapList[selectedGuide]} />
+      </>
     );
   }
 }

src/components/dashboard/header/GuideBox.tsx

@@ -3,14 +3,16 @@ import ArrowRightSVG from '@/public/icon/ArrowRight';
 export default function GuideBox({
   title,
   description,
+  onClick,
   children
 }: {
   title: string;
   description: string;
+  onClick?: () => void;
   children?: React.ReactNode;
 }) {
   return (
-    <div className='relative flex-1 h-[9.5rem] lg:h-40 hover:cursor-pointer lg:hover:h-[17rem] p-4 lg:p-7 transition-all bg-white hover:bg-gradient-to-b from-[#222222] to-sroom-black-300 hover:text-white shadow-[0_-2px_5px_1px_rgba(173,173,173,0.3)] text-sroom-black-400 group'>
+    <button type='button' onClick={onClick} className='flex flex-col relative flex-1 h-[9.5rem] lg:h-40 hover:cursor-pointer lg:hover:h-[17rem] p-4 lg:p-7 transition-all bg-white hover:bg-gradient-to-b from-[#222222] to-sroom-black-300 hover:text-white shadow-[0_-2px_5px_1px_rgba(173,173,173,0.3)] text-sroom-black-400 group'>
       <p className='mb-1 text-xs font-normal lg:text-lg'>{title}</p>
       <div className='flex items-center gap-2'>
         <p className='text-base font-bold lg:text-2xl'>{description}</p>
@@ -19,6 +21,6 @@ export default function GuideBox({
         </span>
       </div>
       <div>{children}</div>
-    </div>
+    </button>
   );
 }

src/components/dashboard/header/ServiceGuideModal.tsx

@@ -0,0 +1,30 @@
+'use client';
+import { NotionRenderer } from 'react-notion-x';
+import 'react-notion-x/src/styles.css';
+import Modal from '../../ui/Modal';
+import { ModalIDs } from '@/src/constants/modal/modal';
+import { closeModalHandler } from '@/src/util/modal/modalHandler';
+import { ExtendedRecordMap } from 'notion-types';
+
+type Props = {
+  recordMap: ExtendedRecordMap;
+};
+
+export default function ServiceGuideModal({ recordMap }: Props) {
+  return (
+    <Modal
+      id={ModalIDs.SERVICE_GUIDE}
+      className='min-w-[60vw]'
+      onClose={() => closeModalHandler('SERVICE_GUIDE', () => {})}
+    >
+        <NotionRenderer
+          className='w-full'
+          recordMap={recordMap}
+          fullPage={true}
+          darkMode={false}
+          disableHeader
+          isImageZoomable={false}
+        />
+    </Modal>
+  );
+}