136 lines
3.7 KiB
TypeScript
136 lines
3.7 KiB
TypeScript
import dayjs from "dayjs";
|
|
import type { ColumnDef } from "@tanstack/react-table";
|
|
import { Badge, Button, Checkbox } from "@common/components";
|
|
import { AttachmentApi } from "@/entities/attachment";
|
|
import type { Post } from "@/entities/post";
|
|
|
|
export const columns: ColumnDef<Post & { isUpndFixPost?: boolean }>[] = [
|
|
{
|
|
id: "select",
|
|
header: ({ table }) => (
|
|
<Checkbox
|
|
checked={table.getIsAllPageRowsSelected()}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onCheckedChange={(checked) =>
|
|
table.toggleAllPageRowsSelected(!!checked)
|
|
}
|
|
className="h-4 w-4 rounded border-gray-300"
|
|
/>
|
|
),
|
|
cell: ({ row }) => (
|
|
<Checkbox
|
|
checked={row.getIsSelected()}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onCheckedChange={(checked) => row.toggleSelected(!!checked)}
|
|
className="h-4 w-4 rounded border-gray-300"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "rowNo",
|
|
header: "NO",
|
|
cell: ({ row }) => {
|
|
if (row.original.isUpndFixPost) {
|
|
return (
|
|
<Badge
|
|
color="orange"
|
|
className="flex size-10 items-center justify-center"
|
|
>
|
|
<i className="diveicon di-volume-up-fill" />
|
|
</Badge>
|
|
);
|
|
}
|
|
return row.original.rowNo;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "pstTtl",
|
|
header: "제목",
|
|
cell: ({ row }) => {
|
|
const { ansPstn, pstTtl, inqNocs } = row.original;
|
|
|
|
return (
|
|
<div
|
|
className="flex min-w-[20vw] items-center gap-2 text-left"
|
|
style={{ paddingInlineStart: `${ansPstn * 10}px` }}
|
|
>
|
|
{ansPstn > 0 && (
|
|
<div className="flex items-center gap-1">
|
|
<div className="-rotate-90">
|
|
<i className="diveicon di-arrow-90left-down rotate-90" />
|
|
</div>
|
|
<Badge color="smokyBlue">답변</Badge>
|
|
</div>
|
|
)}
|
|
{inqNocs >= 100 && <Badge color="red">HOT</Badge>}
|
|
{dayjs().diff(dayjs(row.original.regDt), "hour") < 24 && (
|
|
<Badge color="blue">NEW</Badge>
|
|
)}
|
|
{pstTtl}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "inqNocs",
|
|
header: "조회수",
|
|
},
|
|
{
|
|
accessorKey: "atflCd",
|
|
header: "첨부파일",
|
|
cell: ({ row }) => {
|
|
const atflCd = row.original.atflCd;
|
|
if (!atflCd) return null;
|
|
return <AttachmentButton atflCd={atflCd} />;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "rgtrNm",
|
|
header: "작성자",
|
|
},
|
|
{
|
|
accessorKey: "regDt",
|
|
header: "등록일",
|
|
cell: ({ row }) => dayjs(row.original.regDt).format("YYYY-MM-DD"),
|
|
},
|
|
];
|
|
|
|
const AttachmentButton = ({ atflCd }: { atflCd: string }) => {
|
|
const handleDownload = async (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
e.stopPropagation();
|
|
try {
|
|
let filename = "";
|
|
const response = await AttachmentApi.downloadAttachmentByAtflCd(atflCd);
|
|
const contentDisposition = response.headers["content-disposition"];
|
|
if (contentDisposition) {
|
|
const filenameMatch = contentDisposition.match(
|
|
/filename\*=UTF-8''([^;]+)/,
|
|
);
|
|
if (filenameMatch) {
|
|
filename = decodeURIComponent(filenameMatch[1]);
|
|
}
|
|
}
|
|
|
|
const blob = new Blob([response.data]);
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
|
|
link.href = url;
|
|
link.download = filename;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(link);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Button size="icon" color="white" onClick={handleDownload}>
|
|
<i className="diveicon di-download" />
|
|
</Button>
|
|
);
|
|
};
|