372 lines
13 KiB
TypeScript
372 lines
13 KiB
TypeScript
|
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "@/components/ui/select";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { Loader2, AlertCircle, Check, X } from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { ComponentData, LayerCondition, LayerDefinition } from "@/types/screen-management";
|
||
|
|
import { getCodesByCategory, CodeItem } from "@/lib/api/codeManagement";
|
||
|
|
|
||
|
|
interface LayerConditionPanelProps {
|
||
|
|
layer: LayerDefinition;
|
||
|
|
components: ComponentData[]; // 화면의 모든 컴포넌트
|
||
|
|
onUpdateCondition: (condition: LayerCondition | undefined) => void;
|
||
|
|
onClose?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 조건 연산자 옵션
|
||
|
|
const OPERATORS = [
|
||
|
|
{ value: "eq", label: "같음 (=)" },
|
||
|
|
{ value: "neq", label: "같지 않음 (≠)" },
|
||
|
|
{ value: "in", label: "포함 (in)" },
|
||
|
|
] as const;
|
||
|
|
|
||
|
|
type OperatorType = "eq" | "neq" | "in";
|
||
|
|
|
||
|
|
export const LayerConditionPanel: React.FC<LayerConditionPanelProps> = ({
|
||
|
|
layer,
|
||
|
|
components,
|
||
|
|
onUpdateCondition,
|
||
|
|
onClose,
|
||
|
|
}) => {
|
||
|
|
// 조건 설정 상태
|
||
|
|
const [targetComponentId, setTargetComponentId] = useState<string>(
|
||
|
|
layer.condition?.targetComponentId || ""
|
||
|
|
);
|
||
|
|
const [operator, setOperator] = useState<OperatorType>(
|
||
|
|
(layer.condition?.operator as OperatorType) || "eq"
|
||
|
|
);
|
||
|
|
const [value, setValue] = useState<string>(
|
||
|
|
layer.condition?.value?.toString() || ""
|
||
|
|
);
|
||
|
|
const [multiValues, setMultiValues] = useState<string[]>(
|
||
|
|
Array.isArray(layer.condition?.value) ? layer.condition.value : []
|
||
|
|
);
|
||
|
|
|
||
|
|
// 코드 목록 로딩 상태
|
||
|
|
const [codeOptions, setCodeOptions] = useState<CodeItem[]>([]);
|
||
|
|
const [isLoadingCodes, setIsLoadingCodes] = useState(false);
|
||
|
|
const [codeLoadError, setCodeLoadError] = useState<string | null>(null);
|
||
|
|
|
||
|
|
// 트리거 가능한 컴포넌트 필터링 (셀렉트, 라디오, 코드 타입 등)
|
||
|
|
const triggerableComponents = useMemo(() => {
|
||
|
|
return components.filter((comp) => {
|
||
|
|
const componentType = (comp.componentType || "").toLowerCase();
|
||
|
|
const widgetType = ((comp as any).widgetType || "").toLowerCase();
|
||
|
|
const webType = ((comp as any).webType || "").toLowerCase();
|
||
|
|
const inputType = ((comp as any).componentConfig?.inputType || "").toLowerCase();
|
||
|
|
|
||
|
|
// 셀렉트, 라디오, 코드 타입 컴포넌트만 허용
|
||
|
|
const triggerTypes = ["select", "radio", "code", "checkbox", "toggle"];
|
||
|
|
const isTriggerType = triggerTypes.some((type) =>
|
||
|
|
componentType.includes(type) ||
|
||
|
|
widgetType.includes(type) ||
|
||
|
|
webType.includes(type) ||
|
||
|
|
inputType.includes(type)
|
||
|
|
);
|
||
|
|
|
||
|
|
return isTriggerType;
|
||
|
|
});
|
||
|
|
}, [components]);
|
||
|
|
|
||
|
|
// 선택된 컴포넌트 정보
|
||
|
|
const selectedComponent = useMemo(() => {
|
||
|
|
return components.find((c) => c.id === targetComponentId);
|
||
|
|
}, [components, targetComponentId]);
|
||
|
|
|
||
|
|
// 선택된 컴포넌트의 코드 카테고리
|
||
|
|
const codeCategory = useMemo(() => {
|
||
|
|
if (!selectedComponent) return null;
|
||
|
|
|
||
|
|
// codeCategory 확인 (다양한 위치에 있을 수 있음)
|
||
|
|
const category =
|
||
|
|
(selectedComponent as any).codeCategory ||
|
||
|
|
(selectedComponent as any).componentConfig?.codeCategory ||
|
||
|
|
(selectedComponent as any).webTypeConfig?.codeCategory;
|
||
|
|
|
||
|
|
return category || null;
|
||
|
|
}, [selectedComponent]);
|
||
|
|
|
||
|
|
// 컴포넌트 선택 시 코드 목록 로드
|
||
|
|
useEffect(() => {
|
||
|
|
if (!codeCategory) {
|
||
|
|
setCodeOptions([]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const loadCodes = async () => {
|
||
|
|
setIsLoadingCodes(true);
|
||
|
|
setCodeLoadError(null);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const codes = await getCodesByCategory(codeCategory);
|
||
|
|
setCodeOptions(codes);
|
||
|
|
} catch (error: any) {
|
||
|
|
console.error("코드 목록 로드 실패:", error);
|
||
|
|
setCodeLoadError(error.message || "코드 목록을 불러올 수 없습니다.");
|
||
|
|
setCodeOptions([]);
|
||
|
|
} finally {
|
||
|
|
setIsLoadingCodes(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
loadCodes();
|
||
|
|
}, [codeCategory]);
|
||
|
|
|
||
|
|
// 조건 저장
|
||
|
|
const handleSave = useCallback(() => {
|
||
|
|
if (!targetComponentId) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const condition: LayerCondition = {
|
||
|
|
targetComponentId,
|
||
|
|
operator,
|
||
|
|
value: operator === "in" ? multiValues : value,
|
||
|
|
};
|
||
|
|
|
||
|
|
onUpdateCondition(condition);
|
||
|
|
onClose?.();
|
||
|
|
}, [targetComponentId, operator, value, multiValues, onUpdateCondition, onClose]);
|
||
|
|
|
||
|
|
// 조건 삭제
|
||
|
|
const handleClear = useCallback(() => {
|
||
|
|
onUpdateCondition(undefined);
|
||
|
|
setTargetComponentId("");
|
||
|
|
setOperator("eq");
|
||
|
|
setValue("");
|
||
|
|
setMultiValues([]);
|
||
|
|
onClose?.();
|
||
|
|
}, [onUpdateCondition, onClose]);
|
||
|
|
|
||
|
|
// in 연산자용 다중 값 토글
|
||
|
|
const toggleMultiValue = useCallback((val: string) => {
|
||
|
|
setMultiValues((prev) =>
|
||
|
|
prev.includes(val)
|
||
|
|
? prev.filter((v) => v !== val)
|
||
|
|
: [...prev, val]
|
||
|
|
);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 컴포넌트 라벨 가져오기
|
||
|
|
const getComponentLabel = (comp: ComponentData) => {
|
||
|
|
return comp.label || (comp as any).columnName || comp.id;
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4 p-4">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<h4 className="text-sm font-semibold">조건부 표시 설정</h4>
|
||
|
|
{layer.condition && (
|
||
|
|
<Badge variant="secondary" className="text-xs">
|
||
|
|
설정됨
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 트리거 컴포넌트 선택 */}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs">트리거 컴포넌트</Label>
|
||
|
|
<Select value={targetComponentId} onValueChange={setTargetComponentId}>
|
||
|
|
<SelectTrigger className="h-8 text-xs">
|
||
|
|
<SelectValue placeholder="컴포넌트 선택..." />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{triggerableComponents.length === 0 ? (
|
||
|
|
<div className="p-2 text-xs text-muted-foreground text-center">
|
||
|
|
조건 설정 가능한 컴포넌트가 없습니다.
|
||
|
|
<br />
|
||
|
|
(셀렉트, 라디오, 코드 타입)
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
triggerableComponents.map((comp) => (
|
||
|
|
<SelectItem key={comp.id} value={comp.id} className="text-xs">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span>{getComponentLabel(comp)}</span>
|
||
|
|
<Badge variant="outline" className="text-[10px]">
|
||
|
|
{comp.componentType || (comp as any).widgetType}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
</SelectItem>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
{/* 코드 카테고리 표시 */}
|
||
|
|
{codeCategory && (
|
||
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||
|
|
<span>카테고리:</span>
|
||
|
|
<Badge variant="secondary" className="text-[10px]">
|
||
|
|
{codeCategory}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 연산자 선택 */}
|
||
|
|
{targetComponentId && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs">조건</Label>
|
||
|
|
<Select
|
||
|
|
value={operator}
|
||
|
|
onValueChange={(val) => setOperator(val as OperatorType)}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-8 text-xs">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{OPERATORS.map((op) => (
|
||
|
|
<SelectItem key={op.value} value={op.value} className="text-xs">
|
||
|
|
{op.label}
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 조건 값 선택 */}
|
||
|
|
{targetComponentId && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs">
|
||
|
|
{operator === "in" ? "값 선택 (복수)" : "값"}
|
||
|
|
</Label>
|
||
|
|
|
||
|
|
{isLoadingCodes ? (
|
||
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground p-2">
|
||
|
|
<Loader2 className="h-3 w-3 animate-spin" />
|
||
|
|
코드 목록 로딩 중...
|
||
|
|
</div>
|
||
|
|
) : codeLoadError ? (
|
||
|
|
<div className="flex items-center gap-2 text-xs text-destructive p-2">
|
||
|
|
<AlertCircle className="h-3 w-3" />
|
||
|
|
{codeLoadError}
|
||
|
|
</div>
|
||
|
|
) : codeOptions.length > 0 ? (
|
||
|
|
// 코드 카테고리가 있는 경우 - 선택 UI
|
||
|
|
operator === "in" ? (
|
||
|
|
// 다중 선택 (in 연산자)
|
||
|
|
<div className="space-y-1 max-h-40 overflow-y-auto border rounded-md p-2">
|
||
|
|
{codeOptions.map((code) => (
|
||
|
|
<div
|
||
|
|
key={code.codeValue}
|
||
|
|
className={cn(
|
||
|
|
"flex items-center gap-2 p-1.5 rounded cursor-pointer text-xs hover:bg-accent",
|
||
|
|
multiValues.includes(code.codeValue) && "bg-primary/10"
|
||
|
|
)}
|
||
|
|
onClick={() => toggleMultiValue(code.codeValue)}
|
||
|
|
>
|
||
|
|
<div className={cn(
|
||
|
|
"w-4 h-4 rounded border flex items-center justify-center",
|
||
|
|
multiValues.includes(code.codeValue)
|
||
|
|
? "bg-primary border-primary"
|
||
|
|
: "border-input"
|
||
|
|
)}>
|
||
|
|
{multiValues.includes(code.codeValue) && (
|
||
|
|
<Check className="h-3 w-3 text-primary-foreground" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<span>{code.codeName}</span>
|
||
|
|
<span className="text-muted-foreground">({code.codeValue})</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
// 단일 선택 (eq, neq 연산자)
|
||
|
|
<Select value={value} onValueChange={setValue}>
|
||
|
|
<SelectTrigger className="h-8 text-xs">
|
||
|
|
<SelectValue placeholder="값 선택..." />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{codeOptions.map((code) => (
|
||
|
|
<SelectItem
|
||
|
|
key={code.codeValue}
|
||
|
|
value={code.codeValue}
|
||
|
|
className="text-xs"
|
||
|
|
>
|
||
|
|
{code.codeName} ({code.codeValue})
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
)
|
||
|
|
) : (
|
||
|
|
// 코드 카테고리가 없는 경우 - 직접 입력
|
||
|
|
<Input
|
||
|
|
value={value}
|
||
|
|
onChange={(e) => setValue(e.target.value)}
|
||
|
|
placeholder="조건 값 입력..."
|
||
|
|
className="h-8 text-xs"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 선택된 값 표시 (in 연산자) */}
|
||
|
|
{operator === "in" && multiValues.length > 0 && (
|
||
|
|
<div className="flex flex-wrap gap-1 mt-2">
|
||
|
|
{multiValues.map((val) => {
|
||
|
|
const code = codeOptions.find((c) => c.codeValue === val);
|
||
|
|
return (
|
||
|
|
<Badge
|
||
|
|
key={val}
|
||
|
|
variant="secondary"
|
||
|
|
className="text-[10px] gap-1"
|
||
|
|
>
|
||
|
|
{code?.codeName || val}
|
||
|
|
<X
|
||
|
|
className="h-2.5 w-2.5 cursor-pointer hover:text-destructive"
|
||
|
|
onClick={() => toggleMultiValue(val)}
|
||
|
|
/>
|
||
|
|
</Badge>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 현재 조건 요약 */}
|
||
|
|
{targetComponentId && (value || multiValues.length > 0) && (
|
||
|
|
<div className="p-2 bg-muted rounded-md text-xs">
|
||
|
|
<span className="font-medium">요약: </span>
|
||
|
|
<span className="text-muted-foreground">
|
||
|
|
"{getComponentLabel(selectedComponent!)}" 값이{" "}
|
||
|
|
{operator === "eq" && `"${codeOptions.find(c => c.codeValue === value)?.codeName || value}"와 같으면`}
|
||
|
|
{operator === "neq" && `"${codeOptions.find(c => c.codeValue === value)?.codeName || value}"와 다르면`}
|
||
|
|
{operator === "in" && `[${multiValues.map(v => codeOptions.find(c => c.codeValue === v)?.codeName || v).join(", ")}] 중 하나이면`}
|
||
|
|
{" "}이 레이어 표시
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 버튼 */}
|
||
|
|
<div className="flex gap-2 pt-2">
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="flex-1 h-8 text-xs"
|
||
|
|
onClick={handleClear}
|
||
|
|
>
|
||
|
|
조건 삭제
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
className="flex-1 h-8 text-xs"
|
||
|
|
onClick={handleSave}
|
||
|
|
disabled={!targetComponentId || (!value && multiValues.length === 0)}
|
||
|
|
>
|
||
|
|
저장
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|