+
+## Hiding Tasks
+
+You can hide items that you have already checked or no longer need.
+
+- **Right-click** a card → Select "Hide this task"
+- Right-click a course group header to hide all items for that course at once.
+
+Hidden items can be viewed and restored in the "Hidden Tasks" section of the Settings tab.
+
+| Hide | Unhide |
+| :-----------------------: | :---------------------------: |
+|  |  |
+
+## Course Page Status Badges
+
+Status badges are displayed next to activities (lectures/assignments/quizzes) on each course page.
+
+### Lectures (VOD)
+
+
+
+You can refresh the data using the refresh button in the dropdown menu. A red dot appears when 5 minutes have passed since the last refresh. Data is automatically refreshed after 1 hour.
+
+## Contact
+
+
+
+You can contact us via email or KakaoTalk open chat at the bottom of the Settings tab.
diff --git a/docs/en/guide/basic.md b/docs/en/guide/basic.md
new file mode 100644
index 0000000..57c4cd6
--- /dev/null
+++ b/docs/en/guide/basic.md
@@ -0,0 +1,78 @@
+# Basic User Guide
+
+## Installation
+
+1. Search for **HSU Dotbugi** on the Chrome Web Store.
+2. Click the **Add to Chrome** button.
+3. After installation, navigate to the university LMS (learn.hansung.ac.kr).
+
+
+
+## First Launch
+
+Once installed, a Dotbugi button will appear at the bottom-right of the LMS page. Click it to open the dashboard.
+
+
+
+## Dashboard
+
+The dashboard consists of 3 tabs: **Online Lectures**, **Assignments**, and **Quizzes**.
+
+Each card displays the course name, title, and deadline, with colors that change based on status.
+
+
+
+Sync result notifications:
+
+- "N events have been added" — New items were added
+- "Already up to date" — No items to add
+- "Failed to add N events" — Some items failed
+
+## Calendar Color Coding
+
+| Color | Item |
+| ------------ | ---------------- |
+| Lavender | Online Lectures |
+| Blue | Assignments |
+| Orange | Quizzes |
+
+## Login Expiration
+
+A notification is displayed when your Google login expires. Click the "Log in again" button to reconnect.
+
+
+
+## Disconnect
+
+Click the **Logout** button in the Settings tab to disconnect the integration.
diff --git a/docs/en/guide/faq.md b/docs/en/guide/faq.md
new file mode 100644
index 0000000..42d38bd
--- /dev/null
+++ b/docs/en/guide/faq.md
@@ -0,0 +1,55 @@
+# Frequently Asked Questions
+
+## Installation & Setup
+
+::: details The Dotbugi button doesn't appear after installation
+Make sure you are logged in to the LMS (learn.hansung.ac.kr). Dotbugi only works on LMS pages. You may need to refresh the page after installation.
+:::
+
+::: details Can I use it on other browsers?
+Currently supported on Chrome and Chromium-based browsers (Edge, Brave, Arc, etc.). Firefox, Safari, and others are not supported.
+:::
+
+## Dashboard
+
+::: details Data isn't updating in real time
+Data is automatically refreshed every hour. To refresh immediately, click **⋮ Menu → Refresh**.
+:::
+
+::: details A specific course isn't showing on the dashboard
+The tracking toggle for that course may be turned off. On the LMS main page, click the button at the top-right of the course card to enable tracking.
+:::
+
+::: details Can I track community (non-credit) courses?
+Yes. Enable the tracking toggle for community courses on the LMS main page. They are disabled by default.
+:::
+
+## Auto Player
+
+::: details Auto playback won't start
+The player only appears on course pages (course/view.php). Click the Dotbugi icon in the left sidebar, then press "Start Watching".
+:::
+
+::: details Does it replay already attended lectures?
+No. Already attended lectures are automatically skipped. Partially watched lectures resume from where you left off.
+:::
+
+## Google Calendar
+
+::: details Why does it request Google permissions?
+Write access to Google Calendar API is needed to add events. Dotbugi does not access any other data.
+:::
+
+::: details Events don't appear in my calendar after syncing
+Check the "Other calendars" list in Google Calendar. The Dotbugi calendar may be hidden.
+:::
+
+## Other
+
+::: details Is my personal data sent to external servers?
+No. Dotbugi stores all data in the browser's local storage and does not transmit data to external servers. Communication with Google API only occurs during calendar sync.
+:::
+
+::: details Badge colors don't match the actual attendance status
+Try **⋮ Menu → Refresh** to fetch the latest data. There may be a delay in LMS data reflection.
+:::
diff --git a/docs/en/index.md b/docs/en/index.md
new file mode 100644
index 0000000..deed178
--- /dev/null
+++ b/docs/en/index.md
@@ -0,0 +1,147 @@
+---
+layout: home
+
+hero:
+ name: Dotbugi
+ tagline: Make your LMS more convenient
+ image:
+ src: /favicon.png
+ alt: Dotbugi
+ actions:
+ - theme: brand
+ text: User Guide
+ link: /en/guide/basic
+ - theme: alt
+ text: FAQ
+ link: /en/guide/faq
+ - theme: alt
+ text: Update Log
+ link: /en/updates/changelog
+---
+
+Bold text
');
+ expect(getText(parent, '.wrap')).toBe('Bold text');
+ });
+
+ it('여러 매칭 시 첫 번째 요소만 반환', () => {
+ const parent = el('FirstSecond');
+ expect(getText(parent, '.item')).toBe('First');
+ });
+});
+
+describe('getHref', () => {
+ it('a 태그의 href 추출', () => {
+ const parent = el('Link');
+ const result = getHref(parent, '.link');
+ expect(result).toContain('example.com');
+ });
+
+ it('셀렉터가 매칭 안 되면 null', () => {
+ const parent = el('No link');
+ expect(getHref(parent, 'a')).toBeNull();
+ });
+
+ it('href가 없는 a 태그는 빈 문자열 → falsy → null', () => {
+ const parent = el('No href');
+ expect(getHref(parent, '.link')).toBeNull();
+ });
+
+ it('a가 아닌 요소에 href가 없으면 null', () => {
+ const parent = el('Not a link
');
+ expect(getHref(parent, '.link')).toBeNull();
+ });
+
+ it('상대 경로도 추출 (jsdom이 절대 경로로 변환할 수 있음)', () => {
+ const parent = el('Link');
+ const result = getHref(parent, '.link');
+ expect(result).toBeTruthy();
+ expect(result).toContain('/path/to/page');
+ });
+});
diff --git a/src/__tests__/filterData.test.ts b/src/__tests__/filterData.test.ts
new file mode 100644
index 0000000..d108c6e
--- /dev/null
+++ b/src/__tests__/filterData.test.ts
@@ -0,0 +1,376 @@
+import { describe, it, expect } from 'vitest';
+import { filterVods, filterAssigns, filterQuizzes } from '@/lib/filterData';
+import { Vod, Assign, Quiz, Filters } from '@/types';
+
+const makeVod = (overrides: Partial-
+
-
+
+ ++ +
프로그래밍 기초
+김교수
+
+
-
+
- 빈 항목
+
-
+
-
+
+ ++ +
비교과 활동
+이교수
+
+
-
+
-
+
+ ++ +
자료구조
+박교수
+
+
-
+
-
+
+ ++ +
자료구조new
+박교수
+
+
-
+
-
+
+ ++ +
[A반] 알고리즘
+최교수
+
+
-
+
-
+
+ ++ +
과목명
+교수명
+
+
-
+
-
+
+ ++ +
과목명
+
+
-
+
-
+
+ + +
과목A
교수A
+ -
+
+ + +
과목B
교수B
+
-
+
-
+
+ + +
컴파일러
정교수
+
-
+
-
+
+ + +
네트워크
한교수
+
-
+
-
+
+ + +
운영체제New
교수
+
-
+
-
+
+ + +
교수
+
-
+
-
+
+ + +
유효과목
교수A
+ - 빈 항목
+
-
+
+ + +
ID없음
교수B
+
-
-
-
-
- {activeTab === 'VIDEO'
- ? '온라인 강의 목록'
- : activeTab === 'ASSIGN'
- ? '과제 목록'
- : activeTab === 'QUIZ'
- ? '퀴즈 목록'
- : '오류'}
-
-
- = 30
- ? 'text-amber-500 font-semibold'
- : 'text-zinc-400'
- : Math.floor(remainingTime / 60) >= 1
- ? 'text-amber-500 font-semibold'
- : 'text-zinc-400'
- }`}
- >
- {remainingTime < 60
- ? `${Math.round(remainingTime)}분 전`
- : `${Math.floor(remainingTime / 60)}시간 전`}
-
-
-
-
-
-
-
-
- {filters[activeTab].courseTitles.map((title) => (
- handleCourseTitleChange(title)} />
- ))}
- {activeTab === 'VIDEO' &&
- filters[activeTab].attendanceStatuses &&
- filters[activeTab].attendanceStatuses.map((status) => (
- handleAttendanceFilterChange(status)}
- />
- ))}
- {activeTab === 'ASSIGN' &&
- filters[activeTab].submitStatuses &&
- filters[activeTab].submitStatuses.map((status) => (
- handleSubmitFilterChange(status)}
- />
- ))}
-
-
- {/* 고정된 필터 아이콘 영역 */}
-
-
-
-
-
-
-
-
-
-
- {isPending ? (
-
-
-
- ) : (
- <>
- {isError ? (
-
-
- ) : (
- <>
- {activeTab === 'VIDEO' && }
- {activeTab === 'ASSIGN' && 오류가 발생했습니다.
-{ - location.reload(); - }} - className="py-4 text-xl font-medium underline text-zinc-500 hover:text-zinc-950 hover:cursor-pointer transition-all duration-200" - > - 페이지 새로고침 -
-
- 
-
- );
- }
-
- return (
-
- 과제가 없습니다
-
-
- {courseData.map((course, index) => {
- if (!course) return null;
-
- const isDueDateSame = true;
- const timeDifference = calculateDueDate(course.dueDate!);
-
- return (
- window.open(`${course.url}`, '_blank')}
- key={`${course.title}-${index}`}
- className={`cursor-pointer w-full rounded-2xl shadow-md bg-white overflow-hidden border-0 border-l-4 ${course.isSubmit ? 'border-green-500' : timeDifference.borderColor} hover:bg-zinc-100 transition-all duration-200`}
- >
-
-
-
-
-
-
-
- {calculateRemainingTime(course.dueDate)}
-
-
-
-
- );
- })}
-
- );
-}
diff --git a/src/content/components/PendingDialog.tsx b/src/content/components/PendingDialog.tsx
deleted file mode 100644
index 4a2f43f..0000000
--- a/src/content/components/PendingDialog.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Loader2 } from 'lucide-react';
-import styles from '@/styles/shadow.css?inline';
-import { createShadowRoot } from '@/lib/createShadowRoot';
-
-interface PendingDialogProps {
- isPending: boolean;
- onClose?: () => void;
-}
-
-export default function PendingDialog({ isPending, onClose }: PendingDialogProps) {
- const [open, setOpen] = useState(false);
- const [cancelEnabled, setCancelEnabled] = useState(false);
- const [modalContainer, setModalContainer] = useState
-
- {course.courseTitle}
- {course.title}
-
-
-
- {course.isSubmit ? (
-
- {course.isSubmit ? '제출 완료' : '제출 필요'}
- 요청이 진행중입니다. 잠시만 기다려주세요.
-
-
-
- 완료되면 자동으로 창이 닫힙니다.
-
-
- );
-}
diff --git a/src/content/components/PopoverHeader.tsx b/src/content/components/PopoverHeader.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/content/components/QuizTab.tsx b/src/content/components/QuizTab.tsx
deleted file mode 100644
index a420bb3..0000000
--- a/src/content/components/QuizTab.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { calculateDueDate, calculateRemainingTime } from '@/lib/utils';
-import { Quiz } from '../types';
-import { Card, CardFooter, CardHeader } from '@/components/ui/card';
-import { Clock, Siren, TriangleAlert } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import thung from '@/assets/thung.png';
-
-interface Props {
- courseData: Quiz[];
-}
-
-export default function QuizTab({ courseData }: Props) {
- if (!courseData || courseData.length === 0) {
- return (
- setActiveTab(TAB_TYPE.VIDEO)}
- >
-
- setActiveTab(TAB_TYPE.ASSIGN)}
- >
-
- setActiveTab(TAB_TYPE.QUIZ)}
- >
-
-
-
-
- );
- }
-
- return (
-
- 퀴즈가 없습니다
-
-
- {courseData.map((course, index) => {
- if (!course) return null;
-
- const isDueDateSame = true;
- const timeDifference = calculateDueDate(course.dueDate!);
-
- return (
- window.open(`${course.url}`, '_blank')}
- key={`${course.title}-${index}`}
- className={`cursor-pointer w-full rounded-2xl shadow-md bg-white overflow-hidden border-0 border-l-4 ${timeDifference.borderColor} hover:bg-zinc-100 transition-all duration-200`}
- >
-
-
-
-
-
-
-
- {calculateRemainingTime(course.dueDate)}
-
-
-
-
- );
- })}
-
- );
-}
diff --git a/src/content/components/Video.tsx b/src/content/components/Video.tsx
deleted file mode 100644
index 685e4bf..0000000
--- a/src/content/components/Video.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import { useState } from 'react';
-import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
-import { Vod } from '../types';
-import {
- calculateRemainingTimeByRange,
- calculateTimeDifference,
- formatDateString,
- isCurrentDateInRange,
-} from '@/lib/utils';
-import { BadgeCheck, ChevronDown, ChevronUp, Clock, Siren, TriangleAlert } from 'lucide-react';
-
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-
-import thung from '@/assets/thung.png';
-
-interface Props {
- courseData: Vod[];
-}
-
-export default function Video({ courseData }: Props) {
- const [expandedCards, setExpandedCards] = useState<{ [key: string]: boolean }>({});
-
- const toggleCard = (courseId: string) => {
- setExpandedCards((prev) => ({ ...prev, [courseId]: !prev[courseId] }));
- };
-
- const groupedData = courseData.reduce(
- (acc, item) => {
- const key = `${item.courseId}-${item.subject}-${item.range}`;
- if (!acc[key]) {
- acc[key] = [];
- }
- acc[key].push(item);
- return acc;
- },
- {} as Record
-
- {course.courseTitle}
- {course.title}
-
-
-
-
-
- {timeDifference.textColor.includes('red') ? (
-
- {'직접 확인'}
-
-
-
- );
- }
-
- const sortedVodGroups = Object.values(groupedData).sort((groupA, groupB) => {
- const firstA = groupA[0];
- const firstB = groupB[0];
-
- const isAX = firstA.weeklyAttendance.toUpperCase().startsWith('X');
- const isBX = firstB.weeklyAttendance.toUpperCase().startsWith('X');
-
- // X가 있는 항목을 먼저 정렬
- if (isAX && !isBX) return -1;
- if (!isAX && isBX) return 1;
-
- const rangeA = firstA.range;
- const rangeB = firstB.range;
- const isRangeANull = rangeA === null;
- const isRangeBNull = rangeB === null;
-
- // isCurrentDateInRange가 true인 항목을 먼저 정렬 (X와 O 모두)
- const isCurrentDateInRangeA = isCurrentDateInRange(firstA.range);
- const isCurrentDateInRangeB = isCurrentDateInRange(firstB.range);
-
- if (isAX) {
- // X일 때는 isCurrentDateInRange가 true인 항목을 먼저 배치, 그 다음 null
- if (isCurrentDateInRangeA && !isCurrentDateInRangeB) return -1;
- if (!isCurrentDateInRangeA && isCurrentDateInRangeB) return 1;
- if (isRangeANull && !isRangeBNull) return 1;
- if (!isRangeANull && isRangeBNull) return -1;
- } else {
- // O일 때는 isCurrentDateInRange가 true인 항목을 먼저 배치, 그 다음 null, 그 다음 시간순 정렬
- if (isCurrentDateInRangeA && !isCurrentDateInRangeB) return -1;
- if (!isCurrentDateInRangeA && isCurrentDateInRangeB) return 1;
- if (isRangeANull && !isRangeBNull) return 1;
- if (!isRangeANull && isRangeBNull) return -1;
-
- // rangeStart 날짜 기준으로 시간순으로 정렬
- if (!isRangeANull && !isRangeBNull) {
- const rangeStartA = rangeA.split(' ~ ')[0];
- const rangeStartB = rangeB.split(' ~ ')[0];
- const dateA = new Date(rangeStartA);
- const dateB = new Date(rangeStartB);
-
- if (dateA < dateB) return -1;
- if (dateA > dateB) return 1;
- }
- }
-
- // courseTitle로 기본 정렬
- if (firstA.courseTitle < firstB.courseTitle) return -1;
- if (firstA.courseTitle > firstB.courseTitle) return 1;
-
- return 0;
- });
-
- return (
-
- 강의가 없습니다
-
-
- {sortedVodGroups.map((vods, index) => {
- if (!vods || vods.length === 0) return null;
-
- const sortedVods = vods.slice().sort((a, b) => {
- const isAX = a.isAttendance.toUpperCase().startsWith('X');
- const isBX = b.isAttendance.toUpperCase().startsWith('X');
- if (isAX && !isBX) return -1;
- if (!isAX && isBX) return 1;
-
- if (a.range && b.range) {
- const rangeStartA = a.range.split(' ~ ')[0];
- const rangeStartB = b.range.split(' ~ ')[0];
- const dateA = new Date(rangeStartA);
- const dateB = new Date(rangeStartB);
- if (dateA < dateB) return -1;
- if (dateA > dateB) return 1;
- }
-
- if (a.courseTitle < b.courseTitle) return -1;
- if (a.courseTitle > b.courseTitle) return 1;
-
- return 0;
- });
-
- const item = vods[0];
- const isDueDateSame = true;
- const timeDifference = calculateTimeDifference(item.range);
- const isExpanded = expandedCards[`${item.title}-${index}`] || false;
-
- return (
-
- toggleCard(`${item.title}-${index}`)}
- >
-
- {isExpanded && (
-
- {sortedVods.map((vod, vodIndex) => {
- return (
-
- )}
-
-
-
-
-
- {calculateRemainingTimeByRange(vods[0].range)}
-
-
-
-
- );
- })}
-
- );
-}
diff --git a/src/hooks/useCalendarEvents.ts b/src/hooks/useCalendarEvents.ts
index cc5f1ac..60ad11f 100644
--- a/src/hooks/useCalendarEvents.ts
+++ b/src/hooks/useCalendarEvents.ts
@@ -1,100 +1,30 @@
import { useState, useEffect } from 'react';
-import { startOfDay } from 'date-fns';
-import { loadDataFromStorage } from '@/lib/storage';
-import { removeSquareBrackets } from '@/lib/utils';
-import { Vod, Assign, Quiz } from '@/content/types';
+import { loadAndTransform } from '@/lib/storage';
+import { Vod, Assign, Quiz } from '@/types';
+import { CalendarEvent, vodGroupsToEvents, dueDateItemToEvent } from '@/lib/transformCalendarEvents';
-export type CalendarEvent = {
- id: string;
- type: 'vod' | 'assign' | 'quiz';
- title: string;
- subject: string;
- start: Date | null;
- end: Date | null;
-};
+export type { CalendarEvent };
function useCalendarEvents() {
const [events, setEvents] = useState
-
- {isExpanded ? {item.courseTitle}
- {item.subject}
- window.open(`${vod.url.replace('view', 'viewer')}`, '_blank', 'VodContentWindow')}
- >
-
- );
- })}
-
- {vod.title}
-
-
- {formatDateString(vod.range)},{' '}
-
- {vod.length}
-
-
-
-
-
-
-
- {item.weeklyAttendance.toLocaleLowerCase().trim() === 'o' ? (
-
-
- {item.weeklyAttendance.toLocaleLowerCase().trim() === 'o' ? '출석' : '결석'}
-
-
+
+ );
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..957306a
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,67 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import koCommon from './locales/ko/common.json';
+import koPopover from './locales/ko/popover.json';
+import koPlayer from './locales/ko/player.json';
+
+import enCommon from './locales/en/common.json';
+import enPopover from './locales/en/popover.json';
+import enPlayer from './locales/en/player.json';
+
+import jaCommon from './locales/ja/common.json';
+import jaPopover from './locales/ja/popover.json';
+import jaPlayer from './locales/ja/player.json';
+
+import zhCommon from './locales/zh/common.json';
+import zhPopover from './locales/zh/popover.json';
+import zhPlayer from './locales/zh/player.json';
+
+export const SUPPORTED_LANGUAGES = [
+ { code: 'ko', label: '한국어' },
+ { code: 'en', label: 'English' },
+ { code: 'ja', label: '日本語' },
+ { code: 'zh', label: '中文' },
+] as const;
+
+export type LanguageCode = (typeof SUPPORTED_LANGUAGES)[number]['code'];
+
+function detectLanguage(): LanguageCode {
+ const navLang = navigator.language.split('-')[0];
+ const supported = SUPPORTED_LANGUAGES.map((l) => l.code) as readonly string[];
+ return supported.includes(navLang) ? (navLang as LanguageCode) : 'ko';
+}
+
+const resources = {
+ ko: { common: koCommon, popover: koPopover, player: koPlayer },
+ en: { common: enCommon, popover: enPopover, player: enPlayer },
+ ja: { common: jaCommon, popover: jaPopover, player: jaPlayer },
+ zh: { common: zhCommon, popover: zhPopover, player: zhPlayer },
+};
+
+i18n.use(initReactI18next).init({
+ resources,
+ lng: detectLanguage(),
+ fallbackLng: 'ko',
+ defaultNS: 'common',
+ ns: ['common', 'popover', 'player'],
+ interpolation: { escapeValue: false },
+});
+
+// chrome.storage에서 저장된 언어 설정을 불러와서 적용
+if (typeof chrome !== 'undefined' && chrome.storage?.local) {
+ chrome.storage.local.get('language', (result) => {
+ if (result.language && i18n.language !== result.language) {
+ i18n.changeLanguage(result.language);
+ }
+ });
+}
+
+export function changeLanguage(lng: LanguageCode) {
+ i18n.changeLanguage(lng);
+ if (typeof chrome !== 'undefined' && chrome.storage?.local) {
+ chrome.storage.local.set({ language: lng });
+ }
+}
+
+export default i18n;
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
new file mode 100644
index 0000000..8bb05ba
--- /dev/null
+++ b/src/i18n/locales/en/common.json
@@ -0,0 +1,132 @@
+{
+ "vod": "Lectures",
+ "assign": "Assignments",
+ "quiz": "Quizzes",
+ "setting": "Setting",
+ "dashboard": "Dashboard",
+ "close": "Close",
+ "clearAll": "Clear All",
+ "search": "Search",
+ "cancel": "Cancel",
+ "notFound": "404 Not Found",
+ "attendance": {
+ "attended": "Attended",
+ "absent": "Absent"
+ },
+ "submit": {
+ "done": "Submitted",
+ "needed": "Not Submitted",
+ "doneSpaced": "Submitted",
+ "neededSpaced": "Not Submitted"
+ },
+ "status": {
+ "notStarted": "Not Started",
+ "completed": "Completed",
+ "inProgress": "In Progress",
+ "checkManually": "Check Manually",
+ "checkManuallyNoSpace": "Check Manually"
+ },
+ "date": {
+ "noDeadline": "No Deadline",
+ "noInfo": "No Info",
+ "expired": "Expired",
+ "daysLater": "In {{days}} days",
+ "hoursLater": "In {{hours}} hours",
+ "minutesLater": "In {{minutes}} min",
+ "remaining": "{{days}}d {{hours}}h {{minutes}}m left",
+ "remainingHoursMinutes": "{{hours}}h {{minutes}}m left",
+ "remainingMinutes": "{{minutes}}m left",
+ "justNow": "Just now",
+ "daysAgo": "{{days}}d {{hours}}h {{minutes}}m ago",
+ "hoursAgo": "{{hours}}h {{minutes}}m ago",
+ "minutesAgo": "{{minutes}}m ago",
+ "ago": "ago",
+ "minutesAgoShort": "{{minutes}}m ago",
+ "hoursAgoShort": "{{hours}}h ago",
+ "monthYear": "MMMM yyyy",
+ "weekdays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+ },
+ "count": "{{count}}",
+ "countZero": "0",
+ "percentComplete": "{{percent}}% Done",
+ "error": {
+ "occurred": "An error occurred.",
+ "refreshPage": "Refresh Page"
+ },
+ "noRecords": "No records found.",
+ "empty": {
+ "vod": "No lectures",
+ "assign": "No assignments",
+ "quiz": "No quizzes"
+ },
+ "progress": "Progress",
+ "attendancePeriod": "Attendance Period",
+ "filterSet": "Filter Applied",
+ "language": "Language",
+ "contact": "Contact Us",
+ "calendar": {
+ "bannerTitle": "Google Calendar Sync",
+ "bannerDesc": "Manage your lectures, assignments, and quizzes on Google Calendar with Dotbugi",
+ "login": "Log In",
+ "sync": "Sync Tasks",
+ "syncShort": "Sync",
+ "logout": "Log Out",
+ "syncing": "Syncing...",
+ "syncSuccess": "{{count}} events added",
+ "syncNoNew": "Already up to date",
+ "syncFailed": "Failed to add {{failed}} events",
+ "syncPartial": "{{added}} added, {{failed}} failed",
+ "tokenExpired": "Google login has expired",
+ "tokenExpiredAction": "Log in again"
+ },
+ "refresh": "Refresh",
+ "refreshing": "Refreshing...",
+ "refreshSuccess": "Refresh complete",
+ "bubble": {
+ "tasks": "{{count}} left to go!",
+ "allDone": "All done!",
+ "updatedAgo": "As of {{time}}"
+ },
+ "courses": {
+ "title": "Manage Courses",
+ "desc": "Select which courses to track",
+ "community": "Community"
+ },
+ "hide": {
+ "task": "Hide this task",
+ "title": "Hidden Tasks",
+ "empty": "No hidden tasks",
+ "unhide": "Unhide"
+ },
+ "github": {
+ "likeProject": "Like this project?",
+ "starOnGithub": "Star us on GitHub!"
+ },
+ "courseStatus": {
+ "vod": {
+ "completed": "Attended",
+ "inProgress": "Watching",
+ "absent": "Absent",
+ "pending": "Not Watched"
+ },
+ "assign": {
+ "completed": "Submitted",
+ "late": "Late Submission",
+ "absent": "Not Submitted (Closed)",
+ "pending": "Not Submitted"
+ },
+ "quiz": {
+ "completed": "Taken",
+ "absent": "Not Taken (Closed)",
+ "pending": "Not Taken"
+ },
+ "hidden": "Hidden",
+ "currentWeek": "This Week",
+ "goToCurrentWeek": "Go to this week",
+ "bar": {
+ "loading": "Loading info...",
+ "success": "Info loaded",
+ "error": "Failed to load info"
+ }
+ }
+}
diff --git a/src/i18n/locales/en/player.json b/src/i18n/locales/en/player.json
new file mode 100644
index 0000000..6264d64
--- /dev/null
+++ b/src/i18n/locales/en/player.json
@@ -0,0 +1,13 @@
+{
+ "noVideoInfo": "No video information",
+ "startPrompt": "Press the Start button to begin auto-play",
+ "stopWatching": "Stop",
+ "expectedEnd": "Done by {{time}}",
+ "doneWatching": "Completed",
+ "startWatching": "Start",
+ "lectureList": "Lecture List",
+ "noVideos": "No videos to watch",
+ "refreshPrompt": "Click Dotbugi to refresh lectures",
+ "appIcon": "Dotbugi Icon",
+ "appName": "Dotbugi 🔎"
+}
diff --git a/src/i18n/locales/en/popover.json b/src/i18n/locales/en/popover.json
new file mode 100644
index 0000000..b0b40e5
--- /dev/null
+++ b/src/i18n/locales/en/popover.json
@@ -0,0 +1,13 @@
+{
+ "header": {
+ "vodList": "Online Lectures",
+ "assignList": "Assignments",
+ "quizList": "Quizzes",
+ "setting": "Setting"
+ },
+ "pending": {
+ "title": "Request in Progress",
+ "message": "Please wait while the request is being processed.",
+ "autoClose": "This window will close automatically when done."
+ }
+}
diff --git a/src/i18n/locales/ja/common.json b/src/i18n/locales/ja/common.json
new file mode 100644
index 0000000..6010c23
--- /dev/null
+++ b/src/i18n/locales/ja/common.json
@@ -0,0 +1,132 @@
+{
+ "vod": "講義",
+ "assign": "課題",
+ "quiz": "クイズ",
+ "setting": "設定",
+ "dashboard": "ダッシュボード",
+ "close": "閉じる",
+ "clearAll": "すべてクリア",
+ "search": "検索",
+ "cancel": "キャンセル",
+ "notFound": "404 Not Found",
+ "attendance": {
+ "attended": "出席",
+ "absent": "欠席"
+ },
+ "submit": {
+ "done": "提出済み",
+ "needed": "未提出",
+ "doneSpaced": "提出済み",
+ "neededSpaced": "未提出"
+ },
+ "status": {
+ "notStarted": "未学習",
+ "completed": "学習完了",
+ "inProgress": "学習中",
+ "checkManually": "直接確認",
+ "checkManuallyNoSpace": "直接確認"
+ },
+ "date": {
+ "noDeadline": "期限なし",
+ "noInfo": "情報なし",
+ "expired": "締切",
+ "daysLater": "{{days}}日後",
+ "hoursLater": "{{hours}}時間後",
+ "minutesLater": "{{minutes}}分後",
+ "remaining": "{{days}}日{{hours}}時間{{minutes}}分 残り",
+ "remainingHoursMinutes": "{{hours}}時間{{minutes}}分 残り",
+ "remainingMinutes": "{{minutes}}分 残り",
+ "justNow": "たった今",
+ "daysAgo": "{{days}}日{{hours}}時間{{minutes}}分前",
+ "hoursAgo": "{{hours}}時間{{minutes}}分前",
+ "minutesAgo": "{{minutes}}分前",
+ "ago": "前",
+ "minutesAgoShort": "{{minutes}}分前",
+ "hoursAgoShort": "{{hours}}時間前",
+ "monthYear": "yyyy年 MM月",
+ "weekdays": ["日", "月", "火", "水", "木", "金", "土"]
+ },
+ "count": "{{count}} 件",
+ "countZero": "0 件",
+ "percentComplete": "{{percent}}% 完了",
+ "error": {
+ "occurred": "エラーが発生しました。",
+ "refreshPage": "ページを更新"
+ },
+ "noRecords": "記録がありません。",
+ "empty": {
+ "vod": "講義がありません",
+ "assign": "課題がありません",
+ "quiz": "クイズがありません"
+ },
+ "progress": "進捗率",
+ "attendancePeriod": "出席認定期間",
+ "filterSet": "フィルター適用中",
+ "language": "言語",
+ "contact": "お問い合わせ",
+ "calendar": {
+ "bannerTitle": "Google Calendar 連携",
+ "bannerDesc": "Dotbugiで講義・課題・クイズの日程をGoogle Calendarで管理しましょう",
+ "login": "ログイン",
+ "sync": "タスク同期",
+ "syncShort": "同期",
+ "logout": "ログアウト",
+ "syncing": "同期中...",
+ "syncSuccess": "{{count}}件の予定を追加しました",
+ "syncNoNew": "すでに最新です",
+ "syncFailed": "{{failed}}件の追加に失敗しました",
+ "syncPartial": "{{added}}件追加、{{failed}}件失敗",
+ "tokenExpired": "Googleログインの期限が切れました",
+ "tokenExpiredAction": "再ログイン"
+ },
+ "refresh": "更新",
+ "refreshing": "更新中...",
+ "refreshSuccess": "更新完了",
+ "bubble": {
+ "tasks": "あと{{count}}件あるよ！",
+ "allDone": "全部完了！",
+ "updatedAgo": "{{time}} 時点"
+ },
+ "courses": {
+ "title": "受講科目管理",
+ "desc": "追跡する科目を選択してください",
+ "community": "コミュニティ"
+ },
+ "hide": {
+ "task": "このタスクを非表示",
+ "title": "非表示のタスク",
+ "empty": "非表示のタスクはありません",
+ "unhide": "再表示"
+ },
+ "github": {
+ "likeProject": "このプロジェクトが気に入りましたか？",
+ "starOnGithub": "GitHubでスターをお願いします！"
+ },
+ "courseStatus": {
+ "vod": {
+ "completed": "出席",
+ "inProgress": "視聴中",
+ "absent": "欠席",
+ "pending": "未視聴"
+ },
+ "assign": {
+ "completed": "提出済み",
+ "late": "遅れた提出",
+ "absent": "未提出 (締切)",
+ "pending": "未提出"
+ },
+ "quiz": {
+ "completed": "受験済み",
+ "absent": "未受験 (締切)",
+ "pending": "未受験"
+ },
+ "hidden": "非表示",
+ "currentWeek": "今週",
+ "goToCurrentWeek": "今週へ移動",
+ "bar": {
+ "loading": "情報を読み込み中...",
+ "success": "情報の読み込み完了",
+ "error": "情報の読み込みに失敗しました"
+ }
+ }
+}
diff --git a/src/i18n/locales/ja/player.json b/src/i18n/locales/ja/player.json
new file mode 100644
index 0000000..b1a46e4
--- /dev/null
+++ b/src/i18n/locales/ja/player.json
@@ -0,0 +1,13 @@
+{
+ "noVideoInfo": "映像情報がありません",
+ "startPrompt": "自動受講を開始するには受講開始ボタンを押してください",
+ "stopWatching": "受講終了",
+ "expectedEnd": "{{time}} 完了予定",
+ "doneWatching": "受講完了",
+ "startWatching": "受講開始",
+ "lectureList": "講義リスト",
+ "noVideos": "受講する映像がありません",
+ "refreshPrompt": "Dotbugiをクリックして講義を更新してください",
+ "appIcon": "Dotbugiアイコン",
+ "appName": "Dotbugi 🔎"
+}
diff --git a/src/i18n/locales/ja/popover.json b/src/i18n/locales/ja/popover.json
new file mode 100644
index 0000000..b925ddd
--- /dev/null
+++ b/src/i18n/locales/ja/popover.json
@@ -0,0 +1,13 @@
+{
+ "header": {
+ "vodList": "オンライン講義一覧",
+ "assignList": "課題一覧",
+ "quizList": "クイズ一覧",
+ "setting": "設定"
+ },
+ "pending": {
+ "title": "リクエスト処理中",
+ "message": "リクエストを処理しています。しばらくお待ちください。",
+ "autoClose": "完了すると自動的にウィンドウが閉じます。"
+ }
+}
diff --git a/src/i18n/locales/ko/common.json b/src/i18n/locales/ko/common.json
new file mode 100644
index 0000000..7efde54
--- /dev/null
+++ b/src/i18n/locales/ko/common.json
@@ -0,0 +1,132 @@
+{
+ "vod": "강의",
+ "assign": "과제",
+ "quiz": "퀴즈",
+ "setting": "설정",
+ "dashboard": "대시보드",
+ "close": "닫기",
+ "clearAll": "모두 지우기",
+ "search": "검색",
+ "cancel": "취소",
+ "notFound": "404 Not Found",
+ "attendance": {
+ "attended": "출석",
+ "absent": "결석"
+ },
+ "submit": {
+ "done": "제출완료",
+ "needed": "제출필요",
+ "doneSpaced": "제출 완료",
+ "neededSpaced": "제출 필요"
+ },
+ "status": {
+ "notStarted": "학습전",
+ "completed": "학습완료",
+ "inProgress": "학습중",
+ "checkManually": "직접 확인",
+ "checkManuallyNoSpace": "직접확인"
+ },
+ "date": {
+ "noDeadline": "기한없음",
+ "noInfo": "정보없음",
+ "expired": "마감",
+ "daysLater": "{{days}}일 후",
+ "hoursLater": "{{hours}}시간 후",
+ "minutesLater": "{{minutes}}분 후",
+ "remaining": "{{days}}일 {{hours}}시간 {{minutes}}분 남음",
+ "remainingHoursMinutes": "{{hours}}시간 {{minutes}}분 남음",
+ "remainingMinutes": "{{minutes}}분 남음",
+ "justNow": "지금 막",
+ "daysAgo": "{{days}}일 {{hours}}시간 {{minutes}}분 전",
+ "hoursAgo": "{{hours}}시간 {{minutes}}분 전",
+ "minutesAgo": "{{minutes}}분 전",
+ "ago": "전",
+ "minutesAgoShort": "{{minutes}}분 전",
+ "hoursAgoShort": "{{hours}}시간 전",
+ "monthYear": "yyyy년 MM월",
+ "weekdays": ["일", "월", "화", "수", "목", "금", "토"]
+ },
+ "count": "{{count}} 개",
+ "countZero": "0 개",
+ "percentComplete": "{{percent}}% 완료",
+ "error": {
+ "occurred": "오류가 발생했습니다.",
+ "refreshPage": "페이지 새로고침"
+ },
+ "noRecords": "기록이 존재하지 않습니다.",
+ "empty": {
+ "vod": "강의가 없습니다",
+ "assign": "과제가 없습니다",
+ "quiz": "퀴즈가 없습니다"
+ },
+ "progress": "진도율",
+ "attendancePeriod": "출석인정기간",
+ "filterSet": "필터 설정됨",
+ "language": "언어",
+ "contact": "문의하기",
+ "calendar": {
+ "bannerTitle": "Google Calendar 연동",
+ "bannerDesc": "돋부기를 통해 강의, 과제, 퀴즈 일정을 Google Calendar로 관리하세요",
+ "login": "로그인",
+ "sync": "태스크 동기화",
+ "syncShort": "동기화",
+ "logout": "로그아웃",
+ "syncing": "동기화 중...",
+ "syncSuccess": "{{count}}개 일정이 추가되었어요",
+ "syncNoNew": "이미 최신 상태예요",
+ "syncFailed": "{{failed}}개 일정 추가에 실패했어요",
+ "syncPartial": "{{added}}개 추가, {{failed}}개 실패",
+ "tokenExpired": "Google 로그인이 만료되었어요",
+ "tokenExpiredAction": "다시 로그인"
+ },
+ "refresh": "새로고침",
+ "refreshing": "새로고침 중...",
+ "refreshSuccess": "새로고침 완료",
+ "bubble": {
+ "tasks": "아직 {{count}}개 남았어요!",
+ "allDone": "모두 완료했어요!",
+ "updatedAgo": "{{time}} 기준"
+ },
+ "courses": {
+ "title": "수강 과목 관리",
+ "desc": "추적할 과목을 선택하세요",
+ "community": "비교과"
+ },
+ "hide": {
+ "task": "이 태스크 숨기기",
+ "title": "숨긴 태스크",
+ "empty": "숨긴 태스크가 없습니다",
+ "unhide": "숨김 해제"
+ },
+ "github": {
+ "likeProject": "이 프로젝트가 마음에 드시나요?",
+ "starOnGithub": "GitHub에서 스타를 눌러주세요!"
+ },
+ "courseStatus": {
+ "vod": {
+ "completed": "출석",
+ "inProgress": "시청중",
+ "absent": "결석",
+ "pending": "미시청"
+ },
+ "assign": {
+ "completed": "제출완료",
+ "late": "늦은 제출",
+ "absent": "미제출 (마감)",
+ "pending": "미제출"
+ },
+ "quiz": {
+ "completed": "응시완료",
+ "absent": "미응시 (마감)",
+ "pending": "미응시"
+ },
+ "hidden": "숨김",
+ "currentWeek": "현재 주차",
+ "goToCurrentWeek": "현재 주차로 이동",
+ "bar": {
+ "loading": "정보 불러오는 중...",
+ "success": "정보 불러오기 완료",
+ "error": "정보를 불러오지 못했습니다"
+ }
+ }
+}
diff --git a/src/i18n/locales/ko/player.json b/src/i18n/locales/ko/player.json
new file mode 100644
index 0000000..a2783b5
--- /dev/null
+++ b/src/i18n/locales/ko/player.json
@@ -0,0 +1,13 @@
+{
+ "noVideoInfo": "영상 정보가 없습니다",
+ "startPrompt": "자동수강을 시작하려면 수강시작 버튼을 눌러주세요",
+ "stopWatching": "수강 종료",
+ "expectedEnd": "{{time}} 완료 예정",
+ "doneWatching": "수강 완료",
+ "startWatching": "수강 시작",
+ "lectureList": "강의 목록",
+ "noVideos": "수강할 영상이 없습니다",
+ "refreshPrompt": "이클래스 돋부기를 눌러 강의를 새로고침 해주세요",
+ "appIcon": "돋부기 아이콘",
+ "appName": "돋부기 🔎"
+}
diff --git a/src/i18n/locales/ko/popover.json b/src/i18n/locales/ko/popover.json
new file mode 100644
index 0000000..5339495
--- /dev/null
+++ b/src/i18n/locales/ko/popover.json
@@ -0,0 +1,13 @@
+{
+ "header": {
+ "vodList": "온라인 강의 목록",
+ "assignList": "과제 목록",
+ "quizList": "퀴즈 목록",
+ "setting": "설정"
+ },
+ "pending": {
+ "title": "요청 진행 중",
+ "message": "요청이 진행중입니다. 잠시만 기다려주세요.",
+ "autoClose": "완료되면 자동으로 창이 닫힙니다."
+ }
+}
diff --git a/src/i18n/locales/zh/common.json b/src/i18n/locales/zh/common.json
new file mode 100644
index 0000000..f6eee61
--- /dev/null
+++ b/src/i18n/locales/zh/common.json
@@ -0,0 +1,133 @@
+{
+ "vod": "课程",
+ "assign": "作业",
+ "quiz": "测验",
+
+ "setting": "设置",
+ "dashboard": "仪表盘",
+ "close": "关闭",
+ "clearAll": "全部清除",
+ "search": "搜索",
+ "cancel": "取消",
+ "notFound": "404 Not Found",
+ "attendance": {
+ "attended": "出勤",
+ "absent": "缺勤"
+ },
+ "submit": {
+ "done": "已提交",
+ "needed": "未提交",
+ "doneSpaced": "已提交",
+ "neededSpaced": "未提交"
+ },
+ "status": {
+ "notStarted": "未学习",
+ "completed": "学习完成",
+ "inProgress": "学习中",
+ "checkManually": "手动确认",
+ "checkManuallyNoSpace": "手动确认"
+ },
+ "date": {
+ "noDeadline": "无截止日",
+ "noInfo": "无信息",
+ "expired": "已截止",
+ "daysLater": "{{days}}天后",
+ "hoursLater": "{{hours}}小时后",
+ "minutesLater": "{{minutes}}分钟后",
+ "remaining": "剩余{{days}}天{{hours}}小时{{minutes}}分钟",
+ "remainingHoursMinutes": "剩余{{hours}}小时{{minutes}}分钟",
+ "remainingMinutes": "剩余{{minutes}}分钟",
+ "justNow": "刚刚",
+ "daysAgo": "{{days}}天{{hours}}小时{{minutes}}分钟前",
+ "hoursAgo": "{{hours}}小时{{minutes}}分钟前",
+ "minutesAgo": "{{minutes}}分钟前",
+ "ago": "前",
+ "minutesAgoShort": "{{minutes}}分钟前",
+ "hoursAgoShort": "{{hours}}小时前",
+ "monthYear": "yyyy年 MM月",
+ "weekdays": ["日", "一", "二", "三", "四", "五", "六"]
+ },
+ "count": "{{count}} 个",
+ "countZero": "0 个",
+ "percentComplete": "{{percent}}% 完成",
+ "error": {
+ "occurred": "发生了错误。",
+ "refreshPage": "刷新页面"
+ },
+ "noRecords": "没有记录。",
+ "empty": {
+ "vod": "没有课程",
+ "assign": "没有作业",
+ "quiz": "没有测验"
+ },
+ "progress": "进度",
+ "attendancePeriod": "出勤认定期间",
+ "filterSet": "已设置筛选",
+ "language": "语言",
+ "contact": "联系我们",
+ "calendar": {
+ "bannerTitle": "Google Calendar 同步",
+ "bannerDesc": "通过Dotbugi在Google Calendar上管理课程、作业和测验日程",
+ "login": "登录",
+ "sync": "同步任务",
+ "syncShort": "同步",
+ "logout": "退出登录",
+ "syncing": "同步中...",
+ "syncSuccess": "已添加{{count}}个日程",
+ "syncNoNew": "已是最新状态",
+ "syncFailed": "{{failed}}个日程添加失败",
+ "syncPartial": "已添加{{added}}个，{{failed}}个失败",
+ "tokenExpired": "Google登录已过期",
+ "tokenExpiredAction": "重新登录"
+ },
+ "refresh": "刷新",
+ "refreshing": "刷新中...",
+ "refreshSuccess": "刷新完成",
+ "bubble": {
+ "tasks": "还剩{{count}}个哦！",
+ "allDone": "全部完成！",
+ "updatedAgo": "{{time}}基准"
+ },
+ "courses": {
+ "title": "课程管理",
+ "desc": "选择要追踪的课程",
+ "community": "社区"
+ },
+ "hide": {
+ "task": "隐藏此任务",
+ "title": "已隐藏的任务",
+ "empty": "没有隐藏的任务",
+ "unhide": "取消隐藏"
+ },
+ "github": {
+ "likeProject": "喜欢这个项目吗？",
+ "starOnGithub": "在GitHub上给我们加星！"
+ },
+ "courseStatus": {
+ "vod": {
+ "completed": "出勤",
+ "inProgress": "观看中",
+ "absent": "缺勤",
+ "pending": "未观看"
+ },
+ "assign": {
+ "completed": "已提交",
+ "late": "逾期提交",
+ "absent": "未提交 (截止)",
+ "pending": "未提交"
+ },
+ "quiz": {
+ "completed": "已参加",
+ "absent": "未参加 (截止)",
+ "pending": "未参加"
+ },
+ "hidden": "已隐藏",
+ "currentWeek": "本周",
+ "goToCurrentWeek": "跳转到本周",
+ "bar": {
+ "loading": "正在加载信息...",
+ "success": "信息加载完成",
+ "error": "信息加载失败"
+ }
+ }
+}
diff --git a/src/i18n/locales/zh/player.json b/src/i18n/locales/zh/player.json
new file mode 100644
index 0000000..3289a26
--- /dev/null
+++ b/src/i18n/locales/zh/player.json
@@ -0,0 +1,13 @@
+{
+ "noVideoInfo": "没有视频信息",
+ "startPrompt": "请按开始按钮开始自动播放",
+ "stopWatching": "停止学习",
+ "expectedEnd": "预计{{time}}完成",
+ "doneWatching": "学习完成",
+ "startWatching": "开始学习",
+ "lectureList": "课程列表",
+ "noVideos": "没有可观看的视频",
+ "refreshPrompt": "点击Dotbugi刷新课程",
+ "appIcon": "Dotbugi图标",
+ "appName": "Dotbugi 🔎"
+}
diff --git a/src/i18n/locales/zh/popover.json b/src/i18n/locales/zh/popover.json
new file mode 100644
index 0000000..6f63c7a
--- /dev/null
+++ b/src/i18n/locales/zh/popover.json
@@ -0,0 +1,13 @@
+{
+ "header": {
+ "vodList": "在线课程列表",
+ "assignList": "作业列表",
+ "quizList": "测验列表",
+ "setting": "设置"
+ },
+ "pending": {
+ "title": "请求处理中",
+ "message": "正在处理请求，请稍候。",
+ "autoClose": "完成后窗口将自动关闭。"
+ }
+}
diff --git a/src/lib/attendance.ts b/src/lib/attendance.ts
new file mode 100644
index 0000000..789f4bb
--- /dev/null
+++ b/src/lib/attendance.ts
@@ -0,0 +1,7 @@
+export function isAttended(value: string) {
+ return value.toLowerCase().trim() === 'o';
+}
+
+export function isAbsent(value: string) {
+ return value.toUpperCase().startsWith('X');
+}
diff --git a/src/lib/cache.ts b/src/lib/cache.ts
new file mode 100644
index 0000000..74f5233
--- /dev/null
+++ b/src/lib/cache.ts
@@ -0,0 +1,18 @@
+export const REFRESH_INTERVAL_MS = 60 * 1000;
+export const CACHE_TTL_MINUTES = 60; // 1시간
+export const CACHE_TTL_MS = CACHE_TTL_MINUTES * REFRESH_INTERVAL_MS;
+
+const CACHE_KEY = 'lastRequestTime';
+
+export function getLastRequestTime(): number | null {
+ const raw = localStorage.getItem(CACHE_KEY);
+ return raw ? parseInt(raw, 10) : null;
+}
+
+export function setLastRequestTime(time: number): void {
+ localStorage.setItem(CACHE_KEY, time.toString());
+}
+
+export function clearLastRequestTime(): void {
+ localStorage.removeItem(CACHE_KEY);
+}
diff --git a/src/lib/calendarUtils.ts b/src/lib/calendarUtils.ts
index b363825..2a3f20e 100644
--- a/src/lib/calendarUtils.ts
+++ b/src/lib/calendarUtils.ts
@@ -1,8 +1,9 @@
-import { CalendarEvent } from '@/hooks/useCalendarEvents';
+import { CalendarEvent } from '@/lib/transformCalendarEvents';
export type GoogleCalendarEvent = {
summary: string;
description?: string;
+ colorId?: string;
start: {
dateTime: string;
timeZone: string;
@@ -13,79 +14,190 @@ export type GoogleCalendarEvent = {
};
};
-export const getOAuthToken = async (): Promise
-
-
-
-
-
-
-
-
-
- );
-}
-
-interface CourseCardProps {
- course: CourseBase;
- colorSetting: CourseColorSetting;
- originalColor: string;
- onColorChange: (
- courseId: string,
- color: string,
- colorType: 'solid' | 'gradient',
- gradient?: string,
- opacity?: number
- ) => void;
- onReset: () => void;
-}
-
-function CourseCard({ course, colorSetting, originalColor, onColorChange, onReset }: CourseCardProps) {
- const hasChanged = colorSetting.color !== originalColor;
- const [customColor, setCustomColor] = useState(colorSetting.color);
- const [customGradient, setCustomGradient] = useState(
- colorSetting.gradient || 'linear-gradient(to right, #ff75c3, #ffa647)'
- );
- const [gradientStartColor, setGradientStartColor] = useState('#ff75c3');
- const [gradientEndColor, setGradientEndColor] = useState('#ffa647');
- const [opacity, setOpacity] = useState(colorSetting.opacity || 1);
-
- useEffect(() => {
- setCustomColor(colorSetting.color);
- setOpacity(colorSetting.opacity || 1);
- if (colorSetting.gradient) {
- setCustomGradient(colorSetting.gradient);
-
- const gradientMatch = colorSetting.gradient.match(
- /linear-gradient\(to right, (#[0-9a-fA-F]{3,6}), (#[0-9a-fA-F]{3,6})\)/
- );
- if (gradientMatch) {
- setGradientStartColor(gradientMatch[1]);
- setGradientEndColor(gradientMatch[2]);
- }
- }
- }, [colorSetting]);
-
- const getBackgroundStyle = () => {
- const opacityValue = opacity !== undefined ? opacity : 1;
-
- switch (colorSetting.colorType) {
- case 'gradient':
- if (colorSetting.gradient) {
- const gradientMatch = colorSetting.gradient.match(
- /linear-gradient\(to right, (#[0-9a-fA-F]{3,6}), (#[0-9a-fA-F]{3,6})\)/
- );
-
- if (gradientMatch) {
- const startColor = gradientMatch[1];
- const endColor = gradientMatch[2];
- const startRgba = hexToRgba(startColor, opacityValue);
- const endRgba = hexToRgba(endColor, opacityValue);
- return { background: `linear-gradient(to right, ${startRgba}, ${endRgba})` };
- }
- return { background: colorSetting.gradient };
- }
- return { background: customGradient };
-
- case 'solid':
- default:
- return { backgroundColor: hexToRgba(colorSetting.color, opacityValue) };
- }
- };
-
- const hexToRgba = (hex: string, opacity: number) => {
- hex = hex.replace('#', '');
-
- let r, g, b;
- if (hex.length === 3) {
- r = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
- g = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
- b = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
- } else {
- r = Number.parseInt(hex.substring(0, 2), 16);
- g = Number.parseInt(hex.substring(2, 4), 16);
- b = Number.parseInt(hex.substring(4, 6), 16);
- }
-
- return `rgba(${r}, ${g}, ${b}, ${opacity})`;
- };
-
- const handleOpacityChange = (value: number) => {
- setOpacity(value);
- if (colorSetting.colorType === 'solid') {
- onColorChange(course.courseId, customColor, 'solid', undefined, value);
- } else {
- onColorChange(course.courseId, customGradient, 'gradient', customGradient, value);
- }
- };
-
- const handleCustomColorChange = (value: string) => {
- setCustomColor(value);
- onColorChange(course.courseId, value, 'solid', undefined, opacity);
- };
-
- const handleGradientColorChange = (startColor: string, endColor: string) => {
- const newGradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
- setGradientStartColor(startColor);
- setGradientEndColor(endColor);
- setCustomGradient(newGradient);
- onColorChange(course.courseId, newGradient, 'gradient', newGradient, opacity);
- };
-
- const opacitySlider = (
-
-
-
- 강의 색상 설정
-각 강의에 표시될 색상을 설정합니다.
-
- {courses.map((course) => (
- resetToOriginal(course.courseId)}
- />
- ))}
-
-
-
-
-
-
-
- );
-
- return (
-
-
- {Math.round(opacity * 100)}%
-
- handleOpacityChange(Number.parseFloat(e.target.value))}
- className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
- />
-
-
-
-
-
-
-
-
-
- Solid
-
-
- Gradient
-
-
-
-
-
- {colorPresets.map((color) => (
-
- (null);
- const [events, setEvents] = useState([]);
-
- const fetchCalendarEvents = (token: string) => {
- fetch(
- 'https://www.googleapis.com/calendar/v3/calendars/primary/events?timeMin=' +
- new Date().toISOString() +
- '&orderBy=startTime&singleEvents=true',
- {
- headers: {
- Authorization: `Bearer ${token}`,
- },
- }
- )
- .then((response) => response.json())
- .then((data) => setEvents(data.items || []))
- .catch((error) => console.error('캘린더 이벤트 가져오기 실패:', error));
- };
-
- useEffect(() => {
- chrome.identity.getAuthToken({ interactive: false }, (cachedToken) => {
- if (chrome.runtime.lastError || !cachedToken) {
- console.error('자동 로그인 실패:', chrome.runtime.lastError?.message);
- } else {
- setToken(cachedToken);
- fetchCalendarEvents(cachedToken);
- }
- });
- }, []);
-
- const handleLogin = () => {
- chrome.identity.getAuthToken({ interactive: true }, (newToken) => {
- if (chrome.runtime.lastError || !newToken) {
- console.error(chrome.runtime.lastError);
- return;
- }
- setToken(newToken);
- fetchCalendarEvents(newToken);
- });
- };
-
- const handleLogout = () => {
- if (!token) return;
-
- chrome.identity.removeCachedAuthToken({ token }, () => {
- fetch(`https://oauth2.googleapis.com/revoke?token=${token}`, {
- method: 'POST',
- headers: {
- 'Content-type': 'application/x-www-form-urlencoded',
- },
- })
- .then((response) => {
- if (response.ok) {
- setToken(null);
- setEvents([]);
- } else {
- console.error('토큰 폐기 요청에 실패했습니다.');
- }
- })
- .catch((error) => {
- console.error('에러 발생:', error);
- });
- });
- };
-
- const addCalendarEvent = () => {
- if (!token) return;
-
- const event = {
- summary: '테스트 이벤트 🎉',
- description: '이것은 Google Calendar API를 사용한 이벤트 생성입니다.',
- start: {
- dateTime: new Date().toISOString(),
- timeZone: 'Asia/Seoul',
- },
- end: {
- dateTime: new Date(new Date().getTime() + 60 * 60 * 1000).toISOString(),
- timeZone: 'Asia/Seoul',
- },
- };
-
- fetch('https://www.googleapis.com/calendar/v3/calendars/primary/events', {
- method: 'POST',
- headers: {
- Authorization: `Bearer ${token}`,
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(event),
- })
- .then((response) => response.json())
- .then(() => {
- alert('새로운 이벤트가 추가되었습니다!');
- fetchCalendarEvents(token);
- })
- .catch((error) => console.error('이벤트 추가 실패:', error));
- };
-
- return (
- = ({ to, icon, label }) => {
- const location = useLocation();
- const isActive = location.pathname === to; // 현재 경로와 to가 일치하는지 확인
-
- return (
-
-
- {icon}
- {label}
-
-
- );
-};
-
-export default Sidebar;
diff --git a/src/option/SummaryCard.tsx b/src/option/SummaryCard.tsx
deleted file mode 100644
index 2162a84..0000000
--- a/src/option/SummaryCard.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { Progress } from '@/components/ui/progress';
-import useCardData from '@/hooks/useCardData';
-import { Zap, Video, NotebookTextIcon } from 'lucide-react';
-import { ReactNode } from 'react';
-import clsx from 'clsx';
-import { Link } from 'react-router-dom';
-
-interface CardItemProps {
- title: string;
- icon: ReactNode;
- data: { done: number; total: number }[];
- color: string;
- link: string;
-}
-
-const colorMap: Record = {
- blue: 'bg-blue-500',
- violet: 'bg-violet-500',
- amber: 'bg-amber-500',
- red: 'bg-red-500',
- green: 'bg-green-500',
-};
-
-export default function SummaryCard() {
- const { vodSummary, assignSummary, quizSummary } = useCardData();
-
- const CardItem = ({ title, icon, data, color, link }: CardItemProps) => {
- const done = data.length > 0 ? data[0].done : 0;
- const total = data.length > 0 ? data[0].total : 1;
- const percentage = Math.round((done / total) * 100);
- const bgColorClass = colorMap[color] || 'bg-gray-500'; // 기본값 설정
-
- return (
-
-
-
-
-
- {title.includes('퀴즈') ? (
-
-
-
- );
- };
-
- return (
- (new Date());
- const [selectedDate, setSelectedDate] = useState(null);
-
- // 필터 state 관리
- const [selectedFilters, setSelectedFilters] = useState([]);
- const [isFilterOpen, setIsFilterOpen] = useState(false);
-
- const typeFilters = [
- { value: 'vod', label: '동영상 강의' },
- { value: 'assign', label: '과제' },
- { value: 'quiz', label: '퀴즈' },
- ];
-
- const titleFilters = Array.from(new Set(events.map((event) => event.title))).map((title) => ({
- value: title,
- label: title,
- }));
-
- const filterOptions = [...typeFilters, ...titleFilters];
-
- const toggleFilter = (filter: string) => {
- setSelectedFilters((prev) => (prev.includes(filter) ? prev.filter((f) => f !== filter) : [...prev, filter]));
- };
-
- const clearFilters = () => {
- setSelectedFilters([]);
- };
-
- const isFilterSet = selectedFilters.length > 0;
-
- const firstDayOfMonth = startOfMonth(currentMonth);
- const startDate = startOfWeek(firstDayOfMonth, { weekStartsOn: 0 });
- const dayList = useMemo(() => {
- return Array.from({ length: 42 }, (_, i) => addDays(startDate, i));
- }, [startDate]);
-
- const handlePrevMonth = () => {
- setCurrentMonth((prev) => subMonths(prev, 1));
- };
-
- const handleNextMonth = () => {
- setCurrentMonth((prev) => addMonths(prev, 1));
- };
-
- const handleSelectDate = (date: Date) => {
- if (isSameMonth(date, currentMonth)) {
- setSelectedDate(date);
- } else {
- if (isBefore(date, firstDayOfMonth)) {
- handlePrevMonth();
- } else {
- handleNextMonth();
- }
- setSelectedDate(date);
- }
- };
-
- const eventsWithRow = useMemo(() => {
- const sorted = [...events].sort((a, b) => {
- const aTime = a.start ? a.start.getTime() : Number.MIN_SAFE_INTEGER;
- const bTime = b.start ? b.start.getTime() : Number.MIN_SAFE_INTEGER;
- return aTime - bTime;
- });
-
- const assigned: CalendarEventWithRow[] = [];
- for (const event of sorted) {
- let row = 0;
- while (assigned.some((e) => e.row === row && eventsOverlap(e, event))) {
- row++;
- }
- assigned.push({ ...event, row });
- }
- return assigned;
- }, [events]);
-
- const subjectList = useMemo(() => {
- return Array.from(new Set(events.map((event) => event.title)));
- }, [events]);
-
- const subjectColorMap = useMemo(() => {
- const map: { [key: string]: string } = {};
- subjectList.forEach((subject, index) => {
- map[subject] = colorClasses[index % colorClasses.length];
- });
- return map;
- }, [subjectList]);
-
- // 저장소에서 강의 색상 데이터 불러오기 (vod 데이터에 적용)
- const [courseColors, setCourseColors] = useState<{
- [courseId: string]: { color: string; colorType: string; gradient?: string; opacity: number };
- } | null>(null);
-
- useEffect(() => {
- loadDataFromStorage('courseColors', (data: string | null) => {
- if (data) {
- try {
- const parsedData = JSON.parse(data);
- const map = Array.isArray(parsedData)
- ? parsedData.reduce(
- (acc, cur) => {
- acc[cur.courseId] = cur;
- return acc;
- },
- {} as { [courseId: string]: { color: string; colorType: string; gradient?: string; opacity: number } }
- )
- : {};
- setCourseColors(map);
- } catch (error) {
- console.error('courseColors 파싱 에러:', error);
- }
- }
- });
- }, []);
-
- const renderEvents = (day: Date, isCurrent: boolean) => {
- const weekStart = startOfWeek(day, { weekStartsOn: 0 });
- const weekEnd = addDays(weekStart, 6);
-
- const weekEvents = eventsWithRow.filter(
- (event) => event.end !== null && event.start !== null && event.end >= weekStart && event.start <= weekEnd
- );
-
- const weekStack: { [eventId: string]: number } = {};
- weekEvents
- .sort((a, b) => {
- const aTime = a.start ? a.start.getTime() : Number.MIN_SAFE_INTEGER;
- const bTime = b.start ? b.start.getTime() : Number.MIN_SAFE_INTEGER;
- return aTime - bTime;
- })
- .forEach((event) => {
- let row = 0;
- while (
- Object.entries(weekStack).some(([id, assignedRow]) => {
- if (id === event.id) return false;
- const assignedEvent = weekEvents.find((e) => e.id === id);
- if (!assignedEvent) return false;
- const eventStartInWeek = event.start ? (event.start < weekStart ? weekStart : event.start) : weekStart;
- const eventEndInWeek = event.end ? (event.end > weekEnd ? weekEnd : event.end) : weekEnd;
- const assignedStartInWeek = assignedEvent.start
- ? assignedEvent.start < weekStart
- ? weekStart
- : assignedEvent.start
- : weekStart;
- const assignedEndInWeek = assignedEvent.end
- ? assignedEvent.end > weekEnd
- ? weekEnd
- : assignedEvent.end
- : weekEnd;
-
- return (
- assignedRow === row && eventStartInWeek <= assignedEndInWeek && assignedStartInWeek <= eventEndInWeek
- );
- })
- ) {
- row++;
- }
- weekStack[event.id] = row;
- });
-
- const typeFilterValues = typeFilters.map((f) => f.value);
- const selectedTypeFilters = selectedFilters.filter((f) => typeFilterValues.includes(f));
- const selectedTitleFilters = selectedFilters.filter((f) => !typeFilterValues.includes(f));
-
- const eventsOfTheDay = eventsWithRow
- .filter((event) => {
- if (!isInEventRange(day, event)) return false;
- if (selectedTypeFilters.length > 0 && selectedTitleFilters.length > 0) {
- return selectedTypeFilters.includes(event.type) && selectedTitleFilters.includes(event.title);
- } else if (selectedTypeFilters.length > 0) {
- return selectedTypeFilters.includes(event.type);
- } else if (selectedTitleFilters.length > 0) {
- return selectedTitleFilters.includes(event.title);
- }
- return true;
- })
- .map((event) => ({ ...event, row: weekStack[event.id] ?? 0 }));
-
- const maxRow = eventsOfTheDay.length > 0 ? Math.max(...eventsOfTheDay.map((e) => e.row)) : -1;
- const numRows = maxRow + 1;
-
- return (
-
-
- );
-}
diff --git a/src/option/components/AssignCard.tsx b/src/option/components/AssignCard.tsx
deleted file mode 100644
index a20acec..0000000
--- a/src/option/components/AssignCard.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Assign } from '@/content/types';
-
-import { calculateDueDate, calculateRemainingTime } from '@/lib/utils';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-
-interface TaskStatusCardProps {
- assign: Assign;
-}
-
-const AssignCard: React.FC = ({ assign }) => {
- const [showRemainingTime, setShowRemainingTime] = useState(false);
-
- useEffect(() => {
- let timer: NodeJS.Timeout;
- if (showRemainingTime) {
- timer = setTimeout(() => {
- setShowRemainingTime(false);
- }, 5000);
- }
- return () => clearTimeout(timer);
- }, [showRemainingTime]);
-
- if (!assign) {
- return <>;
- }
- const timeDifference = calculateDueDate(assign.dueDate);
-
- return (
- {
- window.open(assign.url, '_blank');
- }}
- >
-
-
-
- );
-};
-
-export default AssignCard;
diff --git a/src/option/components/AssignContent.tsx b/src/option/components/AssignContent.tsx
deleted file mode 100644
index 2c741c0..0000000
--- a/src/option/components/AssignContent.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Card, CardContent } from '@/components/ui/card';
-import { useEffect, useState } from 'react';
-import { Assign } from '@/content/types';
-import { loadDataFromStorage } from '@/lib/storage';
-import AssignCard from './AssignCard';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import thung from '@/assets/thung.png';
-
-export function AssignContent() {
- const [assignArray, setAssignArray] = useState([]);
-
- useEffect(() => {
- loadDataFromStorage('assign', (data: string | null) => {
- if (!data) return;
-
- let parsedData: Assign[];
- if (typeof data === 'string') {
- try {
- parsedData = JSON.parse(data);
- } catch (error) {
- console.error('JSON 파싱 에러:', error);
- return;
- }
- } else {
- parsedData = data as Assign[];
- }
-
- const sortedAssignArray = parsedData.sort((a, b) => {
- // 미제출 우선 배치
- if (!a.isSubmit && b.isSubmit) return -1;
- if (a.isSubmit && !b.isSubmit) return 1;
-
- // 마감 빠른 순 (null은 맨 뒤)
- const dateA = a.dueDate === null ? Number.MAX_SAFE_INTEGER : new Date(a.dueDate).getTime();
- const dateB = b.dueDate === null ? Number.MAX_SAFE_INTEGER : new Date(b.dueDate).getTime();
- if (dateA !== dateB) return dateA - dateB;
-
- return a.courseTitle.localeCompare(b.courseTitle);
- });
-
- setAssignArray(sortedAssignArray);
- });
- }, []);
-
- return (
- = ({ vodList, onClose }: ModalProps) => {
- const [isVisible, setIsVisible] = useState(false);
- const [showRemainingTime, setShowRemainingTime] = useState(false);
-
- useEffect(() => {
- setIsVisible(true);
- return () => {
- setIsVisible(false);
- };
- }, []);
-
- useEffect(() => {
- let timer: NodeJS.Timeout;
- if (showRemainingTime) {
- timer = setTimeout(() => {
- setShowRemainingTime(false);
- }, 5000);
- }
- return () => clearTimeout(timer);
- }, [showRemainingTime]);
-
- const handleClose = () => {
- setIsVisible(false);
- setTimeout(() => {
- onClose();
- }, 300);
- };
-
- const timeDifference = calculateTimeDifference(vodList[0].range);
-
- const modalContent = (
- = ({ vod, onClose }) => {
- const [isVisible, setIsVisible] = useState(false);
-
- useEffect(() => {
- setIsVisible(true);
- return () => {
- setIsVisible(false);
- };
- }, []);
-
- const handleClose = () => {
- setIsVisible(false);
- setTimeout(() => {
- onClose();
- }, 300);
- };
-
- const handleHideCourse = () => {
- handleClose();
- };
-
- const modalContent = (
- = ({ quiz }) => {
- const [showRemainingTime, setShowRemainingTime] = useState(false);
-
- useEffect(() => {
- let timer: NodeJS.Timeout;
- if (showRemainingTime) {
- timer = setTimeout(() => {
- setShowRemainingTime(false);
- }, 5000);
- }
- return () => clearTimeout(timer);
- }, [showRemainingTime]);
-
- if (!quiz) {
- return <>;
- }
-
- const timeDifference = calculateDueDate(quiz.dueDate);
-
- return (
- {
- window.open(quiz.url, '_blank');
- }}
- >
-
-
-
- );
-};
-
-export default QuizCard;
diff --git a/src/option/components/QuizContent.tsx b/src/option/components/QuizContent.tsx
deleted file mode 100644
index 7724c9d..0000000
--- a/src/option/components/QuizContent.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Card, CardContent } from '@/components/ui/card';
-import { useEffect, useState } from 'react';
-import { Quiz } from '@/content/types';
-import { loadDataFromStorage } from '@/lib/storage';
-import QuizCard from './QuizCard';
-import { ScrollArea } from '@radix-ui/react-scroll-area';
-import thung from '@/assets/thung.png';
-
-export function QuizContent() {
- const [quizArray, setQuizArray] = useState([]);
-
- useEffect(() => {
- loadDataFromStorage('quiz', (data: string | null) => {
- if (!data) return;
-
- let parsedData: Quiz[];
- if (typeof data === 'string') {
- try {
- parsedData = JSON.parse(data);
- } catch (error) {
- console.error('JSON 파싱 에러:', error);
- return;
- }
- } else {
- parsedData = data as Quiz[];
- }
-
- const sortedQuizArray = parsedData.sort((a, b) => {
- // 마감 빠른 순 (null은 맨 뒤)
- const dateA = a.dueDate === null ? Number.MAX_SAFE_INTEGER : new Date(a.dueDate).getTime();
- const dateB = b.dueDate === null ? Number.MAX_SAFE_INTEGER : new Date(b.dueDate).getTime();
- if (dateA !== dateB) return dateA - dateB;
-
- return a.courseTitle.localeCompare(b.courseTitle);
- });
-
- setQuizArray(sortedQuizArray);
- });
- }, []);
-
- return (
- = ({ vodList }) => {
- const [isVisible, setIsVisible] = useState(false);
-
- if (vodList.length === 0) return <>;
-
- let value = 0;
- vodList.forEach((vod) => {
- if (vod.isAttendance.toLowerCase() === 'o') value += 1;
- });
- const total = (value * 100) / vodList.length;
-
-
- return (
- <>
- {isVisible && (
- {
- setIsVisible(false);
- }}
- />
- )}
- {
- setIsVisible(true);
- }}
- >
-
-
-
-
- );
-};
-
-export default VodCard;
diff --git a/src/option/components/VodContent.tsx b/src/option/components/VodContent.tsx
deleted file mode 100644
index 9871b6d..0000000
--- a/src/option/components/VodContent.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Card, CardContent } from '@/components/ui/card';
-import { useEffect, useState } from 'react';
-import { Vod } from '@/content/types';
-import { loadDataFromStorage } from '@/lib/storage';
-import VodCard from './VodCard';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import thung from '@/assets/thung.png';
-import { isCurrentDateInRange } from '@/lib/utils';
-
-export function VodContent() {
- const [vodArray, setVodArray] = useState([]);
- useEffect(() => {
- loadDataFromStorage('vod', (data: string | null) => {
- if (!data) return;
-
- let parsedData: Vod[];
- if (typeof data === 'string') {
- try {
- parsedData = JSON.parse(data);
- } catch (error) {
- console.error('JSON 파싱 에러:', error);
- return;
- }
- } else {
- parsedData = data as Vod[];
- }
-
- const groupedData = parsedData.reduce(
- (acc, item) => {
- const key = `${item.courseId}-${item.subject}-${item.range}`;
- if (!acc[key]) {
- acc[key] = [];
- }
- acc[key].push(item);
- return acc;
- },
- {} as Record
- );
-
- const sortedVodGroups = Object.values(groupedData).sort((groupA, groupB) => {
- const firstA = groupA[0];
- const firstB = groupB[0];
-
- const isAX = firstA.weeklyAttendance.toUpperCase().startsWith('X');
- const isBX = firstB.weeklyAttendance.toUpperCase().startsWith('X');
-
- // X가 있는 항목을 먼저 정렬
- if (isAX && !isBX) return -1;
- if (!isAX && isBX) return 1;
-
- const rangeA = firstA.range;
- const rangeB = firstB.range;
- const isRangeANull = rangeA === null;
- const isRangeBNull = rangeB === null;
-
- // isCurrentDateInRange가 true인 항목을 먼저 정렬 (X와 O 모두)
- const isCurrentDateInRangeA = isCurrentDateInRange(firstA.range);
- const isCurrentDateInRangeB = isCurrentDateInRange(firstB.range);
-
- if (isAX) {
- // X일 때는 isCurrentDateInRange가 true인 항목을 먼저 배치, 그 다음 null
- if (isCurrentDateInRangeA && !isCurrentDateInRangeB) return -1;
- if (!isCurrentDateInRangeA && isCurrentDateInRangeB) return 1;
- if (isRangeANull && !isRangeBNull) return 1;
- if (!isRangeANull && isRangeBNull) return -1;
- } else {
- // O일 때는 isCurrentDateInRange가 true인 항목을 먼저 배치, 그 다음 null, 그 다음 시간순 정렬
- if (isCurrentDateInRangeA && !isCurrentDateInRangeB) return -1;
- if (!isCurrentDateInRangeA && isCurrentDateInRangeB) return 1;
- if (isRangeANull && !isRangeBNull) return 1;
- if (!isRangeANull && isRangeBNull) return -1;
-
- // rangeStart 날짜 기준으로 시간순으로 정렬
- if (!isRangeANull && !isRangeBNull) {
- const rangeStartA = rangeA.split(' ~ ')[0];
- const rangeStartB = rangeB.split(' ~ ')[0];
- const dateA = new Date(rangeStartA);
- const dateB = new Date(rangeStartB);
-
- if (dateA < dateB) return -1;
- if (dateA > dateB) return 1;
- }
- }
-
- // courseTitle로 기본 정렬
- if (firstA.courseTitle < firstB.courseTitle) return -1;
- if (firstA.courseTitle > firstB.courseTitle) return 1;
-
- return 0;
- });
-
- setVodArray(sortedVodGroups);
- });
- }, []);
-
- return (
-
-
-
-
- );
-}
diff --git a/src/option/option.ts b/src/option/option.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/AssignmentPage.tsx b/src/pages/AssignmentPage.tsx
deleted file mode 100644
index 2c13369..0000000
--- a/src/pages/AssignmentPage.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { AssignContent } from '@/option/components/AssignContent';
-
-export default function AssignmentPage() {
- return (null);
- const isPlayingRef = useRef(isPlaying);
- const onNextVideoRef = useRef(onNextVideo);
-
- const [time, setTime] = useState({ current: 0, duration: 0 });
-
- // iframe 랜더링 시 이벤트 등록
- const setIframeRef = (node: HTMLIFrameElement | null) => {
- iframeRef.current = node;
- if (node) {
- node.addEventListener('load', loadEventListener);
- }
- };
-
- useEffect(() => {
- const interval = setInterval(() => {
- const video = getVideoElement();
- if (video) {
- setTime({ current: video.currentTime, duration: video.duration });
- }
- }, 500);
- return () => clearInterval(interval);
- }, []);
-
- useEffect(() => {
- isPlayingRef.current = isPlaying;
- onNextVideoRef.current = onNextVideo;
- }, [isPlaying, onNextVideo]);
-
- // iframe 내 video 요소 접근 헬퍼
- const getVideoElement = () => {
- const iframe = iframeRef.current;
- if (!iframe) return null;
- try {
- const doc = iframe.contentDocument || iframe.contentWindow?.document;
- return (doc?.querySelector('video') as HTMLVideoElement | null) ?? null;
- } catch (err) {
- console.error('iframe 접근 에러', err);
- return null;
- }
- };
-
- // 재생, 일시정지 처리 함수
- const controlPlayback = (video: HTMLVideoElement | null, play: boolean) => {
- if (!video) return;
- if (play) {
- video.muted = false;
- video.volume = 0.01;
- video.play().catch((e) => console.warn('재생 실패:', e));
- } else {
- video.pause();
- }
- };
-
- // load 이벤트 시 video listener 세팅
- const loadEventListener = () => {
- const video = getVideoElement();
- if (!video) return;
-
- // 중복 방지
- video.onended = null;
- video.onended = () => onNextVideoRef.current();
-
- controlPlayback(video, isPlayingRef.current);
- };
-
- // iframe load 이벤트 연결
- useEffect(() => {
- const iframe = iframeRef.current;
- if (!iframe) return;
- iframe.addEventListener('load', loadEventListener);
- return () => iframe.removeEventListener('load', loadEventListener);
- }, [videoSrc]);
-
- // isPlaying 변경 시 재생 상태 제어
- useEffect(() => {
- controlPlayback(getVideoElement(), isPlaying);
- }, [isPlaying]);
-
- useEffect(() => {
- const interval = setInterval(() => {
- const video = getVideoElement();
- if (video && !video.paused) {
- video.play().catch(() => {});
- }
- }, 60_000);
- return () => clearInterval(interval);
- }, []);
-
- return (
- >;
-}
-export default function SortableItem({ vod, idx, currentVideoIndex, setCurrentVideoIndex }: SortableItemProps) {
- const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
- id: `${vod.week}-${vod.title}`,
- });
-
- const style = {
- transform: CSS.Transform.toString(transform),
- transition,
- opacity: isDragging ? 0.5 : 1,
- cursor: 'grab',
- };
-
- return (
- (TAB_TYPE.VIDEO);
+ const [isOpen, setIsOpen] = useState(false);
+ const [bubbleDismissed, setBubbleDismissed] = useState(isBubbleDismissed);
+ const [bubbleHiddenByOpen, setBubbleHiddenByOpen] = useState(false);
+ const [calendarToken, setCalendarToken] = useState(null);
+ const [notifications, setNotifications] = useState([]);
+ const [notifHiddenByOpen, setNotifHiddenByOpen] = useState(false);
+ const bubbleTimerRef = useRef | null>(null);
+ const notifTimerRef = useRef | null>(null);
+ const tokenExpiredNotifRef = useRef(null);
+
+ const isCalendarConnected = calendarToken !== null;
+
+ // DOM 토글에서 trackedCourseIds 변경 시 데이터 추가/삭제
+ const prevTrackedIdsRef = useRef>(new Set(trackedCourseIds));
+ useEffect(() => {
+ const prevSet = prevTrackedIdsRef.current;
+ const currSet = new Set(trackedCourseIds);
+ prevTrackedIdsRef.current = currSet;
+
+ if (prevSet.size === 0) return;
+
+ const allCourseIds = new Set(allCourses.map((c) => c.courseId));
+
+ for (const id of trackedCourseIds) {
+ if (!prevSet.has(id) && allCourseIds.has(id)) {
+ const course = allCourses.find((c) => c.courseId === id);
+ if (course) addCourseData(course);
+ }
+ }
+
+ for (const id of prevSet) {
+ if (!currSet.has(id)) {
+ removeCourseData(id);
+ }
+ }
+ }, [trackedCourseIds, allCourses, addCourseData, removeCourseData]);
+
+ const pushNotification = useCallback((n: Omit) => {
+ const id = `notif-${++notifIdCounter}`;
+ setNotifications((prev) => [...prev, { ...n, id }]);
+ return id;
+ }, []);
+
+ const dismissNotification = useCallback((id: string) => {
+ setNotifications((prev) => prev.filter((n) => n.id !== id));
+ }, []);
+
+ const updateNotification = useCallback((id: string, updates: Partial>) => {
+ setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, ...updates } : n)));
+ }, []);
+
+ // 새로고침 시작/완료 시 NotificationBubble 표시
+ const refreshNotifRef = useRef(null);
+ const prevIsPendingRef = useRef(false);
+ useEffect(() => {
+ if (isPending && !prevIsPendingRef.current) {
+ if (refreshNotifRef.current) dismissNotification(refreshNotifRef.current);
+ refreshNotifRef.current = pushNotification({ type: 'loading', messageKey: 'refreshing' });
+ } else if (!isPending && prevIsPendingRef.current && refreshNotifRef.current) {
+ updateNotification(refreshNotifRef.current, {
+ type: 'success',
+ messageKey: 'refreshSuccess',
+ autoDismiss: true,
+ });
+ refreshNotifRef.current = null;
+ }
+ prevIsPendingRef.current = isPending;
+ }, [isPending, pushNotification, dismissNotification, updateNotification]);
+
+ const showTokenExpiredNotif = useCallback(() => {
+ if (tokenExpiredNotifRef.current) return;
+ const id = pushNotification({
+ type: 'warning',
+ messageKey: 'calendar.tokenExpired',
+ action: {
+ labelKey: 'calendar.tokenExpiredAction',
+ onClick: async () => {
+ const token = await getOAuthToken(true);
+ if (token) setCalendarToken(token);
+ },
+ },
+ });
+ tokenExpiredNotifRef.current = id;
+ }, [pushNotification]);
+
+ const clearTokenExpiredNotif = useCallback(() => {
+ if (tokenExpiredNotifRef.current) {
+ dismissNotification(tokenExpiredNotifRef.current);
+ tokenExpiredNotifRef.current = null;
+ }
+ }, [dismissNotification]);
+
+ const handleTokenExpired = useCallback(async () => {
+ if (calendarToken) {
+ await removeCachedAuthToken(calendarToken);
+ }
+ setCalendarToken(null);
+ showTokenExpiredNotif();
+ }, [calendarToken, showTokenExpiredNotif]);
+
+ // 로그인 성공 시 만료 알림 제거
+ useEffect(() => {
+ if (calendarToken) {
+ clearTokenExpiredNotif();
+ }
+ }, [calendarToken, clearTokenExpiredNotif]);
+
+ useEffect(() => {
+ if (import.meta.env.VITE_MOCK) {
+ removeCachedAuthToken('').catch(() => {});
+ setCalendarToken(null);
+ showTokenExpiredNotif();
+ } else {
+ getOAuthToken(false).then((token) => {
+ if (token) setCalendarToken(token);
+ });
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const handleCalendarLogin = async () => {
+ const token = await getOAuthToken(true);
+ if (token) {
+ setCalendarToken(token);
+ }
+ };
+
+ const handleCalendarLogout = async () => {
+ if (calendarToken) {
+ try {
+ await removeCachedAuthToken(calendarToken);
+ } catch (e) {
+ console.warn('[Dotbugi] removeCachedAuthToken failed:', e);
+ }
+ }
+ setCalendarToken(null);
+ };
+
+ const handleCalendarSync = async () => {
+ const token = calendarToken ?? (await getOAuthToken(true));
+ if (!token) return;
+
+ const syncId = pushNotification({ type: 'loading', messageKey: 'calendar.syncing' });
+
+ const calendarEvents = [
+ ...vodGroupsToEvents(visibleVods),
+ ...visibleAssigns.map((a) => dueDateItemToEvent(a, 'assign')),
+ ...visibleQuizzes.map((q) => dueDateItemToEvent(q, 'quiz')),
+ ];
+
+ const { events: existingEvents, tokenExpired: fetchExpired } = await getCalendarEvents(token);
+ if (fetchExpired) {
+ dismissNotification(syncId);
+ await handleTokenExpired();
+ return;
+ }
+
+ const newEventsData = convertCalendarEventsToGoogleEvents(calendarEvents);
+
+ const eventKey = (event: {
+ summary?: string;
+ start: { dateTime?: string; date?: string };
+ end: { dateTime?: string; date?: string };
+ }) =>
+ `${(event.summary || '').trim().toLowerCase()}|${new Date(event.start.dateTime || event.start.date || '').getTime()}|${new Date(event.end.dateTime || event.end.date || '').getTime()}`;
+
+ const existingKeys = new Set(existingEvents.map(eventKey));
+ const uniqueNewEvents = newEventsData.filter((e) => !existingKeys.has(eventKey(e)));
+
+ if (uniqueNewEvents.length === 0) {
+ updateNotification(syncId, { type: 'success', messageKey: 'calendar.syncNoNew', autoDismiss: true });
+ return;
+ }
+
+ const result = await addCalendarEventsBatch(uniqueNewEvents, token);
+
+ if (result.tokenExpired) {
+ dismissNotification(syncId);
+ await handleTokenExpired();
+ return;
+ }
+
+ if (result.failed === 0) {
+ updateNotification(syncId, {
+ type: 'success',
+ messageKey: 'calendar.syncSuccess',
+ messageParams: { count: result.added },
+ autoDismiss: true,
+ });
+ } else if (result.added === 0) {
+ updateNotification(syncId, {
+ type: 'error',
+ messageKey: 'calendar.syncFailed',
+ messageParams: { failed: result.failed },
+ autoDismiss: true,
+ });
+ } else {
+ updateNotification(syncId, {
+ type: 'warning',
+ messageKey: 'calendar.syncPartial',
+ messageParams: { added: result.added, failed: result.failed },
+ autoDismiss: true,
+ });
+ }
+ };
+
+ const {
+ searchTerm,
+ setSearchTerm,
+ isFilterOpen,
+ setIsFilterOpen,
+ filters,
+ courseTitlesMap,
+ filteredVods,
+ filteredAssigns,
+ filteredQuizzes,
+ handleCourseTitleChange,
+ handleAttendanceFilterChange,
+ handleSubmitFilterChange,
+ clearFilters,
+ } = useDashboardFilters({ vods: visibleVods, assigns: visibleAssigns, quizzes: visibleQuizzes, activeTab });
+
+ const taskCount = useMemo(() => {
+ const unattendedGroups = new Set();
+ for (const v of visibleVods) {
+ if (!isAttended(v.weeklyAttendance)) {
+ unattendedGroups.add(makeVodGroupKey(v.courseId, v.subject, v.range));
+ }
+ }
+ const unsubmittedAssigns = visibleAssigns.filter((a) => !a.isSubmit).length;
+ const unsubmittedQuizzes = visibleQuizzes.filter((q) => !q.isSubmit).length;
+ return unattendedGroups.size + unsubmittedAssigns + unsubmittedQuizzes;
+ }, [visibleVods, visibleAssigns, visibleQuizzes]);
+
+ const hasIncomplete = useMemo(
+ () => ({
+ [TAB_TYPE.VIDEO]: visibleVods.some((v) => !isAttended(v.weeklyAttendance)),
+ [TAB_TYPE.ASSIGN]: visibleAssigns.some((a) => !a.isSubmit),
+ [TAB_TYPE.QUIZ]: visibleQuizzes.some((q) => !q.isSubmit),
+ }),
+ [visibleVods, visibleAssigns, visibleQuizzes]
+ );
+
+ const handleToggleOpen = (e: React.MouseEvent) => {
+ setIsOpen((prev) => {
+ if (!prev) {
+ setBubbleHiddenByOpen(true);
+ setNotifHiddenByOpen(true);
+ if (bubbleTimerRef.current) {
+ clearTimeout(bubbleTimerRef.current);
+ bubbleTimerRef.current = null;
+ }
+ if (notifTimerRef.current) {
+ clearTimeout(notifTimerRef.current);
+ notifTimerRef.current = null;
+ }
+ } else {
+ bubbleTimerRef.current = setTimeout(() => {
+ setBubbleHiddenByOpen(false);
+ bubbleTimerRef.current = null;
+ }, 500);
+ notifTimerRef.current = setTimeout(() => {
+ setNotifHiddenByOpen(false);
+ notifTimerRef.current = null;
+ }, 500);
+ }
+ return !prev;
+ });
+ e.preventDefault();
+ };
+
+ useEffect(() => {
+ return () => {
+ if (bubbleTimerRef.current) clearTimeout(bubbleTimerRef.current);
+ if (notifTimerRef.current) clearTimeout(notifTimerRef.current);
+ };
+ }, []);
+
+ const handleRefresh = () => {
+ if (isPending) return;
+ refreshCourseData();
+ };
+
+ const handleDismissBubble = () => {
+ setBubbleDismissed(true);
+ localStorage.setItem(BUBBLE_DISMISS_KEY, Date.now().toString());
+ };
+
+ const showBubble = !isOpen && !bubbleDismissed && !bubbleHiddenByOpen && !isPending;
+
+ const filterHandlers = {
+ searchTerm,
+ onSearchChange: setSearchTerm,
+ filters,
+ isFilterOpen,
+ onFilterToggle: () => setIsFilterOpen((prev: boolean) => !prev),
+ courseTitlesMap,
+ onCourseTitleChange: handleCourseTitleChange,
+ onAttendanceFilterChange: handleAttendanceFilterChange,
+ onSubmitFilterChange: handleSubmitFilterChange,
+ onClearFilters: clearFilters,
+ };
+
+ const headerActions = {
+ remainingTime,
+ isPending,
+ onRefresh: handleRefresh,
+ onOpenSetting: () => setActiveTab(TAB_TYPE.SETTING),
+ isCalendarConnected,
+ onCalendarSync: handleCalendarSync,
+ };
+
+ return (
+ <>
+
+
+ {!isOpen && (
+
+ 
+
+
+
+ {isOpen && notifications.length > 0 && (
+
+
+
+ );
+}
diff --git a/src/popover/dashboard/components/AssignList.tsx b/src/popover/dashboard/components/AssignList.tsx
new file mode 100644
index 0000000..dddea64
--- /dev/null
+++ b/src/popover/dashboard/components/AssignList.tsx
@@ -0,0 +1,27 @@
+import { Assign } from '@/types';
+import DueDateList from './DueDateList';
+import { useTranslation } from 'react-i18next';
+
+interface AssignmentProps {
+ courseData: Assign[];
+ onHideTask?: (url: string) => void;
+}
+
+export default function AssignList({ courseData, onHideTask }: AssignmentProps) {
+ const { t } = useTranslation('common');
+ return (
+ (item.isSubmit ? 'border-green-500' : timeDiff.borderColor)}
+ getStatusIcon={(item, timeDiff) => {
+ if (item.isSubmit) return 'check';
+ if (timeDiff.textColor.includes('red')) return 'siren';
+ return 'warning';
+ }}
+ getStatusColor={(item, timeDiff) => (item.isSubmit ? 'text-green-500' : timeDiff.textColor)}
+ getStatusLabel={(item) => (item.isSubmit ? t('submit.doneSpaced') : t('submit.neededSpaced'))}
+ onHideTask={onHideTask}
+ />
+ );
+}
diff --git a/src/popover/dashboard/components/CardFooterContent.tsx b/src/popover/dashboard/components/CardFooterContent.tsx
new file mode 100644
index 0000000..a90b072
--- /dev/null
+++ b/src/popover/dashboard/components/CardFooterContent.tsx
@@ -0,0 +1,59 @@
+import { BadgeCheck, Clock, Siren, TriangleAlert } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { TimeDifferenceResult } from '@/types';
+
+const TOOLTIP_STYLE: React.CSSProperties = {
+ backgroundColor: 'rgba(24, 24, 27, 0.6)',
+ borderRadius: '4px',
+ fontSize: '11px',
+ paddingTop: '1px',
+ paddingBottom: '1px',
+ paddingLeft: '4px',
+ paddingRight: '4px',
+ zIndex: '9999',
+};
+
+interface CardFooterContentProps {
+ timeDifference: TimeDifferenceResult;
+ tooltipText: string;
+ statusColor: string;
+ statusIcon: 'check' | 'siren' | 'warning';
+ statusLabel: string;
+}
+
+function StatusIcon({ icon }: { icon: CardFooterContentProps['statusIcon'] }) {
+ switch (icon) {
+ case 'check':
+ return
+
+
+ {tooltipText}
+
+ ;
+ isFilterOpen: boolean;
+ onFilterToggle: () => void;
+ courseTitlesMap: Record;
+ onCourseTitleChange: (title: string) => void;
+ onAttendanceFilterChange: (status: string) => void;
+ onSubmitFilterChange: (isSubmit: boolean) => void;
+ onClearFilters: () => void;
+}
+
+export interface HeaderActions {
+ remainingTime: number;
+ isPending: boolean;
+ onRefresh: () => void;
+ onOpenSetting: () => void;
+ isCalendarConnected: boolean;
+ onCalendarSync: () => void;
+}
+
+interface DashboardHeaderProps {
+ activeTab: TAB_TYPE;
+ filter: FilterHandlers;
+ actions: HeaderActions;
+}
+
+export default function DashboardHeader({ activeTab, filter: f, actions: a }: DashboardHeaderProps) {
+ const { t } = useTranslation(['popover', 'common']);
+
+ const TAB_TITLES: Record = {
+ VIDEO: t('header.vodList'),
+ ASSIGN: t('header.assignList'),
+ QUIZ: t('header.quizList'),
+ SETTING: t('header.setting'),
+ };
+
+ const attendanceOptions = attendanceValues.map((v) => t(`common:attendance.${v}`));
+ const submitOptionsTranslated = submitOptions.map((o) => ({
+ label: t(`common:submit.${o.internalLabel}`),
+ value: o.value,
+ }));
+
+ const isFilterSet = useMemo(() => {
+ const currentFilters = f.filters[activeTab];
+ const { courseTitles, attendanceStatuses, submitStatuses } = currentFilters;
+ return (
+ (courseTitles && courseTitles.length > 0) ||
+ (attendanceStatuses && attendanceStatuses.length > 0) ||
+ (submitStatuses && submitStatuses.length > 0)
+ );
+ }, [f.filters, activeTab]);
+
+ const refreshDisabled = a.isPending;
+
+ return (
+ {
+ courseData: T[];
+ emptyLabel: 'vod' | 'assign' | 'quiz';
+ getBorderClass: (item: T, timeDiff: TimeDifferenceResult) => string;
+ getStatusIcon: (item: T, timeDiff: TimeDifferenceResult) => 'check' | 'siren' | 'warning';
+ getStatusColor: (item: T, timeDiff: TimeDifferenceResult) => string;
+ getStatusLabel: (item: T) => string;
+ onHideTask?: (url: string) => void;
+}
+
+export default function DueDateList({
+ courseData,
+ emptyLabel,
+ getBorderClass,
+ getStatusIcon,
+ getStatusColor,
+ getStatusLabel,
+ onHideTask,
+}: DueDateListProps) {
+ const { t } = useTranslation('common');
+
+ if (!courseData || courseData.length === 0) {
+ return ;
@@ -57,7 +57,7 @@ const FilterPanel: React.FC = ({
)}
- {activeTab === 'ASSIGN' && (
+ {(activeTab === 'ASSIGN' || activeTab === 'QUIZ') && (
onColorChange(course.courseId, color, 'solid', undefined, opacity)}
- />
- ))}
-
-
-
- handleCustomColorChange(color)}
- className="w-full h-[120px]"
- />
-
-
-
- handleCustomColorChange(e.target.value)}
- className="h-8"
- />
-
-
- {opacitySlider}
-
-
-
- {gradientPresets.map((gradient, index) => (
-
-
-
- );
-}
diff --git a/src/option/GithubStarBanner.tsx b/src/option/GithubStarBanner.tsx
deleted file mode 100644
index 298b63b..0000000
--- a/src/option/GithubStarBanner.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type React from 'react';
-import { useState } from 'react';
-import { Github } from 'lucide-react';
-import { motion } from 'framer-motion';
-
-const GitHubStarBanner: React.FC = () => {
- const [isHovered, setIsHovered] = useState(false);
-
- const handleClick = () => {
- window.open('https://github.com/hs-shell/dotbugi', '_blank');
- };
-
- return (
- onColorChange(course.courseId, gradient, 'gradient', gradient, opacity)}
- />
- ))}
-
-
-
-
-
-
-
- {opacitySlider}
-
-
-
-
-
- handleGradientColorChange(color, gradientEndColor)}
- className="w-full h-[120px]"
- />
-
- 시작 색상
-
- handleGradientColorChange(gradientStartColor, color)}
- className="w-full h-[120px]"
- />
-
- 끝 색상
-
- 선택된 스타일
-
- {hasChanged && (
-
- )}
-
-
-
- {colorSetting.colorType === 'solid'
- ? `${colorSetting.color} (${Math.round((colorSetting.opacity || 1) * 100)}%)`
- : `Gradient (${Math.round((colorSetting.opacity || 1) * 100)}%)`}
-
- setIsHovered(true)}
- onMouseLeave={() => setIsHovered(false)}
- className="mt-4 mb-2 mx-1 py-4 px-2 bg-gradient-to-r from-slate-100 to-slate-200 rounded-lg border border-slate-200 shadow-sm cursor-pointer hover:shadow-md transition-all duration-300 group"
- >
-
- );
-};
-
-export default GitHubStarBanner;
diff --git a/src/option/Header.tsx b/src/option/Header.tsx
deleted file mode 100644
index c507aae..0000000
--- a/src/option/Header.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { loadDataFromStorage } from '@/lib/storage';
-import { TimeAgo } from '@/lib/utils';
-import { History } from 'lucide-react';
-import { useEffect, useState } from 'react';
-export default function Header({ location }: { location: string }) {
- const [lastRequest, setLastRequest] = useState('');
- useEffect(() => {
- loadDataFromStorage('lastRequestTime', (data: string | null) => {
- if (!data) setLastRequest('기록이 존재하지 않습니다.');
- else setLastRequest(TimeAgo(parseInt(data)));
- });
- }, []);
-
- let title = '안녕하세요';
-
- switch (location) {
- case '/vod':
- title = '동영상 강의 목록';
- window.document.title = '돋부기 | 강의 목록';
- break;
- case '/assignment':
- title = '과제 목록';
- window.document.title = '돋부기 | 과제 목록';
- break;
- case '/quiz':
- title = '퀴즈 목록';
- window.document.title = '돋부기 | 퀴즈 목록';
- break;
- default:
- title = '대시보드 🚀';
- window.document.title = '돋부기 | 대시보드';
- break;
- }
- return (
-
-
-
-
-
-
-
-
-
- 이 프로젝트가 마음에 드시나요?
-GitHub에서 스타를 눌러주세요!
-
-
- );
-}
diff --git a/src/option/Labo.tsx b/src/option/Labo.tsx
deleted file mode 100644
index e856125..0000000
--- a/src/option/Labo.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { calendar_v3 } from 'googleapis';
-
-type CalendarEvent = calendar_v3.Schema$Event;
-
-const Labo: React.FC = () => {
- const [token, setToken] = useState{title}
-
-
-
-
- );
-};
-
-export default Labo;
diff --git a/src/option/Sidebar.tsx b/src/option/Sidebar.tsx
deleted file mode 100644
index 811751c..0000000
--- a/src/option/Sidebar.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client';
-
-import { Calendar, LayoutDashboard, NotebookText, Palette, Video, Zap } from 'lucide-react';
-import type React from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import icon from '@/assets/icon.png';
-import GitHubStarBanner from './GithubStarBanner';
-
-const Sidebar: React.FC = () => {
- return (
-
- );
-};
-
-interface SidebarItemProps {
- to: string;
- icon: React.ReactNode;
- label: string;
-}
-
-const SidebarItem: React.FCGoogle Calendar 연동
- {token ? ( -
-
-
-
- ) : (
-
- )}
- 내 캘린더 일정
--
- {events.length > 0 ? (
- events.map((event, index) => (
-
-
- {event.summary}
-
- {event.start?.dateTime?.replace('T', ' ').substring(0, 16)} ~{' '} - {event.end?.dateTime?.replace('T', ' ').substring(0, 16)} -
-
- ))
- ) : (
-
일정이 없습니다.
- )} -{title}
- {icon} -{data.length > 0 ? `${total} 개` : '0 개'}
- ) : (
- {data.length > 0 ? `${done} / ${total}` : '0 개'}
- )}
- {title.includes('퀴즈') ? (
-
- ) : (
-
- )}
- - {title.includes('퀴즈') ? '직접 확인' : isNaN(percentage) ? 0 + '% 완료' : percentage + '% 완료'} -
-
-
- );
-}
diff --git a/src/option/calendar.tsx b/src/option/calendar.tsx
deleted file mode 100644
index 02513b2..0000000
--- a/src/option/calendar.tsx
+++ /dev/null
@@ -1,586 +0,0 @@
-import { useState, useMemo, useEffect } from 'react';
-import { Card } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { cn } from '@/lib/utils';
-import {
- format,
- addMonths,
- subMonths,
- startOfMonth,
- startOfWeek,
- isSameMonth,
- isToday,
- isBefore,
- addDays,
- isSunday,
-} from 'date-fns';
-import { ChevronLeft, ChevronRight, NotebookText, Zap, ListFilter, CalendarArrowUp } from 'lucide-react';
-import useCalendarEvents, { CalendarEvent } from '@/hooks/useCalendarEvents';
-import filter from '@/assets/filter.svg';
-import { Label } from '@/components/ui/label';
-import {
- getOAuthToken,
- addCalendarEvent,
- getCalendarEvents,
- convertCalendarEventsToGoogleEvents,
- GoogleCalendarEvent,
-} from '@/lib/calendarUtils';
-import { toast } from '@/hooks/use-toast';
-import { loadDataFromStorage } from '@/lib/storage';
-import GoogleCalendar from '@/assets/calendar.png';
-function isSameDate(d1: Date, d2: Date) {
- return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
-}
-
-function isInEventRange(day: Date, event: CalendarEvent) {
- if (!event.start || !event.end) return false;
- return day >= event.start && day <= event.end;
-}
-
-function isSingleDayEvent(event: CalendarEvent) {
- if (!event.start || !event.end) return false;
- return isSameDate(event.start, event.end);
-}
-
-function getRangePosition(day: Date, event: CalendarEvent): 'single' | 'start' | 'middle' | 'end' | 'after' | null {
- if (!event.start || !event.end) return null;
-
- if (!isInEventRange(day, event)) return null;
- if (isSingleDayEvent(event)) return 'single';
- if (isSameDate(day, addDays(event.start, 1))) return 'after';
- if (isSameDate(day, event.start)) return 'start';
- if (isSameDate(day, event.end)) return 'end';
- return 'middle';
-}
-
-function eventsOverlap(a: CalendarEvent, b: CalendarEvent) {
- if (a.start === null || a.end === null || b.start === null || b.end === null) {
- return false;
- }
- return a.start <= b.end && b.start <= a.end;
-}
-// 헬퍼: hex 색상을 rgba 문자열로 변환 (투명도 적용)
-function hexToRgba(hex: string, opacity: number): string {
- hex = hex.replace('#', '');
- const r = parseInt(hex.substring(0, 2), 16);
- const g = parseInt(hex.substring(2, 4), 16);
- const b = parseInt(hex.substring(4, 6), 16);
- return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-}
-
-interface CalendarEventWithRow extends CalendarEvent {
- row: number;
-}
-
-const colorClasses = [
- 'bg-rose-100 text-rose-800',
- 'bg-amber-100 text-amber-800',
- 'bg-emerald-100 text-emerald-800',
- 'bg-sky-100 text-sky-800',
- 'bg-violet-100 text-violet-800',
- 'bg-fuchsia-100 text-fuchsia-800',
- 'bg-lime-100 text-lime-800',
- 'bg-cyan-100 text-cyan-800',
-];
-
-export function Calendar() {
- const events = useCalendarEvents();
- const [currentMonth, setCurrentMonth] = useState
- {Array.from({ length: numRows }, (_, rowIndex) => {
- const event = eventsOfTheDay.find((e) => e.row === rowIndex);
- if (event) {
- const rangePosition = getRangePosition(day, event);
- if (!rangePosition) return ;
-
- const eventId = event.id.split('-')[0];
- const isVodCustom = event.type === 'vod' && courseColors && eventId && courseColors[eventId];
- let customStyle = {};
-
- if (isVodCustom) {
- const courseData = courseColors?.[eventId];
-
- const eventStart = event.start ?? new Date(0);
- const eventEnd = event.end ?? new Date(0);
-
- const totalDays = Math.floor((eventEnd.getTime() - eventStart.getTime()) / (1000 * 3600 * 24)) + 1;
-
- if (courseData?.colorType === 'gradient' && courseData.gradient && totalDays > 1) {
- const dayIndex = Math.floor((day.getTime() - eventStart.getTime()) / (1000 * 3600 * 24));
-
- const regex = /linear-gradient\(to right, (#[0-9a-fA-F]+), (#[0-9a-fA-F]+)\)/;
- const match = courseData.gradient.match(regex);
-
- if (match) {
- const rgba1 = hexToRgba(match[1], courseData.opacity);
- const rgba2 = hexToRgba(match[2], courseData.opacity);
- customStyle = {
- backgroundImage: `linear-gradient(to right, ${rgba1}, ${rgba2})`,
- backgroundSize: `${totalDays * 100}% 100%`,
- backgroundPosition: `${-(dayIndex * 100)}% 0`,
- };
- } else {
- customStyle = { backgroundImage: courseData.gradient, opacity: courseData.opacity };
- }
- } else {
- // 단색(hex)인 경우: null 값 방지 후 rgba 변환
- customStyle = { background: hexToRgba(courseData?.color ?? '#000000', courseData?.opacity ?? 1) };
- }
- }
-
- if (rangePosition === 'single') {
- return (
-
- );
- };
-
- const handleRedirectToCalendar = async () => {
- const token = await getOAuthToken();
- if (!token) {
- toast({
- title: '동기화 실패 🚨',
- description: '구글 캘린더 연동 상태를 확인해주세요',
- variant: 'destructive',
- });
- return;
- }
-
- window.open('https://calendar.google.com/calendar', '_blank');
- };
- const handleCalendarSync = async () => {
- const token = await getOAuthToken();
- if (!token) {
- toast({
- title: '동기화 실패 🚨',
- description: '구글 캘린더 연동 상태를 확인해주세요',
- variant: 'destructive',
- });
- return;
- }
-
- try {
- const existingEvents: GoogleCalendarEvent[] = await getCalendarEvents(token);
- const newEventsData: GoogleCalendarEvent[] = convertCalendarEventsToGoogleEvents(events);
-
- const normalizeEvent = (event: {
- summary: string;
- description?: string;
- start: { dateTime: string };
- end: { dateTime: string };
- }) => ({
- summary: event.summary.trim().toLowerCase(),
- description: (event.description || '').trim().toLowerCase(),
- startTime: new Date(event.start.dateTime).getTime(),
- endTime: new Date(event.end.dateTime).getTime(),
- });
-
- const uniqueNewEvents = newEventsData.filter((newEvent) => {
- const normNew = normalizeEvent(newEvent);
- return !existingEvents.some((existingEvent) => {
- const normExisting = normalizeEvent(existingEvent);
- return (
- normExisting.summary === normNew.summary &&
- normExisting.description === normNew.description &&
- normExisting.startTime === normNew.startTime &&
- normExisting.endTime === normNew.endTime
- );
- });
- });
-
- if (uniqueNewEvents.length === 0) {
- toast({
- title: '캘린더가 최신 상태입니다 🤩',
- description: '이미 최신 정보로 동기화되었습니다.',
- variant: 'default',
- });
- } else {
- for (const event of uniqueNewEvents) {
- await addCalendarEvent(event, token);
- }
- toast({
- title: '동기화 성공 🚀',
- description: `${uniqueNewEvents.length}개의 이벤트가 추가되었습니다.`,
- variant: 'default',
- });
- }
- } catch (error) {
- toast({
- title: '동기화 오류 🚨',
- description: '이벤트 동기화 중 오류가 발생했습니다.',
- variant: 'destructive',
- });
- console.error(error);
- }
- };
-
- return (
-
-
- {event.type === 'assign' ? (
-
- );
- }
-
- const isStart = rangePosition === 'start';
- const isEnd = rangePosition === 'end';
- const showTitle = isStart;
-
- const additionalClasses = cn(isStart && 'rounded-l-sm ml-1', isEnd && 'rounded-r-sm mr-1');
-
- const defaultClass = isVodCustom
- ? ''
- : isCurrent
- ? `${subjectColorMap[event.title]} text-zinc-700`
- : 'bg-zinc-100 text-zinc-300';
-
- return (
-
- {showTitle && (
-
- {event.title} - {event.subject}
-
- )}
-
- );
- } else {
- return ;
- }
- })}
-
-
-
- {/* 요일 헤더 */}
-
-
-
-
-
-
-
- {format(currentMonth, 'yyyy년 MM월')}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {filterOptions.map((option) => (
-
-
-
-
-
- ))}
-
- toggleFilter(option.value)}
- className="shadow-md rounded-sm peer h-5 w-5 cursor-pointer appearance-none border border-zinc-800 bg-white checked:border-primary checked:bg-primary focus:outline-none focus:ring-primary focus:ring-offset-0"
- />
-
-
-
-
- {['일', '월', '화', '수', '목', '금', '토'].map((dayName) => (
-
-
- {/* 달력 그리드 */}
-
- {dayName}
-
- ))}
-
- {dayList.map((dayItem) => {
- const isCurrent = isSameMonth(dayItem, currentMonth);
- const isTodayDate = isToday(dayItem);
- const sunday = isSunday(dayItem);
- const isSelected = selectedDate && isSameDate(selectedDate, dayItem);
- return (
-
- handleSelectDate(dayItem)}
- className={cn(
- 'relative cursor-pointer w-full min-h-[120px] py-2 rounded-lg',
- isCurrent ? 'bg-white' : 'text-gray-300',
- isSelected && 'bg-zinc-50',
- 'hover:bg-zinc-50 transition-all duration-300'
- )}
- >
-
-
- );
- })}
-
- {format(dayItem, 'd')}
-
- {renderEvents(dayItem, isCurrent)}
-
-
-
-
-
- {assign.courseTitle}
-{assign.title}
-
-
- {assign.isSubmit ? '제출완료' : '제출필요'}
-
-
-
-
-
- {assign.dueDate}
-
-
-
- {calculateRemainingTime(assign.dueDate)}
-
-
-
-
-
-
- {assignArray.length === 0 ? (
-
-
-
-
- )}
-
-
- );
-}
diff --git a/src/option/components/CourseDetailModal.tsx b/src/option/components/CourseDetailModal.tsx
deleted file mode 100644
index fdcb39a..0000000
--- a/src/option/components/CourseDetailModal.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import ReactDOM from 'react-dom';
-import { useEffect, useState } from 'react';
-import { Button } from '@/components/ui/button';
-import type { Vod } from '@/content/types';
-import { Card, CardContent } from '@/components/ui/card';
-import { BadgeCheck, Siren, TriangleAlert, Video, X } from 'lucide-react';
-import { calculateRemainingTimeByRange, calculateTimeDifference, formatDateString } from '@/lib/utils';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import type React from 'react';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { Badge } from '@/components/ui/badge';
-
-interface ModalProps {
- vodList: Vod[];
- onClose: () => void;
-}
-
-const CourseDetailModal: React.FC
-
-
- ) : (
-
- {assignArray.map((assign) => {
- const key = `${assign.courseId}-${assign.title}-${assign.dueDate}`;
- return
-
-
- );
-
- const modalRoot = document.getElementById('shadow-modal-root');
- if (!modalRoot) {
- console.error('Modal root element not found.');
- return null;
- }
-
- return ReactDOM.createPortal(modalContent, modalRoot);
-};
-
-export default CourseDetailModal;
diff --git a/src/option/components/CourseHideModal.tsx b/src/option/components/CourseHideModal.tsx
deleted file mode 100644
index 8ca515a..0000000
--- a/src/option/components/CourseHideModal.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import ReactDOM from 'react-dom';
-import { useEffect, useState } from 'react';
-import type { Vod } from '@/content/types';
-import type React from 'react';
-import { Button } from '@/components/ui/button';
-
-interface ModalProps {
- vod: Vod;
- onClose: () => void;
-}
-
-const CourseHideModal: React.FC e.stopPropagation()}
- >
-
-
-
-
-
-
-
-
-
- {vodList[0].courseTitle}
-{vodList[0].subject}
-
- {vodList.map((vod, index) => {
- const isAttendance = vod.isAttendance.toLowerCase().trim() === 'o';
- return (
- {
- window.open(`${vod.url.replace('view', 'viewer')}`, '_blank', 'VodContentWindow');
- }}
- >
-
-
-
-
- );
- })}
-
-
-
- {isAttendance ? (
- {vod.title}
-{vod.length}
-
-
-
-
-
- 출석인정기간 : {formatDateString(vodList[0].range)}
-
-
-
- {calculateRemainingTimeByRange(vodList[0].range)}
-
-
-
-
-
-
- );
-
- const modalRoot = document.getElementById('shadow-modal-root');
- if (!modalRoot) {
- console.error('Modal root element not found.');
- return null;
- }
-
- return ReactDOM.createPortal(modalContent, modalRoot);
-};
-
-export default CourseHideModal;
diff --git a/src/option/components/CustomTabs.tsx b/src/option/components/CustomTabs.tsx
deleted file mode 100644
index a95aa29..0000000
--- a/src/option/components/CustomTabs.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { cn } from '@/lib/utils';
-
-interface CustomTabsProps {
- tabs: string[];
- activeTab: string;
- onTabChange: (tab: string) => void;
-}
-
-export function CustomTabs({ tabs, activeTab, onTabChange }: CustomTabsProps) {
- return (
- e.stopPropagation()} // 모달 클릭 시 닫히지 않도록 방지
- >
-
- 해당 강좌를 숨기시겠습니까?
-- {vod.courseTitle} - {vod.subject} -
- -
-
-
-
-
- {tabs.map((tab) => (
-
- ))}
-
- );
-}
diff --git a/src/option/components/QuizCard.tsx b/src/option/components/QuizCard.tsx
deleted file mode 100644
index 74d08c7..0000000
--- a/src/option/components/QuizCard.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Quiz } from '@/content/types';
-
-import { calculateDueDate, calculateRemainingTime } from '@/lib/utils';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-
-interface TaskStatusCardProps {
- quiz: Quiz;
-}
-
-const QuizCard: React.FC
-
-
-
-
- {quiz.courseTitle}
-{quiz.title}
-
-
- 직접확인
-
-
-
-
-
- {quiz.dueDate}
-
-
-
- {calculateRemainingTime(quiz.dueDate)}
-
-
-
-
-
-
- {quizArray.length === 0 ? (
-
-
-
-
- )}
-
-
- );
-}
diff --git a/src/option/components/Sidebar.tsx b/src/option/components/Sidebar.tsx
deleted file mode 100644
index ad90465..0000000
--- a/src/option/components/Sidebar.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { SidebarHeader } from './SidebarHeader';
-import { TYPES } from '@/content/types';
-import { data } from './data';
-
-export function Sidebar({ activeTab, setActiveTab }: { activeTab: TYPES; setActiveTab: (type: TYPES) => void }) {
- return (
-
- );
-}
diff --git a/src/option/components/SidebarHeader.tsx b/src/option/components/SidebarHeader.tsx
deleted file mode 100644
index dbd4f7a..0000000
--- a/src/option/components/SidebarHeader.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import icon from '@/assets/icon.png';
-
-export function SidebarHeader() {
- return (
-
-
-
- ) : (
-
- {quizArray.map((quiz) => {
- const key = `${quiz.courseId}-${quiz.title}-${quiz.dueDate}`;
- return
-
- 
-
- );
-}
diff --git a/src/option/components/VodCard.tsx b/src/option/components/VodCard.tsx
deleted file mode 100644
index 4484b07..0000000
--- a/src/option/components/VodCard.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useState } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Progress } from '@/components/ui/progress';
-import { Badge } from '@/components/ui/badge';
-import { Vod } from '@/content/types';
-
-import { calculateRemainingTimeByRange, formatDateString, removeSquareBrackets } from '@/lib/utils';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import CourseDetailModal from './CourseDetailModal';
-
-interface TaskStatusCardProps {
- vodList: Vod[];
-}
-
-const VodCard: React.FC
-
-
-
-
- - {removeSquareBrackets(vodList[0].courseTitle)} -
-{vodList[0].subject}
-
-
- {total === 0 ? '학습전' : vodList[0].weeklyAttendance.toLowerCase() === 'o' ? '학습완료' : '학습중'}
-
-
-
-
-
- {formatDateString(vodList[0].range)}
-
-
-
- {calculateRemainingTimeByRange(vodList[0].range)}
-
-
-
-
-
-
-
- 진도율
- {Math.round(total)}%
-
-
-
-
- {vodArray.length === 0 ? (
-
-
-
-
- )}
-
-
- );
-}
diff --git a/src/option/components/data.tsx b/src/option/components/data.tsx
deleted file mode 100644
index 58efcbe..0000000
--- a/src/option/components/data.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { TYPES } from '@/content/types';
-import { NotebookText, Video, Zap } from 'lucide-react';
-
-export const data = [
- {
- title: '강의',
- icon: ,
- type: TYPES.vod,
- },
- {
- title: '과제',
- icon:
-
-
- ) : (
-
- {vodArray.map((vodGroup, index) => {
- return
-
-
- );
-}
diff --git a/src/pages/QuizPage.tsx b/src/pages/QuizPage.tsx
deleted file mode 100644
index 8eeaa4f..0000000
--- a/src/pages/QuizPage.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { QuizContent } from '@/option/components/QuizContent';
-
-export default function QuizPage() {
- return
-
- );
-}
diff --git a/src/player/components/SortableItem.tsx b/src/player/components/SortableItem.tsx
deleted file mode 100644
index c58a4d2..0000000
--- a/src/player/components/SortableItem.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Vod } from '@/content/types';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { Dispatch, SetStateAction } from 'react';
-
-interface SortableItemProps {
- vod: Vod;
- idx: number;
- currentVideoIndex: number;
- setCurrentVideoIndex: Dispatch
- {isPlaying ? (
- time.duration > 0 ? (
-
-
- {videoSrc && isPlaying && (
-
- )}
-
-
- {Math.floor(time.current / 60)}:
- {Math.floor(time.current % 60)
- .toString()
- .padStart(2, '0')}{' '}
-
- /
-
- {Math.floor(time.duration / 60)}:
- {Math.floor(time.duration % 60)
- .toString()
- .padStart(2, '0')}
-
-
- ) : (
- 영상 정보가 없습니다
- )
- ) : (
-
- 자동수강을 시작하려면 수강시작 버튼을 눌러주세요
-
- )}
- setCurrentVideoIndex(idx)}
- className={`p-3 rounded-lg transition-all flex-shrink-0 ${
- idx === currentVideoIndex
- ? 'bg-white border border-blue-400'
- : 'bg-zinc-50 border border-transparent hover:border-zinc-200'
- }`}
- >
-
- );
-}
diff --git a/src/popover/dashboard/Dashboard.tsx b/src/popover/dashboard/Dashboard.tsx
new file mode 100644
index 0000000..cd1164f
--- /dev/null
+++ b/src/popover/dashboard/Dashboard.tsx
@@ -0,0 +1,463 @@
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import icon from '@/assets/icon.png';
+import exit from '@/assets/exit.png';
+import { TAB_TYPE } from '@/types';
+import { OctagonAlert } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { useGetCourses } from '@/hooks/useGetCourses';
+import VodList from './components/VodList';
+import AssignList from './components/AssignList';
+import QuizList from './components/QuizList';
+import { useCourseData } from '@/hooks/useCourseData';
+import { useDashboardFilters } from '@/hooks/useDashboardFilters';
+import TabNavigation from './components/TabNavigation';
+import StickyPopoverTrigger from './components/StickyPopoverTrigger';
+import DashboardHeader from './components/DashboardHeader';
+import InfoBubble from './components/InfoBubble';
+import NotificationBubble, { type Notification } from './components/NotificationBubble';
+import { useTranslation } from 'react-i18next';
+import { isAttended } from '@/lib/utils';
+import { makeVodGroupKey } from '@/lib/generateKey';
+import Setting from './components/Setting';
+import { useHiddenTasks } from '@/hooks/useHiddenTasks';
+import {
+ getOAuthToken,
+ removeCachedAuthToken,
+ getCalendarEvents,
+ addCalendarEventsBatch,
+ convertCalendarEventsToGoogleEvents,
+} from '@/lib/calendarUtils';
+import { vodGroupsToEvents, dueDateItemToEvent } from '@/lib/transformCalendarEvents';
+
+const BUBBLE_DISMISS_KEY = 'dotbugi_bubble_dismissed';
+const BUBBLE_DISMISS_DURATION = import.meta.env.VITE_MOCK ? 1000 * 30 : 1000 * 60 * 60; // mock: 30초, prod: 1시간
+
+function isBubbleDismissed(): boolean {
+ const raw = localStorage.getItem(BUBBLE_DISMISS_KEY);
+ if (!raw) return false;
+ return Date.now() - parseInt(raw, 10) < BUBBLE_DISMISS_DURATION;
+}
+
+let notifIdCounter = 0;
+
+export default function Dashboard() {
+ const { t } = useTranslation('common');
+ const { allCourses, trackedCourses, trackedCourseIds } = useGetCourses();
+
+ const {
+ vods,
+ assigns,
+ quizzes,
+ isPending,
+ remainingTime,
+ isError,
+ refreshCourseData,
+ addCourseData,
+ removeCourseData,
+ } = useCourseData(trackedCourses);
+
+ const { hiddenUrls, hideTask, hideTasks, unhideTask, isHidden } = useHiddenTasks();
+
+ // 숨긴 태스크 필터링
+ const visibleVods = useMemo(() => vods.filter((v) => !isHidden(v.url)), [vods, isHidden]);
+ const visibleAssigns = useMemo(() => assigns.filter((a) => !isHidden(a.url)), [assigns, isHidden]);
+ const visibleQuizzes = useMemo(() => quizzes.filter((q) => !isHidden(q.url)), [quizzes, isHidden]);
+
+ // 설정에서 숨긴 태스크 목록 표시용
+ const hiddenTaskInfos = useMemo(() => {
+ const all = [
+ ...vods.map((v) => ({ url: v.url, title: v.title, courseTitle: v.courseTitle })),
+ ...assigns.map((a) => ({ url: a.url, title: a.title, courseTitle: a.courseTitle })),
+ ...quizzes.map((q) => ({ url: q.url, title: q.title, courseTitle: q.courseTitle })),
+ ];
+ return all.filter((item) => hiddenUrls.has(item.url));
+ }, [vods, assigns, quizzes, hiddenUrls]);
+
+ const [activeTab, setActiveTab] = useState
-
-
-
- {vod.title}
-- {vod.courseTitle} - {vod.prof} -
-
+ {!notifHiddenByOpen && notifications.length > 0 && (
+
+ )}
+
+
+ )}
+
+ {isPending ? (
+
+
+
+ ) : isError ? (
+
+
+ ) : (
+ <>
+ {activeTab === 'VIDEO' && {t('error.occurred')}
+location.reload()} + className="py-4 text-xl font-medium underline text-zinc-500 hover:text-zinc-950 hover:cursor-pointer transition-all duration-200" + > + {t('error.refreshPage')} +
+
+
+
+
+
+ );
+}
diff --git a/src/popover/dashboard/components/DashboardHeader.tsx b/src/popover/dashboard/components/DashboardHeader.tsx
new file mode 100644
index 0000000..399020f
--- /dev/null
+++ b/src/popover/dashboard/components/DashboardHeader.tsx
@@ -0,0 +1,196 @@
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { useMemo } from 'react';
+import { Filters, TAB_TYPE } from '@/types';
+import { EllipsisVertical, ListFilter, RefreshCw, Search, Settings } from 'lucide-react';
+import GoogleCalendar from '@/assets/calendar.png';
+import filter from '@/assets/filter.svg';
+import { Button } from '@/components/ui/button';
+import FilterBadge from './FilterBadge';
+import FilterPanel from './FilterPanel';
+import { useTranslation } from 'react-i18next';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+const attendanceValues = ['attended', 'absent'] as const;
+const submitOptions = [
+ { value: true, internalLabel: 'done' as const },
+ { value: false, internalLabel: 'needed' as const },
+];
+
+export interface FilterHandlers {
+ searchTerm: string;
+ onSearchChange: (value: string) => void;
+ filters: Record{statusLabel}
+
+
+ );
+}
diff --git a/src/popover/dashboard/components/DueDateList.tsx b/src/popover/dashboard/components/DueDateList.tsx
new file mode 100644
index 0000000..77a177e
--- /dev/null
+++ b/src/popover/dashboard/components/DueDateList.tsx
@@ -0,0 +1,85 @@
+import { calculateDueDate, calculateRemainingTime } from '@/lib/utils';
+import { Card, CardFooter, CardHeader } from '@/components/ui/card';
+import { TimeDifferenceResult } from '@/types';
+import EmptyState from './EmptyState';
+import CardFooterContent from './CardFooterContent';
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
+import { EyeOff } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface DueDateItem {
+ courseTitle: string;
+ title: string;
+ url: string;
+ dueDate: string | null;
+}
+
+interface DueDateListProps
+
+
+
+
+
+
+
+
+
+ {a.isCalendarConnected && (
+ <>
+
+ 
+ {t('common:calendar.syncShort')}
+
+
+ )}
+
+
+
+ {activeTab !== 'SETTING' && (
+ <>
+ {TAB_TITLES[activeTab]}
+
+
+
+
+
+ )}
+
+ {f.filters[activeTab].courseTitles.map((title) => (
+ f.onCourseTitleChange(title)} />
+ ))}
+ {activeTab === 'VIDEO' &&
+ f.filters[activeTab].attendanceStatuses?.map((status) => (
+ f.onAttendanceFilterChange(status)}
+ />
+ ))}
+ {(activeTab === 'ASSIGN' || activeTab === 'QUIZ') &&
+ f.filters[activeTab].submitStatuses?.map((status) => (
+ f.onSubmitFilterChange(status)}
+ />
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {courseData.map((course, index) => {
+ const timeDifference = calculateDueDate(course.dueDate!);
+
+ return (
+
+
+ window.open(course.url, '_blank')}
+ className={`cursor-pointer w-full rounded-2xl shadow-md bg-white overflow-hidden border-0 border-l-4 ${getBorderClass(course, timeDifference)} hover:bg-zinc-100 transition-all duration-200`}
+ >
+
+
+
+
+
+
+
+ onHideTask?.(course.url)}
+ className="text-lg gap-2 cursor-pointer"
+ >
+
+
+
+ );
+ })}
+
+ );
+}
diff --git a/src/popover/dashboard/components/EmptyState.tsx b/src/popover/dashboard/components/EmptyState.tsx
new file mode 100644
index 0000000..0bd0d0d
--- /dev/null
+++ b/src/popover/dashboard/components/EmptyState.tsx
@@ -0,0 +1,18 @@
+import thung from '@/assets/thung.png';
+import { useTranslation } from 'react-i18next';
+
+interface EmptyStateProps {
+ label: 'vod' | 'assign' | 'quiz';
+}
+
+export default function EmptyState({ label }: EmptyStateProps) {
+ const { t } = useTranslation('common');
+ return (
+
+
+ {course.courseTitle}
+ {course.title}
+
+
+
+ );
+}
diff --git a/src/content/components/FilterBadge.tsx b/src/popover/dashboard/components/FilterBadge.tsx
similarity index 100%
rename from src/content/components/FilterBadge.tsx
rename to src/popover/dashboard/components/FilterBadge.tsx
diff --git a/src/content/components/FilterItem.tsx b/src/popover/dashboard/components/FilterItem.tsx
similarity index 100%
rename from src/content/components/FilterItem.tsx
rename to src/popover/dashboard/components/FilterItem.tsx
diff --git a/src/content/components/FilterPanel.tsx b/src/popover/dashboard/components/FilterPanel.tsx
similarity index 95%
rename from src/content/components/FilterPanel.tsx
rename to src/popover/dashboard/components/FilterPanel.tsx
index b0bea48..a8cdad5 100644
--- a/src/content/components/FilterPanel.tsx
+++ b/src/popover/dashboard/components/FilterPanel.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import FilterItem from './FilterItem';
-import { TAB_TYPE, Filters } from '../types';
+import { TAB_TYPE, Filters } from '@/types';
interface FilterPanelProps {
filters: Record
+ {t(`empty.${label}`)}
+
+
{submitOptions.map((option) => (
diff --git a/src/popover/dashboard/components/InfoBubble.tsx b/src/popover/dashboard/components/InfoBubble.tsx
new file mode 100644
index 0000000..186f32a
--- /dev/null
+++ b/src/popover/dashboard/components/InfoBubble.tsx
@@ -0,0 +1,52 @@
+import { CheckCircle, Clock, X } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+
+interface InfoBubbleProps {
+ taskCount: number;
+ remainingTime: number;
+ onDismiss: () => void;
+}
+
+export default function InfoBubble({ taskCount, remainingTime, onDismiss }: InfoBubbleProps) {
+ const { t } = useTranslation('common');
+ const allDone = taskCount === 0;
+
+ const isStale = remainingTime >= 30;
+ const timeText =
+ remainingTime < 60
+ ? t('date.minutesAgoShort', { minutes: Math.round(remainingTime) })
+ : t('date.hoursAgoShort', { hours: Math.floor(remainingTime / 60) });
+
+ return (
+
+
+ );
+}
diff --git a/src/popover/dashboard/components/NotificationBubble.tsx b/src/popover/dashboard/components/NotificationBubble.tsx
new file mode 100644
index 0000000..7fd0557
--- /dev/null
+++ b/src/popover/dashboard/components/NotificationBubble.tsx
@@ -0,0 +1,115 @@
+import { useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { CheckCircle, XCircle, AlertTriangle, Loader2, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export type NotificationType = 'success' | 'error' | 'warning' | 'loading';
+
+export interface Notification {
+ id: string;
+ type: NotificationType;
+ messageKey: string;
+ messageParams?: Record;
+ autoDismiss?: boolean;
+ action?: {
+ labelKey: string;
+ onClick: () => void;
+ };
+}
+
+interface NotificationBubbleProps {
+ notifications: Notification[];
+ onDismiss: (id: string) => void;
+}
+
+const ICON_MAP = {
+ success: CheckCircle,
+ error: XCircle,
+ warning: AlertTriangle,
+ loading: Loader2,
+};
+
+const ICON_COLOR_MAP = {
+ success: 'text-green-500',
+ error: 'text-red-500',
+ warning: 'text-orange-500',
+ loading: 'text-zinc-400 animate-spin',
+};
+
+export default function NotificationBubble({ notifications, onDismiss }: NotificationBubbleProps) {
+ return (
+
+ {notifications.map((n) => (
+
+ );
+}
+
+function NotificationItem({
+ notification,
+ onDismiss,
+}: {
+ notification: Notification;
+ onDismiss: (id: string) => void;
+}) {
+ useEffect(() => {
+ if (!notification.autoDismiss) return;
+ const timer = setTimeout(() => onDismiss(notification.id), 4000);
+ return () => clearTimeout(timer);
+ }, [notification.id, notification.autoDismiss, onDismiss]);
+
+ const { t } = useTranslation('common');
+ const Icon = ICON_MAP[notification.type];
+ const message = t(notification.messageKey, notification.messageParams);
+
+ return (
+
+
+ );
+}
diff --git a/src/popover/dashboard/components/QuizList.tsx b/src/popover/dashboard/components/QuizList.tsx
new file mode 100644
index 0000000..f6d92bd
--- /dev/null
+++ b/src/popover/dashboard/components/QuizList.tsx
@@ -0,0 +1,27 @@
+import { Quiz } from '@/types';
+import DueDateList from './DueDateList';
+import { useTranslation } from 'react-i18next';
+
+interface QuizTabProps {
+ courseData: Quiz[];
+ onHideTask?: (url: string) => void;
+}
+
+export default function QuizList({ courseData, onHideTask }: QuizTabProps) {
+ const { t } = useTranslation('common');
+ return (
+ (item.isSubmit ? 'border-green-500' : timeDiff.borderColor)}
+ getStatusIcon={(item, timeDiff) => {
+ if (item.isSubmit) return 'check';
+ if (timeDiff.textColor.includes('red')) return 'siren';
+ return 'warning';
+ }}
+ getStatusColor={(item, timeDiff) => (item.isSubmit ? 'text-green-500' : timeDiff.textColor)}
+ getStatusLabel={(item) => (item.isSubmit ? t('submit.doneSpaced') : t('submit.neededSpaced'))}
+ onHideTask={onHideTask}
+ />
+ );
+}
diff --git a/src/popover/dashboard/components/Setting.tsx b/src/popover/dashboard/components/Setting.tsx
new file mode 100644
index 0000000..6be510f
--- /dev/null
+++ b/src/popover/dashboard/components/Setting.tsx
@@ -0,0 +1,206 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SUPPORTED_LANGUAGES, changeLanguage, type LanguageCode } from '@/i18n';
+import { Globe, Github, X } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import GoogleCalendar from '@/assets/calendar.png';
+import GmailIcon from '@/assets/gmail.png';
+
+const CONTACT_EMAIL = 'hsu.dotbugi@gmail.com';
+const KAKAO_LINK = 'https://open.kakao.com/o/sZBnxllh';
+const CALENDAR_LINK = 'https://calendar.google.com/calendar';
+
+interface HiddenTaskInfo {
+ url: string;
+ title: string;
+ courseTitle: string;
+}
+
+interface SettingProps {
+ isCalendarConnected: boolean;
+ onCalendarLogin: () => void;
+ onCalendarLogout: () => void;
+ hiddenTasks?: HiddenTaskInfo[];
+ onUnhideTask?: (url: string) => void;
+}
+
+export default function Setting({
+ isCalendarConnected,
+ onCalendarLogin,
+ onCalendarLogout,
+ hiddenTasks,
+ onUnhideTask,
+}: SettingProps) {
+ const { i18n, t } = useTranslation('common');
+
+ return (
+
+
+ );
+}
diff --git a/src/content/StickyPopoverTrigger.tsx b/src/popover/dashboard/components/StickyPopoverTrigger.tsx
similarity index 100%
rename from src/content/StickyPopoverTrigger.tsx
rename to src/popover/dashboard/components/StickyPopoverTrigger.tsx
diff --git a/src/popover/dashboard/components/TabNavigation.tsx b/src/popover/dashboard/components/TabNavigation.tsx
new file mode 100644
index 0000000..73fc419
--- /dev/null
+++ b/src/popover/dashboard/components/TabNavigation.tsx
@@ -0,0 +1,39 @@
+import { NotebookText, VideoIcon, Zap } from 'lucide-react';
+import { TAB_TYPE } from '@/types';
+import { useTranslation } from 'react-i18next';
+
+interface TabNavigationProps {
+ activeTab: string;
+ setActiveTab: (tabType: TAB_TYPE) => void;
+ hasIncomplete?: Partial>;
+}
+
+export default function TabNavigation({ activeTab, setActiveTab, hasIncomplete }: TabNavigationProps) {
+ const { t } = useTranslation('common');
+
+ const tabs = [
+ { type: TAB_TYPE.VIDEO, icon: >({});
+
+ const toggleCard = (key: string) => {
+ setExpandedCards((prev) => ({ ...prev, [key]: !prev[key] }));
+ };
+
+ if (!courseData || courseData.length === 0) {
+ return >((acc, item) => {
+ const key = makeVodGroupKey(item.courseId, item.subject, item.range);
+ if (!acc[key]) acc[key] = [];
+ acc[key].push(item);
+ return acc;
+ }, {});
+
+ const getEndTime = (range: string | null) => {
+ const end = extractEndDate(range);
+ return end ? new Date(end).getTime() : Number.MAX_SAFE_INTEGER;
+ };
+
+ const compareByAbsentThenEndTime = (a: Vod, b: Vod, absentKey: keyof Vod) => {
+ const aAbsent = isAbsent(a[absentKey] as string);
+ const bAbsent = isAbsent(b[absentKey] as string);
+ if (aAbsent !== bAbsent) return aAbsent ? -1 : 1;
+ return getEndTime(a.range) - getEndTime(b.range);
+ };
+
+ const sortedVodGroups = Object.values(groupedData).sort((groupA, groupB) =>
+ compareByAbsentThenEndTime(groupA[0], groupB[0], 'weeklyAttendance'),
+ );
+
+ return (
+
-
);
}
+// 강의 페이지에서 트래킹 상태 배지 주입
+if (url.includes('/course/view.php?id=') && url.startsWith(HANSUNG_URL)) {
+ injectCourseStatus();
+}
+
if (leftMenus.length === 2 && url.startsWith(HANSUNG_URL)) {
const leftMenu = leftMenus[0];
diff --git a/src/lib/ShadowRootContext.tsx b/src/popover/lib/ShadowRootContext.tsx
similarity index 100%
rename from src/lib/ShadowRootContext.tsx
rename to src/popover/lib/ShadowRootContext.tsx
diff --git a/src/lib/createShadowRoot.ts b/src/popover/lib/createShadowRoot.ts
similarity index 100%
rename from src/lib/createShadowRoot.ts
rename to src/popover/lib/createShadowRoot.ts
diff --git a/src/player/App.tsx b/src/popover/player/App.tsx
similarity index 100%
rename from src/player/App.tsx
rename to src/popover/player/App.tsx
diff --git a/src/popover/player/components/PlayerIframe.tsx b/src/popover/player/components/PlayerIframe.tsx
new file mode 100644
index 0000000..bb211d2
--- /dev/null
+++ b/src/popover/player/components/PlayerIframe.tsx
@@ -0,0 +1,192 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const formatMMSS = (seconds: number) =>
+ `${Math.floor(seconds / 60)}:${Math.floor(seconds % 60).toString().padStart(2, '0')}`;
+
+interface PlayerIframeProps {
+ videoSrc: string;
+ onNextVideo: () => void;
+ isPlaying: boolean;
+}
+
+export default function PlayerIframe({ videoSrc, onNextVideo, isPlaying }: PlayerIframeProps) {
+ const { t } = useTranslation('player');
+ const iframeRef = useRef(null);
+ const isPlayingRef = useRef(isPlaying);
+ const onNextVideoRef = useRef(onNextVideo);
+ const abortRef = useRef(null);
+
+ const [time, setTime] = useState({ current: 0, duration: 0 });
+
+ useEffect(() => {
+ isPlayingRef.current = isPlaying;
+ onNextVideoRef.current = onNextVideo;
+ }, [isPlaying, onNextVideo]);
+
+ const getVideoElement = useCallback(() => {
+ const iframe = iframeRef.current;
+ if (!iframe) return null;
+ try {
+ const doc = iframe.contentDocument || iframe.contentWindow?.document;
+ return (doc?.querySelector('video') as HTMLVideoElement | null) ?? null;
+ } catch {
+ return null;
+ }
+ }, []);
+
+ const controlPlayback = useCallback((video: HTMLVideoElement | null, play: boolean) => {
+ if (!video) return;
+ if (play) {
+ video.muted = false;
+ video.volume = 0.01;
+ video.play().catch((e) => console.warn('Playback failed:', e));
+ } else {
+ video.pause();
+ }
+ }, []);
+
+ // iframe load 시: 메타 fetch → 스킵 or 이어보기 or 재생
+ const handleLoad = useCallback(async () => {
+ const iframe = iframeRef.current;
+ if (!iframe) return;
+
+ // 이전 fetch 취소
+ abortRef.current?.abort();
+ const controller = new AbortController();
+ abortRef.current = controller;
+
+ // 메타 fetch
+ try {
+ const res = await fetch(iframe.src, { credentials: 'include', signal: controller.signal });
+ const html = await res.text();
+
+ if (controller.signal.aborted) return;
+
+ const completeMatch = html.match(/var\s+is_complete\s*=\s*(\d+)/);
+ const progressMatch = html.match(/var\s+before_progress\s*=\s*(\d+)/);
+ const isComplete = completeMatch?.[1] === '1';
+ const beforeProgress = progressMatch ? parseInt(progressMatch[1], 10) : 0;
+
+ // is_complete면 스킵
+ if (isComplete && isPlayingRef.current) {
+ onNextVideoRef.current();
+ return;
+ }
+
+ const video = getVideoElement();
+ if (!video) return;
+
+ video.onended = null;
+ video.onended = () => onNextVideoRef.current();
+
+ // 이어보기
+ if (!isComplete && beforeProgress > 0) {
+ const trySeek = () => {
+ if (controller.signal.aborted) return;
+ if (video.readyState >= 1 && video.duration > 0) {
+ video.currentTime = Math.min(beforeProgress, video.duration - 1);
+ } else {
+ setTimeout(trySeek, 500);
+ }
+ };
+ trySeek();
+ }
+
+ controlPlayback(video, isPlayingRef.current);
+ } catch {
+ // fetch 실패 시 일반 재생
+ if (controller.signal.aborted) return;
+ const video = getVideoElement();
+ if (!video) return;
+ video.onended = null;
+ video.onended = () => onNextVideoRef.current();
+ controlPlayback(video, isPlayingRef.current);
+ }
+ }, [getVideoElement, controlPlayback]);
+
+ // callback ref: iframe mount 시 즉시 load 리스너 등록
+ const setIframeRef = useCallback(
+ (node: HTMLIFrameElement | null) => {
+ if (iframeRef.current) {
+ iframeRef.current.removeEventListener('load', handleLoad);
+ }
+ iframeRef.current = node;
+ if (node) {
+ node.addEventListener('load', handleLoad);
+ }
+ },
+ [handleLoad],
+ );
+
+ // 시간 표시
+ useEffect(() => {
+ const interval = setInterval(() => {
+ const video = getVideoElement();
+ if (video) {
+ setTime({ current: video.currentTime, duration: video.duration });
+ }
+ }, 500);
+ return () => clearInterval(interval);
+ }, [getVideoElement]);
+
+ useEffect(() => {
+ controlPlayback(getVideoElement(), isPlaying);
+ }, [isPlaying, controlPlayback, getVideoElement]);
+
+ // cleanup abort on unmount
+ useEffect(() => {
+ return () => abortRef.current?.abort();
+ }, []);
+
+ // 백그라운드 탭 fallback
+ useEffect(() => {
+ const interval = setInterval(() => {
+ const video = getVideoElement();
+ if (!video || !isPlayingRef.current) return;
+
+ if (video.paused) {
+ video.play().catch(() => {});
+ }
+
+ if (video.duration > 0 && video.currentTime >= video.duration - 0.5) {
+ onNextVideoRef.current();
+ }
+ }, 3_000);
+ return () => clearInterval(interval);
+ }, [getVideoElement]);
+
+ return (
+ ([]);
const [isDone, setIsDone] = useState(false);
@@ -54,27 +56,63 @@ export default function PlayerPopoverContent({ isPopoverOpen, isPlaying, setIsPl
setCurrentVideoIndex((prev) => (prev + 1) % vods.length);
}, [vods, currentVideoIndex, setIsPlaying]);
- useEffect(() => {
- loadDataFromStorage('vod', (data) => {
- if (!data) return;
- const filtered = (data as Vod[]).filter(
- (vod) => isCurrentDateInRange(vod.range) && vod.isAttendance.toLowerCase() !== 'o'
+ const skipPlayerFilter = !!import.meta.env.VITE_MOCK_COURSES;
+ const usePureMock = !!import.meta.env.VITE_MOCK && !import.meta.env.VITE_MOCK_COURSES;
+
+ const loadUnattendedVods = useCallback(async () => {
+ if (usePureMock) {
+ const { mockPlayerVodIds } = await import('@/mocks/mockData');
+ const BASE = 'https://learn.hansung.ac.kr/mod/vod/view.php?id=';
+ setVods(
+ mockPlayerVodIds.map((id, i) => ({
+ courseId: 'mock',
+ courseTitle: 'Player Test',
+ prof: '',
+ week: i + 1,
+ subject: `${i + 1}주차`,
+ title: `VOD-${id}`,
+ url: `${BASE}${id}`,
+ range: null,
+ length: '00:00',
+ isAttendance: 'X',
+ weeklyAttendance: 'X',
+ })),
);
- setVods(filtered);
+ return;
+ }
+ loadDataFromStorage('vod', (data) => {
+ if (!data) return;
+ loadDataFromStorage('hiddenTaskUrls', (hiddenUrls) => {
+ const hidden = new Set(hiddenUrls ?? []);
+ if (skipPlayerFilter) {
+ setVods(data.filter((vod) => !hidden.has(vod.url)));
+ } else {
+ setVods(data.filter((vod) => !hidden.has(vod.url) && isCurrentDateInRange(vod.range) && !isAttended(vod.isAttendance)));
+ }
+ });
});
- }, []);
+ }, [skipPlayerFilter, usePureMock]);
+
+ useEffect(() => {
+ loadUnattendedVods();
+ }, [loadUnattendedVods]);
+
+ // Dashboard에서 새로고침 시 storage 변경을 감지해서 player 목록 갱신
+ useEffect(() => {
+ const listener = (changes: { [key: string]: chrome.storage.StorageChange }) => {
+ if ((changes.vod || changes.hiddenTaskUrls) && !isPlaying) {
+ loadUnattendedVods();
+ }
+ };
+ chrome.storage.onChanged.addListener(listener);
+ return () => chrome.storage.onChanged.removeListener(listener);
+ }, [loadUnattendedVods, isPlaying]);
useEffect(() => {
if (isPopoverOpen && !isPlaying && vods.length === 0) {
- loadDataFromStorage('vod', (data) => {
- if (!data) return;
- const filtered = (data as Vod[]).filter(
- (vod) => isCurrentDateInRange(vod.range) && vod.isAttendance.toLowerCase() !== 'o'
- );
- setVods(filtered);
- });
+ loadUnattendedVods();
}
- }, [isPlaying, vods, isPopoverOpen]);
+ }, [isPlaying, vods, isPopoverOpen, loadUnattendedVods]);
const sensors = useSensors(
useSensor(PointerSensor, {
@@ -97,12 +135,12 @@ export default function PlayerPopoverContent({ isPopoverOpen, isPlaying, setIsPl
const autoPlayText =
isHover && isPlaying
- ? '수강 종료'
+ ? t('stopWatching')
: isPlaying
- ? `${formatExpectedEndTime(totalDurationSeconds)} 완료 예정`
+ ? t('expectedEnd', { time: formatExpectedEndTime(totalDurationSeconds) })
: isDone
- ? '수강 완료'
- : '수강 시작';
+ ? t('doneWatching')
+ : t('startWatching');
return (
+
+
+
+
+
+ {allDone &&
+
+
+
+
+
+
+
+
+ {message}
+
+ {notification.action && (
+
+ )}
+
+ {notification.type !== 'loading' && (
+
+ )}
+
+ {/* Google Calendar 배너 */}
+ window.open(CALENDAR_LINK, '_blank')}
+ >
+
+
+ {/* 언어 설정 */}
+
+
+
+
+ {/* 문의하기 */}
+
+
+
+ {/* 숨긴 태스크 */}
+ {hiddenTasks && hiddenTasks.length > 0 && (
+
+ {t('hide.title')}
+
+ )}
+
+ {/* GitHub Star 배너 */}
+
+ );
+}
+
+function GitHubStarBanner() {
+ const { t } = useTranslation('common');
+ const [isHovered, setIsHovered] = useState(false);
+
+ return (
+
+
+
+ {t('calendar.bannerTitle')}
+ {t('calendar.bannerDesc')}
+ {isCalendarConnected ? ( + + ) : ( + + )} +
+ {t('contact')}
+
+
+
+ {hiddenTasks.map((task) => (
+
+
+
+ ))}
+
+
+
+ {task.courseTitle}
+ {task.title}
+ window.open('https://github.com/hs-shell/dotbugi', '_blank')}
+ onMouseEnter={() => setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ className="flex flex-col items-center text-center w-full rounded-2xl px-4 py-4 cursor-pointer bg-white hover:bg-zinc-100 transition-colors duration-500 group"
+ >
+
+
+
+
+
+
+
+
+ {t('github.likeProject')}
+{t('github.starOnGithub')}
+
+ {tabs.map(({ type, icon, label }) => (
+
+ );
+}
diff --git a/src/popover/dashboard/components/VodList.tsx b/src/popover/dashboard/components/VodList.tsx
new file mode 100644
index 0000000..d9b807f
--- /dev/null
+++ b/src/popover/dashboard/components/VodList.tsx
@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
+import { Vod } from '@/types';
+import { calculateDueDate, calculateRemainingTime, extractEndDate, formatDateString, isAbsent, isAttended } from '@/lib/utils';
+import { makeVodGroupKey } from '@/lib/generateKey';
+import { ChevronDown, ChevronUp, EyeOff } from 'lucide-react';
+import EmptyState from './EmptyState';
+import CardFooterContent from './CardFooterContent';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
+
+interface VideoProps {
+ courseData: Vod[];
+ onHideTask?: (url: string) => void;
+ onHideTasks?: (urls: string[]) => void;
+}
+
+export default function VodList({ courseData, onHideTask, onHideTasks }: VideoProps) {
+ const { t } = useTranslation('common');
+ const [expandedCards, setExpandedCards] = useState setActiveTab(type)}
+ >
+
+ ))}
+
+ {icon}
+ {hasIncomplete?.[type] && (
+
+ )}
+
+ {label}
+
+ {sortedVodGroups.map((vods) => {
+ if (!vods || vods.length === 0) return null;
+
+ const sortedVods = vods.slice().sort((a, b) => compareByAbsentThenEndTime(a, b, 'isAttendance'));
+
+ const item = vods[0];
+ const cardKey = makeVodGroupKey(item.courseId, item.subject, item.range);
+ const timeDifference = calculateDueDate(extractEndDate(item.range));
+ const isExpanded = expandedCards[cardKey] || false;
+ const attended = isAttended(item.weeklyAttendance);
+
+ return (
+
+
+
+ toggleCard(cardKey)}
+ >
+
+ {isExpanded && (
+
+ {sortedVods.map((vod, vodIndex) => (
+
+
+
+
+ onHideTask?.(vod.url)}
+ className="text-lg gap-2 cursor-pointer"
+ >
+
+
+
+ ))}
+
+ )}
+
+
+
+
+
+ onHideTasks?.(vods.map((v) => v.url))}
+ className="text-lg gap-2 cursor-pointer"
+ >
+
+
+
+ );
+ })}
+
+ );
+}
diff --git a/src/content/index.tsx b/src/popover/index.tsx
similarity index 77%
rename from src/content/index.tsx
rename to src/popover/index.tsx
index e8b5228..dd5bddb 100644
--- a/src/content/index.tsx
+++ b/src/popover/index.tsx
@@ -1,11 +1,14 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
-import App from './App';
+import '@/i18n';
+import Dashboard from './dashboard/Dashboard';
import styles from '@/styles/shadow.css?inline';
-import { createShadowRoot } from '@/lib/createShadowRoot';
-import { ShadowRootContext } from '@/lib/ShadowRootContext';
+import { createShadowRoot } from '@/popover/lib/createShadowRoot';
+import { ShadowRootContext } from '@/popover/lib/ShadowRootContext';
import { TooltipProvider } from '@/components/ui/tooltip';
-import PlayerApp from '@/player/App';
+import PlayerApp from '@/popover/player/App';
+import { injectCourseToggles } from '@/lib/injectCourseToggles';
+import { injectCourseStatus } from '@/lib/courseStatus';
const HANSUNG_URL = 'https://learn.hansung.ac.kr/';
const footer = document.getElementById('page-footer');
@@ -14,6 +17,7 @@ const leftMenus = document.getElementsByClassName('left-menus');
const url = window.location.href;
if (footer && url === HANSUNG_URL) {
+ injectCourseToggles();
const backtop = document.getElementById('back-top') as HTMLDivElement;
if (backtop) backtop.remove();
@@ -44,13 +48,18 @@ if (footer && url === HANSUNG_URL) {
+
+ {isExpanded ? {item.courseTitle}
+ {item.subject}
+ window.open(vod.url.replace('view', 'viewer'), '_blank', 'VodContentWindow')}
+ >
+
+
+ {vod.title}
+
+
+ {formatDateString(vod.range)},{' '}
+
+ {vod.length}
+
+
+
+ {isPlaying ? (
+ time.duration > 0 ? (
+
+ );
+}
diff --git a/src/player/components/PlayerPopoverContent.tsx b/src/popover/player/components/PlayerPopoverContent.tsx
similarity index 70%
rename from src/player/components/PlayerPopoverContent.tsx
rename to src/popover/player/components/PlayerPopoverContent.tsx
index 45d5106..c5029f4 100644
--- a/src/player/components/PlayerPopoverContent.tsx
+++ b/src/popover/player/components/PlayerPopoverContent.tsx
@@ -1,6 +1,6 @@
import { PopoverContent } from '@radix-ui/react-popover';
import PlayerIframe from './PlayerIframe';
-import type { Vod } from '@/content/types';
+import type { Vod } from '@/types';
import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react';
import { loadDataFromStorage } from '@/lib/storage';
import { Button } from '@/components/ui/button';
@@ -8,7 +8,8 @@ import { Button } from '@/components/ui/button';
import { DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent } from '@dnd-kit/core';
import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import SortableItem from './SortableItem';
-import { isCurrentDateInRange } from '@/lib/utils';
+import { isAttended, isCurrentDateInRange } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
interface PlayerPopoverContentProps {
isPopoverOpen: boolean;
@@ -17,6 +18,7 @@ interface PlayerPopoverContentProps {
}
export default function PlayerPopoverContent({ isPopoverOpen, isPlaying, setIsPlaying }: PlayerPopoverContentProps) {
+ const { t } = useTranslation('player');
const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
const [vods, setVods] = useState
+ {formatMMSS(time.current)}
+ /
+ {formatMMSS(time.duration)}
+
+ ) : (
+
+ {t('noVideoInfo')}
+
+ )
+ ) : (
+
+ {t('startPrompt')}
+
+ )}
+
+ {videoSrc && isPlaying && (
+
+ )}
+
-
강의 목록
+
+