refactor: apply lazy loading in RecruitPage

sopt-makers · Sep 17, 2023 · 12025e1 · 12025e1
1 parent 887d1f9
commit 12025e1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/views/RecruitPage/RecruitPage.tsx b/src/views/RecruitPage/RecruitPage.tsx
@@ -1,14 +1,16 @@
 import styled from '@emotion/styled';
+import { lazy } from 'react';
 import PageLayout from '@src/components/common/PageLayout';
-import { ActivityReview } from './components/ActivityReview/ActivityReview';
-import BottomLogo from './components/BottomLogo';
 import ChapterInfo from './components/ChapterInfo';
-import Contact from './components/Contact';
-import FaqInfo from './components/FAQ';
 import NotificationSection from './components/NotificationSection';
 import RecruiteeInfo from './components/RecruteeInfo';
 import Schedule from './components/Schedule';
 
+const FaqInfo = lazy(() => import('./components/FAQ'));
+const Contact = lazy(() => import('./components/Contact'));
+const ActivityReview = lazy(() => import('./components/ActivityReview'));
+const BottomLogo = lazy(() => import('./components/BottomLogo'));
+
 function Recruit() {
   return (
     <PageLayout moreStyle={{ backgroundColor: '#16161c' }} showScrollTopButton>

diff --git a/...ponents/ActivityReview/ActivityReview.tsx → ...tPage/components/ActivityReview/index.tsx b/...ponents/ActivityReview/ActivityReview.tsx → ...tPage/components/ActivityReview/index.tsx
@@ -1,8 +1,8 @@
-import Link from 'next/link';
 import { ReactComponent as ArrowLeft } from '@src/assets/icons/arrow_left_28x28.svg';
 import { ReactComponent as ArrowRight } from '@src/assets/icons/arrow_right_28x28.svg';
 import arrowRightWhite from '@src/assets/icons/arrow_right_white.svg';
 import { useHorizontalScroll } from '@src/hooks/useHorizontalScroll';
+import Link from 'next/link';
 import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles';
 import useFetch from './hooks/useFetch';
 import {
@@ -20,7 +20,7 @@ import {
 } from './styles';
 import { parsePartToKorean } from './utils/parsePartToKorean';
 
-export function ActivityReview() {
+export default function ActivityReview() {
   const reviews = useFetch();
   const {
     scrollableRef,