refactor: increase lighthouse element && reduce bundler size

boostcampwm2023 · Jan 8, 2024 · bc6ba5a · bc6ba5a
1 parent fe2cf04
commit bc6ba5a
Show file tree

Hide file tree

Showing 24 changed files with 180 additions and 119 deletions.
diff --git a/front/index.html b/front/index.html
@@ -13,6 +13,9 @@
       property="og:description"
       content="나만의 스노우볼을 만들어보세요 !"
     />
+    <meta name="description" content="나만의 스노우볼을 만들어보세요 !" />
+    <meta name="author" content="SSOCK" />
+
     <title>스노우볼 속 내 마음</title>
   </head>
   <body>

diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -15,15 +15,16 @@
     "@sentry/react": "^7.86.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.29",
-    "@types/three": "^0.158.1",
+    "@types/three": "^0.158.3",
     "axios": "^1.6.2",
     "react": "^18.2.0",
     "react-cookie": "^6.1.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
     "styled-components": "^6.1.0",
     "styled-reset": "^4.5.1",
-    "three": "^0.158.0"
+    "three": "^0.158.0",
+    "vite-plugin-compression2": "^0.11.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -1,9 +1,8 @@
 import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
-import * as Sentry from '@sentry/react';
+import { ErrorBoundary } from '@sentry/react';
 import styled, { ThemeProvider } from 'styled-components';
 import GlobalStyles from './GlobalStyles';
 import { theme } from '@utils';
-// import * as Pages from '@pages';
 import { Song } from '@components';
 import { HasSnowballData } from './router';
 import { SnowBallProvider } from '@pages/Visit/SnowBallProvider';
@@ -36,7 +35,7 @@ const Wrong = lazy(() => import('@pages/Wrong/Wrong'));
 const App = () => {
   return (
     <>
-      <Sentry.ErrorBoundary>
+      <ErrorBoundary>
         <GlobalStyles />
         <ThemeProvider theme={theme}>
           <Outer>
@@ -103,7 +102,7 @@ const App = () => {
             </Suspense>
           </Outer>
         </ThemeProvider>
-      </Sentry.ErrorBoundary>
+      </ErrorBoundary>
     </>
   );
 };

diff --git a/front/src/components/SnowGlobeCanvas/Decos.tsx b/front/src/components/SnowGlobeCanvas/Decos.tsx
@@ -1,10 +1,11 @@
 import { useContext } from 'react';
-import { getDecoPoisition } from '@utils';
+import { getDecoPosition } from '@utils';
 import * as Models from './models';
 import { MessageListContext } from '@pages/Visit/MessageListProvider';
+import { Vector3 } from 'three';
 
 interface DecosProps {
-  centerPosition: THREE.Vector3;
+  centerPosition: Vector3;
   radius: number;
 }
 
@@ -16,7 +17,7 @@ const Decos = ({ centerPosition, radius }: DecosProps) => {
       key={index}
       id={message.decoration_id}
       scale={1}
-      position={getDecoPoisition(message.location)}
+      position={getDecoPosition(message.location)}
       message={message.content ?? '비공개 메시지 입니다.'}
       color={message.decoration_color}
       sender={message.sender ?? '비공개'}

diff --git a/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx b/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx
@@ -1,7 +1,8 @@
 import React, { useRef } from 'react';
-import { OrbitControls } from '@react-three/drei';
+import { OrbitControls } from '@react-three/drei/core/OrbitControls';
 import { Canvas } from '@react-three/fiber';
-import * as THREE from 'three';
+import {Vector3, Color} from 'three';
+
 import { CanvasContainer } from '@utils';
 import * as Models from './models';
 import { Prev } from '../Prev';
@@ -17,7 +18,7 @@ const SnowGlobeCanvas = React.memo<SnowGlobeCanvasProps>(
   ({ snowBallData }) => {
     const isClicked = useRef<boolean>(false);
     const glassRadius = 7;
-    const glassPosition = new THREE.Vector3(0, glassRadius / 2, 0);
+    const glassPosition = new Vector3(0, glassRadius / 2, 0);
 
     const snows = Array.from({ length: 100 }, (_, i) => (
       <Models.Snow
@@ -40,7 +41,7 @@ const SnowGlobeCanvas = React.memo<SnowGlobeCanvasProps>(
             shadows={true}
           >
             <OrbitControls
-              target={new THREE.Vector3(0, 2, 0)}
+              target={new Vector3(0, 2, 0)}
               enablePan={false}
               enableZoom={false}
               maxPolarAngle={Math.PI / 2}
@@ -67,30 +68,30 @@ const SnowGlobeCanvas = React.memo<SnowGlobeCanvasProps>(
             />
 
             <Models.Raycaster isClickedRef={isClicked} />
-            <Models.Ground scale={1} position={new THREE.Vector3(0, 0, 0)} />
+            <Models.Ground scale={1} position={new Vector3(0, 0, 0)} />
             <Models.Glass
               position={glassPosition}
-              color={new THREE.Color('white')}
+              color={new Color('white')}
               radius={glassRadius}
               opacity={0.1}
             />
             <Models.MainDeco
               id={snowBallData.main_decoration_id}
               scale={1}
-              position={new THREE.Vector3(0, 10, 0)}
+              position={new Vector3(0, 10, 0)}
               color={snowBallData.main_decoration_color}
             />
             <Models.Bottom
               bottomID={snowBallData.bottom_decoration_id}
               scale={1}
-              position={new THREE.Vector3(0, 0, 0)}
+              position={new Vector3(0, 0, 0)}
               title={snowBallData.title}
-              color={new THREE.Color(snowBallData.bottom_decoration_color)}
+              color={new Color(snowBallData.bottom_decoration_color)}
             />
             {snows}
 
             <Decos
-              centerPosition={new THREE.Vector3(0, glassRadius / 2, 0)}
+              centerPosition={new Vector3(0, glassRadius / 2, 0)}
               radius={glassRadius}
             />
           </Canvas>

diff --git a/front/src/components/SnowGlobeCanvas/models/Bottom.tsx b/front/src/components/SnowGlobeCanvas/models/Bottom.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { useGLTF } from '@react-three/drei';
-import * as THREE from 'three';
+import { useGLTF } from '@react-three/drei/core/useGLTF';
+import { Vector3, Color, Mesh, MeshStandardMaterial } from 'three';
 import * as MeshUtils from '@utils/meshUtils';
 import { BOTTOM } from '@constants';
 
 interface BottomProps {
   scale: number;
-  position: THREE.Vector3;
+  position: Vector3;
   bottomID: number;
   title: string;
-  color: THREE.Color;
+  color: Color;
 }
 
 const Bottom: React.FC<BottomProps> = ({
@@ -20,8 +20,8 @@ const Bottom: React.FC<BottomProps> = ({
   color
 }) => {
   const bottom = useGLTF(BOTTOM[bottomID].fileName).scene.clone();
-  const nameTag = bottom.getObjectByName('nameTag') as THREE.Mesh;
-  if (nameTag && nameTag.material instanceof THREE.MeshStandardMaterial) {
+  const nameTag = bottom.getObjectByName('nameTag') as Mesh;
+  if (nameTag && nameTag.material instanceof MeshStandardMaterial) {
     const newTexture = MeshUtils.makeCanvasTexture({
       string: title,
       width: 1024,
@@ -35,9 +35,9 @@ const Bottom: React.FC<BottomProps> = ({
     nameTag.material.bumpMap = newTexture;
   }
 
-  const mainColor = bottom.getObjectByName('mainColor') as THREE.Mesh;
+  const mainColor = bottom.getObjectByName('mainColor') as Mesh;
   if (mainColor) {
-    const material = mainColor.material as THREE.MeshStandardMaterial;
+    const material = mainColor.material as MeshStandardMaterial;
     material.color = color;
   }
 

diff --git a/front/src/components/SnowGlobeCanvas/models/Deco.tsx b/front/src/components/SnowGlobeCanvas/models/Deco.tsx
@@ -1,12 +1,12 @@
-import { useGLTF } from '@react-three/drei';
-import * as THREE from 'three';
+import { useGLTF } from '@react-three/drei/core/useGLTF';
+import { Vector3, Group, Object3DEventMap, Mesh } from 'three';
 import * as MeshUtils from '@utils/meshUtils';
 import { DECO, MSG_COLOR } from '@constants';
 
 interface DecoProps {
   id: number;
   scale: number;
-  position: THREE.Vector3;
+  position: Vector3;
   message: string;
   color: string;
   sender: string;
@@ -15,7 +15,7 @@ interface DecoProps {
   messageID: number;
 }
 
-const DecoSet = (deco: THREE.Group<THREE.Object3DEventMap>) => {
+const DecoSet = (deco: Group<Object3DEventMap>) => {
   const newModel = useGLTF('/models/new.glb').scene.clone().children[0];
   newModel.position.set(0, 1.2, 0);
   newModel.scale.set(0.1, 0.1, 0.1);
@@ -45,7 +45,7 @@ const Deco = ({
   }
 
   deco.children.forEach(child => {
-    if (child instanceof THREE.Mesh) {
+    if (child instanceof Mesh) {
       child.userData.message = message;
       child.userData.sender = sender;
       child.userData.color = color;