[Update] Apply new ui for dashboard

package.json

@@ -11,10 +11,9 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "@types/eslint": "^8.56.10",
     "@types/jest": "^24.9.1",
-    "@types/node": "^12.20.47",
-    "@types/react": "^16.14.24",
-    "@types/react-dom": "^16.9.14",
+    "@types/node": "^20.12.12",
     "@types/react-redux": "^7.1.23",
     "classnames": "^2.3.2",
     "date-fns": "^3.6.0",
@@ -24,16 +23,18 @@
     "prettier": "^2.6.2",
     "prism-react-renderer": "^1.3.5",
     "rc-slider": "^10.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.33.1",
     "react-json-view": "chacha912/react-json-view#master",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "sass": "^1.55.0",
-    "typescript": "~4.1.5",
-    "yorkie-js-sdk": "^0.4.20"
+    "t": "^0.5.1",
+    "typescript": "^5.4.5",
+    "yorkie-js-sdk": "^0.4.20",
+    "yorkie-ui": "^0.5.7"
   },
   "husky": {
     "hooks": {
@@ -132,6 +133,8 @@
     "@bufbuild/buf": "^1.28.1",
     "@bufbuild/protoc-gen-es": "^1.6.0",
     "@connectrpc/protoc-gen-connect-es": "^1.2.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.4",
     "eslint-plugin-spellcheck": "^0.0.19",
     "postcss": "^8.4.12"

src/App.tsx

@@ -40,14 +40,14 @@ import { TestPage, ButtonView, PopoverView, DropdownView, InputView, BreadcrumbV
 function App() {
   const { theme } = useAppSelector(selectPreferences);
   useEffect(() => {
-    document.body.classList.toggle('darkmode', theme.darkMode);
+    document.documentElement.setAttribute('data-theme', theme.darkMode ? 'dark' : 'light');
   }, [theme.darkMode]);
 
   return (
     <Router basename={process.env.PUBLIC_URL}>
       <Routes>
         <Route path="/" element={<Navigate to="/login" replace />} />
-        <Route element={<PublicRoute />} >
+        <Route element={<PublicRoute />}>
           <Route path="/login" element={<LoginPage />} />
           <Route path="/signup" element={<SignupPage />} />
         </Route>
@@ -63,19 +63,17 @@ function App() {
           <Route path="/settings" element={<SettingsPage />} />
         </Route>
         <Route path="/community" element={<CommunityPage />} />
-        {
-          process.env.NODE_ENV === 'development' && (
-            <Route path="/test" element={<TestPage />}>
-              <Route path="/test" element={<Navigate to="./button" />} />
-              <Route path="/test/button" element={<ButtonView />} />
-              <Route path="/test/popover" element={<PopoverView />} />
-              <Route path="/test/dropdown" element={<DropdownView />} />
-              <Route path="/test/input" element={<InputView />} />
-              <Route path="/test/breadcrumb" element={<BreadcrumbView />} />
-              <Route path="/test/modal" element={<ModalView />} />
-            </Route>
-          )
-        }
+        {process.env.NODE_ENV === 'development' && (
+          <Route path="/test" element={<TestPage />}>
+            <Route path="/test" element={<Navigate to="./button" />} />
+            <Route path="/test/button" element={<ButtonView />} />
+            <Route path="/test/popover" element={<PopoverView />} />
+            <Route path="/test/dropdown" element={<DropdownView />} />
+            <Route path="/test/input" element={<InputView />} />
+            <Route path="/test/breadcrumb" element={<BreadcrumbView />} />
+            <Route path="/test/modal" element={<ModalView />} />
+          </Route>
+        )}
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </Router>