feat: add responsive tests for Option Settings and Split Panel

- Implemented responsive testing scripts for Option Settings and ResponsiveSplitPanel components.
- Added tests to verify layout behavior across various screen sizes (desktop, tablet, mobile).
- Generated screenshots and reports for visual validation of responsive designs.

Made-with: Cursor

frontend/components/v2/config-panels/V2InputConfigPanel.tsx

@@ -11,7 +11,7 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { Settings, ChevronDown, Loader2 } from "lucide-react";
+import { Settings, ChevronDown, Loader2, Type, Hash, Lock, AlignLeft, SlidersHorizontal, Palette, ListOrdered } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
 import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
@@ -84,29 +84,51 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
 
   return (
     <div className="space-y-4">
-      {/* ─── 1단계: 입력 타입 선택 ─── */}
+      {/* ─── 1단계: 입력 타입 선택 (카드 방식) ─── */}
       <div className="space-y-2">
-        <p className="text-sm font-medium">입력 타입</p>
-        <Select
-          value={inputType}
-          onValueChange={(value) => updateConfig("inputType", value)}
-        >
-          <SelectTrigger className="h-8 text-sm">
-            <SelectValue placeholder="입력 타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="text">텍스트</SelectItem>
-            <SelectItem value="number">숫자</SelectItem>
-            <SelectItem value="password">비밀번호</SelectItem>
-            <SelectItem value="textarea">여러 줄 텍스트</SelectItem>
-            <SelectItem value="slider">슬라이더</SelectItem>
-            <SelectItem value="color">색상 선택</SelectItem>
-            <SelectItem value="numbering">채번 (자동생성)</SelectItem>
-          </SelectContent>
-        </Select>
+        <div className="flex items-center gap-2">
+          <Type className="h-4 w-4 text-muted-foreground" />
+          <p className="text-sm font-medium">입력 타입</p>
+        </div>
         <p className="text-[11px] text-muted-foreground">입력 필드의 종류를 선택해요</p>
       </div>
 
+      <div className="grid grid-cols-2 gap-2">
+        {[
+          { value: "text", icon: Type, label: "텍스트", desc: "일반 텍스트 입력" },
+          { value: "number", icon: Hash, label: "숫자", desc: "숫자만 입력" },
+          { value: "password", icon: Lock, label: "비밀번호", desc: "마스킹 처리" },
+          { value: "textarea", icon: AlignLeft, label: "여러 줄", desc: "긴 텍스트 입력" },
+          { value: "slider", icon: SlidersHorizontal, label: "슬라이더", desc: "범위 선택" },
+          { value: "color", icon: Palette, label: "색상", desc: "색상 선택기" },
+          { value: "numbering", icon: ListOrdered, label: "채번", desc: "자동 번호 생성" },
+        ].map((item) => (
+          <button
+            key={item.value}
+            type="button"
+            onClick={() => updateConfig("inputType", item.value)}
+            className={cn(
+              "flex items-center gap-2 rounded-lg border p-2.5 text-left transition-all",
+              inputType === item.value
+                ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                : "border-border hover:border-primary/30 hover:bg-muted/30"
+            )}
+          >
+            <item.icon className={cn(
+              "h-4 w-4 shrink-0",
+              inputType === item.value ? "text-primary" : "text-muted-foreground"
+            )} />
+            <div className="min-w-0">
+              <span className={cn(
+                "text-xs font-medium block",
+                inputType === item.value ? "text-primary" : "text-foreground"
+              )}>{item.label}</span>
+              <span className="text-[10px] text-muted-foreground block truncate">{item.desc}</span>
+            </div>
+          </button>
+        ))}
+      </div>
+
       {/* ─── 채번 타입 전용 안내 ─── */}
       {inputType === "numbering" && (
         <div className="rounded-lg border bg-muted/30 p-4 space-y-3">