fix: 날짜 입력 필드 높이 반응형 개선
- 드래그 드롭으로 배치되는 인풋 필드 기본 높이 30px로 변경 - 날짜 입력 컴포넌트의 모든 외부 div에 h-full 추가 - 모든 input 요소에 min-h-full 추가하여 부모 높이를 제대로 따르도록 수정 - daterange, year 타입도 동일하게 적용
This commit is contained in:
parent
a868c5c413
commit
3f32996014
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue