Merge branch 'develop' of https://github.com/SOPT-all/35-COLLABORATIO…

…N-WEB-MCDONALD into feat/#51/favorite
SOPT-all · Nov 29, 2024 · 1bf350c · 1bf350c
2 parents 4fcdc2e + 2cd83e3
commit 1bf350c
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -1,9 +1,51 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/logo.png" />
+    <link
+      rel="preload"
+      href="https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
     <link rel="stylesheet" href="./src/styles/fonts/fonts.css" />
+    <link rel="icon" type="image/png" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>맥도날드</title>
   </head>
@@ -12,4 +54,3 @@
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
-
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.11",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-svgr": "^4.3.0"
   },
   "eslintConfig": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -5,14 +5,17 @@ import theme from './styles/theme';
 import GlobalStyle from './styles/global';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { Suspense } from 'react';
 
 const App = () => {
   const queryClient = new QueryClient();
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme}>
         <Global styles={GlobalStyle} />
-        <RouterProvider router={router} />
+        <Suspense fallback={<></>}>
+          <RouterProvider router={router} />
+        </Suspense>
       </ThemeProvider>
       <div style={{ fontSize: '16px' }}>
         <ReactQueryDevtools initialIsOpen={false} />

diff --git a/src/hooks/useScrollToTop.ts b/src/hooks/useScrollToTop.ts
@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const useScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
+  }, [pathname]);
+};
+
+export default useScrollToTop;
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
@@ -4,18 +4,23 @@ import Header from '@components/Header/Header';
 import BottomNav from '@components/BottomNav/BottomNav';
 import { Outlet } from 'react-router-dom';
 import { css } from '@emotion/react';
+import useScrollToTop from 'src/hooks/useScrollToTop';
 
-const Layout = () => (
-  <>
-    <div css={layoutStyle}>
-      <Header />
-      <Spacing size="6.2" />
-      <Outlet />
-    </div>
-    <BottomNav />
-    <Footer />
-  </>
-);
+const Layout = () => {
+  useScrollToTop();
+
+  return (
+    <>
+      <div css={layoutStyle}>
+        <Header />
+        <Spacing size="6.2" />
+        <Outlet />
+      </div>
+      <BottomNav />
+      <Footer />
+    </>
+  );
+};
 
 export default Layout;
 

diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
@@ -1,9 +1,15 @@
+import { lazy } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
-import BurgerDetailPage from '@pages/burgerdetail/BurgerDetailPage';
-import Main from '@pages/main/Main';
-import Layout from '@layouts/Layout';
-import BurgerListPage from '@pages/burgerlist/BurgerListPage';
-import FavoriteListPage from '@pages/favoriteList/FavoriteListPage';
+
+const Layout = lazy(() => import('@layouts/Layout'));
+const Main = lazy(() => import('@pages/main/Main'));
+const BurgerDetailPage = lazy(
+  () => import('@pages/burgerdetail/BurgerDetailPage'),
+);
+const BurgerListPage = lazy(() => import('@pages/burgerlist/BurgerListPage'));
+const FavoriteListPage = lazy(
+  () => import('@pages/favoriteList/FavoriteListPage'),
+);
 
 const router = createBrowserRouter([
   {

diff --git a/src/styles/fonts/.keep b/src/styles/fonts/.keep
diff --git a/src/styles/fonts/fonts.css b/src/styles/fonts/fonts.css
@@ -3,57 +3,45 @@
   font-weight: 900;
   font-style: normal;
   src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.woff2')
-      format('woff2'),
-    url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.ttf')
-      format('truetype');
+    format('woff2');
 }
 
 @font-face {
   font-family: 'Apple SD Gothic Neo';
   font-weight: 600;
   font-style: normal;
   src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.woff2')
-      format('woff2'),
-    url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.ttf')
-      format('truetype');
+    format('woff2');
 }
 
 @font-face {
   font-family: 'Apple SD Gothic Neo';
   font-weight: 500;
   font-style: normal;
   src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.woff2')
-      format('woff2'),
-    url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.ttf')
-      format('truetype');
+    format('woff2');
 }
 
 @font-face {
   font-family: 'Apple SD Gothic Neo';
   font-weight: 400;
   font-style: normal;
   src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.woff2')
-      format('woff2'),
-    url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.ttf')
-      format('truetype');
+    format('woff2');
 }
 
 @font-face {
   font-family: 'Apple SD Gothic Neo';
   font-weight: 300;
   font-style: normal;
   src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.woff2')
-      format('woff2'),
-    url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.ttf')
-      format('truetype');
+    format('woff2');
 }
 
 @font-face {
   font-family: 'Apple SD Gothic Neo';
   font-weight: 200;
   font-style: normal;
   src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.woff2')
-      format('woff2'),
-    url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.ttf')
-      format('truetype');
+    format('woff2');
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import svgr from 'vite-plugin-svgr';
+import viteCompression from 'vite-plugin-compression';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -11,6 +12,11 @@ export default defineConfig({
     }),
     tsconfigPaths(),
     svgr(),
+    viteCompression({
+      algorithm: 'gzip', // 압축 알고리즘 지정
+      ext: '.gz', // 압축된 파일 확장자
+      threshold: 10240, // 최소 파일 크기 (10KB 이상인 파일만 압축)
+    }),
   ],
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],

diff --git a/yarn.lock b/yarn.lock
@@ -1903,7 +1903,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0:
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -2053,7 +2053,7 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.6:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.6:
   version "4.3.7"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz"
   integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
@@ -2533,6 +2533,15 @@ [email protected]:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
+fs-extra@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -3949,6 +3958,15 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vite-plugin-compression@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz#a75b0d8f48357ebb377b65016da9f20885ef39b6"
+  integrity sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==
+  dependencies:
+    chalk "^4.1.2"
+    debug "^4.3.3"
+    fs-extra "^10.0.0"
+
 vite-plugin-svgr@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-4.3.0.tgz#742f16f11375996306c696ec323e4d23f6005075"