radix theme 적용

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "never"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "[javascript][typescript][typescriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  },
+  "[typescriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  }
+}

pages/options/package.json

@@ -19,11 +19,12 @@
   },
   "dependencies": {
     "@chrome-extension-boilerplate/shared": "workspace:*",
-    "@chrome-extension-boilerplate/storage": "workspace:*"
+    "@chrome-extension-boilerplate/storage": "workspace:*",
+    "@radix-ui/themes": "^3.1.1"
   },
   "devDependencies": {
+    "@chrome-extension-boilerplate/hmr": "workspace:*",
     "@chrome-extension-boilerplate/tailwindcss-config": "workspace:*",
-    "@chrome-extension-boilerplate/tsconfig": "workspace:*",
-    "@chrome-extension-boilerplate/hmr": "workspace:*"
+    "@chrome-extension-boilerplate/tsconfig": "workspace:*"
   }
 }

pages/options/src/index.tsx

@@ -1,14 +1,22 @@
 import { createRoot } from 'react-dom/client';
 import '@src/index.css';
 import Options from '@src/Options';
+import '@radix-ui/themes/styles.css';
+import { Theme } from '@radix-ui/themes';
 
 function init() {
   const appContainer = document.querySelector('#app-container');
   if (!appContainer) {
     throw new Error('Can not find #app-container');
   }
+
   const root = createRoot(appContainer);
-  root.render(<Options />);
+
+  root.render(
+    <Theme>
+      <Options />
+    </Theme>,
+  );
 }
 
 init();