kakao-tech-campus-2nd-step3 · Dobbymin · Nov 15, 2024 · Nov 15, 2024 · Nov 15, 2024 · Nov 15, 2024
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <link rel="preconnect" href="https://www.sinitto.life" />
+    <link rel="preconnect" href="https://sinitto.site" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       rel="apple-touch-icon"

diff --git a/package.json b/package.json
@@ -35,6 +35,8 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "7.24.7",
+    "@prerenderer/renderer-puppeteer": "^1.2.4",
+    "@prerenderer/rollup-plugin": "^0.3.12",
     "@testing-library/jest-dom": "6.4.8",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jest": "29.5.12",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/routes/components/index.ts b/src/app/routes/components/index.ts
@@ -1,2 +1 @@
 export * from './protected-route';
-export * from './lazy-loading';
diff --git a/src/app/routes/components/lazy-loading/LazyLoading.ts b/src/app/routes/components/lazy-loading/LazyLoading.ts
diff --git a/src/app/routes/components/lazy-loading/index.ts b/src/app/routes/components/lazy-loading/index.ts
diff --git a/src/app/routes/router.tsx b/src/app/routes/router.tsx
@@ -1,33 +1,126 @@
-import { Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import {
-  ProtectedRoute,
-  GuardMainPage,
-  RegisterPage,
-  GuardMyPage,
-  ServiceHistoryPage,
-  GuardReportPage,
-  SinittoReviewPage,
-  ServiceManualPage,
-  SeniorRegisterPage,
-  GuideLinePage,
-  HelloCallApplyPage,
-  SinittoMainPage,
-  SinittoMyPage,
-  HelloCallListPage,
-  HelloCallServicePage,
-  HelloCallReportPage,
-  CallBackListPage,
-  CallBackDetailPage,
-  SinittoGuideLinePage,
-  SinittoServiceHistoryPage,
-  HelloCallDetailPage,
-} from './components';
+import { ProtectedRoute } from './components';
 import { RouterPath } from './path';
 import { OnboardPage, RedirectPage, DummyRedirectPage } from '@/pages';
 import { Layout, LoadingView } from '@/shared/components';
 
+export const RegisterPage = lazy(
+  () => import('@/pages/common/register/ui/RegisterPage')
+);
+export const GuardMainPage = lazy(() =>
+  import('@/pages/guard/guard-main/ui/GuardMainPage').then((module) => ({
+    default: module.GuardMainPage,
+  }))
+);
+
+export const ServiceHistoryPage = lazy(() =>
+  import('@/pages/guard/service-history/ui/ServiceHistoryPage').then(
+    (module) => ({
+      default: module.ServiceHistoryPage,
+    })
+  )
+);
+
+export const GuardMyPage = lazy(() =>
+  import('@/pages/guard/mypage/ui/GuardMyPage').then((module) => ({
+    default: module.GuardMyPage,
+  }))
+);
+
+export const GuardReportPage = lazy(
+  () => import('@/pages/guard/hello-call-report/ui/GuardReportPage')
+);
+
+export const SinittoReviewPage = lazy(() =>
+  import('@/pages/guard/review/ui/SinittoReviewPage').then((module) => ({
+    default: module.SinittoReviewPage,
+  }))
+);
+
+export const ServiceManualPage = lazy(
+  () => import('@/pages/common/service-manual/ui/ServiceManualPage')
+);
+
+export const SeniorRegisterPage = lazy(
+  () => import('@/pages/guard/register/ui/SeniorRegisterPage')
+);
+
+export const GuideLinePage = lazy(() =>
+  import('@/pages/guard/guide-line/ui/GuideLinePage').then((module) => ({
+    default: module.GuideLinePage,
+  }))
+);
+
+export const HelloCallApplyPage = lazy(() =>
+  import('@/pages/guard/hello-call-apply/ui/HelloCallApplyPage').then(
+    (module) => ({
+      default: module.HelloCallApplyPage,
+    })
+  )
+);
+
+export const SinittoMainPage = lazy(() =>
+  import('@/pages/sinitto/sinitto-main/ui/SinittoMainPage').then((module) => ({
+    default: module.SinittoMainPage,
+  }))
+);
+
+export const SinittoMyPage = lazy(() =>
+  import('@/pages/sinitto/mypage/ui/SinittoMyPage').then((module) => ({
+    default: module.SinittoMyPage,
+  }))
+);
+
+export const HelloCallListPage = lazy(
+  () => import('@/pages/sinitto/hello-call-list/ui/HelloCallListPage')
+);
+
+export const HelloCallServicePage = lazy(
+  () => import('@/pages/sinitto/hello-call-service/ui/HelloCallServicePage')
+);
+
+export const HelloCallReportPage = lazy(
+  () => import('@/pages/sinitto/hello-call-report/ui/HelloCallReportPage')
+);
+
+export const CallBackListPage = lazy(
+  () => import('@/pages/sinitto/call-back/list/ui/CallBackListPage')
+);
+
+export const CallBackDetailPage = lazy(() =>
+  import('@/pages/sinitto/call-back/detail/ui/CallBackDetailPage').then(
+    (module) => ({
+      default: module.CallBackDetailPage,
+    })
+  )
+);
+
+export const SinittoGuideLinePage = lazy(() =>
+  import('@/pages/sinitto/guide-line/ui/SinittoGuideLinePage').then(
+    (module) => ({
+      default: module.SinittoGuideLinePage,
+    })
+  )
+);
+
+export const SinittoServiceHistoryPage = lazy(() =>
+  import('@/pages/sinitto/service-history/ui/SinittoServiceHistoryPage').then(
+    (module) => ({
+      default: module.SinittoServiceHistoryPage,
+    })
+  )
+);
+
+export const HelloCallDetailPage = lazy(() =>
+  import('@/pages/sinitto/hello-call-detail/ui/HelloCallDetailPage').then(
+    (module) => ({
+      default: module.HelloCallDetailPage,
+    })
+  )
+);
+
 export const router = createBrowserRouter([
   {
     path: RouterPath.ROOT,

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+
+declare namespace React {
+  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+    fetchPriority?: 'high' | 'low' | 'auto';
+  }
+}
diff --git a/src/pages/assets/shared/hello-call.png b/src/pages/assets/shared/hello-call.png
diff --git a/src/pages/assets/shared/hello-call.webp b/src/pages/assets/shared/hello-call.webp
diff --git a/src/pages/guard/guard-main/components/hello-call-apply/HelloCallApply.tsx b/src/pages/guard/guard-main/components/hello-call-apply/HelloCallApply.tsx
@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 
 import { RouterPath } from '@/app/routes';
 import { IconArrow } from '@/pages/assets';
-import HelloCallImg from '@/pages/assets/shared/hello-call.png';
+import HelloCallImg from '@/pages/assets/shared/hello-call.webp';
 import { Button, Flex, Image, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

diff --git a/src/pages/guard/hello-call-apply/components/service-total/ServiceTotal.tsx b/src/pages/guard/hello-call-apply/components/service-total/ServiceTotal.tsx
@@ -26,7 +26,7 @@ export const ServiceTotal = ({
     <ContentsBox>
       <TitleText>서비스 총 이용 횟수</TitleText>
       <Flex alignItems='center' justifyContent='center' gap={2} mb={3}>
-        <Text as='b'>매주</Text>
+        <Text as='b'>매 회차</Text>
         <HighlightText>{serviceTime}분</HighlightText>
         <Text as='b' mx='0.5'>
           씩

diff --git a/src/pages/sinitto/hello-call-list/ui/HelloCallListPage.tsx b/src/pages/sinitto/hello-call-list/ui/HelloCallListPage.tsx
@@ -1,14 +1,19 @@
-import { CallRequest } from '../components';
+import { lazy } from 'react';
+
 import {
   useInfiniteScroll,
   useErrorHandling,
   useNavigateToDetail,
   useGetServiceList,
 } from '../hooks';
 import { LoadingView } from '@/shared/components';
-import { Flex, Text } from '@chakra-ui/react';
+import { Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
+const CallRequest = lazy(
+  () => import('../components/call-request/CallRequest')
+);
+
 const HelloCallListPage = () => {
   const { data, isError, isLoading, hasNextPage, fetchNextPage, error } =
     useGetServiceList(10);
@@ -29,9 +34,6 @@ const HelloCallListPage = () => {
 
   return (
     <HelloCallListLayout>
-      <Flex w='100%' justifyContent='end'>
-        <Text>새로고침</Text>
-      </Flex>
       {allContent.map((item, index) => {
         const isLastElement = index === allContent.length - 1;
         return (
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from './protected-route';
		export * from './lazy-loading';