전체적인 스타일 수정

frontend/components/admin/CompanyTable.tsx

@@ -3,7 +3,6 @@ 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";
-import { Badge } from "@/components/ui/badge";
 
 interface CompanyTableProps {
   companies: Company[];
@@ -14,13 +13,15 @@ interface CompanyTableProps {
 
 /**
  * 회사 목록 테이블 컴포넌트
+ * 데스크톱: 테이블 뷰
+ * 모바일/태블릿: 카드 뷰
  */
 export function CompanyTable({ companies, isLoading, onEdit, onDelete }: CompanyTableProps) {
   // 디스크 사용량 포맷팅 함수
   const formatDiskUsage = (company: Company) => {
     if (!company.diskUsage) {
       return (
-        <div className="text-muted-foreground flex items-center gap-1">
+        <div className="flex items-center gap-1 text-muted-foreground">
           <HardDrive className="h-3 w-3" />
           <span className="text-xs">정보 없음</span>
         </div>
@@ -32,45 +33,142 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
     return (
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-1">
-          <FileText className="h-3 w-3 text-blue-500" />
+          <FileText className="h-3 w-3 text-primary" />
           <span className="text-xs font-medium">{fileCount}개 파일</span>
         </div>
         <div className="flex items-center gap-1">
-          <HardDrive className="h-3 w-3 text-green-500" />
+          <HardDrive className="h-3 w-3 text-primary" />
           <span className="text-xs">{totalSizeMB.toFixed(1)} MB</span>
         </div>
       </div>
     );
   };
-  // 상태에 따른 Badge 색상 결정
-  // console.log(companies);
+
   // 로딩 상태 렌더링
   if (isLoading) {
     return (
-      <div className="rounded-md border">
+      <>
+        {/* 데스크톱 테이블 스켈레톤 */}
+        <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
+          <Table>
+            <TableHeader>
+              <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                {COMPANY_TABLE_COLUMNS.map((column) => (
+                  <TableHead key={column.key} className="h-12 text-sm font-semibold">
+                    {column.label}
+                  </TableHead>
+                ))}
+                <TableHead className="h-12 text-sm font-semibold">디스크 사용량</TableHead>
+                <TableHead className="h-12 text-sm font-semibold">작업</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Array.from({ length: 10 }).map((_, index) => (
+                <TableRow key={index} className="border-b">
+                  <TableCell className="h-16">
+                    <div className="h-4 animate-pulse rounded bg-muted"></div>
+                  </TableCell>
+                  <TableCell className="h-16">
+                    <div className="h-4 animate-pulse rounded bg-muted"></div>
+                  </TableCell>
+                  <TableCell className="h-16">
+                    <div className="h-4 animate-pulse rounded bg-muted"></div>
+                  </TableCell>
+                  <TableCell className="h-16">
+                    <div className="h-4 animate-pulse rounded bg-muted"></div>
+                  </TableCell>
+                  <TableCell className="h-16">
+                    <div className="flex gap-2">
+                      <div className="h-8 w-8 animate-pulse rounded bg-muted"></div>
+                      <div className="h-8 w-8 animate-pulse rounded bg-muted"></div>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+
+        {/* 모바일/태블릿 카드 스켈레톤 */}
+        <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+          {Array.from({ length: 6 }).map((_, index) => (
+            <div key={index} className="rounded-lg border bg-card p-4 shadow-sm">
+              <div className="mb-4 flex items-start justify-between">
+                <div className="flex-1 space-y-2">
+                  <div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
+                  <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
+                </div>
+              </div>
+              <div className="space-y-2 border-t pt-4">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <div key={i} className="flex justify-between">
+                    <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
+                    <div className="h-4 w-32 animate-pulse rounded bg-muted"></div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </>
+    );
+  }
+
+  // 데이터가 없을 때
+  if (companies.length === 0) {
+    return (
+      <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
+        <div className="flex flex-col items-center gap-2 text-center">
+          <p className="text-sm text-muted-foreground">등록된 회사가 없습니다.</p>
+        </div>
+      </div>
+    );
+  }
+
+  // 실제 데이터 렌더링
+  return (
+    <>
+      {/* 데스크톱 테이블 뷰 (lg 이상) */}
+      <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
         <Table>
           <TableHeader>
-            <TableRow>
+            <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
               {COMPANY_TABLE_COLUMNS.map((column) => (
-                <TableHead key={column.key} style={{ width: column.width }}>
+                <TableHead key={column.key} className="h-12 text-sm font-semibold">
                   {column.label}
                 </TableHead>
               ))}
-              <TableHead className="w-[140px]">작업</TableHead>
+              <TableHead className="h-12 text-sm font-semibold">디스크 사용량</TableHead>
+              <TableHead className="h-12 text-sm font-semibold">작업</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>
+            {companies.map((company) => (
+              <TableRow key={company.regdate + company.company_code} className="border-b transition-colors hover:bg-muted/50">
+                <TableCell className="h-16 font-mono text-sm">{company.company_code}</TableCell>
+                <TableCell className="h-16 text-sm font-medium">{company.company_name}</TableCell>
+                <TableCell className="h-16 text-sm">{company.writer}</TableCell>
+                <TableCell className="h-16">{formatDiskUsage(company)}</TableCell>
+                <TableCell className="h-16">
                   <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>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => onEdit(company)}
+                      className="h-8 w-8"
+                      aria-label="수정"
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => onDelete(company)}
+                      className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                      aria-label="삭제"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
                   </div>
                 </TableCell>
               </TableRow>
@@ -78,86 +176,58 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
           </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>
+      {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
+      <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+        {companies.map((company) => (
+          <div
+            key={company.regdate + company.company_code}
+            className="rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
+          >
+            {/* 헤더 */}
+            <div className="mb-4 flex items-start justify-between">
+              <div className="flex-1">
+                <h3 className="text-base font-semibold">{company.company_name}</h3>
+                <p className="mt-1 font-mono text-sm text-muted-foreground">{company.company_code}</p>
+              </div>
+            </div>
+
+            {/* 정보 */}
+            <div className="space-y-2 border-t pt-4">
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">작성자</span>
+                <span className="font-medium">{company.writer}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">디스크 사용량</span>
+                <div>{formatDiskUsage(company)}</div>
+              </div>
+            </div>
+
+            {/* 액션 */}
+            <div className="mt-4 flex gap-2 border-t pt-4">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onEdit(company)}
+                className="h-9 flex-1 gap-2 text-sm"
+              >
+                <Edit className="h-4 w-4" />
+                수정
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onDelete(company)}
+                className="h-9 flex-1 gap-2 text-sm text-destructive hover:bg-destructive/10 hover:text-destructive"
+              >
+                <Trash2 className="h-4 w-4" />
+                삭제
+              </Button>
+            </div>
+          </div>
+        ))}
       </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-[140px]">디스크 사용량</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 className="py-2">{formatDiskUsage(company)}</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>
+    </>
   );
 }