GhiVideo 소스 복제 — v4 작업 시작 기준

기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제.
(node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

client/src/components/sidebar/VideoList.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react';
+import { usePlayerStore } from '../../store/playerStore';
+
+interface VideoItem { videoId: string; filename: string; }
+
+interface Props {
+  onSelect: (videoId: string, filename: string) => void;
+}
+
+export default function VideoList({ onSelect }: Props) {
+  const [videos, setVideos] = useState<VideoItem[]>([]);
+  const { source } = usePlayerStore();
+  const activeId = source?.kind === 'server' ? source.videoId : null;
+
+  useEffect(() => {
+    fetch('/api/videos')
+      .then((r) => r.json())
+      .then(setVideos)
+      .catch(() => {});
+  }, []);
+
+  if (videos.length === 0) {
+    return (
+      <div className="text-gray-500 text-sm p-4 text-center">
+        서버에 영상이 없습니다
+      </div>
+    );
+  }
+
+  return (
+    <div className="divide-y divide-gray-800">
+      {videos.map((v) => (
+        <button
+          key={v.videoId}
+          onClick={() => onSelect(v.videoId, v.filename)}
+          className={`w-full text-left px-4 py-3 hover:bg-gray-800 transition-colors ${
+            activeId === v.videoId ? 'bg-gray-800 border-l-2 border-blue-500' : ''
+          }`}
+        >
+          <div className="text-sm text-white truncate">{v.filename}</div>
+          <div className="text-xs text-gray-500 mt-0.5">{v.videoId}</div>
+        </button>
+      ))}
+    </div>
+  );
+}