flareseek · jjh4450 · Sep 16, 2024 · Sep 15, 2024 · Sep 15, 2024 · Sep 15, 2024
diff --git a/index.html b/index.html
@@ -3,8 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
     <title>Blank</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,23 +1,25 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { Suspense } from "react";
 import Layout from "./components/Layout";
-import routerInfo from "./shared/routing/routerInfo.tsx";
-
-const RouterPath = routerInfo.map((info) => {
-  return {
-    path: info.path,
-    element: info.element,
-  };
-});
+import routerInfo from "./shared/routing/routerInfo";
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <Layout />,
-    children: RouterPath,
+    children: routerInfo.map(({ path, element: Element }) => ({
+      path,
+      element: (
+        <Suspense fallback={<div>Loading...</div>}>
+          <Element />
+        </Suspense>
+      ),
+    })),
   },
 ]);
 
 function App() {
   return <RouterProvider router={router} />;
 }
+
 export default App;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Link, matchPath, useLocation } from "react-router-dom";
-import routerInfo from "../../shared/routing/routerInfo.tsx";
+import routerInfo from "../../shared/routing/routerInfo";
 import Logo from "../../assets/logo.svg?react";
 import Menu from "../../assets/menu_buton.json";
 import {

diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,3 @@
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css");
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,5 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import "./index.css";
 
 import App from "./App";
 

diff --git a/src/shared/routing/routerInfo.tsx → src/shared/routing/routerInfo.ts b/src/shared/routing/routerInfo.tsx → src/shared/routing/routerInfo.ts
@@ -1,82 +1,73 @@
+import { lazy } from "react";
 import { routerInfoType } from "../types/routing.ts";
-import Main from "../../pages/Main";
-import Artist from "../../pages/Artist";
-import Booth from "../../pages/Booth";
-import BoothNFoodList from "../../pages/BoothNFoodList";
-import Foodtruck from "../../pages/Foodtruck";
-import Makers from "../../pages/Makers";
-import Map from "../../pages/Map";
-import Notice from "../../pages/Notice";
-import QnA from "../../pages/QnA";
-import Timetable from "../../pages/Timetable";
 
 export const routerInfo: routerInfoType[] = [
   {
     path: "/",
-    element: <Main />,
+    element: lazy(() => import("../../pages/Main")),
     english: "Main",
     korean: "메인",
     expose: true,
   },
   {
     path: "artist/:id",
-    element: <Artist />,
+    element: lazy(() => import("../../pages/Artist")),
     english: "Artist",
     korean: "아티스트",
     expose: false,
   },
   {
     path: "booth/:id",
-    element: <Booth />,
+    element: lazy(() => import("../../pages/Booth")),
     english: "Booth",
     korean: "부스",
     expose: false,
   },
   {
     path: "booth_foodtruck_list",
-    element: <BoothNFoodList />,
+    element: lazy(() => import("../../pages/BoothNFoodList")),
     english: "Booth & Foodtruck List",
     korean: "부스 & 푸드트럭 리스트",
     expose: true,
   },
   {
     path: "foodtruck/:id",
-    element: <Foodtruck />,
+    element: lazy(() => import("../../pages/Foodtruck")),
     english: "Foodtruck",
     korean: "푸드트럭",
     expose: false,
   },
   {
     path: "makers",
-    element: <Makers />,
+    element: lazy(() => import("../../pages/Makers")),
     english: "Makers",
     korean: "메이커스",
     expose: false,
   },
   {
     path: "map",
-    element: <Map />,
+    element: lazy(() => import("../../pages/Map")),
     english: "Map",
     korean: "지도",
     expose: true,
   },
   {
     path: "notice",
-    element: <Notice />,
+    element: lazy(() => import("../../pages/Notice")),
     english: "Notice",
     korean: "공지사항",
     expose: true,
   },
   {
     path: "QnA",
-    element: <QnA />,
+    element: lazy(() => import("../../pages/QnA")),
     english: "QnA",
     korean: "QnA",
     expose: true,
   },
   {
     path: "timetable",
-    element: <Timetable />,
+    element: lazy(() => import("../../pages/Timetable")),
     english: "Timetable",
     korean: "타임테이블",
     expose: true,

diff --git a/src/shared/styles/vars.css.ts b/src/shared/styles/vars.css.ts
@@ -1,10 +1,5 @@
 import { createGlobalTheme, fontFace } from "@vanilla-extract/css";
 
-const pretendardRegular = fontFace({
-  src: "url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff')",
-  fontWeight: 400,
-  fontStyle: "normal",
-});
 const pyeongChangBold = fontFace({
   src: "url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/PyeongChangPeace-Bold.woff2') format('woff2');",
   fontWeight: 700,
@@ -27,7 +22,7 @@ export const vars = createGlobalTheme("#root", {
     white: "#FFFFFF",
   },
   font: {
-    pretendardRegular,
+    pretendardRegular: "pretendard, sans-serif", // for debug: ,Courier New", // <-독특함
     pyeongChangBold,
     pyeongChangLight,
   },

diff --git a/src/shared/types/routing.ts b/src/shared/types/routing.ts
@@ -1,7 +1,9 @@
 // 라우팅 정보 객체 타입
+import React, { ComponentType } from "react";
+
 export interface routerInfoType {
   path: string;
-  element: React.ReactElement;
+  element: React.LazyExoticComponent<ComponentType<unknown>>;
   english: string;
   korean: string;
   expose: boolean;

diff --git a/vite.config.ts b/vite.config.ts
@@ -27,4 +27,22 @@ export default defineConfig({
         }),
     }),
   ],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: (id: string) => {
+          if (id.includes("node_modules")) {
+            const module: string = id.split("node_modules/").pop()!.split("/")[0];
+            if (module.includes("react")) {
+              return "react-vendor";
+            }
+            // if (module.includes("poo")) {
+            //   return "poo-vendor";
+            // }
+            return `vendor-${module}`;
+          }
+        },
+      },
+    },
+  },
 });