+
+ );
+}
diff --git a/src/player/components/PlayerPopoverContent.tsx b/src/player/components/PlayerPopoverContent.tsx
new file mode 100644
index 0000000..45d5106
--- /dev/null
+++ b/src/player/components/PlayerPopoverContent.tsx
@@ -0,0 +1,195 @@
+import { PopoverContent } from '@radix-ui/react-popover';
+import PlayerIframe from './PlayerIframe';
+import type { Vod } from '@/content/types';
+import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react';
+import { loadDataFromStorage } from '@/lib/storage';
+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';
+
+interface PlayerPopoverContentProps {
+ isPopoverOpen: boolean;
+ isPlaying: boolean;
+ setIsPlaying: Dispatch
+ {time.duration > 0 ? (
+
+
+
+
+
+ {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')}
+
+
+ ) : (
+ 영상 정보가 없습니다
+ )}
+
+ {vods.length !== 0 ? (
+
+
+
+ ) : (
+
+
+
+
+
+
+
+ 강의 목록
+
+
+
+
+ `${v.week}-${v.title}`)}
+ strategy={verticalListSortingStrategy}
+ >
+
+
+
+
+
+ {vods.map((vod, idx) => (
+
+
+
+
+
+
+ )}
+
+ 수강할 영상이 없습니다
+
+
+ 이클래스 돋부기를 눌러 강의를 새로고침 해주세요
+
+
+ 
+
+
+
+
+ 돋부기 🔎
+ + 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'
+ }`}
+ >
+
+ );
+}
+
+
+
+ {vod.title}
++ {vod.courseTitle} - {vod.prof} +
+