최초커밋

frontend/components/admin/CompanyTable.tsx

@@ -0,0 +1,134 @@
+import { Edit, Trash2 } from "lucide-react";
+import { Company } from "@/types/company";
+import { COMPANY_TABLE_COLUMNS } from "@/constants/company";
+import { Button } from "@/components/ui/button";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+interface CompanyTableProps {
+  companies: Company[];
+  isLoading: boolean;
+  onEdit: (company: Company) => void;
+  onDelete: (company: Company) => void;
+}
+
+/**
+ * 회사 목록 테이블 컴포넌트
+ */
+export function CompanyTable({ companies, isLoading, onEdit, onDelete }: CompanyTableProps) {
+  // 상태에 따른 Badge 색상 결정
+  console.log(companies);
+  // 로딩 상태 렌더링
+  if (isLoading) {
+    return (
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {COMPANY_TABLE_COLUMNS.map((column) => (
+                <TableHead key={column.key} style={{ width: column.width }}>
+                  {column.label}
+                </TableHead>
+              ))}
+              <TableHead className="w-[140px]">작업</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <TableRow key={index}>
+                {COMPANY_TABLE_COLUMNS.map((column) => (
+                  <TableCell key={column.key}>
+                    <div className="bg-muted h-4 animate-pulse rounded"></div>
+                  </TableCell>
+                ))}
+                <TableCell>
+                  <div className="flex gap-2">
+                    <div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
+                    <div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  }
+
+  // 데이터가 없을 때
+  if (companies.length === 0) {
+    return (
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {COMPANY_TABLE_COLUMNS.map((column) => (
+                <TableHead key={column.key} style={{ width: column.width }}>
+                  {column.label}
+                </TableHead>
+              ))}
+              <TableHead className="w-[140px]">작업</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell colSpan={COMPANY_TABLE_COLUMNS.length + 1} className="h-24 text-center">
+                <div className="text-muted-foreground flex flex-col items-center justify-center">
+                  <p>등록된 회사가 없습니다.</p>
+                </div>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    );
+  }
+
+  // 실제 데이터 렌더링
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader className="bg-muted">
+          <TableRow>
+            {COMPANY_TABLE_COLUMNS.map((column) => (
+              <TableHead key={column.key} style={{ width: column.width }}>
+                {column.label}
+              </TableHead>
+            ))}
+            <TableHead className="w-[120px]">작업</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {companies.map((company) => (
+            <TableRow key={company.regdate + company.company_code} className="hover:bg-muted/50">
+              <TableCell className="font-mono text-sm">{company.company_code}</TableCell>
+              <TableCell className="font-medium">{company.company_name}</TableCell>
+              <TableCell>{company.writer}</TableCell>
+              <TableCell>
+                <div className="flex gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onEdit(company)}
+                    className="h-8 w-8 p-0"
+                    title="수정"
+                  >
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onDelete(company)}
+                    className="text-destructive hover:text-destructive h-8 w-8 p-0 hover:font-bold"
+                    title="삭제"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}