feat: 테이블 테두리 및 라운드 제거, 검색 필터 제목 제거
- 모든 테이블 컴포넌트의 외곽 테두리(border) 제거 - 테이블 컨테이너의 라운드(rounded-lg) 제거 - 테이블 행 구분선(border-b)은 유지하여 데이터 구분 - FlowWidget과 TableListComponent에 동일한 스타일 적용 - 검색 필터 영역의 회색 배경(bg-muted/30) 제거 - 검색 필터 제목 제거 - AdvancedSearchFilters 컴포넌트의 '검색 필터' 제목 제거
This commit is contained in:
kjs
@@ -154,11 +154,11 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
const getLogicalOperatorColor = (operator: string) => {
|
||||
switch (operator) {
|
||||
case "AND":
|
||||
return "bg-primary/20 text-blue-800";
|
||||
return "bg-primary/20 text-primary";
|
||||
case "OR":
|
||||
return "bg-orange-100 text-orange-800";
|
||||
return "bg-warning/20 text-warning";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800";
|
||||
return "bg-muted text-muted-foreground";
|
||||
}
|
||||
};
|
||||
|
||||
@@ -184,14 +184,14 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
<p className="text-muted-foreground text-sm">제어 조건, 액션 그룹, 필드 매핑을 설정하세요</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex h-full flex-col p-4">
|
||||
<CardContent className="flex h-full flex-col p-3 sm:p-4">
|
||||
{/* 탭 헤더 */}
|
||||
<div className="mb-4 flex border-b">
|
||||
<div className="mb-3 flex border-b sm:mb-4">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
|
||||
className={`flex items-center gap-1 px-2 py-2 text-xs font-medium transition-colors sm:gap-2 sm:px-4 sm:text-sm ${
|
||||
activeTab === tab.id
|
||||
? "border-primary text-primary border-b-2"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
@@ -221,7 +221,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
</div>
|
||||
|
||||
{controlConditions.length === 0 ? (
|
||||
<div className="rounded-lg border border-dashed border-gray-300 p-8 text-center">
|
||||
<div className="rounded-lg border border-dashed border-border p-8 text-center">
|
||||
<div className="text-muted-foreground">
|
||||
<AlertTriangle className="mx-auto mb-2 h-8 w-8" />
|
||||
<p className="mb-2">제어 조건이 없습니다</p>
|
||||
@@ -267,7 +267,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
{actionGroups.length > 1 && (
|
||||
<div className="rounded-md border bg-accent p-3">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<h4 className="text-sm font-medium text-blue-900">그룹 간 실행 조건</h4>
|
||||
<h4 className="text-sm font-medium text-primary">그룹 간 실행 조건</h4>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -279,7 +279,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
onChange={() => onSetGroupsLogicalOperator?.("AND")}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<label htmlFor="groups-and" className="text-sm text-blue-800">
|
||||
<label htmlFor="groups-and" className="text-sm text-primary">
|
||||
<span className="font-medium">AND</span> - 모든 그룹의 조건이 참일 때 실행
|
||||
</label>
|
||||
</div>
|
||||
@@ -292,7 +292,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
onChange={() => onSetGroupsLogicalOperator?.("OR")}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<label htmlFor="groups-or" className="text-sm text-blue-800">
|
||||
<label htmlFor="groups-or" className="text-sm text-primary">
|
||||
<span className="font-medium">OR</span> - 하나 이상의 그룹 조건이 참일 때 실행
|
||||
</label>
|
||||
</div>
|
||||
@@ -310,8 +310,8 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
<div
|
||||
className={`rounded px-2 py-1 text-xs font-medium ${
|
||||
groupsLogicalOperator === "AND"
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-orange-100 text-orange-800"
|
||||
? "bg-success/20 text-success"
|
||||
: "bg-warning/20 text-warning"
|
||||
}`}
|
||||
>
|
||||
{groupsLogicalOperator}
|
||||
@@ -409,7 +409,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
{/* 액션 목록 */}
|
||||
<div className="space-y-3">
|
||||
{group.actions.map((action, actionIndex) => (
|
||||
<div key={action.id} className="rounded-md border bg-white p-3">
|
||||
<div key={action.id} className="rounded-md border bg-background p-3">
|
||||
{/* 액션 헤더 */}
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -533,7 +533,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
</div>
|
||||
|
||||
{/* 컬럼 매핑 캔버스 */}
|
||||
<div className="rounded-lg border bg-white p-3">
|
||||
<div className="rounded-lg border bg-background p-3">
|
||||
<FieldMappingCanvas
|
||||
fromFields={fromColumns}
|
||||
toFields={toColumns}
|
||||
@@ -594,8 +594,8 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
</div>
|
||||
|
||||
{/* 매핑되지 않은 필드 처리 옵션 */}
|
||||
<div className="rounded-md border bg-yellow-50 p-3">
|
||||
<h6 className="mb-2 flex items-center gap-1 text-xs font-medium text-yellow-800">
|
||||
<div className="rounded-md border bg-warning/10 p-3">
|
||||
<h6 className="mb-2 flex items-center gap-1 text-xs font-medium text-warning">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
매핑되지 않은 필드 처리
|
||||
</h6>
|
||||
@@ -608,7 +608,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
defaultChecked
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
<label htmlFor={`empty-${action.id}`} className="text-yellow-700">
|
||||
<label htmlFor={`empty-${action.id}`} className="text-warning/80">
|
||||
비워두기 (NULL 값)
|
||||
</label>
|
||||
</div>
|
||||
@@ -619,7 +619,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
name={`unmapped-${action.id}`}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
<label htmlFor={`default-${action.id}`} className="text-yellow-700">
|
||||
<label htmlFor={`default-${action.id}`} className="text-warning/80">
|
||||
기본값 사용
|
||||
</label>
|
||||
</div>
|
||||
@@ -630,7 +630,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
name={`unmapped-${action.id}`}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
<label htmlFor={`skip-${action.id}`} className="text-yellow-700">
|
||||
<label htmlFor={`skip-${action.id}`} className="text-warning/80">
|
||||
필드 제외
|
||||
</label>
|
||||
</div>
|
||||
@@ -647,8 +647,8 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertTriangle className="mt-0.5 h-4 w-4 text-primary" />
|
||||
<div className="text-sm">
|
||||
<div className="font-medium text-blue-900">{group.logicalOperator} 조건 그룹</div>
|
||||
<div className="text-blue-700">
|
||||
<div className="font-medium text-primary">{group.logicalOperator} 조건 그룹</div>
|
||||
<div className="text-primary/80">
|
||||
{group.logicalOperator === "AND"
|
||||
? "이 그룹의 모든 액션이 실행 가능한 조건일 때만 실행됩니다."
|
||||
: "이 그룹의 액션 중 하나라도 실행 가능한 조건이면 해당 액션만 실행됩니다."}
|
||||
@@ -698,21 +698,21 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
||||
</div>
|
||||
|
||||
{/* 하단 네비게이션 */}
|
||||
<div className="flex-shrink-0 border-t pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="outline" onClick={onBack} className="flex items-center gap-2">
|
||||
<div className="flex-shrink-0 border-t pt-3 sm:pt-4">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<Button variant="outline" onClick={onBack} className="flex items-center gap-2 w-full sm:w-auto">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
이전
|
||||
<span className="text-xs sm:text-sm">이전</span>
|
||||
</Button>
|
||||
|
||||
<div className="text-muted-foreground text-sm">
|
||||
<div className="text-muted-foreground text-center text-xs sm:text-sm">
|
||||
{actionGroups.filter((g) => g.isEnabled).length}개 그룹, 총{" "}
|
||||
{actionGroups.reduce((sum, g) => sum + g.actions.filter((a) => a.isEnabled).length, 0)}개 액션
|
||||
</div>
|
||||
|
||||
<Button onClick={onNext} className="flex items-center gap-2">
|
||||
<Button onClick={onNext} className="flex items-center gap-2 w-full sm:w-auto">
|
||||
<Save className="h-4 w-4" />
|
||||
저장
|
||||
<span className="text-xs sm:text-sm">저장</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user