feat: Introduce new date picker components for enhanced date selection

- Added `FormDatePicker` and `InlineCellDatePicker` components to provide flexible date selection options.
- Implemented a modernized date picker interface with calendar navigation, year selection, and time input capabilities.
- Enhanced `DateWidget` to support both date and datetime formats, improving user experience in date handling.
- Updated `CategoryColumnList` to group columns dynamically and manage expanded states for better organization.
- Improved `AlertDialog` z-index for better visibility in modal interactions.
- Refactored `ScreenModal` to ensure consistent modal behavior across the application.

frontend/lib/registry/components/image-display/ImageDisplayConfigPanel.tsx

@@ -9,63 +9,166 @@ import { ImageDisplayConfig } from "./types";
 
 export interface ImageDisplayConfigPanelProps {
   config: ImageDisplayConfig;
-  onChange: (config: Partial<ImageDisplayConfig>) => void;
+  onChange?: (config: Partial<ImageDisplayConfig>) => void;
+  onConfigChange?: (config: Partial<ImageDisplayConfig>) => void;
 }
 
 /**
  * ImageDisplay 설정 패널
- * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
  */
 export const ImageDisplayConfigPanel: React.FC<ImageDisplayConfigPanelProps> = ({
   config,
   onChange,
+  onConfigChange,
 }) => {
   const handleChange = (key: keyof ImageDisplayConfig, value: any) => {
-    onChange({ [key]: value });
+    const update = { ...config, [key]: value };
+    onChange?.(update);
+    onConfigChange?.(update);
   };
 
   return (
     <div className="space-y-4">
-      <div className="text-sm font-medium">
-        image-display 설정
+      <div className="text-sm font-medium">이미지 표시 설정</div>
+
+      {/* 이미지 URL */}
+      <div className="space-y-2">
+        <Label htmlFor="imageUrl" className="text-xs">
+          기본 이미지 URL
+        </Label>
+        <Input
+          id="imageUrl"
+          value={config.imageUrl || ""}
+          onChange={(e) => handleChange("imageUrl", e.target.value)}
+          placeholder="https://..."
+          className="h-8 text-xs"
+        />
+        <p className="text-muted-foreground text-[10px]">
+          데이터 바인딩 값이 없을 때 표시할 기본 이미지
+        </p>
       </div>
 
-            {/* file 관련 설정 */}
+      {/* 대체 텍스트 */}
       <div className="space-y-2">
-        <Label htmlFor="placeholder">플레이스홀더</Label>
+        <Label htmlFor="altText" className="text-xs">
+          대체 텍스트 (alt)
+        </Label>
+        <Input
+          id="altText"
+          value={config.altText || ""}
+          onChange={(e) => handleChange("altText", e.target.value)}
+          placeholder="이미지 설명"
+          className="h-8 text-xs"
+        />
+      </div>
+
+      {/* 이미지 맞춤 */}
+      <div className="space-y-2">
+        <Label htmlFor="objectFit" className="text-xs">
+          이미지 맞춤 (Object Fit)
+        </Label>
+        <Select
+          value={config.objectFit || "contain"}
+          onValueChange={(value) => handleChange("objectFit", value)}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="contain">Contain (비율 유지, 전체 표시)</SelectItem>
+            <SelectItem value="cover">Cover (비율 유지, 영역 채움)</SelectItem>
+            <SelectItem value="fill">Fill (영역에 맞춤)</SelectItem>
+            <SelectItem value="none">None (원본 크기)</SelectItem>
+            <SelectItem value="scale-down">Scale Down (축소만)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 테두리 둥글기 */}
+      <div className="space-y-2">
+        <Label htmlFor="borderRadius" className="text-xs">
+          테두리 둥글기 (px)
+        </Label>
+        <Input
+          id="borderRadius"
+          type="number"
+          min="0"
+          max="50"
+          value={config.borderRadius ?? 8}
+          onChange={(e) => handleChange("borderRadius", parseInt(e.target.value) || 0)}
+          className="h-8 text-xs"
+        />
+      </div>
+
+      {/* 배경 색상 */}
+      <div className="space-y-2">
+        <Label htmlFor="backgroundColor" className="text-xs">
+          배경 색상
+        </Label>
+        <div className="flex items-center gap-2">
+          <input
+            type="color"
+            value={config.backgroundColor || "#f9fafb"}
+            onChange={(e) => handleChange("backgroundColor", e.target.value)}
+            className="h-8 w-8 cursor-pointer rounded border"
+          />
+          <Input
+            id="backgroundColor"
+            value={config.backgroundColor || "#f9fafb"}
+            onChange={(e) => handleChange("backgroundColor", e.target.value)}
+            className="h-8 flex-1 text-xs"
+          />
+        </div>
+      </div>
+
+      {/* 플레이스홀더 */}
+      <div className="space-y-2">
+        <Label htmlFor="placeholder" className="text-xs">
+          이미지 없을 때 텍스트
+        </Label>
         <Input
           id="placeholder"
           value={config.placeholder || ""}
           onChange={(e) => handleChange("placeholder", e.target.value)}
+          placeholder="이미지 없음"
+          className="h-8 text-xs"
         />
       </div>
 
-      {/* 공통 설정 */}
-      <div className="space-y-2">
-        <Label htmlFor="disabled">비활성화</Label>
+      {/* 테두리 표시 */}
+      <div className="flex items-center gap-2">
         <Checkbox
-          id="disabled"
-          checked={config.disabled || false}
-          onCheckedChange={(checked) => handleChange("disabled", checked)}
+          id="showBorder"
+          checked={config.showBorder ?? true}
+          onCheckedChange={(checked) => handleChange("showBorder", checked)}
         />
+        <Label htmlFor="showBorder" className="text-xs cursor-pointer">
+          테두리 표시
+        </Label>
       </div>
 
-      <div className="space-y-2">
-        <Label htmlFor="required">필수 입력</Label>
-        <Checkbox
-          id="required"
-          checked={config.required || false}
-          onCheckedChange={(checked) => handleChange("required", checked)}
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="readonly">읽기 전용</Label>
+      {/* 읽기 전용 */}
+      <div className="flex items-center gap-2">
         <Checkbox
           id="readonly"
           checked={config.readonly || false}
           onCheckedChange={(checked) => handleChange("readonly", checked)}
         />
+        <Label htmlFor="readonly" className="text-xs cursor-pointer">
+          읽기 전용
+        </Label>
+      </div>
+
+      {/* 필수 입력 */}
+      <div className="flex items-center gap-2">
+        <Checkbox
+          id="required"
+          checked={config.required || false}
+          onCheckedChange={(checked) => handleChange("required", checked)}
+        />
+        <Label htmlFor="required" className="text-xs cursor-pointer">
+          필수 입력
+        </Label>
       </div>
     </div>
   );