jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 테이블 테두리 및 라운드 제거, 검색 필터 제목 제거

Browse Source 
- 모든 테이블 컴포넌트의 외곽 테두리(border) 제거
- 테이블 컨테이너의 라운드(rounded-lg) 제거
- 테이블 행 구분선(border-b)은 유지하여 데이터 구분
- FlowWidget과 TableListComponent에 동일한 스타일 적용
- 검색 필터 영역의 회색 배경(bg-muted/30) 제거
- 검색 필터 제목 제거
- AdvancedSearchFilters 컴포넌트의 '검색 필터' 제목 제거
This commit is contained in:
kjs
2025-10-30 15:39:39 +09:00
parent 0e9e5f29cf
commit 4010273d67
67 changed files with 2546 additions and 741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/lib/registry/components/text-input/TextInputComponent.tsx
View File

@@ -117,19 +117,19 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
height: "100%",
...component.style,
...style,
// 숨김 기능: 편집 모드에서만 연하게 표시
...(isHidden &&
isDesignMode && {
opacity: 0.4,
backgroundColor: "#f3f4f6",
pointerEvents: "auto",
}),
// 숨김 기능: 편집 모드에서만 연하게 표시
...(isHidden &&
isDesignMode && {
opacity: 0.4,
backgroundColor: "hsl(var(--muted))",
pointerEvents: "auto",
}),
};
// 디자인 모드 스타일
if (isDesignMode) {
componentStyle.border = "1px dashed #cbd5e1";
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
componentStyle.border = "1px dashed hsl(var(--border))";
componentStyle.borderColor = isSelected ? "hsl(var(--ring))" : "hsl(var(--border))";
}
// 이벤트 핸들러
@@ -295,9 +295,9 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
{/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && (
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
<label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
{component.label}
{component.required && <span className="text-red-500">*</span>}
{component.required && <span className="text-destructive">*</span>}
</label>
)}
@@ -318,11 +318,17 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullEmail);
}
}}
className={`h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
className={cn(
"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",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/>
{/* @ 구분자 */}
<span className="text-base font-medium text-gray-500">@</span>
<span className="text-base font-medium text-muted-foreground">@</span>
{/* 도메인 선택/입력 (Combobox) */}
<Popover open={emailDomainOpen} onOpenChange={setEmailDomainOpen}>
@@ -334,13 +340,14 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
disabled={componentConfig.disabled || false}
className={cn(
"flex h-full flex-1 items-center justify-between rounded-md border px-3 py-2 text-sm transition-all duration-200",
isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300",
componentConfig.disabled ? "cursor-not-allowed bg-gray-100 text-gray-400" : "bg-white text-gray-900",
"hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 focus:outline-none",
emailDomainOpen && "border-orange-500 ring-2 ring-orange-100",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "cursor-not-allowed bg-muted text-muted-foreground opacity-50" : "bg-background text-foreground",
"hover:border-ring/80",
emailDomainOpen && "border-ring ring-2 ring-ring/50",
)}
>
<span className={cn("truncate", !emailDomain && "text-gray-400")}>{emailDomain || "도메인 선택"}</span>
<span className={cn("truncate", !emailDomain && "text-muted-foreground")}>{emailDomain || "도메인 선택"}</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</button>
</PopoverTrigger>
@@ -397,9 +404,9 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
{/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && (
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
<label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
{component.label}
{component.required && <span className="text-red-500">*</span>}
{component.required && <span className="text-destructive">*</span>}
</label>
)}
@@ -421,10 +428,16 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullTel);
}
}}
className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
className={cn(
"h-full flex-1 rounded-md border px-3 py-2 text-center 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",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/>
<span className="text-base font-medium text-gray-500">-</span>
<span className="text-base font-medium text-muted-foreground">-</span>
{/* 두 번째 부분 */}
<input
@@ -443,10 +456,16 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullTel);
}
}}
className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
className={cn(
"h-full flex-1 rounded-md border px-3 py-2 text-center 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",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/>
<span className="text-base font-medium text-gray-500">-</span>
<span className="text-base font-medium text-muted-foreground">-</span>
{/* 세 번째 부분 */}
<input
@@ -465,7 +484,13 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullTel);
}
}}
className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
className={cn(
"h-full flex-1 rounded-md border px-3 py-2 text-center 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",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/>
</div>
</div>
@@ -478,9 +503,9 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
{/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && (
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
<label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
{component.label}
{component.required && <span className="text-red-500">*</span>}
{component.required && <span className="text-destructive">*</span>}
</label>
)}
@@ -498,7 +523,13 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullUrl);
}
}}
className={`h-full w-[100px] cursor-pointer rounded-md border px-2 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
className={cn(
"h-full w-[100px] cursor-pointer rounded-md border px-2 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",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
>
<option value="https://">https://</option>
<option value="http://">http://</option>
@@ -520,7 +551,13 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, fullUrl);
}
}}
className={`h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
className={cn(
"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",
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/>
</div>
</div>
@@ -533,9 +570,9 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
{/* 라벨 렌더링 */}
{component.label && component.style?.labelDisplay !== false && (
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
<label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
{component.label}
{component.required && <span className="text-red-500">*</span>}
{component.required && <span className="text-destructive">*</span>}
</label>
)}
@@ -564,7 +601,14 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
onFormDataChange(component.columnName, e.target.value);
}
}}
className={`box-border h-full w-full max-w-full resize-none rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
className={cn(
"box-border h-full w-full max-w-full resize-none 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",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
/>
</div>
);
@@ -608,7 +652,14 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
disabled={componentConfig.disabled || false}
required={componentConfig.required || false}
readOnly={componentConfig.readonly || (testAutoGeneration.enabled && testAutoGeneration.type !== "none")}
className={`box-border h-full w-full max-w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
className={cn(
"box-border h-full w-full max-w-full rounded-md border px-3 py-2 text-sm shadow-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",
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
"disabled:cursor-not-allowed"
)}
onClick={(e) => {
handleClick(e);
}}