feat: add lecture auto-play feature

.gitignore

@@ -41,3 +41,6 @@ Thumbs.db
 # 기타 임시 파일
 tmp/
 temp/
+
+*.zip
+dist

manifest.config.ts

@@ -27,7 +27,7 @@ const manifest = {
       matches: ['*://*/*'],
     },
   ],
-  options_page: '/option.html',
+  options_page: 'option.html',
   permissions: ['storage', 'notifications', 'alarms', 'identity'],
   host_permissions: ['https://*/*', 'http://*/*'],
   oauth2: {

package.json

@@ -10,6 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@heroui/switch": "^2.2.9",
     "@heroui/system": "^2.4.7",
     "@heroui/theme": "^2.4.6",
@@ -35,6 +38,7 @@
     "glob": "^11.0.1",
     "googleapis": "^160.0.0",
     "lucide-react": "^0.471.2",
+    "motion": "^12.23.24",
     "node-fetch": "^3.3.2",
     "react": "^18.3.1",
     "react-colorful": "^5.6.1",

src/components/ui/border-trail.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { cn } from '@/lib/utils';
+import { motion, Transition } from 'motion/react';
+
+export type BorderTrailProps = {
+  className?: string;
+  size?: number;
+  transition?: Transition;
+  onAnimationComplete?: () => void;
+  style?: React.CSSProperties;
+};
+
+export function BorderTrail({
+  className,
+  size = 60,
+  transition,
+  onAnimationComplete,
+  style,
+}: BorderTrailProps) {
+  const defaultTransition: Transition = {
+    repeat: Infinity,
+    duration: 5,
+    ease: 'linear',
+  };
+
+  return (
+    <div className='pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]'>
+      <motion.div
+        className={cn('absolute aspect-square bg-zinc-500', className)}
+        style={{
+          width: size,
+          offsetPath: `rect(0 auto auto 0 round ${size}px)`,
+          ...style,
+        }}
+        animate={{
+          offsetDistance: ['0%', '100%'],
+        }}
+        transition={transition || defaultTransition}
+        onAnimationComplete={onAnimationComplete}
+      />
+    </div>
+  );
+}

src/content/App.tsx

@@ -15,17 +15,16 @@ import { Button } from '@/components/ui/button';
 import FilterBadge from './components/FilterBadge';
 
 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';
+import { useCourseData } from '@/hooks/useCourseData';
 
-// 리팩토링: 필터 옵션 추출
-const attendanceOptions = ['출석', '결석']; // string[]
+const attendanceOptions = ['출석', '결석'];
 const submitOptions = [
   { label: '제출완료', value: true },
   { label: '제출필요', value: false },
-]; // { label: string, value: boolean }[]
+];
 
 export default function App() {
   const { courses } = useGetCourses();

src/content/components/PendingDialog.tsx

@@ -27,9 +27,11 @@ export default function PendingDialog({ isPending, onClose }: PendingDialogProps
       document.body.prepend(host);
     }
     setHostElement(host);
-    const newShadowRoot = createShadowRoot(host, [
-      styles,
-      `
+    const newShadowRoot = createShadowRoot(
+      host,
+      [
+        styles,
+        `
       :host {
         position: fixed;
         top: 0;
@@ -42,7 +44,9 @@ export default function PendingDialog({ isPending, onClose }: PendingDialogProps
         z-index: 9999;
       }
       `,
-    ]);
+      ],
+      'modal-container'
+    );
     setModalContainer(newShadowRoot);
   }, []);
 

src/content/index.tsx

@@ -5,10 +5,15 @@ import styles from '@/styles/shadow.css?inline';
 import { createShadowRoot } from '@/lib/createShadowRoot';
 import { ShadowRootContext } from '@/lib/ShadowRootContext';
 import { TooltipProvider } from '@/components/ui/tooltip';
+import PlayerApp from '@/player/App';
 
+const HANSUNG_URL = 'https://learn.hansung.ac.kr/';
 const footer = document.getElementById('page-footer');
+const leftMenus = document.getElementsByClassName('left-menus');
+
 const url = window.location.href;
-if (footer && url === 'https://learn.hansung.ac.kr/') {
+
+if (footer && url === HANSUNG_URL) {
   const backtop = document.getElementById('back-top') as HTMLDivElement;
   if (backtop) backtop.remove();
 
@@ -33,7 +38,7 @@ if (footer && url === 'https://learn.hansung.ac.kr/') {
   host.style.backgroundColor = 'transparent';
   placeholder.append(host);
 
-  const shadowRoot = createShadowRoot(host, [styles]);
+  const shadowRoot = createShadowRoot(host, [styles], 'popover');
 
   createRoot(shadowRoot).render(
     <ShadowRootContext.Provider value={shadowRoot}>
@@ -45,3 +50,22 @@ if (footer && url === 'https://learn.hansung.ac.kr/') {
     </ShadowRootContext.Provider>
   );
 }
+
+if (leftMenus.length === 2 && url.startsWith(HANSUNG_URL)) {
+  const leftMenu = leftMenus[0];
+
+  const host = document.createElement('div');
+  host.id = 'dotbugi-player';
+  host.style.backgroundColor = 'transparent';
+  leftMenu.append(host);
+
+  const shadowRoot = createShadowRoot(host, [styles], 'player');
+
+  createRoot(shadowRoot).render(
+    <ShadowRootContext.Provider value={shadowRoot}>
+      <React.StrictMode>
+        <PlayerApp />
+      </React.StrictMode>
+    </ShadowRootContext.Provider>
+  );
+}

src/hooks/useCourseData.tsx

@@ -150,17 +150,14 @@ export function useCourseData(courses: CourseBase[]) {
       loadDataFromStorage('vod', (data) => {
         if (!data) return;
         setVods((data as Vod[]).filter((vod) => isCurrentDateInRange(vod.range)));
-        // setVods((data as Vod[]) || []);
       });
       loadDataFromStorage('assign', (data) => {
         if (!data) return;
         setAssigns((data as Assign[]).filter((assign) => isCurrentDateByDate(assign.dueDate)));
-        // setAssigns((data as Assign[]) || []);
       });
       loadDataFromStorage('quiz', (data) => {
         if (!data) return;
         setQuizes((data as Quiz[]).filter((quiz) => isCurrentDateByDate(quiz.dueDate)));
-        // setQuizes((data as Quiz[]) || []);
       });
     }
   }, [courses, updateData]);

src/lib/createShadowRoot.ts

@@ -1,8 +1,7 @@
-export function createShadowRoot(host: HTMLElement, styles: string[]): ShadowRoot {
+export function createShadowRoot(host: HTMLElement, styles: string[], shadowId: string): ShadowRoot {
   const shadowRoot = host.attachShadow({ mode: 'open' });
 
-  // host에 데이터 속성 추가
-  host.dataset.shadowId = 'extension-content-root';
+  host.dataset.shadowId = shadowId;
 
   const sheets = styles.map((styleString) => {
     const sheet = new CSSStyleSheet();

src/lib/fetchAssign.ts

@@ -42,7 +42,7 @@ export const fetchAssign = async (link: string) => {
         const isSubmit = row.querySelector(headerMap.isSubmit)?.textContent?.trim() === '미제출' ? false : true;
 
         if (sbj.length !== 0) subject = sbj;
-        if (!title || !url) return null;
+        if (!title || !url || !dueDate) return null;
         return { subject, title, url, dueDate, isSubmit };
       })
       .filter((assign) => assign !== null);

src/lib/fetchIndexPage.ts

@@ -30,7 +30,7 @@ export const fetchIndexPage = async (link: string) => {
             const range = item.querySelector('.text-ubstrap')?.textContent?.trim() || '';
             const length = item.querySelector('.text-info')?.textContent?.replace(',', '').trim() || '';
 
-            if (!title || !url) return null;
+            if (!title || !url || !range) return null;
             return { week, subject, title, url, range, length };
           })
           .filter((item) => item !== null);