불필요한 컴포넌트 제거

This commit is contained in:
kjs 2025-12-23 10:49:28 +09:00
parent 7569394645
commit 01e47a1830
5 changed files with 39 additions and 94 deletions

View File

@ -53,31 +53,13 @@ export function ComponentsPanel({
}, []); }, []);
// Unified 컴포넌트 정의 (새로운 통합 컴포넌트 시스템) // Unified 컴포넌트 정의 (새로운 통합 컴포넌트 시스템)
// 입력 컴포넌트(unified-input, unified-select, unified-date)는 테이블 컬럼 드래그 시 자동 생성되므로 숨김
const unifiedComponents: ComponentDefinition[] = useMemo(() => [ const unifiedComponents: ComponentDefinition[] = useMemo(() => [
{ // unified-input: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
id: "unified-input", // unified-select: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
name: "통합 입력", // unified-date: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
description: "텍스트, 숫자, 비밀번호, 슬라이더, 컬러 등 다양한 입력 타입 지원", // unified-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
category: "input" as ComponentCategory, // unified-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
tags: ["input", "text", "number", "unified"],
defaultSize: { width: 200, height: 40 },
},
{
id: "unified-select",
name: "통합 선택",
description: "드롭다운, 라디오, 체크박스, 태그, 토글 등 다양한 선택 타입 지원",
category: "input" as ComponentCategory,
tags: ["select", "dropdown", "radio", "checkbox", "unified"],
defaultSize: { width: 200, height: 40 },
},
{
id: "unified-date",
name: "통합 날짜",
description: "날짜, 시간, 날짜시간, 날짜 범위 등 다양한 날짜 타입 지원",
category: "input" as ComponentCategory,
tags: ["date", "time", "datetime", "unified"],
defaultSize: { width: 200, height: 40 },
},
{ {
id: "unified-list", id: "unified-list",
name: "통합 목록", name: "통합 목록",
@ -86,8 +68,6 @@ export function ComponentsPanel({
tags: ["table", "list", "card", "kanban", "unified"], tags: ["table", "list", "card", "kanban", "unified"],
defaultSize: { width: 600, height: 400 }, defaultSize: { width: 600, height: 400 },
}, },
// unified-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
// unified-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
{ {
id: "unified-media", id: "unified-media",
name: "통합 미디어", name: "통합 미디어",

View File

@ -351,13 +351,19 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
"unified-hierarchy": "통합 계층", "unified-hierarchy": "통합 계층",
}; };
// 컬럼의 inputType 가져오기 (entity 타입인지 확인용)
const inputType = currentConfig.inputType || currentConfig.webType || (selectedComponent as any).inputType;
// unified-select의 경우 inputType 전달
const extraProps = componentId === "unified-select" ? { inputType } : {};
return ( return (
<div key={selectedComponent.id} className="space-y-4"> <div key={selectedComponent.id} className="space-y-4">
<div className="flex items-center gap-2 border-b pb-2"> <div className="flex items-center gap-2 border-b pb-2">
<Settings className="text-primary h-4 w-4" /> <Settings className="text-primary h-4 w-4" />
<h3 className="text-sm font-semibold">{unifiedNames[componentId] || componentId} </h3> <h3 className="text-sm font-semibold">{unifiedNames[componentId] || componentId} </h3>
</div> </div>
<UnifiedConfigPanel config={currentConfig} onChange={handleUnifiedConfigChange} /> <UnifiedConfigPanel config={currentConfig} onChange={handleUnifiedConfigChange} {...extraProps} />
</div> </div>
); );
} }

View File

@ -141,12 +141,13 @@ export function ConditionalConfigPanel({
setLoadingOptions(true); setLoadingOptions(true);
try { try {
const { apiClient } = await import("@/lib/api/client"); const { apiClient } = await import("@/lib/api/client");
const response = await apiClient.get(`/common-codes/${selectedField.codeGroup}/items`); // 올바른 API 경로: /common-codes/categories/:categoryCode/options
const response = await apiClient.get(`/common-codes/categories/${selectedField.codeGroup}/options`);
if (response.data.success && response.data.data) { if (response.data.success && response.data.data) {
setDynamicOptions( setDynamicOptions(
response.data.data.map((item: { code: string; codeName: string }) => ({ response.data.data.map((item: { value: string; label: string }) => ({
value: item.code, value: item.value,
label: item.codeName, label: item.label,
})) }))
); );
} }

View File

@ -547,13 +547,13 @@ export const UnifiedSelect = forwardRef<HTMLDivElement, UnifiedSelectProps>(
})); }));
} }
} else { } else {
// 일반 공통코드에서 로드 // 일반 공통코드에서 로드 (올바른 API 경로: /common-codes/categories/:categoryCode/options)
const response = await apiClient.get(`/common-codes/${codeGroup}/items`); const response = await apiClient.get(`/common-codes/categories/${codeGroup}/options`);
const data = response.data; const data = response.data;
if (data.success && data.data) { if (data.success && data.data) {
fetchedOptions = data.data.map((item: { code: string; codeName: string }) => ({ fetchedOptions = data.data.map((item: { value: string; label: string }) => ({
value: item.code, value: item.value,
label: item.codeName, label: item.label,
})); }));
} }
} }

View File

@ -23,12 +23,17 @@ interface ColumnOption {
interface UnifiedSelectConfigPanelProps { interface UnifiedSelectConfigPanelProps {
config: Record<string, any>; config: Record<string, any>;
onChange: (config: Record<string, any>) => void; onChange: (config: Record<string, any>) => void;
/** 컬럼의 inputType (entity 타입인 경우에만 엔티티 소스 표시) */
inputType?: string;
} }
export const UnifiedSelectConfigPanel: React.FC<UnifiedSelectConfigPanelProps> = ({ export const UnifiedSelectConfigPanel: React.FC<UnifiedSelectConfigPanelProps> = ({
config, config,
onChange, onChange,
inputType,
}) => { }) => {
// 엔티티 타입인지 확인
const isEntityType = inputType === "entity";
// 엔티티 테이블의 컬럼 목록 // 엔티티 테이블의 컬럼 목록
const [entityColumns, setEntityColumns] = useState<ColumnOption[]>([]); const [entityColumns, setEntityColumns] = useState<ColumnOption[]>([]);
const [loadingColumns, setLoadingColumns] = useState(false); const [loadingColumns, setLoadingColumns] = useState(false);
@ -135,9 +140,8 @@ export const UnifiedSelectConfigPanel: React.FC<UnifiedSelectConfigPanelProps> =
<SelectContent> <SelectContent>
<SelectItem value="static"> </SelectItem> <SelectItem value="static"> </SelectItem>
<SelectItem value="code"> </SelectItem> <SelectItem value="code"> </SelectItem>
<SelectItem value="db"></SelectItem> {/* 엔티티 타입일 때만 엔티티 옵션 표시 */}
<SelectItem value="api">API</SelectItem> {isEntityType && <SelectItem value="entity"></SelectItem>}
<SelectItem value="entity"></SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@ -193,66 +197,20 @@ export const UnifiedSelectConfigPanel: React.FC<UnifiedSelectConfigPanelProps> =
</div> </div>
)} )}
{/* 공통 코드 설정 */} {/* 공통 코드 설정 - 테이블 타입 관리에서 설정되므로 정보만 표시 */}
{config.source === "code" && ( {config.source === "code" && (
<div className="space-y-2"> <div className="space-y-1">
<Label className="text-xs font-medium"> </Label> <Label className="text-xs font-medium"> </Label>
<Input {config.codeGroup ? (
value={config.codeGroup || ""} <p className="text-sm font-medium text-foreground">{config.codeGroup}</p>
onChange={(e) => updateConfig("codeGroup", e.target.value)} ) : (
placeholder="공통 코드 그룹명" <p className="text-xs text-amber-600">
className="h-8 text-xs"
/> </p>
)}
</div> </div>
)} )}
{/* DB 설정 */}
{config.source === "db" && (
<div className="space-y-2">
<div className="space-y-2">
<Label className="text-xs font-medium"></Label>
<Input
value={config.table || ""}
onChange={(e) => updateConfig("table", e.target.value)}
placeholder="테이블명"
className="h-8 text-xs"
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-xs font-medium"> </Label>
<Input
value={config.valueColumn || ""}
onChange={(e) => updateConfig("valueColumn", e.target.value)}
placeholder="id"
className="h-8 text-xs"
/>
</div>
<div className="space-y-2">
<Label className="text-xs font-medium"> </Label>
<Input
value={config.labelColumn || ""}
onChange={(e) => updateConfig("labelColumn", e.target.value)}
placeholder="name"
className="h-8 text-xs"
/>
</div>
</div>
</div>
)}
{/* API 설정 */}
{config.source === "api" && (
<div className="space-y-2">
<Label className="text-xs font-medium">API </Label>
<Input
value={config.apiEndpoint || ""}
onChange={(e) => updateConfig("apiEndpoint", e.target.value)}
placeholder="/api/options"
className="h-8 text-xs"
/>
</div>
)}
{/* 엔티티(참조 테이블) 설정 */} {/* 엔티티(참조 테이블) 설정 */}
{config.source === "entity" && ( {config.source === "entity" && (