feedback list 기능추가. 상단바 추가. 테마 적용 안됨.

viewer/src/components/ProjectSelectBox.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { getProjects, type Project } from "@/services/project";
+import { useSettingsStore } from "@/store/useSettingsStore";
+
+export function ProjectSelectBox() {
+	const [projects, setProjects] = useState<Project[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
+	const { projectId, setProjectId } = useSettingsStore();
+
+	useEffect(() => {
+		getProjects().then((loadedProjects) => {
+			setProjects(loadedProjects);
+			// 로드된 프로젝트 목록에 현재 ID가 없으면, 첫 번째 프로젝트로 ID를 설정
+			if (
+				loadedProjects.length > 0 &&
+				!loadedProjects.find((p) => p.id === projectId)
+			) {
+				setProjectId(loadedProjects[0].id);
+			}
+			setIsLoading(false);
+		});
+	}, []); // 마운트 시 한 번만 실행
+
+	if (isLoading) {
+		return (
+			<div className="w-[180px] h-10 bg-muted rounded-md animate-pulse" />
+		);
+	}
+
+	return (
+		<Select value={projectId ?? ""} onValueChange={setProjectId}>
+			<SelectTrigger className="w-[180px]">
+				<SelectValue placeholder="프로젝트 선택" />
+			</SelectTrigger>
+			<SelectContent>
+				{projects.map((p) => (
+					<SelectItem key={p.id} value={p.id}>
+						{p.name}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}