피드백 등록 및 리스트업.

viewer/src/pages/FeedbackListPage.tsx

@@ -0,0 +1,68 @@
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { DynamicTable } from "@/components/DynamicTable";
+import { getFeedbacks, getFeedbackFields } from "@/services/feedback";
+import type { Feedback, FeedbackField } from "@/services/feedback";
+import { ErrorDisplay } from "@/components/ErrorDisplay";
+import { Button } from "@/components/ui/button";
+
+export function FeedbackListPage() {
+	const [fields, setFields] = useState<FeedbackField[]>([]);
+	const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
+	const [loading, setLoading] = useState<boolean>(true);
+	const [error, setError] = useState<string | null>(null);
+
+	// TODO: projectId와 channelId는 URL 파라미터나 컨텍스트에서 가져와야 합니다.
+	const projectId = "1";
+	const channelId = "4";
+
+	useEffect(() => {
+		const fetchFieldsAndFeedbacks = async () => {
+			try {
+				setLoading(true);
+				const fieldsData = await getFeedbackFields(projectId, channelId);
+				setFields(fieldsData);
+
+				try {
+					const feedbacksData = await getFeedbacks(projectId, channelId);
+					setFeedbacks(feedbacksData);
+				} catch (feedbackError) {
+					console.error("Failed to fetch feedbacks:", feedbackError);
+					setError("피드백 목록을 불러오는 데 실패했습니다.");
+				}
+			} catch (fieldsError) {
+				if (fieldsError instanceof Error) {
+					setError(fieldsError.message);
+				} else {
+					setError("테이블 구조를 불러오는 데 실패했습니다.");
+				}
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchFieldsAndFeedbacks();
+	}, [projectId, channelId]);
+
+	if (loading) {
+		return <div>로딩 중...</div>;
+	}
+
+	return (
+		<div className="container mx-auto p-4">
+			<div className="flex justify-between items-center mb-4">
+				<h1 className="text-2xl font-bold">피드백 목록</h1>
+				<Button asChild>
+					<Link to="new">새 피드백 작성</Link>
+				</Button>
+			</div>
+			{error && <ErrorDisplay message={error} />}
+			<DynamicTable
+				columns={fields}
+				data={feedbacks}
+				projectId={projectId}
+				channelId={channelId}
+			/>
+		</div>
+	);
+}