리스트에 카드 뷰 모드 추가

frontend/components/admin/dashboard/widgets/list-widget/ListTableOptions.tsx

@@ -7,6 +7,7 @@ import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Input } from "@/components/ui/input";
 
 interface ListTableOptionsProps {
   config: ListWidgetConfig;
@@ -26,6 +27,28 @@ export function ListTableOptions({ config, onChange }: ListTableOptionsProps) {
       </div>
 
       <div className="space-y-6">
+        {/* 뷰 모드 */}
+        <div>
+          <Label className="mb-2 block text-sm font-medium">뷰 모드</Label>
+          <RadioGroup
+            value={config.viewMode}
+            onValueChange={(value: "table" | "card") => onChange({ viewMode: value })}
+          >
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="table" id="table" />
+              <Label htmlFor="table" className="cursor-pointer font-normal">
+                📊 테이블 (기본)
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="card" id="card" />
+              <Label htmlFor="card" className="cursor-pointer font-normal">
+                🗂️ 카드
+              </Label>
+            </div>
+          </RadioGroup>
+        </div>
+
         {/* 컬럼 모드 */}
         <div>
           <Label className="mb-2 block text-sm font-medium">컬럼 설정 방식</Label>
@@ -48,6 +71,22 @@ export function ListTableOptions({ config, onChange }: ListTableOptionsProps) {
           </RadioGroup>
         </div>
 
+        {/* 카드 뷰 컬럼 수 */}
+        {config.viewMode === "card" && (
+          <div>
+            <Label className="mb-2 block text-sm font-medium">카드 컬럼 수</Label>
+            <Input
+              type="number"
+              min="1"
+              max="6"
+              value={config.cardColumns || 3}
+              onChange={(e) => onChange({ cardColumns: parseInt(e.target.value) || 3 })}
+              className="w-full"
+            />
+            <p className="mt-1 text-xs text-gray-500">한 줄에 표시할 카드 개수 (1-6)</p>
+          </div>
+        )}
+
         {/* 페이지 크기 */}
         <div>
           <Label className="mb-2 block text-sm font-medium">페이지당 행 수</Label>
@@ -86,26 +125,30 @@ export function ListTableOptions({ config, onChange }: ListTableOptionsProps) {
         <div className="space-y-3">
           <Label className="text-sm font-medium">스타일</Label>
           <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <Checkbox
-                id="showHeader"
-                checked={config.showHeader}
-                onCheckedChange={(checked) => onChange({ showHeader: checked as boolean })}
-              />
-              <Label htmlFor="showHeader" className="cursor-pointer font-normal">
-                헤더 표시
-              </Label>
-            </div>
-            <div className="flex items-center gap-2">
-              <Checkbox
-                id="stripedRows"
-                checked={config.stripedRows}
-                onCheckedChange={(checked) => onChange({ stripedRows: checked as boolean })}
-              />
-              <Label htmlFor="stripedRows" className="cursor-pointer font-normal">
-                줄무늬 행
-              </Label>
-            </div>
+            {config.viewMode === "table" && (
+              <>
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="showHeader"
+                    checked={config.showHeader}
+                    onCheckedChange={(checked) => onChange({ showHeader: checked as boolean })}
+                  />
+                  <Label htmlFor="showHeader" className="cursor-pointer font-normal">
+                    헤더 표시
+                  </Label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="stripedRows"
+                    checked={config.stripedRows}
+                    onCheckedChange={(checked) => onChange({ stripedRows: checked as boolean })}
+                  />
+                  <Label htmlFor="stripedRows" className="cursor-pointer font-normal">
+                    줄무늬 행
+                  </Label>
+                </div>
+              </>
+            )}
             <div className="flex items-center gap-2">
               <Checkbox
                 id="compactMode"