- ItemMasterDataManagement 컴포넌트에서 hooks 분리 - 다이얼로그 컴포넌트들 타입 및 구조 개선 - BOMManagementSection 개선 - HierarchyTab 업데이트 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
470 lines
19 KiB
TypeScript
470 lines
19 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { useItemMaster } from '@/contexts/ItemMasterContext';
|
|
import type { ItemPage, SectionTemplate, TemplateField, BOMItem, ItemMasterField } from '@/contexts/ItemMasterContext';
|
|
|
|
export interface UseTemplateManagementReturn {
|
|
// 섹션 템플릿 다이얼로그 상태
|
|
isSectionTemplateDialogOpen: boolean;
|
|
setIsSectionTemplateDialogOpen: (open: boolean) => void;
|
|
editingSectionTemplateId: number | null;
|
|
setEditingSectionTemplateId: (id: number | null) => void;
|
|
|
|
// 섹션 템플릿 폼 상태
|
|
newSectionTemplateTitle: string;
|
|
setNewSectionTemplateTitle: (title: string) => void;
|
|
newSectionTemplateDescription: string;
|
|
setNewSectionTemplateDescription: (desc: string) => void;
|
|
newSectionTemplateCategory: string[];
|
|
setNewSectionTemplateCategory: React.Dispatch<React.SetStateAction<string[]>>;
|
|
newSectionTemplateType: 'fields' | 'bom';
|
|
setNewSectionTemplateType: (type: 'fields' | 'bom') => void;
|
|
|
|
// 템플릿 불러오기 다이얼로그
|
|
isLoadTemplateDialogOpen: boolean;
|
|
setIsLoadTemplateDialogOpen: (open: boolean) => void;
|
|
selectedTemplateId: string | null;
|
|
setSelectedTemplateId: (id: string | null) => void;
|
|
|
|
// 템플릿 필드 다이얼로그 상태
|
|
isTemplateFieldDialogOpen: boolean;
|
|
setIsTemplateFieldDialogOpen: (open: boolean) => void;
|
|
currentTemplateId: number | null;
|
|
setCurrentTemplateId: (id: number | null) => void;
|
|
editingTemplateFieldId: number | null;
|
|
setEditingTemplateFieldId: (id: number | null) => void;
|
|
|
|
// 템플릿 필드 폼 상태
|
|
templateFieldName: string;
|
|
setTemplateFieldName: (name: string) => void;
|
|
templateFieldKey: string;
|
|
setTemplateFieldKey: (key: string) => void;
|
|
templateFieldInputType: 'textbox' | 'dropdown' | 'checkbox' | 'number' | 'date' | 'textarea';
|
|
setTemplateFieldInputType: (type: 'textbox' | 'dropdown' | 'checkbox' | 'number' | 'date' | 'textarea') => void;
|
|
templateFieldRequired: boolean;
|
|
setTemplateFieldRequired: (required: boolean) => void;
|
|
templateFieldOptions: string;
|
|
setTemplateFieldOptions: (options: string) => void;
|
|
templateFieldDescription: string;
|
|
setTemplateFieldDescription: (desc: string) => void;
|
|
templateFieldMultiColumn: boolean;
|
|
setTemplateFieldMultiColumn: (multi: boolean) => void;
|
|
templateFieldColumnCount: number;
|
|
setTemplateFieldColumnCount: (count: number) => void;
|
|
templateFieldColumnNames: string[];
|
|
setTemplateFieldColumnNames: React.Dispatch<React.SetStateAction<string[]>>;
|
|
|
|
// 템플릿 필드 마스터 항목 관련
|
|
templateFieldInputMode: 'custom' | 'master';
|
|
setTemplateFieldInputMode: (mode: 'custom' | 'master') => void;
|
|
templateFieldShowMasterFieldList: boolean;
|
|
setTemplateFieldShowMasterFieldList: (show: boolean) => void;
|
|
templateFieldSelectedMasterFieldId: string;
|
|
setTemplateFieldSelectedMasterFieldId: (id: string) => void;
|
|
|
|
// 핸들러
|
|
handleAddSectionTemplate: () => void;
|
|
handleEditSectionTemplate: (template: SectionTemplate) => void;
|
|
handleUpdateSectionTemplate: () => void;
|
|
handleDeleteSectionTemplate: (id: number) => void;
|
|
handleLoadTemplate: (selectedPage: ItemPage | undefined) => void;
|
|
handleAddTemplateField: () => void;
|
|
handleEditTemplateField: (templateId: number, field: TemplateField) => void;
|
|
handleDeleteTemplateField: (templateId: number, fieldId: string) => void;
|
|
handleAddBOMItemToTemplate: (templateId: number, item: Omit<BOMItem, 'id' | 'created_at' | 'updated_at' | 'tenant_id' | 'section_id'>) => void;
|
|
handleUpdateBOMItemInTemplate: (templateId: number, itemId: number, item: Partial<BOMItem>) => void;
|
|
handleDeleteBOMItemFromTemplate: (templateId: number, itemId: number) => void;
|
|
resetSectionTemplateForm: () => void;
|
|
resetTemplateFieldForm: () => void;
|
|
}
|
|
|
|
export function useTemplateManagement(): UseTemplateManagementReturn {
|
|
const {
|
|
sectionTemplates,
|
|
addSectionTemplate,
|
|
updateSectionTemplate,
|
|
deleteSectionTemplate,
|
|
addSectionToPage,
|
|
addItemMasterField,
|
|
itemMasterFields,
|
|
tenantId
|
|
} = useItemMaster();
|
|
|
|
// 섹션 템플릿 다이얼로그 상태
|
|
const [isSectionTemplateDialogOpen, setIsSectionTemplateDialogOpen] = useState(false);
|
|
const [editingSectionTemplateId, setEditingSectionTemplateId] = useState<number | null>(null);
|
|
|
|
// 섹션 템플릿 폼 상태
|
|
const [newSectionTemplateTitle, setNewSectionTemplateTitle] = useState('');
|
|
const [newSectionTemplateDescription, setNewSectionTemplateDescription] = useState('');
|
|
const [newSectionTemplateCategory, setNewSectionTemplateCategory] = useState<string[]>([]);
|
|
const [newSectionTemplateType, setNewSectionTemplateType] = useState<'fields' | 'bom'>('fields');
|
|
|
|
// 템플릿 불러오기 다이얼로그
|
|
const [isLoadTemplateDialogOpen, setIsLoadTemplateDialogOpen] = useState(false);
|
|
const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
|
|
|
|
// 템플릿 필드 다이얼로그 상태
|
|
const [isTemplateFieldDialogOpen, setIsTemplateFieldDialogOpen] = useState(false);
|
|
const [currentTemplateId, setCurrentTemplateId] = useState<number | null>(null);
|
|
const [editingTemplateFieldId, setEditingTemplateFieldId] = useState<number | null>(null);
|
|
|
|
// 템플릿 필드 폼 상태
|
|
const [templateFieldName, setTemplateFieldName] = useState('');
|
|
const [templateFieldKey, setTemplateFieldKey] = useState('');
|
|
const [templateFieldInputType, setTemplateFieldInputType] = useState<'textbox' | 'dropdown' | 'checkbox' | 'number' | 'date' | 'textarea'>('textbox');
|
|
const [templateFieldRequired, setTemplateFieldRequired] = useState(false);
|
|
const [templateFieldOptions, setTemplateFieldOptions] = useState('');
|
|
const [templateFieldDescription, setTemplateFieldDescription] = useState('');
|
|
const [templateFieldMultiColumn, setTemplateFieldMultiColumn] = useState(false);
|
|
const [templateFieldColumnCount, setTemplateFieldColumnCount] = useState(2);
|
|
const [templateFieldColumnNames, setTemplateFieldColumnNames] = useState<string[]>(['컬럼1', '컬럼2']);
|
|
|
|
// 템플릿 필드 마스터 항목 관련
|
|
const [templateFieldInputMode, setTemplateFieldInputMode] = useState<'custom' | 'master'>('custom');
|
|
const [templateFieldShowMasterFieldList, setTemplateFieldShowMasterFieldList] = useState(false);
|
|
const [templateFieldSelectedMasterFieldId, setTemplateFieldSelectedMasterFieldId] = useState('');
|
|
|
|
// 섹션 템플릿 추가
|
|
const handleAddSectionTemplate = () => {
|
|
if (!newSectionTemplateTitle.trim()) {
|
|
toast.error('섹션 제목을 입력해주세요');
|
|
return;
|
|
}
|
|
|
|
const newTemplateData = {
|
|
tenant_id: tenantId ?? 0,
|
|
template_name: newSectionTemplateTitle,
|
|
section_type: (newSectionTemplateType === 'bom' ? 'BOM' : 'BASIC') as 'BASIC' | 'BOM' | 'CUSTOM',
|
|
description: newSectionTemplateDescription || null,
|
|
default_fields: null,
|
|
category: newSectionTemplateCategory,
|
|
created_by: null,
|
|
updated_by: null,
|
|
};
|
|
|
|
console.log('Adding section template:', newTemplateData);
|
|
addSectionTemplate(newTemplateData);
|
|
resetSectionTemplateForm();
|
|
toast.success('섹션 템플릿이 추가되었습니다!');
|
|
};
|
|
|
|
// 섹션 템플릿 수정 시작
|
|
const handleEditSectionTemplate = (template: SectionTemplate) => {
|
|
setEditingSectionTemplateId(template.id);
|
|
setNewSectionTemplateTitle(template.template_name);
|
|
setNewSectionTemplateDescription(template.description || '');
|
|
setNewSectionTemplateCategory(template.category || []);
|
|
setNewSectionTemplateType(template.section_type === 'BOM' ? 'bom' : 'fields');
|
|
setIsSectionTemplateDialogOpen(true);
|
|
};
|
|
|
|
// 섹션 템플릿 업데이트
|
|
const handleUpdateSectionTemplate = () => {
|
|
if (!editingSectionTemplateId || !newSectionTemplateTitle.trim()) {
|
|
toast.error('섹션 제목을 입력해주세요');
|
|
return;
|
|
}
|
|
|
|
const updateData = {
|
|
template_name: newSectionTemplateTitle,
|
|
description: newSectionTemplateDescription || undefined,
|
|
category: newSectionTemplateCategory.length > 0 ? newSectionTemplateCategory : undefined,
|
|
section_type: (newSectionTemplateType === 'bom' ? 'BOM' : 'BASIC') as 'BASIC' | 'BOM' | 'CUSTOM'
|
|
};
|
|
|
|
console.log('Updating section template:', { id: editingSectionTemplateId, updateData });
|
|
updateSectionTemplate(editingSectionTemplateId, updateData);
|
|
resetSectionTemplateForm();
|
|
toast.success('섹션이 수정되었습니다 (저장 필요)');
|
|
};
|
|
|
|
// 섹션 템플릿 삭제
|
|
const handleDeleteSectionTemplate = (id: number) => {
|
|
if (confirm('이 섹션을 삭제하시겠습니까?')) {
|
|
deleteSectionTemplate(id);
|
|
toast.success('섹션이 삭제되었습니다');
|
|
}
|
|
};
|
|
|
|
// 템플릿 불러오기
|
|
const handleLoadTemplate = (selectedPage: ItemPage | undefined) => {
|
|
if (!selectedTemplateId || !selectedPage) {
|
|
toast.error('템플릿을 선택해주세요');
|
|
return;
|
|
}
|
|
|
|
const template = sectionTemplates.find(t => t.id === Number(selectedTemplateId));
|
|
if (!template) {
|
|
toast.error('템플릿을 찾을 수 없습니다');
|
|
return;
|
|
}
|
|
|
|
const newSection = {
|
|
page_id: selectedPage.id,
|
|
section_name: template.template_name,
|
|
section_type: template.section_type === 'BOM' ? 'BOM' as const : 'BASIC' as const,
|
|
description: template.description || undefined,
|
|
order_no: selectedPage.sections.length + 1,
|
|
is_collapsible: true,
|
|
is_default_open: true,
|
|
fields: [],
|
|
bomItems: template.section_type === 'BOM' ? [] : undefined
|
|
};
|
|
|
|
console.log('Loading template to section:', template.template_name, 'newSection:', newSection);
|
|
addSectionToPage(selectedPage.id, newSection);
|
|
setSelectedTemplateId(null);
|
|
setIsLoadTemplateDialogOpen(false);
|
|
toast.success('섹션이 불러와졌습니다');
|
|
};
|
|
|
|
// 템플릿 필드 추가
|
|
const handleAddTemplateField = () => {
|
|
if (!currentTemplateId || !templateFieldName.trim() || !templateFieldKey.trim()) {
|
|
toast.error('모든 필수 항목을 입력해주세요');
|
|
return;
|
|
}
|
|
|
|
const template = sectionTemplates.find(t => t.id === currentTemplateId);
|
|
if (!template) return;
|
|
|
|
// 마스터 필드에 없으면 자동 추가
|
|
const existingMasterField = itemMasterFields.find(f => f.id.toString() === templateFieldKey);
|
|
if (!existingMasterField && !editingTemplateFieldId) {
|
|
const newMasterFieldData: Omit<ItemMasterField, 'id' | 'tenant_id' | 'created_by' | 'updated_by' | 'created_at' | 'updated_at'> = {
|
|
field_name: templateFieldName,
|
|
field_type: templateFieldInputType,
|
|
category: '공통',
|
|
description: templateFieldDescription || null,
|
|
is_common: false,
|
|
default_value: null,
|
|
options: templateFieldInputType === 'dropdown' && templateFieldOptions.trim()
|
|
? templateFieldOptions.split(',').map(o => ({ label: o.trim(), value: o.trim() }))
|
|
: null,
|
|
validation_rules: null,
|
|
properties: {
|
|
inputType: templateFieldInputType,
|
|
required: templateFieldRequired,
|
|
multiColumn: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') ? templateFieldMultiColumn : undefined,
|
|
columnCount: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') && templateFieldMultiColumn ? templateFieldColumnCount : undefined,
|
|
columnNames: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') && templateFieldMultiColumn ? templateFieldColumnNames : undefined
|
|
},
|
|
};
|
|
addItemMasterField(newMasterFieldData as any);
|
|
toast.success('항목 탭에 자동으로 추가되었습니다');
|
|
}
|
|
|
|
// TemplateField 형식으로 생성
|
|
const newField: TemplateField = {
|
|
id: String(editingTemplateFieldId || Date.now()),
|
|
name: templateFieldName,
|
|
fieldKey: templateFieldKey,
|
|
property: {
|
|
inputType: templateFieldInputType,
|
|
required: templateFieldRequired,
|
|
options: templateFieldInputType === 'dropdown' && templateFieldOptions.trim()
|
|
? templateFieldOptions.split(',').map(o => o.trim())
|
|
: undefined,
|
|
multiColumn: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') ? templateFieldMultiColumn : undefined,
|
|
columnCount: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') && templateFieldMultiColumn ? templateFieldColumnCount : undefined,
|
|
columnNames: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') && templateFieldMultiColumn ? templateFieldColumnNames : undefined
|
|
},
|
|
description: templateFieldDescription || undefined
|
|
};
|
|
|
|
let updatedFields;
|
|
const currentFields = template.default_fields
|
|
? (typeof template.default_fields === 'string' ? JSON.parse(template.default_fields) : template.default_fields)
|
|
: [];
|
|
|
|
if (editingTemplateFieldId) {
|
|
updatedFields = Array.isArray(currentFields)
|
|
? currentFields.map((f: any) => String(f.id) === String(editingTemplateFieldId) ? newField : f)
|
|
: [];
|
|
toast.success('항목이 수정되었습니다');
|
|
} else {
|
|
updatedFields = Array.isArray(currentFields) ? [...currentFields, newField] : [newField];
|
|
toast.success('항목이 추가되었습니다');
|
|
}
|
|
|
|
updateSectionTemplate(currentTemplateId, { default_fields: updatedFields });
|
|
resetTemplateFieldForm();
|
|
};
|
|
|
|
// 템플릿 필드 수정 시작
|
|
const handleEditTemplateField = (templateId: number, field: TemplateField) => {
|
|
setCurrentTemplateId(templateId);
|
|
setEditingTemplateFieldId(Number(field.id));
|
|
setTemplateFieldName(field.name);
|
|
setTemplateFieldKey(field.fieldKey);
|
|
setTemplateFieldInputType(field.property.inputType);
|
|
setTemplateFieldRequired(field.property.required);
|
|
setTemplateFieldOptions(field.property.options?.join(', ') || '');
|
|
setTemplateFieldDescription(field.description || '');
|
|
setTemplateFieldMultiColumn(field.property.multiColumn || false);
|
|
setTemplateFieldColumnCount(field.property.columnCount || 2);
|
|
setTemplateFieldColumnNames(field.property.columnNames || ['컬럼1', '컬럼2']);
|
|
setIsTemplateFieldDialogOpen(true);
|
|
};
|
|
|
|
// 템플릿 필드 삭제
|
|
const handleDeleteTemplateField = (templateId: number, fieldId: string) => {
|
|
if (!confirm('이 항목을 삭제하시겠습니까?')) return;
|
|
|
|
const template = sectionTemplates.find(t => t.id === templateId);
|
|
if (!template) return;
|
|
|
|
const currentFields = template.default_fields
|
|
? (typeof template.default_fields === 'string' ? JSON.parse(template.default_fields) : template.default_fields)
|
|
: [];
|
|
const updatedFields = Array.isArray(currentFields)
|
|
? currentFields.filter((f: any) => String(f.id) !== String(fieldId))
|
|
: [];
|
|
updateSectionTemplate(templateId, { default_fields: updatedFields });
|
|
toast.success('항목이 삭제되었습니다');
|
|
};
|
|
|
|
// BOM 항목 추가
|
|
const handleAddBOMItemToTemplate = (templateId: number, item: Omit<BOMItem, 'id' | 'created_at' | 'updated_at' | 'tenant_id' | 'section_id'>) => {
|
|
const newItem: BOMItem = {
|
|
...item,
|
|
id: Date.now(),
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString(),
|
|
tenant_id: tenantId ?? 0,
|
|
section_id: 0
|
|
};
|
|
|
|
const template = sectionTemplates.find(t => t.id === templateId);
|
|
if (!template) return;
|
|
|
|
const updatedBomItems = [...(template.bomItems || []), newItem];
|
|
updateSectionTemplate(templateId, { bomItems: updatedBomItems });
|
|
};
|
|
|
|
// BOM 항목 수정
|
|
const handleUpdateBOMItemInTemplate = (templateId: number, itemId: number, item: Partial<BOMItem>) => {
|
|
const template = sectionTemplates.find(t => t.id === templateId);
|
|
if (!template || !template.bomItems) return;
|
|
|
|
const updatedBomItems = template.bomItems.map(bom =>
|
|
bom.id === itemId ? { ...bom, ...item } : bom
|
|
);
|
|
updateSectionTemplate(templateId, { bomItems: updatedBomItems });
|
|
};
|
|
|
|
// BOM 항목 삭제
|
|
const handleDeleteBOMItemFromTemplate = (templateId: number, itemId: number) => {
|
|
const template = sectionTemplates.find(t => t.id === templateId);
|
|
if (!template || !template.bomItems) return;
|
|
|
|
const updatedBomItems = template.bomItems.filter(bom => bom.id !== itemId);
|
|
updateSectionTemplate(templateId, { bomItems: updatedBomItems });
|
|
};
|
|
|
|
// 섹션 템플릿 폼 초기화
|
|
const resetSectionTemplateForm = () => {
|
|
setEditingSectionTemplateId(null);
|
|
setNewSectionTemplateTitle('');
|
|
setNewSectionTemplateDescription('');
|
|
setNewSectionTemplateCategory([]);
|
|
setNewSectionTemplateType('fields');
|
|
setIsSectionTemplateDialogOpen(false);
|
|
};
|
|
|
|
// 템플릿 필드 폼 초기화
|
|
const resetTemplateFieldForm = () => {
|
|
setTemplateFieldName('');
|
|
setTemplateFieldKey('');
|
|
setTemplateFieldInputType('textbox');
|
|
setTemplateFieldRequired(false);
|
|
setTemplateFieldOptions('');
|
|
setTemplateFieldDescription('');
|
|
setTemplateFieldMultiColumn(false);
|
|
setTemplateFieldColumnCount(2);
|
|
setTemplateFieldColumnNames(['컬럼1', '컬럼2']);
|
|
setEditingTemplateFieldId(null);
|
|
setTemplateFieldInputMode('custom');
|
|
setTemplateFieldShowMasterFieldList(false);
|
|
setTemplateFieldSelectedMasterFieldId('');
|
|
setIsTemplateFieldDialogOpen(false);
|
|
};
|
|
|
|
return {
|
|
// 섹션 템플릿 다이얼로그 상태
|
|
isSectionTemplateDialogOpen,
|
|
setIsSectionTemplateDialogOpen,
|
|
editingSectionTemplateId,
|
|
setEditingSectionTemplateId,
|
|
|
|
// 섹션 템플릿 폼 상태
|
|
newSectionTemplateTitle,
|
|
setNewSectionTemplateTitle,
|
|
newSectionTemplateDescription,
|
|
setNewSectionTemplateDescription,
|
|
newSectionTemplateCategory,
|
|
setNewSectionTemplateCategory,
|
|
newSectionTemplateType,
|
|
setNewSectionTemplateType,
|
|
|
|
// 템플릿 불러오기 다이얼로그
|
|
isLoadTemplateDialogOpen,
|
|
setIsLoadTemplateDialogOpen,
|
|
selectedTemplateId,
|
|
setSelectedTemplateId,
|
|
|
|
// 템플릿 필드 다이얼로그 상태
|
|
isTemplateFieldDialogOpen,
|
|
setIsTemplateFieldDialogOpen,
|
|
currentTemplateId,
|
|
setCurrentTemplateId,
|
|
editingTemplateFieldId,
|
|
setEditingTemplateFieldId,
|
|
|
|
// 템플릿 필드 폼 상태
|
|
templateFieldName,
|
|
setTemplateFieldName,
|
|
templateFieldKey,
|
|
setTemplateFieldKey,
|
|
templateFieldInputType,
|
|
setTemplateFieldInputType,
|
|
templateFieldRequired,
|
|
setTemplateFieldRequired,
|
|
templateFieldOptions,
|
|
setTemplateFieldOptions,
|
|
templateFieldDescription,
|
|
setTemplateFieldDescription,
|
|
templateFieldMultiColumn,
|
|
setTemplateFieldMultiColumn,
|
|
templateFieldColumnCount,
|
|
setTemplateFieldColumnCount,
|
|
templateFieldColumnNames,
|
|
setTemplateFieldColumnNames,
|
|
|
|
// 템플릿 필드 마스터 항목 관련
|
|
templateFieldInputMode,
|
|
setTemplateFieldInputMode,
|
|
templateFieldShowMasterFieldList,
|
|
setTemplateFieldShowMasterFieldList,
|
|
templateFieldSelectedMasterFieldId,
|
|
setTemplateFieldSelectedMasterFieldId,
|
|
|
|
// 핸들러
|
|
handleAddSectionTemplate,
|
|
handleEditSectionTemplate,
|
|
handleUpdateSectionTemplate,
|
|
handleDeleteSectionTemplate,
|
|
handleLoadTemplate,
|
|
handleAddTemplateField,
|
|
handleEditTemplateField,
|
|
handleDeleteTemplateField,
|
|
handleAddBOMItemToTemplate,
|
|
handleUpdateBOMItemInTemplate,
|
|
handleDeleteBOMItemFromTemplate,
|
|
resetSectionTemplateForm,
|
|
resetTemplateFieldForm,
|
|
};
|
|
} |