feat: 콘텐츠 스크립트 컴포넌트 렌더링

Author: jaem1n207

src/contentScripts/index.ts

@@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
 import { onMessage } from 'webext-bridge/content-script';
 import browser from 'webextension-polyfill';
 
+import '~/shared/styles';
 import { renderApp } from './render';
 
 // Firefox `browser.tabs.executeScript()` requires scripts return a primitive value
@@ -16,6 +17,9 @@ import { renderApp } from './render';
   // mount component to context window
   const container = document.createElement('div');
   container.id = __NAME__;
+  container.style.setProperty('z-index', '2147483647', 'important');
+  container.style.setProperty('position', 'relative', 'important');
+  container.style.setProperty('color-scheme', 'normal', 'important');
   const root = document.createElement('div');
   const styleEl = document.createElement('link');
   const shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container;

src/contentScripts/pages/App.tsx

@@ -5,11 +5,13 @@ import { Button } from '~/shared/ui';
 
 export const App = () => {
   return (
-    <div>
-      <div className="fixed right-0 bottom-0 m-5 z-99999 select-none">
-        <Button className="rounded-full">
-          <IconCat />
-        </Button>
+    <div className="fixed h-dvh w-0 top-0 right-0 theme-blue">
+      <div className="absolute w-14 select-none top-0 right-0 transform-translate-x-0 transform-translate-y-80">
+        <div className="w-14 h-64 shadow-scrollbar-container rounded-6 cursor-pointer bg-primary transform-translate-x-0 transition-transform">
+          <Button className="size-full rounded-6!">
+            <IconCat />
+          </Button>
+        </div>
       </div>
     </div>
   );

unocss.config.ts

@@ -146,6 +146,13 @@ export default defineConfig({
         };
       },
     ],
+    [
+      'shadow-scrollbar-container',
+      {
+        'box-shadow':
+          'rgba(0, 0, 0, 0.4) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.09) 0px 1px 3px 0px, rgba(0, 0, 0, 0.09) 0px 4px 8px 0px',
+      },
+    ],
   ],
   shortcuts: {
     container: