feat(todo): add realtime countdown and badge sync

package.json

@@ -17,6 +17,7 @@
     "check:content-scripts": "node scripts/checkContentScripts.js",
     "lint": "eslint .",
     "test:timetable": "node --experimental-strip-types --test tests/timetable/*.test.ts",
+    "test:todo": "node --experimental-strip-types --test tests/todo/*.test.ts",
     "preview": "vite preview",
     "deploy": "git subtree push --prefix gh-pages origin gh-pages"
   },

src/apis/client.ts

@@ -6,6 +6,7 @@
 import type { ApiResponse, RequestConfig } from "../types/api";
 import { BackgroundMessageType } from "../background/types";
 import type { SilentReauthResponse } from "../background/types";
+import { getChromeApi, getStorage, removeStorage } from "../utils/chrome";
 import { debugLog, errorLog, getErrorLogDetails, warnLog } from "@/utils/logger";
 
 /**
@@ -79,13 +80,12 @@ export const ENDPOINTS = {
  * Using chrome.storage.local for persistent token storage
  */
 async function getAccessToken(): Promise<string | null> {
-  const result = await chrome.storage.local.get(["accessToken"]);
-  const token = result.accessToken;
+  const token = await getStorage<unknown>("accessToken");
   return typeof token === "string" ? token : null;
 }
 
 async function clearAccessToken(): Promise<void> {
-  await chrome.storage.local.remove([
+  await removeStorage([
     "accessToken",
     "refreshToken",
     "guestToken",
@@ -107,10 +107,15 @@ async function handleTokenExpired(): Promise<boolean> {
 
   debugLog("[API Client] Token expired (5004), attempting silent reauth...");
 
+  const chromeApi = getChromeApi();
+  if (!chromeApi?.runtime?.sendMessage) {
+    return false;
+  }
+
   isReauthenticating = true;
   reauthPromise = (async () => {
     try {
-      const response = await chrome.runtime.sendMessage<
+      const response = await chromeApi.runtime.sendMessage<
         { type: BackgroundMessageType.SILENT_REAUTH },
         SilentReauthResponse
       >({

src/apis/external/ecampus.ts

@@ -5,6 +5,8 @@
 
 import { ECampusTodoItem } from '@/types/todo';
 import { errorLog } from '@/utils/logger';
+import { isExtensionEnvironment } from '@/utils/chrome';
+import { calculateDDay } from '@/utils/todo/dateFormat';
 
 export interface ECampusLoginResponse {
   success: boolean;
@@ -36,6 +38,98 @@ export interface ECampusGoLectureResponse {
   error?: string;
 }
 
+const LOCAL_SAMPLE_LECTURE_URL = '__LOCAL_SAMPLE_ECAMPUS_TODO__';
+
+const isLocalSampleMode = () => {
+  return import.meta.env.MODE === 'development' && !isExtensionEnvironment();
+};
+
+const pad = (value: number) => String(value).padStart(2, '0');
+
+const formatECampusDueDate = (date: Date) => {
+  const year = date.getFullYear();
+  const month = pad(date.getMonth() + 1);
+  const day = pad(date.getDate());
+  const hours = date.getHours();
+  const minutes = pad(date.getMinutes());
+  const period = hours < 12 ? '오전' : '오후';
+  const twelveHour = hours % 12 === 0 ? 12 : hours % 12;
+
+  return `${year}.${month}.${day} ${period} ${twelveHour}:${minutes}`;
+};
+
+const createLocalSampleTodo = (
+  id: string,
+  title: string,
+  subject: string,
+  dueAt: Date,
+  kj: string,
+  seq: string,
+  gubun: string
+): ECampusTodoItem => {
+  const dueDate = formatECampusDueDate(dueAt);
+  const dDay = calculateDDay(
+    `${dueAt.getFullYear()}.${pad(dueAt.getMonth() + 1)}.${pad(dueAt.getDate())}`,
+    `${pad(dueAt.getHours())}:${pad(dueAt.getMinutes())}`
+  );
+
+  return {
+    type: 'ecampus',
+    id,
+    title,
+    subject,
+    dDay,
+    dueDate,
+    kj,
+    gubun,
+    seq,
+  };
+};
+
+const getLocalSampleTodos = (): ECampusTodoItem[] => {
+  const now = new Date();
+
+  const urgentDue = new Date(now.getTime() + 2 * 60 * 60 * 1000);
+  urgentDue.setSeconds(0, 0);
+
+  const todayDue = new Date(now);
+  todayDue.setHours(23, 59, 0, 0);
+
+  const tomorrowMorningDue = new Date(now);
+  tomorrowMorningDue.setDate(tomorrowMorningDue.getDate() + 1);
+  tomorrowMorningDue.setHours(10, 0, 0, 0);
+
+  return [
+    createLocalSampleTodo(
+      'ecampus-local-1',
+      '캡스톤디자인 발표 자료 제출',
+      '캡스톤디자인',
+      urgentDue,
+      'local-kj-1',
+      'local-seq-1',
+      'report'
+    ),
+    createLocalSampleTodo(
+      'ecampus-local-2',
+      '운영체제 퀴즈 응시',
+      '운영체제',
+      todayDue,
+      'local-kj-2',
+      'local-seq-2',
+      'quiz'
+    ),
+    createLocalSampleTodo(
+      'ecampus-local-3',
+      '자료구조 5주차 강의 시청',
+      '자료구조',
+      tomorrowMorningDue,
+      'local-kj-3',
+      'local-seq-3',
+      'lecture_weeks'
+    ),
+  ];
+};
+
 /**
  * Login to eCampus
  * @param userId User ID
@@ -46,6 +140,20 @@ export async function eCampusLoginAPI(
   userId: string,
   userPw: string
 ): Promise<ECampusLoginResponse> {
+  if (isLocalSampleMode()) {
+    return {
+      success: true,
+      data: {
+        isError: false,
+        message: `${userId || 'local-user'} 로컬 로그인 성공`,
+        count: 0,
+        returnURL: '/local/ecampus',
+        ids_yn: 'Y',
+        VERIFY: 'LOCAL_SAMPLE_MODE',
+      },
+    };
+  }
+
   try {
     const response = await fetch(
       'https://ecampus.konkuk.ac.kr/ilos/lo/login.acl?data=jsonLogin',
@@ -89,6 +197,15 @@ export async function eCampusLoginAPI(
  * @returns Todo list response
  */
 export async function eCampusTodoListAPI(): Promise<ECampusTodoResponse> {
+  if (isLocalSampleMode()) {
+    return {
+      success: true,
+      data: {
+        todoList: getLocalSampleTodos(),
+      },
+    };
+  }
+
   try {
     const response = await fetch(
       'https://ecampus.konkuk.ac.kr/ilos/mp/todo_list.acl',
@@ -102,6 +219,16 @@ export async function eCampusTodoListAPI(): Promise<ECampusTodoResponse> {
         credentials: 'include',
       }
     );
+
+    if (!response.ok) {
+      return {
+        success: false,
+        error: new Error(
+          `eCampus todo request failed: ${response.status} ${response.statusText}`,
+        ),
+      };
+    }
+
     const htmlText = await response.text();
 
     // Parse HTML using DOM parser
@@ -160,7 +287,7 @@ export async function eCampusTodoListAPI(): Promise<ECampusTodoResponse> {
     };
   } catch (error) {
     errorLog('Failed to fetch todo list:', error);
-    return { success: false, needLogin: true, error };
+    return { success: false, error };
   }
 }
 
@@ -176,6 +303,14 @@ export async function eCampusGoLectureAPI(
   seq: string,
   gubun: string
 ): Promise<ECampusGoLectureResponse> {
+  if (isLocalSampleMode()) {
+    return {
+      success: true,
+      isError: false,
+      message: LOCAL_SAMPLE_LECTURE_URL,
+    };
+  }
+
   try {
     const lectureUrl = `/ilos/mp/todo_list_connect.acl?SEQ=${seq}&gubun=${gubun}&KJKEY=${kj}`;
 
@@ -192,3 +327,5 @@ export async function eCampusGoLectureAPI(
     };
   }
 }
+
+export { LOCAL_SAMPLE_LECTURE_URL };

src/background/index.ts

@@ -22,6 +22,11 @@ import type {
   TimetableImportResponse,
 } from "./types";
 import { handleGoogleLogin } from "./handlers/oauth";
+import {
+  formatTodoBadgeCount,
+  TODO_BADGE_BACKGROUND_COLOR,
+  TODO_BADGE_TEXT_COLOR,
+} from "@/utils/todo/badge";
 import {
   handlePendingImportTabRemoved,
   handlePendingImportTabUpdated,
@@ -212,10 +217,14 @@ chrome.tabs.onRemoved.addListener((tabId) => {
  * Badge update for todo count
  */
 function updateBadge(count: number) {
-  if (count > 0) {
-    chrome.action.setBadgeText({ text: count > 99 ? "99+" : String(count) });
-    chrome.action.setBadgeBackgroundColor({ color: "#00913A" });
-    chrome.action.setBadgeTextColor({ color: "#FFFFFF" });
+  const badgeText = formatTodoBadgeCount(count);
+
+  if (badgeText) {
+    chrome.action.setBadgeText({ text: badgeText });
+    chrome.action.setBadgeBackgroundColor({
+      color: TODO_BADGE_BACKGROUND_COLOR,
+    });
+    chrome.action.setBadgeTextColor({ color: TODO_BADGE_TEXT_COLOR });
   } else {
     chrome.action.setBadgeText({ text: "" });
   }

src/components/EmailVerificationDialog.tsx

@@ -23,6 +23,7 @@ import {
 } from '@/utils/formValidation';
 import { errorLog } from '@/utils/logger';
 import { sendAuthEmailVerificationStart, sendAuthEmailVerificationSuccess } from '@/utils/analytics';
+import { setStorage } from '@/utils/chrome';
 
 interface EmailVerificationDialogProps {
   open: boolean;
@@ -107,7 +108,7 @@ export function EmailVerificationDialog({
       if (response.success) {
         toast.success('이메일 인증이 완료되었습니다!');
         // Store verified email
-        await chrome.storage.local.set({ kuMail });
+        await setStorage({ kuMail });
         sendAuthEmailVerificationSuccess('konkuk.ac.kr');
         // Trigger re-login to get member token
         onVerificationComplete();