From 3f3299601430556984ffd7ed86ee121e45abe83a Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 10 Nov 2025 14:33:15 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=82=A0=EC=A7=9C=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=20=ED=95=84=EB=93=9C=20=EB=86=92=EC=9D=B4=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 드래그 드롭으로 배치되는 인풋 필드 기본 높이 30px로 변경
- 날짜 입력 컴포넌트의 모든 외부 div에 h-full 추가
- 모든 input 요소에 min-h-full 추가하여 부모 높이를 제대로 따르도록 수정
- daterange, year 타입도 동일하게 적용
---
 frontend/components/screen/ScreenDesigner.tsx    | 16 ++++++++--------
 .../components/date-input/DateInputComponent.tsx | 14 +++++++-------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 7db03da6..4fa083ba 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -835,7 +835,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
         const columns: ColumnInfo[] = (columnsResponse || []).map((col: any) => {
           const widgetType = col.widgetType || col.widget_type || col.webType || col.web_type;
-          
+
           // 🔍 이미지 타입 디버깅
           // if (widgetType === "image" || col.webType === "image" || col.web_type === "image") {
           //   console.log("🖼️ 이미지 컬럼 발견:", {
@@ -845,7 +845,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           //     rawData: col,
           //   });
           // }
-          
+
           return {
             tableName: col.tableName || tableName,
             columnName: col.columnName || col.column_name,
@@ -1965,16 +1965,16 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
       // 🔥 중요: 줌 레벨과 transform-origin을 고려한 마우스 위치 계산
       // 1. 캔버스가 scale() 변환되어 있음 (transform-origin: top center)
       // 2. 캔버스가 justify-center로 중앙 정렬되어 있음
-      
+
       // 실제 캔버스 논리적 크기
       const canvasLogicalWidth = screenResolution.width;
-      
+
       // 화면상 캔버스 실제 크기 (스케일 적용 후)
       const canvasVisualWidth = canvasLogicalWidth * zoomLevel;
-      
+
       // 중앙 정렬로 인한 왼쪽 오프셋 계산
       // rect.left는 이미 중앙 정렬된 위치를 반영하고 있음
-      
+
       // 마우스의 캔버스 내 상대 위치 (스케일 보정)
       const mouseXInCanvas = (e.clientX - rect.left) / zoomLevel;
       const mouseYInCanvas = (e.clientY - rect.top) / zoomLevel;
@@ -2388,7 +2388,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
               file: 240, // 파일 업로드 (40 * 6)
             };
 
-            return heightMap[widgetType] || 40; // 기본값 40
+            return heightMap[widgetType] || 30; // 기본값 30px로 변경
           };
 
           // 웹타입별 기본 설정 생성
@@ -4364,7 +4364,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
               return (
                 <div className="bg-card border-border fixed right-6 bottom-20 z-50 rounded-lg border shadow-lg">
                   <div className="flex flex-col gap-2 p-3">
-                    <div className="mb-1 flex items-center gap-2 text-xs text-muted-foreground">
+                    <div className="text-muted-foreground mb-1 flex items-center gap-2 text-xs">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="14"
diff --git a/frontend/lib/registry/components/date-input/DateInputComponent.tsx b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
index 928df3de..7a938ca2 100644
--- a/frontend/lib/registry/components/date-input/DateInputComponent.tsx
+++ b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
@@ -273,7 +273,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
   // daterange 타입 전용 UI
   if (webType === "daterange") {
     return (
-      <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+      <div className={`relative h-full w-full ${className || ""}`} {...safeDomProps}>
         {/* 라벨 렌더링 */}
         {component.label && component.style?.labelDisplay !== false && (
           <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
@@ -298,7 +298,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
               }
             }}
             className={cn(
-              "h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
+              "h-full min-h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               "placeholder:text-muted-foreground",
               isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
@@ -325,7 +325,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
               }
             }}
             className={cn(
-              "h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
+              "h-full min-h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               "placeholder:text-muted-foreground",
               isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
@@ -341,7 +341,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
   // year 타입 전용 UI (number input with YYYY format)
   if (webType === "year") {
     return (
-      <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+      <div className={`relative h-full w-full ${className || ""}`} {...safeDomProps}>
         {/* 라벨 렌더링 */}
         {component.label && component.style?.labelDisplay !== false && (
           <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
@@ -367,7 +367,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
             }
           }}
           className={cn(
-            "box-border h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
+            "box-border h-full min-h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             "placeholder:text-muted-foreground",
             isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
@@ -380,7 +380,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
   }
 
   return (
-    <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+    <div className={`relative h-full w-full ${className || ""}`} {...safeDomProps}>
       {/* 라벨 렌더링 */}
       {component.label && component.style?.labelDisplay !== false && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
@@ -401,7 +401,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
         required={componentConfig.required || false}
         readOnly={componentConfig.readonly || finalAutoGeneration?.enabled || false}
           className={cn(
-            "box-border h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
+            "box-border h-full min-h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             "placeholder:text-muted-foreground",
             isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",