전체적인 스타일 수정

frontend/components/admin/DiskUsageSummary.tsx

@@ -1,7 +1,6 @@
 import { RefreshCw, HardDrive, FileText, Building2, Clock } from "lucide-react";
 import { AllDiskUsageInfo } from "@/types/company";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 
 interface DiskUsageSummaryProps {
@@ -16,25 +15,30 @@ interface DiskUsageSummaryProps {
 export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUsageSummaryProps) {
   if (!diskUsageInfo) {
     return (
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <div className="rounded-lg border bg-card p-6 shadow-sm">
+        <div className="mb-4 flex items-center justify-between">
           <div>
-            <CardTitle className="text-sm font-medium">디스크 사용량</CardTitle>
-            <CardDescription>전체 회사 파일 저장 현황</CardDescription>
+            <h3 className="text-sm font-semibold">디스크 사용량</h3>
+            <p className="text-xs text-muted-foreground">전체 회사 파일 저장 현황</p>
           </div>
-          <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading} className="h-8 w-8 p-0">
+          <Button 
+            variant="outline" 
+            size="icon" 
+            onClick={onRefresh} 
+            disabled={isLoading} 
+            className="h-8 w-8"
+            aria-label="새로고침"
+          >
             <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
           </Button>
-        </CardHeader>
-        <CardContent>
-          <div className="text-muted-foreground flex items-center justify-center py-6">
-            <div className="text-center">
-              <HardDrive className="mx-auto mb-2 h-8 w-8" />
-              <p className="text-sm">디스크 사용량 정보를 불러오는 중...</p>
-            </div>
+        </div>
+        <div className="flex items-center justify-center py-6 text-muted-foreground">
+          <div className="text-center">
+            <HardDrive className="mx-auto mb-2 h-8 w-8" />
+            <p className="text-sm">디스크 사용량 정보를 불러오는 중...</p>
           </div>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     );
   }
 
@@ -42,97 +46,96 @@ export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUs
   const lastCheckedDate = new Date(lastChecked);
 
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <div className="rounded-lg border bg-card p-6 shadow-sm">
+      <div className="mb-4 flex items-center justify-between">
         <div>
-          <CardTitle className="text-sm font-medium">디스크 사용량 현황</CardTitle>
-          <CardDescription>전체 회사 파일 저장 통계</CardDescription>
+          <h3 className="text-sm font-semibold">디스크 사용량 현황</h3>
+          <p className="text-xs text-muted-foreground">전체 회사 파일 저장 통계</p>
         </div>
         <Button
           variant="outline"
-          size="sm"
+          size="icon"
           onClick={onRefresh}
           disabled={isLoading}
-          className="h-8 w-8 p-0"
-          title="새로고침"
+          className="h-8 w-8"
+          aria-label="새로고침"
         >
           <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
         </Button>
-      </CardHeader>
-      <CardContent>
-        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
-          {/* 총 회사 수 */}
-          <div className="flex items-center space-x-2">
-            <Building2 className="h-4 w-4 text-blue-500" />
-            <div>
-              <p className="text-muted-foreground text-xs">총 회사</p>
-              <p className="text-lg font-semibold">{summary.totalCompanies}개</p>
-            </div>
-          </div>
+      </div>
 
-          {/* 총 파일 수 */}
-          <div className="flex items-center space-x-2">
-            <FileText className="h-4 w-4 text-green-500" />
-            <div>
-              <p className="text-muted-foreground text-xs">총 파일</p>
-              <p className="text-lg font-semibold">{summary.totalFiles.toLocaleString()}개</p>
-            </div>
-          </div>
-
-          {/* 총 용량 */}
-          <div className="flex items-center space-x-2">
-            <HardDrive className="h-4 w-4 text-orange-500" />
-            <div>
-              <p className="text-muted-foreground text-xs">총 용량</p>
-              <p className="text-lg font-semibold">{summary.totalSizeMB.toFixed(1)} MB</p>
-            </div>
-          </div>
-
-          {/* 마지막 업데이트 */}
-          <div className="flex items-center space-x-2">
-            <Clock className="h-4 w-4 text-gray-500" />
-            <div>
-              <p className="text-muted-foreground text-xs">마지막 확인</p>
-              <p className="text-xs font-medium">
-                {lastCheckedDate.toLocaleString("ko-KR", {
-                  month: "short",
-                  day: "numeric",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })}
-              </p>
-            </div>
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+        {/* 총 회사 수 */}
+        <div className="flex items-center space-x-2">
+          <Building2 className="h-4 w-4 text-primary" />
+          <div>
+            <p className="text-xs text-muted-foreground">총 회사</p>
+            <p className="text-lg font-semibold">{summary.totalCompanies}개</p>
           </div>
         </div>
 
-        {/* 용량 기준 상태 표시 */}
-        <div className="mt-4 border-t pt-4">
-          <div className="flex items-center justify-between">
-            <span className="text-muted-foreground text-xs">저장소 상태</span>
-            <Badge
-              variant={summary.totalSizeMB > 1000 ? "destructive" : summary.totalSizeMB > 500 ? "secondary" : "default"}
-            >
-              {summary.totalSizeMB > 1000 ? "용량 주의" : summary.totalSizeMB > 500 ? "보통" : "여유"}
-            </Badge>
-          </div>
-
-          {/* 간단한 진행 바 */}
-          <div className="mt-2 h-2 w-full rounded-full bg-gray-200">
-            <div
-              className={`h-2 rounded-full transition-all duration-300 ${
-                summary.totalSizeMB > 1000 ? "bg-destructive/100" : summary.totalSizeMB > 500 ? "bg-yellow-500" : "bg-green-500"
-              }`}
-              style={{
-                width: `${Math.min((summary.totalSizeMB / 2000) * 100, 100)}%`,
-              }}
-            />
-          </div>
-          <div className="text-muted-foreground mt-1 flex justify-between text-xs">
-            <span>0 MB</span>
-            <span>2,000 MB (권장 최대)</span>
+        {/* 총 파일 수 */}
+        <div className="flex items-center space-x-2">
+          <FileText className="h-4 w-4 text-primary" />
+          <div>
+            <p className="text-xs text-muted-foreground">총 파일</p>
+            <p className="text-lg font-semibold">{summary.totalFiles.toLocaleString()}개</p>
           </div>
         </div>
-      </CardContent>
-    </Card>
+
+        {/* 총 용량 */}
+        <div className="flex items-center space-x-2">
+          <HardDrive className="h-4 w-4 text-primary" />
+          <div>
+            <p className="text-xs text-muted-foreground">총 용량</p>
+            <p className="text-lg font-semibold">{summary.totalSizeMB.toFixed(1)} MB</p>
+          </div>
+        </div>
+
+        {/* 마지막 업데이트 */}
+        <div className="flex items-center space-x-2">
+          <Clock className="h-4 w-4 text-muted-foreground" />
+          <div>
+            <p className="text-xs text-muted-foreground">마지막 확인</p>
+            <p className="text-xs font-medium">
+              {lastCheckedDate.toLocaleString("ko-KR", {
+                month: "short",
+                day: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
+              })}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* 용량 기준 상태 표시 */}
+      <div className="mt-4 border-t pt-4">
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground">저장소 상태</span>
+          <Badge
+            variant={summary.totalSizeMB > 1000 ? "destructive" : summary.totalSizeMB > 500 ? "secondary" : "default"}
+          >
+            {summary.totalSizeMB > 1000 ? "용량 주의" : summary.totalSizeMB > 500 ? "보통" : "여유"}
+          </Badge>
+        </div>
+
+        {/* 간단한 진행 바 */}
+        <div className="mt-2 h-2 w-full rounded-full bg-muted">
+          <div
+            className={`h-2 rounded-full transition-all duration-300 ${
+              summary.totalSizeMB > 1000 ? "bg-destructive" : summary.totalSizeMB > 500 ? "bg-primary/60" : "bg-primary"
+            }`}
+            style={{
+              width: `${Math.min((summary.totalSizeMB / 2000) * 100, 100)}%`,
+            }}
+          />
+        </div>
+        <div className="mt-1 flex justify-between text-xs text-muted-foreground">
+          <span>0 MB</span>
+          <span>2,000 MB (권장 최대)</span>
+        </div>
+      </div>
+    </div>
   );
 }