refactor: 모달 내부 컨텐츠 메모이제이션, sideEffect false

package.json

@@ -4,6 +4,7 @@
   "version": "2.0.7",
   "license": "MIT",
   "type": "module",
+  "sideEffects": false,
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

src/content/components/MainModal.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion'
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 
 import { BottomNavigation } from './BottomNavigation'
 import { SettingsContent } from './setting'
@@ -28,16 +28,21 @@ const modalVariants: Variants = {
 export function MainModal() {
   const [activeTab, setActiveTab] = useState<'tasks' | 'settings'>('tasks')
 
+  const Content = useMemo(() => {
+    return activeTab === 'tasks' ? <TaskContent /> : <SettingsContent />
+  }, [activeTab])
+
   return (
     <motion.div
       variants={modalVariants}
       initial="hidden"
       animate="visible"
       exit="exit"
+      transition={{ duration: 0.3 }}
       className="fixed bottom-96px right-25px h-600px w-350px origin-bottom-right overflow-hidden rounded-36px bg-slate-100 shadow-[0_0_100px_0_rgba(0,0,0,0.2)] backdrop-blur-sm"
     >
       <div className="flex h-full flex-col">
-        {activeTab === 'tasks' ? <TaskContent /> : <SettingsContent />}
+        {Content}
         <BottomNavigation activeTab={activeTab} setActiveTab={setActiveTab} />
         <ToastContainer />
       </div>

vite.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { crx } from '@crxjs/vite-plugin'
 import react from '@vitejs/plugin-react'
 import { resolve } from 'path'
@@ -25,15 +24,4 @@ export default defineConfig({
       '@/assets': resolve(__dirname, './src/assets'),
     },
   },
-  build: {
-    chunkSizeWarningLimit: 1024,
-    rollupOptions: {
-      onwarn(warning, warn) {
-        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
-          return
-        }
-        warn(warning)
-      },
-    },
-  },
 })