feat: ScreenModal 및 V2 컴포넌트 레이아웃 개선

- ScreenModal 컴포넌트의 모달 크기 조정을 위해 헤더 및 푸터 높이를 수정하고, 여백을 최소화하여 디자인 일치를 도모하였습니다.
- V2 컴포넌트에서 라벨 높이를 계산하여 절대 위치로 배치하도록 변경하였으며, 입력 필드 및 선택 컴포넌트의 구조를 개선하여 일관된 사용자 경험을 제공하였습니다.
- 플레이스홀더 기능을 추가하여 날짜 선택 시 사용자 편의성을 높였습니다.
- 관련 CSS 클래스를 업데이트하여 반응형 디자인을 강화하였습니다.
This commit is contained in:
DDD1542
2026-02-04 11:26:51 +09:00
parent faf4f566f7
commit 942eb079e8
12 changed files with 150 additions and 119 deletions

View File

@@ -744,37 +744,40 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
const componentWidth = size?.width || style?.width;
const componentHeight = size?.height || style?.height;
// 라벨 높이 계산 (기본 20px, 사용자 설정에 따라 조정)
const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
return (
<div
ref={ref}
id={id}
className="flex flex-col"
className="relative"
style={{
width: componentWidth,
// 🔧 높이는 컨테이너가 아닌 입력 필드에만 적용 (라벨 높이는 별도)
height: componentHeight,
}}
>
{/* 🔧 라벨을 absolute로 컴포넌트 위에 배치 */}
{showLabel && (
<Label
htmlFor={id}
style={{
fontSize: style?.labelFontSize,
color: style?.labelColor,
fontWeight: style?.labelFontWeight,
marginBottom: style?.labelMarginBottom,
position: "absolute",
top: `-${estimatedLabelHeight}px`,
left: 0,
fontSize: style?.labelFontSize || "14px",
color: style?.labelColor || "#64748b",
fontWeight: style?.labelFontWeight || "500",
}}
className="text-sm font-medium flex-shrink-0"
className="text-sm font-medium whitespace-nowrap"
>
{label}
{required && <span className="text-orange-500 ml-0.5">*</span>}
</Label>
)}
<div
className="min-h-0"
style={{
height: componentHeight,
}}
>
<div className="h-full w-full">
{renderSelect()}
</div>
</div>