Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking โ€œSign up for GitHubโ€, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add/#83/service guide(swm 344) #84

Merged
merged 8 commits into from
Oct 13, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[SWM-344] Feat : ServiceGuideModal
  • Loading branch information
oikkoikk committed Oct 12, 2023
commit bc61e54fe78d67d3afd9fc751b4b7892e88cf5c7
22 changes: 16 additions & 6 deletions src/app/dashboard/page.tsx
Original file line number Diff line number Diff line change
@@ -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}
/>
Expand Down
144 changes: 92 additions & 52 deletions src/components/dashboard/header/DashboardHeader.tsx
Original file line number Diff line number Diff line change
@@ -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'>
Expand All @@ -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]} />
</>
);
}
}
6 changes: 4 additions & 2 deletions src/components/dashboard/header/GuideBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -19,6 +21,6 @@ export default function GuideBox({
</span>
</div>
<div>{children}</div>
</div>
</button>
);
}
30 changes: 30 additions & 0 deletions src/components/dashboard/header/ServiceGuideModal.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
11 changes: 6 additions & 5 deletions src/constants/modal/modal.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
export const ModalIDs = {
LECTURE_DETAIL: 'lecture_detail_modal',
LECTURE_ENROLLMENT: 'lecture_enrollment_modal',
LECTURE_REVIEW: 'lecture_review_modal',
SCHEDULING: 'scheduling_modal',
COURSE_DELETE: 'course_delete_modal',
SERVICE_GUIDE: 'service-guide-modal',
LECTURE_DETAIL: 'lecture-detail-modal',
LECTURE_ENROLLMENT: 'lecture-enrollment-modal',
LECTURE_REVIEW: 'lecture-review-modal',
SCHEDULING: 'scheduling-modal',
COURSE_DELETE: 'course-delete-modal',
} as const;

type ModalIDs = (typeof ModalIDs)[keyof typeof ModalIDs];
17 changes: 17 additions & 0 deletions src/constants/serviceGuides/serviceGuides.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export const SERVICE_GUIDE = [
{
id: 1,
type: 'SEARCH',
key: 'd655bb34f8b2448f9a00e1212f6fe39f'
},
{
id: 2,
type: 'SCHEDULING',
key: '4ad5a4933fb54f1eb10a73278b354acb'
},
{
id: 3,
type: 'MATERIALS',
key: '43871bb7c7ca4a69b9836728aa22efb6'
}
] as const;