From f8e474f10999550c58443595b6d65c160573da63 Mon Sep 17 00:00:00 2001
From: 6-keem <6ukeem@gmail.com>
Date: Wed, 5 Mar 2025 10:42:14 +0900
Subject: [PATCH] feat: Display attendance status on popover content

---
 src/content/App.tsx                                        | 2 +-
 .../components/{pending-dialog.tsx => PendingDialog.tsx}   | 0
 src/content/components/Video.tsx                           | 7 ++++++-
 3 files changed, 7 insertions(+), 2 deletions(-)
 rename src/content/components/{pending-dialog.tsx => PendingDialog.tsx} (100%)

diff --git a/src/content/App.tsx b/src/content/App.tsx
index 1576028..1412bea 100644
--- a/src/content/App.tsx
+++ b/src/content/App.tsx
@@ -17,7 +17,7 @@ import FilterBadge from './components/FilterBadge';
 import FilterPanel from './components/FilterPanel';
 import { useCourseData } from '@/hooks/useCourseData';
 import { filterVods, filterAssigns, filterQuizes } from '@/lib/filterData';
-import PendingDialogWithBeforeUnload from './components/pending-dialog';
+import PendingDialogWithBeforeUnload from './components/PendingDialog';
 
 // 리팩토링: 필터 옵션 추출
 const attendanceOptions = ['출석', '결석']; // string[]
diff --git a/src/content/components/pending-dialog.tsx b/src/content/components/PendingDialog.tsx
similarity index 100%
rename from src/content/components/pending-dialog.tsx
rename to src/content/components/PendingDialog.tsx
diff --git a/src/content/components/Video.tsx b/src/content/components/Video.tsx
index 4f8005f..adc0a3c 100644
--- a/src/content/components/Video.tsx
+++ b/src/content/components/Video.tsx
@@ -102,7 +102,12 @@ export default function Video({ courseData }: Props) {
                         {vod.title}
                       </div>
                       <div className="font-light text-zinc-500 text-ellipsis line-clamp-1" style={{ fontSize: 10 }}>
-                        {formatDateString(vod.range)}, <span className="font-medium text-amber-500">{vod.length}</span>
+                        {formatDateString(vod.range)},{' '}
+                        <span
+                          className={`font-medium ${vod.isAttendance.toLowerCase() === 'o' ? 'text-green-500' : 'text-amber-500'} `}
+                        >
+                          {vod.length}
+                        </span>
                       </div>
                     </div>
                   );