거래처관리-품목등록 화면 컴포넌트 제작
This commit is contained in:
SeongHyun Kim
@@ -0,0 +1,258 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { CustomerItemMappingConfig } from "./types";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface CustomerItemMappingComponentProps {
|
||||
component: any;
|
||||
isDesignMode?: boolean;
|
||||
isSelected?: boolean;
|
||||
isInteractive?: boolean;
|
||||
config?: CustomerItemMappingConfig;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
onClick?: (e?: React.MouseEvent) => void;
|
||||
onDragStart?: (e: React.DragEvent) => void;
|
||||
onDragEnd?: (e: React.DragEvent) => void;
|
||||
}
|
||||
|
||||
export const CustomerItemMappingComponent: React.FC<CustomerItemMappingComponentProps> = ({
|
||||
component,
|
||||
isDesignMode = false,
|
||||
isSelected = false,
|
||||
config,
|
||||
className,
|
||||
style,
|
||||
onClick,
|
||||
onDragStart,
|
||||
onDragEnd,
|
||||
}) => {
|
||||
const finalConfig = {
|
||||
...config,
|
||||
...component.config,
|
||||
} as CustomerItemMappingConfig;
|
||||
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
|
||||
const [isAllSelected, setIsAllSelected] = useState(false);
|
||||
|
||||
// 데이터 로드 (실제 구현 시 API 호출)
|
||||
useEffect(() => {
|
||||
if (!isDesignMode && finalConfig.selectedTable) {
|
||||
// TODO: API 호출로 데이터 로드
|
||||
setData([]);
|
||||
}
|
||||
}, [finalConfig.selectedTable, isDesignMode]);
|
||||
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
if (checked) {
|
||||
const allIds = data.map((_, index) => `row-${index}`);
|
||||
setSelectedRows(new Set(allIds));
|
||||
setIsAllSelected(true);
|
||||
} else {
|
||||
setSelectedRows(new Set());
|
||||
setIsAllSelected(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRowSelection = (rowId: string, checked: boolean) => {
|
||||
const newSelected = new Set(selectedRows);
|
||||
if (checked) {
|
||||
newSelected.add(rowId);
|
||||
} else {
|
||||
newSelected.delete(rowId);
|
||||
}
|
||||
setSelectedRows(newSelected);
|
||||
setIsAllSelected(newSelected.size === data.length && data.length > 0);
|
||||
};
|
||||
|
||||
const columns = finalConfig.columns || [];
|
||||
const showCheckbox = finalConfig.checkbox?.enabled !== false;
|
||||
|
||||
// 스타일 계산
|
||||
const componentStyle: React.CSSProperties = {
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "hsl(var(--background))",
|
||||
overflow: "hidden",
|
||||
boxSizing: "border-box",
|
||||
};
|
||||
|
||||
// 이벤트 핸들러
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onClick?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("w-full h-full", className)}
|
||||
style={componentStyle}
|
||||
onClick={handleClick}
|
||||
onDragStart={isDesignMode ? onDragStart : undefined}
|
||||
onDragEnd={isDesignMode ? onDragEnd : undefined}
|
||||
draggable={isDesignMode}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="w-full border-border bg-muted flex h-12 flex-shrink-0 items-center justify-between border-b px-4 sm:h-14 sm:px-6">
|
||||
<h3 className="text-sm font-semibold sm:text-base">
|
||||
품목 추가 - {finalConfig.selectedTable || "[테이블 선택]"}
|
||||
</h3>
|
||||
<button className="hover:bg-muted-foreground/10 rounded p-1">
|
||||
<X className="h-4 w-4 sm:h-5 sm:w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 검색/카테고리 영역 - 회색 배경 */}
|
||||
{finalConfig.showSearchArea && (
|
||||
<div
|
||||
className="w-full border-border bg-muted flex-shrink-0 border-b"
|
||||
style={{ height: finalConfig.searchAreaHeight || 80 }}
|
||||
>
|
||||
<div className="flex h-full w-full items-center justify-center p-4">
|
||||
<div className="text-muted-foreground flex flex-col items-center gap-2 text-center">
|
||||
<div className="bg-background/50 rounded-full p-3">
|
||||
<svg
|
||||
className="h-5 w-5 sm:h-6 sm:w-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-xs font-medium sm:text-sm">
|
||||
검색 및 카테고리 필터 영역
|
||||
</p>
|
||||
<p className="text-[10px] text-muted-foreground/70 sm:text-xs">
|
||||
나중에 구현 예정
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 목록 헤더 */}
|
||||
<div className="w-full border-border bg-muted/50 flex h-10 flex-shrink-0 items-center justify-between border-b px-4 sm:h-12 sm:px-6">
|
||||
<span className="text-xs font-semibold sm:text-sm">판매품목 목록</span>
|
||||
<div className="flex items-center gap-3 sm:gap-6">
|
||||
{showCheckbox && finalConfig.checkbox?.selectAll && (
|
||||
<label className="flex cursor-pointer items-center gap-2">
|
||||
<Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} />
|
||||
<span className="text-xs sm:text-sm">전체 선택</span>
|
||||
</label>
|
||||
)}
|
||||
<span className="text-muted-foreground text-xs font-medium sm:text-sm">
|
||||
선택: {selectedRows.size}개
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 테이블 컨테이너 */}
|
||||
<div className="flex w-full flex-1 flex-col overflow-hidden">
|
||||
{/* 테이블 헤더 */}
|
||||
{columns.length > 0 && (
|
||||
<div className="border-border flex-shrink-0 border-b">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full" style={{ minWidth: "100%" }}>
|
||||
<thead>
|
||||
<tr className="bg-muted/30 h-10 sm:h-12">
|
||||
{showCheckbox && (
|
||||
<th className="border-border w-12 border-r px-2 text-center sm:w-16 sm:px-3"></th>
|
||||
)}
|
||||
{columns.map((col, index) => (
|
||||
<th
|
||||
key={col}
|
||||
className={cn(
|
||||
"border-border text-foreground px-3 text-left text-xs font-semibold sm:px-6 sm:text-sm",
|
||||
index < columns.length - 1 && "border-r"
|
||||
)}
|
||||
>
|
||||
{col}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 데이터 영역 */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{data.length === 0 ? (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-3 p-8 text-center sm:gap-4 sm:p-12">
|
||||
<div className="bg-muted/50 flex h-16 w-16 items-center justify-center rounded-full sm:h-20 sm:w-20">
|
||||
<svg
|
||||
className="text-muted-foreground h-8 w-8 sm:h-10 sm:w-10"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-1 sm:space-y-2">
|
||||
<p className="text-foreground text-base font-semibold sm:text-lg">
|
||||
{finalConfig.emptyMessage || "데이터가 없습니다"}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs sm:text-sm">
|
||||
{finalConfig.emptyDescription || "품목 데이터가 추가되면 여기에 표시됩니다"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full" style={{ minWidth: "100%" }}>
|
||||
<tbody>
|
||||
{data.map((row, index) => (
|
||||
<tr key={index} className="hover:bg-muted/50 border-b transition-colors">
|
||||
{showCheckbox && (
|
||||
<td className="border-border w-12 border-r px-2 text-center sm:w-16 sm:px-3">
|
||||
<Checkbox
|
||||
checked={selectedRows.has(`row-${index}`)}
|
||||
onCheckedChange={(checked) =>
|
||||
handleRowSelection(`row-${index}`, checked as boolean)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
{columns.map((col, colIndex) => (
|
||||
<td
|
||||
key={col}
|
||||
className={cn(
|
||||
"border-border px-3 py-2 text-xs sm:px-6 sm:py-3 sm:text-sm",
|
||||
colIndex < columns.length - 1 && "border-r"
|
||||
)}
|
||||
>
|
||||
{row[col] || "-"}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user