kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

커밋

This commit is contained in:
kjs 2025-10-30 18:31:08 +09:00
parent a819ea6bfa
commit 0a767480cd
1 changed files with 79 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
frontend/components/webtypes/RepeaterInput.tsx
View File

@ -6,7 +6,7 @@ import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Plus, X, GripVertical, ChevronDown, ChevronUp } from "lucide-react"; import { Plus, X, GripVertical, ChevronDown, ChevronUp } from "lucide-react";
import { RepeaterFieldGroupConfig, RepeaterData, RepeaterItemData, RepeaterFieldDefinition } from "@/types/repeater"; import { RepeaterFieldGroupConfig, RepeaterData, RepeaterItemData, RepeaterFieldDefinition } from "@/types/repeater";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -285,9 +285,9 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
if (fields.length === 0) { if (fields.length === 0) {
return ( return (
<div className={cn("space-y-4", className)}> <div className={cn("space-y-4", className)}>
<div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-orange-300 bg-orange-50 p-8 text-center"> <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-destructive/30 bg-destructive/5 p-8 text-center">
<p className="text-sm font-medium text-orange-900">필드가 정의되지 않았습니다</p> <p className="text-sm font-medium text-destructive">필드가 정의되지 않았습니다</p>
<p className="mt-2 text-xs text-orange-700">속성 패널에서 필드를 추가하세요.</p> <p className="mt-2 text-xs text-muted-foreground">속성 패널에서 필드를 추가하세요.</p>
</div> </div>
</div> </div>
); );
@ -297,8 +297,8 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
if (items.length === 0) { if (items.length === 0) {
return ( return (
<div className={cn("space-y-4", className)}> <div className={cn("space-y-4", className)}>
<div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center"> <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="mb-4 text-sm text-gray-500">{emptyMessage}</p> <p className="mb-4 text-sm text-muted-foreground">{emptyMessage}</p>
{!readonly && !disabled && items.length < maxItems && ( {!readonly && !disabled && items.length < maxItems && (
<Button type="button" onClick={handleAddItem} size="sm"> <Button type="button" onClick={handleAddItem} size="sm">
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
@ -318,82 +318,79 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
// 그리드/테이블 형식 렌더링 // 그리드/테이블 형식 렌더링
const renderGridLayout = () => { const renderGridLayout = () => {
return ( return (
<div className="rounded-lg border bg-white"> <div className="bg-card">
{/* 테이블 헤더 */} <Table>
<div <TableHeader>
className="grid gap-2 border-b bg-gray-50 p-3 font-semibold" <TableRow className="bg-background">
style={{
gridTemplateColumns: `40px ${allowReorder ? "40px " : ""}${fields.map(() => "1fr").join(" ")} 80px`,
}}
>
{showIndex && <div className="text-center text-sm">#</div>}
{allowReorder && <div className="text-center text-sm"></div>}
{fields.map((field) => (
<div key={field.name} className="text-sm text-gray-700">
{field.label}
{field.required && <span className="ml-1 text-orange-500">*</span>}
</div>
))}
<div className="text-center text-sm">작업</div>
</div>
{/* 테이블 바디 */}
<div className="divide-y">
{items.map((item, itemIndex) => (
<div
key={itemIndex}
className={cn(
"grid gap-2 p-3 transition-colors hover:bg-gray-50",
draggedIndex === itemIndex && "bg-blue-50 opacity-50",
)}
style={{
gridTemplateColumns: `40px ${allowReorder ? "40px " : ""}${fields.map(() => "1fr").join(" ")} 80px`,
}}
draggable={allowReorder && !readonly && !disabled}
onDragStart={() => handleDragStart(itemIndex)}
onDragOver={(e) => handleDragOver(e, itemIndex)}
onDrop={(e) => handleDrop(e, itemIndex)}
onDragEnd={handleDragEnd}
>
{/* 인덱스 번호 */}
{showIndex && ( {showIndex && (
<div className="flex items-center justify-center text-sm font-medium text-gray-600"> <TableHead className="h-12 w-12 px-6 py-3 text-center text-sm font-semibold">#</TableHead>
{itemIndex + 1}
</div>
)} )}
{allowReorder && (
{/* 드래그 핸들 */} <TableHead className="h-12 w-12 px-6 py-3 text-center text-sm font-semibold"></TableHead>
{allowReorder && !readonly && !disabled && (
<div className="flex items-center justify-center">
<GripVertical className="h-4 w-4 cursor-move text-gray-400" />
</div>
)} )}
{/* 필드들 */}
{fields.map((field) => ( {fields.map((field) => (
<div key={field.name} className="flex items-center"> <TableHead key={field.name} className="h-12 px-6 py-3 text-sm font-semibold">
{renderField(field, itemIndex, item[field.name])} {field.label}
</div> {field.required && <span className="ml-1 text-destructive">*</span>}
</TableHead>
))} ))}
<TableHead className="h-12 w-20 px-6 py-3 text-center text-sm font-semibold">작업</TableHead>
{/* 삭제 버튼 */} </TableRow>
<div className="flex items-center justify-center"> </TableHeader>
{!readonly && !disabled && items.length > minItems && ( <TableBody>
<Button {items.map((item, itemIndex) => (
type="button" <TableRow
variant="ghost" key={itemIndex}
size="icon" className={cn(
onClick={() => handleRemoveItem(itemIndex)} "bg-background transition-colors hover:bg-muted/50",
className="h-8 w-8 text-red-500 hover:bg-red-50 hover:text-red-700" draggedIndex === itemIndex && "opacity-50",
title="항목 제거"
>
<X className="h-4 w-4" />
</Button>
)} )}
</div> draggable={allowReorder && !readonly && !disabled}
</div> onDragStart={() => handleDragStart(itemIndex)}
))} onDragOver={(e) => handleDragOver(e, itemIndex)}
</div> onDrop={(e) => handleDrop(e, itemIndex)}
onDragEnd={handleDragEnd}
>
{/* 인덱스 번호 */}
{showIndex && (
<TableCell className="h-16 px-6 py-3 text-center text-sm font-medium">
{itemIndex + 1}
</TableCell>
)}
{/* 드래그 핸들 */}
{allowReorder && !readonly && !disabled && (
<TableCell className="h-16 px-6 py-3 text-center">
<GripVertical className="h-4 w-4 cursor-move text-muted-foreground" />
</TableCell>
)}
{/* 필드들 */}
{fields.map((field) => (
<TableCell key={field.name} className="h-16 px-6 py-3">
{renderField(field, itemIndex, item[field.name])}
</TableCell>
))}
{/* 삭제 버튼 */}
<TableCell className="h-16 px-6 py-3 text-center">
{!readonly && !disabled && items.length > minItems && (
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveItem(itemIndex)}
className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
title="항목 제거"
>
<X className="h-4 w-4" />
</Button>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div> </div>
); );
}; };
@ -423,12 +420,12 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{/* 드래그 핸들 */} {/* 드래그 핸들 */}
{allowReorder && !readonly && !disabled && ( {allowReorder && !readonly && !disabled && (
<GripVertical className="h-4 w-4 flex-shrink-0 cursor-move text-gray-400" /> <GripVertical className="h-4 w-4 flex-shrink-0 cursor-move text-muted-foreground" />
)} )}
{/* 인덱스 번호 */} {/* 인덱스 번호 */}
{showIndex && ( {showIndex && (
<CardTitle className="text-sm font-semibold text-gray-700">항목 {itemIndex + 1}</CardTitle> <CardTitle className="text-sm font-semibold text-foreground">항목 {itemIndex + 1}</CardTitle>
)} )}
</div> </div>
@ -453,7 +450,7 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => handleRemoveItem(itemIndex)} onClick={() => handleRemoveItem(itemIndex)}
className="h-8 w-8 text-red-500 hover:bg-red-50 hover:text-red-700" className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
title="항목 제거" title="항목 제거"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
@ -467,9 +464,9 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
<div className={getFieldsLayoutClass()}> <div className={getFieldsLayoutClass()}>
{fields.map((field) => ( {fields.map((field) => (
<div key={field.name} className="space-y-1" style={{ width: field.width }}> <div key={field.name} className="space-y-1" style={{ width: field.width }}>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-foreground">
{field.label} {field.label}
{field.required && <span className="ml-1 text-orange-500">*</span>} {field.required && <span className="ml-1 text-destructive">*</span>}
</label> </label>
{renderField(field, itemIndex, item[field.name])} {renderField(field, itemIndex, item[field.name])}
</div> </div>
@ -500,7 +497,7 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
)} )}
{/* 제한 안내 */} {/* 제한 안내 */}
<div className="flex justify-between text-xs text-gray-500"> <div className="flex justify-between text-xs text-muted-foreground">
<span>현재: {items.length}개 항목</span> <span>현재: {items.length}개 항목</span>
<span> <span>
(최소: {minItems}, 최대: {maxItems}) (최소: {minItems}, 최대: {maxItems})