chpark/vexplor
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

54
frontend/components/screen/config-panels/ButtonConfigPanel.tsx
View File

@@ -273,8 +273,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{/* 모달 열기 액션 설정 */}
{(component.componentConfig?.action?.type || "save") === "modal" && (
<div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
<h4 className="text-sm font-medium text-gray-700">모달 설정</h4>
<div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
<h4 className="text-sm font-medium text-foreground">모달 설정</h4>
<div>
<Label htmlFor="modal-title">모달 제목</Label>
@@ -302,7 +302,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
onUpdateProperty("componentConfig.action.modalDescription", newValue);
}}
/>
<p className="mt-1 text-xs text-gray-500">모달 제목 아래에 표시됩니다</p>
<p className="mt-1 text-xs text-muted-foreground">모달 제목 아래에 표시됩니다</p>
</div>
<div>
@@ -359,15 +359,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{(() => {
const filteredScreens = filterScreens(modalSearchTerm);
if (screensLoading) {
return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
}
if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
}
return filteredScreens.map((screen, index) => (
<div
key={`modal-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setModalScreenOpen(false);
@@ -382,7 +382,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
/>
<div className="flex flex-col">
<span className="font-medium">{screen.name}</span>
{screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
{screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
</div>
</div>
));
@@ -397,8 +397,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{/* 수정 액션 설정 */}
{(component.componentConfig?.action?.type || "save") === "edit" && (
<div className="mt-4 space-y-4 rounded-lg border bg-green-50 p-4">
<h4 className="text-sm font-medium text-gray-700">수정 설정</h4>
<div className="mt-4 space-y-4 rounded-lg border bg-success/10 p-4">
<h4 className="text-sm font-medium text-foreground">수정 설정</h4>
<div>
<Label htmlFor="edit-screen">수정 폼 화면 선택</Label>
@@ -434,15 +434,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{(() => {
const filteredScreens = filterScreens(modalSearchTerm);
if (screensLoading) {
return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
}
if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
}
return filteredScreens.map((screen, index) => (
<div
key={`edit-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setModalScreenOpen(false);
@@ -457,7 +457,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
/>
<div className="flex flex-col">
<span className="font-medium">{screen.name}</span>
{screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
{screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
</div>
</div>
));
@@ -466,7 +466,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
</div>
</PopoverContent>
</Popover>
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-muted-foreground">
선택된 데이터가 이 폼 화면에 자동으로 로드되어 수정할 수 있습니다
</p>
</div>
@@ -505,7 +505,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
onUpdateProperty("webTypeConfig.editModalTitle", newValue);
}}
/>
<p className="mt-1 text-xs text-gray-500">비워두면 기본 제목이 표시됩니다</p>
<p className="mt-1 text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
</div>
<div>
@@ -521,7 +521,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
onUpdateProperty("webTypeConfig.editModalDescription", newValue);
}}
/>
<p className="mt-1 text-xs text-gray-500">비워두면 설명이 표시되지 않습니다</p>
<p className="mt-1 text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
</div>
<div>
@@ -554,7 +554,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
<div className="mt-4 space-y-4">
<div>
<Label>
전체 이력 표시 컬럼 (필수) <span className="text-red-600">*</span>
전체 이력 표시 컬럼 (필수) <span className="text-destructive">*</span>
</Label>
<Popover open={displayColumnOpen} onOpenChange={setDisplayColumnOpen}>
@@ -616,8 +616,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{/* 페이지 이동 액션 설정 */}
{(component.componentConfig?.action?.type || "save") === "navigate" && (
<div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
<h4 className="text-sm font-medium text-gray-700">페이지 이동 설정</h4>
<div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
<h4 className="text-sm font-medium text-foreground">페이지 이동 설정</h4>
<div>
<Label htmlFor="target-screen-nav">이동할 화면 선택</Label>
@@ -653,15 +653,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
{(() => {
const filteredScreens = filterScreens(navSearchTerm);
if (screensLoading) {
return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
}
if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
}
return filteredScreens.map((screen, index) => (
<div
key={`navigate-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setNavScreenOpen(false);
@@ -676,7 +676,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
/>
<div className="flex flex-col">
<span className="font-medium">{screen.name}</span>
{screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
{screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
</div>
</div>
));
@@ -685,7 +685,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
</div>
</PopoverContent>
</Popover>
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-muted-foreground">
선택한 화면으로 /screens/{"{"}화면ID{"}"} 형태로 이동합니다
</p>
</div>
@@ -704,19 +704,19 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
className="h-6 w-full px-2 py-0 text-xs"
style={{ fontSize: "12px" }}
/>
<p className="mt-1 text-xs text-gray-500">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
<p className="mt-1 text-xs text-muted-foreground">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
</div>
</div>
)}
{/* 제어 기능 섹션 */}
<div className="mt-8 border-t border-gray-200 pt-6">
<div className="mt-8 border-t border-border pt-6">
<ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
</div>
{/* 🆕 플로우 단계별 표시 제어 섹션 (플로우 위젯이 있을 때만 표시) */}
{hasFlowWidget && (
<div className="mt-8 border-t border-gray-200 pt-6">
<div className="mt-8 border-t border-border pt-6">
<FlowVisibilityConfigPanel
component={component}
allComponents={allComponents}

2
frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
View File

@@ -353,7 +353,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
Step {step.stepOrder}
</Badge>
<span>{step.stepName}</span>
{isChecked && <CheckCircle className="ml-auto h-4 w-4 text-green-500" />}
{isChecked && <CheckCircle className="ml-auto h-4 w-4 text-success" />}
</Label>
</div>
);