표 css 통일, 라벨링
This commit is contained in:
leeheejin
parent
d861eb5196
commit
8c437270a8
|
|
@ -1852,7 +1852,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
|
|||
</TableRow>
|
||||
) : data.length > 0 ? (
|
||||
data.map((row, rowIndex) => (
|
||||
<TableRow key={rowIndex} className="hover:bg-gradient-to-r hover:from-blue-50/50 hover:to-indigo-50/30 transition-all duration-200">
|
||||
<TableRow key={rowIndex} className="hover:bg-orange-100 transition-all duration-200">
|
||||
{/* 체크박스 셀 (삭제 기능이 활성화된 경우) */}
|
||||
{component.enableDelete && (
|
||||
<TableCell className="w-12 px-4">
|
||||
|
|
|
|||
|
|
@ -1696,7 +1696,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
|
|||
// 라벨 표시 여부 계산
|
||||
const shouldShowLabel =
|
||||
!hideLabel && // hideLabel이 true면 라벨 숨김
|
||||
component.style?.labelDisplay !== false &&
|
||||
(component.style?.labelDisplay ?? true) &&
|
||||
(component.label || component.style?.labelText) &&
|
||||
!templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함
|
||||
|
||||
|
|
|
|||
|
|
@ -185,6 +185,14 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
|
|||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 주황색 강조 영역 */}
|
||||
<div className="mt-4 mb-4 p-4 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-lg">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full"></div>
|
||||
<span className="text-sm font-medium text-orange-800">컴포넌트를 드래그하여 화면에 추가하세요</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 컴포넌트 목록 */}
|
||||
<div className="mt-6">
|
||||
<TabsContent value={selectedCategory} className="space-y-3">
|
||||
|
|
@ -205,7 +213,7 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
|
|||
e.currentTarget.style.opacity = '1';
|
||||
e.currentTarget.style.transform = 'none';
|
||||
}}
|
||||
className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-5 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-purple-500/15 hover:scale-[1.02] hover:border-purple-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
|
||||
className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-purple-500/15 hover:scale-[1.02] hover:border-purple-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
|
||||
title={component.description}
|
||||
>
|
||||
<div className="flex items-start space-x-4">
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
|
|||
labelMarginBottom: selectedComponent?.style?.labelMarginBottom || "4px",
|
||||
required: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).required : false) || false,
|
||||
readonly: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).readonly : false) || false,
|
||||
labelDisplay: selectedComponent?.style?.labelDisplay !== false,
|
||||
labelDisplay: selectedComponent?.style?.labelDisplay ?? true,
|
||||
// widgetType도 로컬 상태로 관리
|
||||
widgetType:
|
||||
(selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).widgetType : "text") || "text",
|
||||
|
|
@ -265,7 +265,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
|
|||
labelMarginBottom: selectedComponent?.style?.labelMarginBottom || "4px",
|
||||
required: widget?.required || false,
|
||||
readonly: widget?.readonly || false,
|
||||
labelDisplay: selectedComponent.style?.labelDisplay !== false,
|
||||
labelDisplay: selectedComponent.style?.labelDisplay ?? true,
|
||||
// widgetType 동기화
|
||||
widgetType: widget?.widgetType || "text",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -573,7 +573,7 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
|
|||
e.currentTarget.style.opacity = '1';
|
||||
e.currentTarget.style.transform = 'none';
|
||||
}}
|
||||
className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-5 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-blue-500/15 hover:scale-[1.02] hover:border-blue-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
|
||||
className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-blue-500/15 hover:scale-[1.02] hover:border-blue-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
|
||||
>
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ function SelectTrigger({
|
|||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-48 items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -261,7 +261,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
|
|||
// 카드 스타일 - 통일된 디자인 시스템 적용
|
||||
const cardStyle: React.CSSProperties = {
|
||||
backgroundColor: "white",
|
||||
border: "1px solid #e2e8f0", // 더 부드러운 보더 색상
|
||||
border: "2px solid #e5e7eb", // 더 명확한 테두리
|
||||
borderRadius: "12px", // 통일된 라운드 처리
|
||||
padding: "24px", // 더 여유로운 패딩
|
||||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 더 깊은 그림자
|
||||
|
|
@ -276,6 +276,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
|
|||
"&:hover": {
|
||||
transform: "translateY(-2px)",
|
||||
boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
||||
borderColor: "#f59e0b", // 호버 시 오렌지 테두리
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
|
|||
return (
|
||||
<div style={componentStyle} className={className} {...domProps}>
|
||||
{/* 라벨 렌더링 */}
|
||||
{component.label && component.style?.labelDisplay !== false && (
|
||||
{component.label && (component.style?.labelDisplay ?? true) && (
|
||||
<label
|
||||
style={{
|
||||
position: "absolute",
|
||||
|
|
|
|||
|
|
@ -920,8 +920,8 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
|
|||
)} */}
|
||||
|
||||
<div
|
||||
className="w-full h-full flex flex-col space-y-2"
|
||||
style={{ minHeight: '120px' }}
|
||||
className="w-full h-full flex flex-col space-y-3 p-4 border border-gray-200 rounded-lg bg-gradient-to-br from-gray-50 to-white shadow-sm hover:shadow-md transition-all duration-200"
|
||||
style={{ minHeight: '140px' }}
|
||||
>
|
||||
{/* 파일 업로드 영역 - 주석처리 */}
|
||||
{/* {!isDesignMode && (
|
||||
|
|
@ -985,7 +985,8 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
|
|||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-sm font-medium text-gray-700" style={{ textShadow: 'none', boxShadow: 'none' }}>
|
||||
<h4 className="text-base font-semibold text-gray-800 flex items-center gap-2">
|
||||
<File className="w-5 h-5 text-blue-500" />
|
||||
업로드된 파일 ({uploadedFiles.length})
|
||||
</h4>
|
||||
<div className="flex items-center space-x-2">
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export const ImageDisplayComponent: React.FC<ImageDisplayComponentProps> = ({
|
|||
return (
|
||||
<div style={componentStyle} className={className} {...domProps}>
|
||||
{/* 라벨 렌더링 */}
|
||||
{component.label && component.style?.labelDisplay !== false && (
|
||||
{component.label && (component.style?.labelDisplay ?? true) && (
|
||||
<label
|
||||
style={{
|
||||
position: "absolute",
|
||||
|
|
|
|||
|
|
@ -309,7 +309,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
{...safeDomProps}
|
||||
>
|
||||
{/* 라벨 렌더링 */}
|
||||
{component.label && component.style?.labelDisplay !== false && (
|
||||
{component.label && (component.style?.labelDisplay ?? true) && (
|
||||
<label
|
||||
style={{
|
||||
position: "absolute",
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
|
|||
? "h-12 border-0 px-4 py-3 text-center align-middle"
|
||||
: "h-12 cursor-pointer border-0 px-4 py-3 text-left align-middle font-semibold whitespace-nowrap text-slate-700 select-none transition-all duration-200",
|
||||
`text-${column.align}`,
|
||||
column.sortable && "hover:bg-blue-50/50 hover:text-blue-700",
|
||||
column.sortable && "hover:bg-orange-50 hover:text-orange-700",
|
||||
// 고정 컬럼 스타일
|
||||
column.fixed === "left" && "sticky z-10 border-r border-gray-200/60 bg-gradient-to-r from-slate-50 to-blue-50/30 shadow-sm",
|
||||
column.fixed === "right" && "sticky z-10 border-l border-gray-200/60 bg-gradient-to-r from-slate-50 to-blue-50/30 shadow-sm",
|
||||
|
|
@ -117,16 +117,12 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
|
|||
<span className="flex-1 truncate">
|
||||
{columnLabels[column.columnName] || column.displayName || column.columnName}
|
||||
</span>
|
||||
{column.sortable && (
|
||||
{column.sortable && sortColumn === column.columnName && (
|
||||
<span className="ml-2 flex h-5 w-5 items-center justify-center rounded-md bg-white/50 shadow-sm">
|
||||
{sortColumn === column.columnName ? (
|
||||
sortDirection === "asc" ? (
|
||||
<ArrowUp className="h-3.5 w-3.5 text-blue-600" />
|
||||
) : (
|
||||
<ArrowDown className="h-3.5 w-3.5 text-blue-600" />
|
||||
)
|
||||
{sortDirection === "asc" ? (
|
||||
<ArrowUp className="h-3.5 w-3.5 text-blue-600" />
|
||||
) : (
|
||||
<ArrowUpDown className="h-3.5 w-3.5 text-gray-400" />
|
||||
<ArrowDown className="h-3.5 w-3.5 text-blue-600" />
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1324,7 +1324,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
{/* 헤더 */}
|
||||
{tableConfig.showHeader && (
|
||||
<div
|
||||
className="flex items-center justify-between border-b border-gray-200 bg-gray-100/80 px-6 py-4"
|
||||
className="flex items-center justify-between border-b border-gray-200 bg-gray-100 px-6 py-4"
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
|
|
@ -1532,16 +1532,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
) : (
|
||||
<div className="flex items-center space-x-2">
|
||||
<span>{columnLabels[column.columnName] || column.displayName}</span>
|
||||
{column.sortable && (
|
||||
{column.sortable && sortColumn === column.columnName && (
|
||||
<div className="flex flex-col">
|
||||
{sortColumn === column.columnName ? (
|
||||
sortDirection === "asc" ? (
|
||||
<ArrowUp className="h-3 w-3 text-blue-600" />
|
||||
) : (
|
||||
<ArrowDown className="h-3 w-3 text-blue-600" />
|
||||
)
|
||||
{sortDirection === "asc" ? (
|
||||
<ArrowUp className="h-3 w-3 text-blue-600" />
|
||||
) : (
|
||||
<ArrowUpDown className="h-3 w-3 text-gray-400" />
|
||||
<ArrowDown className="h-3 w-3 text-blue-600" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
|
|||
return (
|
||||
<div style={componentStyle} className={className} {...domProps}>
|
||||
{/* 라벨 렌더링 */}
|
||||
{component.label && component.style?.labelDisplay !== false && (
|
||||
{component.label && (component.style?.labelDisplay ?? true) && (
|
||||
<label
|
||||
style={{
|
||||
position: "absolute",
|
||||
|
|
|
|||
Loading…
Reference in New Issue