feat: Change popovertrigger to sticky

src/content/App.tsx

@@ -18,6 +18,7 @@ import FilterPanel from './components/FilterPanel';
 import { useCourseData } from '@/hooks/useCourseData';
 import { filterVods, filterAssigns, filterQuizes } from '@/lib/filterData';
 import PendingDialogWithBeforeUnload from './components/PendingDialog';
+import StickyPopoverTrigger from './StickyPopoverTrigger';
 
 // 리팩토링: 필터 옵션 추출
 const attendanceOptions = ['출석', '결석']; // string[]
@@ -165,34 +166,37 @@ export default function App() {
     <>
       <PendingDialogWithBeforeUnload isPending={isPending} onClose={() => {}} />
       <Popover open={isOpen}>
-        <PopoverTrigger asChild className="transition-all duration-1000 justify-self-end">
-          {isOpen ? (
-            <img
-              src={exit}
-              onClick={(e) => {
-                setIsOpen(!isOpen);
-                e.preventDefault();
-              }}
-              draggable={false}
-              className="rounded-2xl w-32 h-32 shadow-xl cursor-pointer"
-              alt="Close"
-            />
-          ) : (
-            <img
-              src={icon}
-              onClick={(e) => {
-                setIsOpen(!isOpen);
-                e.preventDefault();
-              }}
-              draggable={false}
-              className="rounded-2xl w-32 h-32 shadow-xl cursor-pointer"
-              alt="Open"
-            />
-          )}
-        </PopoverTrigger>
+        <StickyPopoverTrigger>
+          <PopoverTrigger asChild className="transition-all duration-1000 justify-self-end">
+            {isOpen ? (
+              <img
+                src={exit}
+                onClick={(e) => {
+                  setIsOpen(!isOpen);
+                  e.preventDefault();
+                }}
+                draggable={false}
+                className="rounded-2xl w-32 h-32 shadow-2xl shadow-zinc-900 cursor-pointer"
+                alt="Close"
+              />
+            ) : (
+              <img
+                src={icon}
+                onClick={(e) => {
+                  setIsOpen(!isOpen);
+                  e.preventDefault();
+                }}
+                draggable={false}
+                className="rounded-2xl w-32 h-32 shadow-2xl shadow-zinc-900 cursor-pointer"
+                alt="Open"
+              />
+            )}
+          </PopoverTrigger>
+        </StickyPopoverTrigger>
         <PopoverContent
-          className="bg-white opacity-100 rounded-3xl border-none shadow-2xl shadow-zinc-600 px-0 py-0 flex flex-col items-center justify-center w-[350px] h-[550px]"
+          className="bg-white opacity-100 rounded-3xl border-none shadow-2xl shadow-zinc-600 px-0 py-0 flex flex-col items-center justify-center w-[350px] h-[550px] translate-x-[-8px]"
           side="top"
+          sideOffset={8}
         >
           <div className="bg-white w-full rounded-3xl z-10">
             <div className="w-full flex items-center justify-between px-5 pt-8 pb-6">

src/content/StickyPopoverTrigger.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+
+const StickyPopoverTrigger: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [triggerStyle, setTriggerStyle] = useState<React.CSSProperties>({
+    position: 'fixed',
+    bottom: '20px',
+    right: '20px',
+    zIndex: 1000,
+    transition: 'bottom 0.2s ease-out',
+  });
+
+  useEffect(() => {
+    const placeholder = document.getElementById('footer-placeholder');
+    if (!placeholder) return;
+
+    const fixedBottom = 20;
+    const collapsedBottom = 8;
+    const transitionRange = 20;
+
+    const handleScroll = () => {
+      const rect = placeholder.getBoundingClientRect();
+      const viewportBottom = window.innerHeight;
+
+      if (rect.top > viewportBottom - fixedBottom) {
+        setTriggerStyle({
+          position: 'fixed',
+          bottom: `${fixedBottom}px`,
+          right: '20px',
+          zIndex: 1000,
+          transition: 'bottom 0.2s ease-out',
+        });
+      } else {
+        const overlap = viewportBottom - fixedBottom - rect.top;
+        if (overlap < transitionRange) {
+          const newBottom = fixedBottom - overlap;
+          setTriggerStyle({
+            position: 'fixed',
+            bottom: `${newBottom}px`,
+            right: '20px',
+            zIndex: 1000,
+            transition: 'bottom 0.2s ease-out',
+          });
+        } else {
+          setTriggerStyle({
+            position: 'absolute',
+            right: '8px',
+            zIndex: 1000,
+            transition: 'none',
+          });
+        }
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    handleScroll();
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return <div style={triggerStyle}>{children}</div>;
+};
+
+export default StickyPopoverTrigger;

src/content/index.tsx

@@ -13,14 +13,25 @@ if (footer && url === 'https://learn.hansung.ac.kr/') {
   if (backtop) backtop.remove();
 
   footer.style.paddingBottom = '24px';
+
+  const placeholder = document.createElement('div');
+  placeholder.id = 'footer-placeholder';
+  placeholder.style.display = 'block';
+  placeholder.style.position = 'relative';
+  placeholder.style.bottom = '8px';
+  placeholder.style.zIndex = '10';
+  placeholder.style.height = '80px';
+  placeholder.style.backgroundColor = 'transparent';
+  footer.prepend(placeholder);
+
   const host = document.createElement('div');
   host.id = 'extension-content-root';
   host.style.display = 'block';
   host.style.position = 'relative';
   host.style.bottom = '8px';
   host.style.zIndex = '100';
   host.style.backgroundColor = 'transparent';
-  footer.prepend(host);
+  placeholder.append(host);
 
   const shadowRoot = createShadowRoot(host, [styles]);