내비게이션, 테마 적용

viewer/src/pages/FeedbackListPage.tsx

@@ -1,68 +1,74 @@
 import { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { useSettingsStore } from "@/store/useSettingsStore";
+import { useSyncChannelId } from "@/hooks/useSyncChannelId";
 import { DynamicTable } from "@/components/DynamicTable";
-import { getFeedbacks, getFeedbackFields } from "@/services/feedback";
-import type { Feedback, FeedbackField } from "@/services/feedback";
+import {
+	getFeedbacks,
+	getFeedbackSchema,
+	type Feedback,
+	type FeedbackSchema,
+} from "@/services/feedback";
 import { ErrorDisplay } from "@/components/ErrorDisplay";
 import { Button } from "@/components/ui/button";
 
 export function FeedbackListPage() {
-	const [fields, setFields] = useState<FeedbackField[]>([]);
+	useSyncChannelId(); // URL의 channelId를 전역 상태와 동기화
+	const { projectId, channelId } = useSettingsStore();
+	const navigate = useNavigate();
+
+	const [schema, setSchema] = useState<FeedbackSchema | null>(null);
 	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 () => {
+		if (!projectId || !channelId) return;
+
+		const fetchSchemaAndFeedbacks = async () => {
 			try {
 				setLoading(true);
-				const fieldsData = await getFeedbackFields(projectId, channelId);
-				setFields(fieldsData);
+				setError(null);
 
-				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("테이블 구조를 불러오는 데 실패했습니다.");
-				}
+				const schemaData = await getFeedbackSchema(projectId, channelId);
+				setSchema(schemaData);
+
+				const feedbacksData = await getFeedbacks(projectId, channelId);
+				setFeedbacks(feedbacksData);
+			} catch (err) {
+				setError(err instanceof Error ? err.message : "데이터 로딩에 실패했습니다.");
 			} finally {
 				setLoading(false);
 			}
 		};
 
-		fetchFieldsAndFeedbacks();
+		fetchSchemaAndFeedbacks();
 	}, [projectId, channelId]);
 
+	const handleRowClick = (row: Feedback) => {
+		navigate(`/projects/${projectId}/channels/${channelId}/feedbacks/${row.id}`);
+	};
+
 	if (loading) {
-		return <div>로딩 중...</div>;
+		return <div className="text-center py-10">로딩 중...</div>;
 	}
 
 	return (
-		<div className="container mx-auto p-4">
-			<div className="flex justify-between items-center mb-4">
+		<div className="space-y-4">
+			<div className="flex justify-between items-center">
 				<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}
-			/>
+			{schema && (
+				<DynamicTable
+					schema={schema}
+					data={feedbacks}
+					onRowClick={handleRowClick}
+				/>
+			)}
 		</div>
 	);
 }