397 lines
14 KiB
TypeScript
397 lines
14 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
||
|
|
import { ComponentRendererProps } from "@/types/component";
|
||
|
|
import { SelectedItemsDetailInputConfig, AdditionalFieldDefinition } from "./types";
|
||
|
|
import { useModalDataStore, ModalDataItem } from "@/stores/modalDataStore";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Textarea } from "@/components/ui/textarea";
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { X } from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
export interface SelectedItemsDetailInputComponentProps extends ComponentRendererProps {
|
||
|
|
config?: SelectedItemsDetailInputConfig;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* SelectedItemsDetailInput 컴포넌트
|
||
|
|
* 선택된 항목들의 상세 정보를 입력하는 컴포넌트
|
||
|
|
*/
|
||
|
|
export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInputComponentProps> = ({
|
||
|
|
component,
|
||
|
|
isDesignMode = false,
|
||
|
|
isSelected = false,
|
||
|
|
isInteractive = false,
|
||
|
|
onClick,
|
||
|
|
onDragStart,
|
||
|
|
onDragEnd,
|
||
|
|
config,
|
||
|
|
className,
|
||
|
|
style,
|
||
|
|
formData,
|
||
|
|
onFormDataChange,
|
||
|
|
screenId,
|
||
|
|
...props
|
||
|
|
}) => {
|
||
|
|
// 컴포넌트 설정
|
||
|
|
const componentConfig = useMemo(() => ({
|
||
|
|
dataSourceId: component.id || "default",
|
||
|
|
displayColumns: [],
|
||
|
|
additionalFields: [],
|
||
|
|
layout: "grid",
|
||
|
|
showIndex: true,
|
||
|
|
allowRemove: false,
|
||
|
|
emptyMessage: "전달받은 데이터가 없습니다.",
|
||
|
|
targetTable: "",
|
||
|
|
...config,
|
||
|
|
...component.config,
|
||
|
|
} as SelectedItemsDetailInputConfig), [config, component.config, component.id]);
|
||
|
|
|
||
|
|
// 모달 데이터 스토어에서 데이터 가져오기
|
||
|
|
// dataSourceId를 안정적으로 유지
|
||
|
|
const dataSourceId = useMemo(
|
||
|
|
() => componentConfig.dataSourceId || component.id || "default",
|
||
|
|
[componentConfig.dataSourceId, component.id]
|
||
|
|
);
|
||
|
|
|
||
|
|
// 전체 레지스트리를 가져와서 컴포넌트 내부에서 필터링 (캐싱 문제 회피)
|
||
|
|
const dataRegistry = useModalDataStore((state) => state.dataRegistry);
|
||
|
|
const modalData = useMemo(
|
||
|
|
() => dataRegistry[dataSourceId] || [],
|
||
|
|
[dataRegistry, dataSourceId]
|
||
|
|
);
|
||
|
|
|
||
|
|
const updateItemData = useModalDataStore((state) => state.updateItemData);
|
||
|
|
|
||
|
|
// 로컬 상태로 데이터 관리
|
||
|
|
const [items, setItems] = useState<ModalDataItem[]>([]);
|
||
|
|
|
||
|
|
// 모달 데이터가 변경되면 로컬 상태 업데이트
|
||
|
|
useEffect(() => {
|
||
|
|
if (modalData && modalData.length > 0) {
|
||
|
|
console.log("📦 [SelectedItemsDetailInput] 데이터 수신:", modalData);
|
||
|
|
setItems(modalData);
|
||
|
|
|
||
|
|
// formData에도 반영 (초기 로드 시에만)
|
||
|
|
if (onFormDataChange && items.length === 0) {
|
||
|
|
onFormDataChange({ [component.id || "selected_items"]: modalData });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
|
}, [modalData, component.id]); // onFormDataChange는 의존성에서 제외
|
||
|
|
|
||
|
|
// 스타일 계산
|
||
|
|
const componentStyle: React.CSSProperties = {
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
...component.style,
|
||
|
|
...style,
|
||
|
|
};
|
||
|
|
|
||
|
|
// 디자인 모드 스타일
|
||
|
|
if (isDesignMode) {
|
||
|
|
componentStyle.border = "1px dashed #cbd5e1";
|
||
|
|
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
|
||
|
|
componentStyle.padding = "16px";
|
||
|
|
componentStyle.borderRadius = "8px";
|
||
|
|
}
|
||
|
|
|
||
|
|
// 이벤트 핸들러
|
||
|
|
const handleClick = (e: React.MouseEvent) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
onClick?.();
|
||
|
|
};
|
||
|
|
|
||
|
|
// 필드 값 변경 핸들러
|
||
|
|
const handleFieldChange = useCallback((itemId: string | number, fieldName: string, value: any) => {
|
||
|
|
// 상태 업데이트
|
||
|
|
setItems((prevItems) => {
|
||
|
|
const updatedItems = prevItems.map((item) =>
|
||
|
|
item.id === itemId
|
||
|
|
? {
|
||
|
|
...item,
|
||
|
|
additionalData: {
|
||
|
|
...item.additionalData,
|
||
|
|
[fieldName]: value,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
: item
|
||
|
|
);
|
||
|
|
|
||
|
|
// formData에도 반영 (디바운스 없이 즉시 반영)
|
||
|
|
if (onFormDataChange) {
|
||
|
|
onFormDataChange({ [component.id || "selected_items"]: updatedItems });
|
||
|
|
}
|
||
|
|
|
||
|
|
return updatedItems;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 스토어에도 업데이트
|
||
|
|
updateItemData(dataSourceId, itemId, { [fieldName]: value });
|
||
|
|
}, [dataSourceId, updateItemData, onFormDataChange, component.id]);
|
||
|
|
|
||
|
|
// 항목 제거 핸들러
|
||
|
|
const handleRemoveItem = (itemId: string | number) => {
|
||
|
|
setItems((prevItems) => prevItems.filter((item) => item.id !== itemId));
|
||
|
|
};
|
||
|
|
|
||
|
|
// 개별 필드 렌더링
|
||
|
|
const renderField = (field: AdditionalFieldDefinition, item: ModalDataItem) => {
|
||
|
|
const value = item.additionalData?.[field.name] || field.defaultValue || "";
|
||
|
|
|
||
|
|
const commonProps = {
|
||
|
|
value: value || "",
|
||
|
|
disabled: componentConfig.disabled || componentConfig.readonly,
|
||
|
|
placeholder: field.placeholder,
|
||
|
|
required: field.required,
|
||
|
|
};
|
||
|
|
|
||
|
|
switch (field.type) {
|
||
|
|
case "select":
|
||
|
|
return (
|
||
|
|
<Select
|
||
|
|
value={value || ""}
|
||
|
|
onValueChange={(val) => handleFieldChange(item.id, field.name, val)}
|
||
|
|
disabled={componentConfig.disabled || componentConfig.readonly}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-8 w-full text-xs sm:h-10 sm:text-sm">
|
||
|
|
<SelectValue placeholder={field.placeholder || "선택하세요"} />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{field.options?.map((option) => (
|
||
|
|
<SelectItem key={option.value} value={option.value}>
|
||
|
|
{option.label}
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
);
|
||
|
|
|
||
|
|
case "textarea":
|
||
|
|
return (
|
||
|
|
<Textarea
|
||
|
|
{...commonProps}
|
||
|
|
onChange={(e) => handleFieldChange(item.id, field.name, e.target.value)}
|
||
|
|
rows={2}
|
||
|
|
className="resize-none text-xs sm:text-sm"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
case "date":
|
||
|
|
return (
|
||
|
|
<Input
|
||
|
|
{...commonProps}
|
||
|
|
type="date"
|
||
|
|
onChange={(e) => handleFieldChange(item.id, field.name, e.target.value)}
|
||
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
case "number":
|
||
|
|
return (
|
||
|
|
<Input
|
||
|
|
{...commonProps}
|
||
|
|
type="number"
|
||
|
|
onChange={(e) => handleFieldChange(item.id, field.name, e.target.value)}
|
||
|
|
min={field.validation?.min}
|
||
|
|
max={field.validation?.max}
|
||
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
case "checkbox":
|
||
|
|
return (
|
||
|
|
<Checkbox
|
||
|
|
checked={value === true || value === "true"}
|
||
|
|
onCheckedChange={(checked) => handleFieldChange(item.id, field.name, checked)}
|
||
|
|
disabled={componentConfig.disabled || componentConfig.readonly}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
default: // text
|
||
|
|
return (
|
||
|
|
<Input
|
||
|
|
{...commonProps}
|
||
|
|
type="text"
|
||
|
|
onChange={(e) => handleFieldChange(item.id, field.name, e.target.value)}
|
||
|
|
maxLength={field.validation?.maxLength}
|
||
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 빈 상태 렌더링
|
||
|
|
if (items.length === 0) {
|
||
|
|
return (
|
||
|
|
<div style={componentStyle} className={className} onClick={handleClick}>
|
||
|
|
<div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/30 p-8 text-center">
|
||
|
|
<p className="text-sm text-muted-foreground">{componentConfig.emptyMessage}</p>
|
||
|
|
{isDesignMode && (
|
||
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
||
|
|
💡 이전 모달에서 "다음" 버튼으로 데이터를 전달하면 여기에 표시됩니다.
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Grid 레이아웃 렌더링
|
||
|
|
const renderGridLayout = () => {
|
||
|
|
return (
|
||
|
|
<div className="overflow-auto bg-card">
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow className="bg-background">
|
||
|
|
{componentConfig.showIndex && (
|
||
|
|
<TableHead className="h-12 w-12 px-4 py-3 text-center text-xs font-semibold sm:text-sm">#</TableHead>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 원본 데이터 컬럼 */}
|
||
|
|
{componentConfig.displayColumns?.map((colName) => (
|
||
|
|
<TableHead key={colName} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
|
||
|
|
{colName}
|
||
|
|
</TableHead>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{/* 추가 입력 필드 컬럼 */}
|
||
|
|
{componentConfig.additionalFields?.map((field) => (
|
||
|
|
<TableHead key={field.name} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
|
||
|
|
{field.label}
|
||
|
|
{field.required && <span className="ml-1 text-destructive">*</span>}
|
||
|
|
</TableHead>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{componentConfig.allowRemove && (
|
||
|
|
<TableHead className="h-12 w-20 px-4 py-3 text-center text-xs font-semibold sm:text-sm">작업</TableHead>
|
||
|
|
)}
|
||
|
|
</TableRow>
|
||
|
|
</TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{items.map((item, index) => (
|
||
|
|
<TableRow key={item.id} className="bg-background transition-colors hover:bg-muted/50">
|
||
|
|
{/* 인덱스 번호 */}
|
||
|
|
{componentConfig.showIndex && (
|
||
|
|
<TableCell className="h-14 px-4 py-3 text-center text-xs font-medium sm:text-sm">
|
||
|
|
{index + 1}
|
||
|
|
</TableCell>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 원본 데이터 표시 */}
|
||
|
|
{componentConfig.displayColumns?.map((colName) => (
|
||
|
|
<TableCell key={colName} className="h-14 px-4 py-3 text-xs sm:text-sm">
|
||
|
|
{item.originalData[colName] || "-"}
|
||
|
|
</TableCell>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{/* 추가 입력 필드 */}
|
||
|
|
{componentConfig.additionalFields?.map((field) => (
|
||
|
|
<TableCell key={field.name} className="h-14 px-4 py-3">
|
||
|
|
{renderField(field, item)}
|
||
|
|
</TableCell>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{/* 삭제 버튼 */}
|
||
|
|
{componentConfig.allowRemove && (
|
||
|
|
<TableCell className="h-14 px-4 py-3 text-center">
|
||
|
|
{!componentConfig.disabled && !componentConfig.readonly && (
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
onClick={() => handleRemoveItem(item.id)}
|
||
|
|
className="h-7 w-7 text-destructive hover:bg-destructive/10 hover:text-destructive sm:h-8 sm:w-8"
|
||
|
|
title="항목 제거"
|
||
|
|
>
|
||
|
|
<X className="h-3 w-3 sm:h-4 sm:w-4" />
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</TableCell>
|
||
|
|
)}
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Card 레이아웃 렌더링
|
||
|
|
const renderCardLayout = () => {
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{items.map((item, index) => (
|
||
|
|
<Card key={item.id} className="relative">
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between pb-3">
|
||
|
|
<CardTitle className="text-sm font-semibold sm:text-base">
|
||
|
|
{componentConfig.showIndex && `${index + 1}. `}
|
||
|
|
{item.originalData[componentConfig.displayColumns?.[0] || "name"] || `항목 ${index + 1}`}
|
||
|
|
</CardTitle>
|
||
|
|
|
||
|
|
{componentConfig.allowRemove && !componentConfig.disabled && !componentConfig.readonly && (
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
onClick={() => handleRemoveItem(item.id)}
|
||
|
|
className="h-7 w-7 text-destructive hover:bg-destructive/10 sm:h-8 sm:w-8"
|
||
|
|
>
|
||
|
|
<X className="h-3 w-3 sm:h-4 sm:w-4" />
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</CardHeader>
|
||
|
|
|
||
|
|
<CardContent className="space-y-3">
|
||
|
|
{/* 원본 데이터 표시 */}
|
||
|
|
{componentConfig.displayColumns?.map((colName) => (
|
||
|
|
<div key={colName} className="flex items-center justify-between text-xs sm:text-sm">
|
||
|
|
<span className="font-medium text-muted-foreground">{colName}:</span>
|
||
|
|
<span>{item.originalData[colName] || "-"}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{/* 추가 입력 필드 */}
|
||
|
|
{componentConfig.additionalFields?.map((field) => (
|
||
|
|
<div key={field.name} className="space-y-1">
|
||
|
|
<label className="text-xs font-medium sm:text-sm">
|
||
|
|
{field.label}
|
||
|
|
{field.required && <span className="ml-1 text-destructive">*</span>}
|
||
|
|
</label>
|
||
|
|
{renderField(field, item)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={componentStyle} className={cn("space-y-4", className)} onClick={handleClick}>
|
||
|
|
{/* 레이아웃에 따라 렌더링 */}
|
||
|
|
{componentConfig.layout === "grid" ? renderGridLayout() : renderCardLayout()}
|
||
|
|
|
||
|
|
{/* 항목 수 표시 */}
|
||
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
||
|
|
<span>총 {items.length}개 항목</span>
|
||
|
|
{componentConfig.targetTable && <span>저장 대상: {componentConfig.targetTable}</span>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* SelectedItemsDetailInput 래퍼 컴포넌트
|
||
|
|
* 추가적인 로직이나 상태 관리가 필요한 경우 사용
|
||
|
|
*/
|
||
|
|
export const SelectedItemsDetailInputWrapper: React.FC<SelectedItemsDetailInputComponentProps> = (props) => {
|
||
|
|
return <SelectedItemsDetailInputComponent {...props} />;
|
||
|
|
};
|