From fa1c1cd4a86ef037efa479500614b82379bba5c7 Mon Sep 17 00:00:00 2001 From: jjh4450 Date: Mon, 16 Sep 2024 00:29:10 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat(routing/app):=20lazy=20import=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EB=B0=8F=20=EA=B2=BD=EA=B3=A0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20Fast=20refresh=20only=20works=20when=20a=20file=20o?= =?UTF-8?q?nly=20exports=20components.=20Use=20a=20new=20file=20to=20share?= =?UTF-8?q?=20constants=20or=20functions=20between=20components=20?= =?UTF-8?q?=EA=B2=BD=EA=B3=A0=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 68 +++++--------------------- src/shared/routing/RouterInfo.ts | 84 ++++++++++++++++++++++++++++++++ 2 files changed, 96 insertions(+), 56 deletions(-) create mode 100644 src/shared/routing/RouterInfo.ts diff --git a/src/App.tsx b/src/App.tsx index 9d9b1dd..29a4a4e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,64 +1,20 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import { Suspense } from 'react'; +import Layout from "./components/Layout"; +import RouterInfo from "./shared/routing/RouterInfo"; -import Layout from "./components/Layout/index.tsx"; -import Main from "./pages/Main/index.tsx"; -import Artist from "./pages/Artist/index.tsx"; -import Booth from "./pages/Booth/index.tsx"; -import BoothNFoodList from "./pages/BoothNFoodList/index.tsx"; -import Foodtruck from "./pages/Foodtruck/index.tsx"; -import Makers from "./pages/Makers/index.tsx"; -import Map from "./pages/Map/index.tsx"; -import Notice from "./pages/Notice/index.tsx"; -import QnA from "./pages/QnA/index.tsx"; -import Timetable from "./pages/Timetable/index.tsx"; - -const RouterPath = [ - { - path: "", - element:
, - }, - { - path: "artist/:id", - element: , - }, - { - path: "booth/:id", - element: , - }, - { - path: "booth_foodtruck_list", - element: , - }, - { - path: "foodtruck/:id", - element: , - }, - { - path: "makers", - element: , - }, - { - path: "map", - element: , - }, - { - path: "notice", - element: , - }, - { - path: "QnA", - element: , - }, - { - path: "timetable", - element: , - }, -]; const router = createBrowserRouter([ { path: "/", element: , - children: RouterPath, + children: RouterInfo.map(({ path, element: Element }) => ({ + path, + element: ( + Loading...}> + + + ), + })), }, ]); @@ -66,4 +22,4 @@ function App() { return ; } -export default App; +export default App; \ No newline at end of file diff --git a/src/shared/routing/RouterInfo.ts b/src/shared/routing/RouterInfo.ts new file mode 100644 index 0000000..9ac0c8c --- /dev/null +++ b/src/shared/routing/RouterInfo.ts @@ -0,0 +1,84 @@ +import React, { ComponentType, lazy } from 'react'; + +export interface RouterInfoType { + path: string; + element: React.LazyExoticComponent>; + english: string; + korean: string; + expose: boolean; +} + +export const RouterInfo: RouterInfoType[] = [ + { + path: "/", + element: lazy(() => import("../../pages/Main")), + english: "Main", + korean: "메인", + expose: true, + }, + { + path: "artist/:id", + element: lazy(() => import("../../pages/Artist")), + english: "Artist", + korean: "아티스트", + expose: false, + }, + { + path: "booth/:id", + element: lazy(() => import("../../pages/Booth")), + english: "Booth", + korean: "부스", + expose: false, + }, + { + path: "booth_foodtruck_list", + element: lazy(() => import("../../pages/BoothNFoodList")), + english: "Booth & Foodtruck List", + korean: "부스 & 푸드트럭 리스트", + expose: true, + }, + { + path: "foodtruck/:id", + element: lazy(() => import("../../pages/Foodtruck")), + english: "Foodtruck", + korean: "푸드트럭", + expose: false, + }, + { + path: "makers", + element: lazy(() => import("../../pages/Makers")), + english: "Makers", + korean: "메이커스", + expose: false, + }, + { + path: "map", + element: lazy(() => import("../../pages/Map")), + english: "Map", + korean: "지도", + expose: true, + }, + { + path: "notice", + element: lazy(() => import("../../pages/Notice")), + english: "Notice", + korean: "공지사항", + expose: true, + }, + { + path: "QnA", + element: lazy(() => import("../../pages/QnA")), + english: "QnA", + korean: "QnA", + expose: true, + }, + { + path: "timetable", + element: lazy(() => import("../../pages/Timetable")), + english: "Timetable", + korean: "타임테이블", + expose: true, + }, +]; + +export default RouterInfo; \ No newline at end of file From cc18fff4e4a37f849b3713344bbb4d3481598fe4 Mon Sep 17 00:00:00 2001 From: jjh4450 Date: Mon, 16 Sep 2024 00:44:30 +0900 Subject: [PATCH 2/8] fix --- src/App.tsx | 2 +- src/shared/routing/RouterInfo.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 581ef3b..ea9f2a9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; -import { Suspense } from 'react'; +import { Suspense } from "react"; import Layout from "./components/Layout"; import RouterInfo from "./shared/routing/RouterInfo"; diff --git a/src/shared/routing/RouterInfo.ts b/src/shared/routing/RouterInfo.ts index 9ac0c8c..7bfa3ac 100644 --- a/src/shared/routing/RouterInfo.ts +++ b/src/shared/routing/RouterInfo.ts @@ -1,4 +1,4 @@ -import React, { ComponentType, lazy } from 'react'; +import React, { ComponentType, lazy } from "react"; export interface RouterInfoType { path: string; @@ -81,4 +81,4 @@ export const RouterInfo: RouterInfoType[] = [ }, ]; -export default RouterInfo; \ No newline at end of file +export default RouterInfo; From 5f040fc8215ddffa94afa7066fd28252704a025a Mon Sep 17 00:00:00 2001 From: jjh4450 Date: Mon, 16 Sep 2024 11:16:35 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat(routing):=20=EB=9D=BC=EC=9A=B0?= =?UTF-8?q?=ED=84=B0=EB=A5=BC=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20laz?= =?UTF-8?q?y=20import=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 22 ++--- src/components/Header/index.tsx | 2 +- .../routing/{RouterInfo.ts => routerInfo.ts} | 15 +--- src/shared/routing/routerInfo.tsx | 86 ------------------- src/shared/types/routing.ts | 4 +- 5 files changed, 20 insertions(+), 109 deletions(-) rename src/shared/routing/{RouterInfo.ts => routerInfo.ts} (84%) delete mode 100644 src/shared/routing/routerInfo.tsx diff --git a/src/App.tsx b/src/App.tsx index bb91b7f..dfbdfa6 100644 --- 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: , - children: RouterPath, + children: routerInfo.map(({ path, element: Element }) => ({ + path, + element: ( + Loading...}> + + + ), + })), }, ]); function App() { return ; } -export default App; + +export default App; \ No newline at end of file diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 9ca1da3..b215d32 100644 --- 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/shared/routing/RouterInfo.ts b/src/shared/routing/routerInfo.ts similarity index 84% rename from src/shared/routing/RouterInfo.ts rename to src/shared/routing/routerInfo.ts index 7bfa3ac..c02ab10 100644 --- a/src/shared/routing/RouterInfo.ts +++ b/src/shared/routing/routerInfo.ts @@ -1,14 +1,7 @@ -import React, { ComponentType, lazy } from "react"; +import { lazy } from "react"; +import { routerInfoType } from "../types/routing.ts"; -export interface RouterInfoType { - path: string; - element: React.LazyExoticComponent>; - english: string; - korean: string; - expose: boolean; -} - -export const RouterInfo: RouterInfoType[] = [ +export const routerInfo: routerInfoType[] = [ { path: "/", element: lazy(() => import("../../pages/Main")), @@ -81,4 +74,4 @@ export const RouterInfo: RouterInfoType[] = [ }, ]; -export default RouterInfo; +export default routerInfo; diff --git a/src/shared/routing/routerInfo.tsx b/src/shared/routing/routerInfo.tsx deleted file mode 100644 index d5c5516..0000000 --- a/src/shared/routing/routerInfo.tsx +++ /dev/null @@ -1,86 +0,0 @@ -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:
, - english: "Main", - korean: "메인", - expose: true, - }, - { - path: "artist/:id", - element: , - english: "Artist", - korean: "아티스트", - expose: false, - }, - { - path: "booth/:id", - element: , - english: "Booth", - korean: "부스", - expose: false, - }, - { - path: "booth_foodtruck_list", - element: , - english: "Booth & Foodtruck List", - korean: "부스 & 푸드트럭 리스트", - expose: true, - }, - { - path: "foodtruck/:id", - element: , - english: "Foodtruck", - korean: "푸드트럭", - expose: false, - }, - { - path: "makers", - element: , - english: "Makers", - korean: "메이커스", - expose: false, - }, - { - path: "map", - element: , - english: "Map", - korean: "지도", - expose: true, - }, - { - path: "notice", - element: , - english: "Notice", - korean: "공지사항", - expose: true, - }, - { - path: "QnA", - element: , - english: "QnA", - korean: "QnA", - expose: true, - }, - { - path: "timetable", - element: , - english: "Timetable", - korean: "타임테이블", - expose: true, - }, -]; - -export default routerInfo; diff --git a/src/shared/types/routing.ts b/src/shared/types/routing.ts index 7392783..56a8f7b 100644 --- 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>; english: string; korean: string; expose: boolean; From 97027457f8284989b42279f730a07e329ef3e0b1 Mon Sep 17 00:00:00 2001 From: jjh4450 Date: Mon, 16 Sep 2024 11:57:49 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat(routing):=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EB=B2=88=EB=93=A4=20=EB=AA=A8?= =?UTF-8?q?=EB=93=88=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite.config.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/vite.config.ts b/vite.config.ts index fcff5b3..95f0cc4 100644 --- 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}`; + } + }, + }, + }, + }, }); From 819aea9125d91c16212e6534b76c0c7601a851b1 Mon Sep 17 00:00:00 2001 From: jjh4450 Date: Mon, 16 Sep 2024 12:42:22 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat(font):=20font=20import=20=EC=B5=9C?= =?UTF-8?q?=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.css | 2 ++ src/main.tsx | 1 + src/shared/styles/vars.css.ts | 7 +------ 3 files changed, 4 insertions(+), 6 deletions(-) create mode 100644 src/index.css diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..59abeee --- /dev/null +++ b/src/index.css @@ -0,0 +1,2 @@ +@import url('https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css'); +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 779bbaf..b6b6f57 100644 --- 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/styles/vars.css.ts b/src/shared/styles/vars.css.ts index a9d0d96..67b342d 100644 --- 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/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff')", - fontWeight: 400, - fontStyle: "normal", -}); const pyeongChangBold = fontFace({ src: "url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/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, }, From 874601fc3ba4f9dd53864e3a297d9ec95f00c438 Mon Sep 17 00:00:00 2001 From: jjh4450 Date: Mon, 16 Sep 2024 12:42:56 +0900 Subject: [PATCH 6/8] refactor --- src/App.tsx | 4 ++-- src/index.css | 4 ++-- src/main.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index dfbdfa6..16fc351 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; -import { Suspense } from 'react'; +import { Suspense } from "react"; import Layout from "./components/Layout"; import routerInfo from "./shared/routing/routerInfo"; @@ -22,4 +22,4 @@ function App() { return ; } -export default App; \ No newline at end of file +export default App; diff --git a/src/index.css b/src/index.css index 59abeee..1883006 100644 --- a/src/index.css +++ b/src/index.css @@ -1,2 +1,2 @@ -@import url('https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css'); -@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); \ No newline at end of file +@import url("https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"); +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); diff --git a/src/main.tsx b/src/main.tsx index b6b6f57..21aa728 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,6 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import './index.css'; +import "./index.css"; import App from "./App"; From eb2bb429246cf96f8af94ef48fccfe8a922f0bcd Mon Sep 17 00:00:00 2001 From: jjh4450 Date: Mon, 16 Sep 2024 14:24:54 +0900 Subject: [PATCH 7/8] =?UTF-8?q?fix(routing):=20index.html=20=EC=97=90=20?= =?UTF-8?q?=EC=A1=B4=EC=9E=AC=ED=95=98=EB=8D=98=20stylesheet=EC=9A=94?= =?UTF-8?q?=EC=86=8C=EB=A5=BC=20index.css=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 -- src/index.css | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index 8f42fff..7fa73bd 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,6 @@ - - Blank diff --git a/src/index.css b/src/index.css index 1883006..7ac202c 100644 --- a/src/index.css +++ b/src/index.css @@ -1,2 +1,3 @@ @import url("https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"); @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/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"); \ No newline at end of file From 5afdf48e1d5fae180714587864bec68f16097064 Mon Sep 17 00:00:00 2001 From: jjh4450 Date: Mon, 16 Sep 2024 14:26:44 +0900 Subject: [PATCH 8/8] =?UTF-8?q?fix(css):=EC=99=80!=20css=20=EB=A7=88?= =?UTF-8?q?=EC=A7=80=EB=A7=89=EC=A4=84=20=EA=B0=9C=ED=96=89!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index 7ac202c..2366cdb 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,3 @@ @import url("https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"); @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/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"); \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");