466d719eef
3 - 사용자가 직접 컬럼의 너비를 조절할 수 있도록 리사이즈 핸들러를 추가 4 - '생성일'과 '수정일' 컬럼의 너비를 120px로 고정하여 가독성을 높임 5 - 리사이즈 핸들러가 올바르게 표시되도록 관련 CSS 스타일을 추가했습니다.
92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
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,
|
|
type Feedback,
|
|
type FeedbackField,
|
|
} from "@/services/feedback";
|
|
import { ErrorDisplay } from "@/components/ErrorDisplay";
|
|
import { Button } from "@/components/ui/button";
|
|
import { PageLayout } from "@/components/PageLayout";
|
|
import type { Row } from "@tanstack/react-table";
|
|
|
|
export function FeedbackListPage() {
|
|
useSyncChannelId();
|
|
const { projectId, channelId } = useSettingsStore();
|
|
const navigate = useNavigate();
|
|
|
|
const [schema, setSchema] = useState<FeedbackField[] | null>(null);
|
|
const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!projectId || !channelId) return;
|
|
|
|
const fetchSchemaAndFeedbacks = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const schemaData = await getFeedbackFields(projectId, channelId);
|
|
setSchema(schemaData);
|
|
|
|
const feedbacksData = await getFeedbacks(projectId, channelId);
|
|
setFeedbacks(feedbacksData);
|
|
} catch (err) {
|
|
setError(
|
|
err instanceof Error ? err.message : "데이터 로딩에 실패했습니다.",
|
|
);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchSchemaAndFeedbacks();
|
|
}, [projectId, channelId]);
|
|
|
|
const handleRowClick = (row: Feedback) => {
|
|
navigate(
|
|
`/projects/${projectId}/channels/${channelId}/feedbacks/${row.id}`,
|
|
);
|
|
};
|
|
|
|
const renderExpandedRow = (row: Row<Feedback>) => (
|
|
<div className="p-4 bg-muted rounded-md">
|
|
<h4 className="font-bold text-lg mb-2">{row.original.title}</h4>
|
|
<p className="whitespace-pre-wrap">{row.original.contents}</p>
|
|
</div>
|
|
);
|
|
|
|
if (loading) {
|
|
return <div className="text-center py-10">로딩 중...</div>;
|
|
}
|
|
|
|
return (
|
|
<PageLayout
|
|
title="피드백 목록"
|
|
description="프로젝트의 피드백 목록입니다."
|
|
actions={
|
|
<Button asChild>
|
|
<Link to="new">새 피드백 작성</Link>
|
|
</Button>
|
|
}
|
|
>
|
|
{error && <ErrorDisplay message={error} />}
|
|
{schema && (
|
|
<DynamicTable
|
|
columns={schema}
|
|
data={feedbacks}
|
|
onRowClick={handleRowClick}
|
|
renderExpandedRow={renderExpandedRow}
|
|
projectId={projectId}
|
|
/>
|
|
)}
|
|
</PageLayout>
|
|
);
|
|
}
|