+
+ {text &&
+ );
+ };
+ ```
+
+- [x] **2.2** `src/components/ui/error-message.tsx` 에러 메시지 컴포넌트 생성 ✅
+ - **목적**: API 오류 메시지 일관된 UI로 표시
+ - **예상 시간**: 15분
+ - **완료 조건**: 재사용 가능한 에러 메시지 컴포넌트
+ - **완료일**: 2025-11-20
+ ```typescript
+ // src/components/ui/error-message.tsx
+ import React from 'react';
+ import { AlertCircle } from 'lucide-react';
+ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+
+ interface ErrorMessageProps {
+ title?: string;
+ message: string;
+ onRetry?: () => void;
+ className?: string;
+ }
+
+ export const ErrorMessage: React.FC{text}
} +{message}
+ {onRetry && ( + + )} +
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ window.location.reload()}
+ />
+
+ );
+ }
+ ```
+
+- [x] **7.4** 데이터 변환 및 state 설정
+ - **파일**: `src/components/items/ItemMasterDataManagement.tsx`
+ - **예상 시간**: 20분
+ - **작업 내용**: API 응답 데이터를 프론트 state에 매핑
+ ```typescript
+ const data = await itemMasterApi.init();
+
+ // 페이지 데이터
+ setItemPages(data.pages.map(transformPageResponse));
+
+ // 섹션 템플릿
+ setSectionTemplates(data.templates.map(transformTemplateResponse));
+
+ // 마스터 필드
+ setItemMasterFields(data.masterFields.map(transformMasterFieldResponse));
+
+ // 커스텀 탭
+ setCustomTabs(data.customTabs.map(transformCustomTabResponse));
+
+ // 단위 옵션
+ setUnitOptions(data.units.map(transformUnitResponse));
+ ```
+
+- [x] **7.5** 초기 로딩 테스트
+ - **예상 시간**: 15분
+ - **테스트 항목**:
+ - [x] API 호출 성공 시 데이터 정상 표시
+ - [x] API 호출 실패 시 에러 메시지 표시
+ - [x] 로딩 중 스피너 표시
+ - [x] 새로고침 시 최신 데이터 로드
+
+---
+
+### 🔐 8. 인증 및 에러 처리 (3개)
+
+- [x] **8.1** 토큰 만료 처리
+ - **파일**: `src/lib/api/error-handler.ts`
+ - **예상 시간**: 20분
+ ```typescript
+ export const handleApiError = async (response: Response): Promise
- 수량: {item.quantity} {item.unit}
- {item.note && • {item.note}}
+ 수량: {item.quantity} {item.unit || 'EA'}
+ {item.spec && • {item.spec}}
diff --git a/src/components/items/BOMManager.tsx b/src/components/items/BOMManager.tsx
deleted file mode 100644
index 6446b6b6..00000000
--- a/src/components/items/BOMManager.tsx
+++ /dev/null
@@ -1,486 +0,0 @@
-/**
- * BOM (자재명세서) 관리 컴포넌트
- *
- * 하위 품목 추가/수정/삭제, 수량 계산식 지원
- */
-
-'use client';
-
-import { useState } from 'react';
-import type { BOMLine } from '@/types/item';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from '@/components/ui/table';
-import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
-} from '@/components/ui/card';
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
-} from '@/components/ui/dialog';
-import { Plus, Edit, Trash2, Calculator, ImagePlus } from 'lucide-react';
-import { DrawingCanvas } from './DrawingCanvas';
-
-interface BOMManagerProps {
- bomLines: BOMLine[];
- onChange: (bomLines: BOMLine[]) => void;
- disabled?: boolean;
-}
-
-interface BOMFormData {
- childItemCode: string;
- childItemName: string;
- quantity: number;
- unit: string;
- unitPrice?: number;
- quantityFormula?: string;
- note?: string;
- isBending?: boolean;
- bendingDiagram?: string;
-}
-
-export default function BOMManager({ bomLines, onChange, disabled = false }: BOMManagerProps) {
- const [isDialogOpen, setIsDialogOpen] = useState(false);
- const [isDrawingOpen, setIsDrawingOpen] = useState(false);
- const [editingIndex, setEditingIndex] = useState(null);
- const [formData, setFormData] = useState({
- childItemCode: '',
- childItemName: '',
- quantity: 1,
- unit: 'EA',
- });
-
- // 폼 초기화
- const resetForm = () => {
- setFormData({
- childItemCode: '',
- childItemName: '',
- quantity: 1,
- unit: 'EA',
- });
- setEditingIndex(null);
- };
-
- // 새 BOM 라인 추가
- const handleAdd = () => {
- resetForm();
- setIsDialogOpen(true);
- };
-
- // BOM 라인 수정
- const handleEdit = (index: number) => {
- const line = bomLines[index];
- setFormData({
- childItemCode: line.childItemCode,
- childItemName: line.childItemName,
- quantity: line.quantity,
- unit: line.unit,
- unitPrice: line.unitPrice,
- quantityFormula: line.quantityFormula,
- note: line.note,
- isBending: line.isBending,
- bendingDiagram: line.bendingDiagram,
- });
- setEditingIndex(index);
- setIsDialogOpen(true);
- };
-
- // BOM 라인 삭제
- const handleDelete = (index: number) => {
- if (!confirm('이 BOM 라인을 삭제하시겠습니까?')) {
- return;
- }
-
- const newLines = bomLines.filter((_, i) => i !== index);
- onChange(newLines);
- };
-
- // 폼 제출
- const handleSubmit = () => {
- if (!formData.childItemCode || !formData.childItemName) {
- alert('품목 코드와 품목명을 입력해주세요.');
- return;
- }
-
- const newLine: BOMLine = {
- id: editingIndex !== null ? bomLines[editingIndex].id : `bom-${Date.now()}`,
- childItemCode: formData.childItemCode,
- childItemName: formData.childItemName,
- quantity: formData.quantity,
- unit: formData.unit,
- unitPrice: formData.unitPrice,
- quantityFormula: formData.quantityFormula,
- note: formData.note,
- isBending: formData.isBending,
- bendingDiagram: formData.bendingDiagram,
- };
-
- let newLines: BOMLine[];
- if (editingIndex !== null) {
- // 수정
- newLines = bomLines.map((line, i) => (i === editingIndex ? newLine : line));
- } else {
- // 추가
- newLines = [...bomLines, newLine];
- }
-
- onChange(newLines);
- setIsDialogOpen(false);
- resetForm();
- };
-
- // 총 금액 계산
- const getTotalAmount = () => {
- return bomLines.reduce((sum, line) => {
- const lineTotal = (line.unitPrice || 0) * line.quantity;
- return sum + lineTotal;
- }, 0);
- };
-
- return (
-
-
-
-
- {bomLines.length === 0 ? (
- {
- setFormData({ ...formData, bendingDiagram: imageData });
- }}
- initialImage={formData.bendingDiagram}
- title="절곡품 전개도 그리기"
- description="절곡 부품의 전개도를 그리거나 편집합니다."
- />
-
-
- );
-}
\ No newline at end of file
diff --git a/src/components/items/ItemMasterDataManagement.tsx b/src/components/items/ItemMasterDataManagement.tsx
index 3e0adb1e..c70ea7a6 100644
--- a/src/components/items/ItemMasterDataManagement.tsx
+++ b/src/components/items/ItemMasterDataManagement.tsx
@@ -1,127 +1,66 @@
'use client';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
-import { useData } from '@/contexts/DataContext';
-import type { ItemPage, ItemSection, ItemField, FieldDisplayCondition, ItemMasterField, ItemFieldProperty, SectionTemplate } from '@/contexts/DataContext';
-import { BOMManagementSection, BOMItem } from '@/components/items/BOMManagementSection';
-import {
- Database,
- Plus,
- Trash2,
- ChevronRight,
- ChevronDown,
+import { useItemMaster } from '@/contexts/ItemMasterContext';
+import type { ItemPage, ItemSection, ItemField, FieldDisplayCondition, ItemMasterField, ItemFieldProperty, SectionTemplate, BOMItem } from '@/contexts/ItemMasterContext';
+import { MasterFieldTab, HierarchyTab, SectionsTab } from './ItemMasterDataManagement/tabs';
+import { FieldDialog } from './ItemMasterDataManagement/dialogs/FieldDialog';
+import { type ConditionalFieldConfig } from './ItemMasterDataManagement/components/ConditionalDisplayUI';
+import { FieldDrawer } from './ItemMasterDataManagement/dialogs/FieldDrawer';
+import { TabManagementDialogs } from './ItemMasterDataManagement/dialogs/TabManagementDialogs';
+import { OptionDialog } from './ItemMasterDataManagement/dialogs/OptionDialog';
+import { ColumnManageDialog } from './ItemMasterDataManagement/dialogs/ColumnManageDialog';
+import { PathEditDialog } from './ItemMasterDataManagement/dialogs/PathEditDialog';
+import { PageDialog } from './ItemMasterDataManagement/dialogs/PageDialog';
+import { SectionDialog } from './ItemMasterDataManagement/dialogs/SectionDialog';
+import { MasterFieldDialog } from './ItemMasterDataManagement/dialogs/MasterFieldDialog';
+import { TemplateFieldDialog } from './ItemMasterDataManagement/dialogs/TemplateFieldDialog';
+import { LoadTemplateDialog } from './ItemMasterDataManagement/dialogs/LoadTemplateDialog';
+import { ColumnDialog } from './ItemMasterDataManagement/dialogs/ColumnDialog';
+import { SectionTemplateDialog } from './ItemMasterDataManagement/dialogs/SectionTemplateDialog';
+import { itemMasterApi } from '@/lib/api/item-master';
+import { getErrorMessage, ApiError } from '@/lib/api/error-handler';
+import { LoadingSpinner } from '@/components/ui/loading-spinner';
+import { ErrorMessage } from '@/components/ui/error-message';
+import {
+ transformPageResponse,
+ transformPagesResponse,
+ transformSectionTemplatesResponse,
+ transformMasterFieldsResponse,
+ transformCustomTabsResponse,
+ transformUnitOptionsResponse,
+} from '@/lib/api/transformers';
+import {
+ Database,
+ Plus,
+ Trash2,
FolderTree,
Folder,
FileText,
Settings,
ListTree,
- Save,
- X,
- GripVertical,
- Eye,
- EyeOff,
- Edit,
- Check,
Package,
- Layers,
- ChevronUp,
- Copy,
- Link
+ Layers
} from 'lucide-react';
import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Textarea } from '@/components/ui/textarea';
-import { Switch } from '@/components/ui/switch';
import { Badge } from '@/components/ui/badge';
-import {
- AlertDialog,
- AlertDialogAction,
- AlertDialogCancel,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle
-} from '@/components/ui/dialog';
-import { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
import { toast } from 'sonner';
-// 품목분류 로컬스토리지 키
-const ITEM_CATEGORIES_KEY = 'item-categories';
-const UNIT_OPTIONS_KEY = 'unit-options';
-const MATERIAL_OPTIONS_KEY = 'material-options';
-const SURFACE_TREATMENT_OPTIONS_KEY = 'surface-treatment-options';
-const CUSTOM_ATTRIBUTE_OPTIONS_KEY = 'custom-attribute-options';
-
-// 품목분류 타입
-interface ItemCategoryStructure {
- [category1: string]: {
- [category2: string]: string[];
- };
-}
-
-// 옵션 칼럼 타입
-interface OptionColumn {
- id: string;
- name: string;
- key: string;
- type: 'text' | 'number';
- required: boolean;
-}
-
-// 옵션 타입 (확장된 입력방식 지원)
-interface MasterOption {
- id: string;
- value: string;
- label: string;
- isActive: boolean;
- // 입력 방식 및 속성
- inputType?: 'textbox' | 'dropdown' | 'checkbox' | 'number' | 'date' | 'textarea';
- required?: boolean;
- options?: string[]; // dropdown일 경우 선택 옵션
- defaultValue?: string | number | boolean;
- placeholder?: string;
- // 기존 칼럼 시스템 (호환성 유지)
- columns?: OptionColumn[]; // 칼럼 정의
- columnValues?: Record; // 칼럼별 값
-}
+// 로컬 타입 import
+import type { OptionColumn, MasterOption } from './ItemMasterDataManagement/types';
+// Utils import
+import { generateAbsolutePath } from './ItemMasterDataManagement/utils/pathUtils';
// 초기 데이터
-const INITIAL_ITEM_CATEGORIES: ItemCategoryStructure = {
- "본체부품": {
- "가이드시스템": ["가이드레일"],
- "케이스시스템": ["케이스 전면부", "케이스 접검구"],
- },
-};
+const INITIAL_UNIT_OPTIONS: MasterOption[] = [];
-const INITIAL_UNIT_OPTIONS: MasterOption[] = [
- { id: 'unit-1', value: 'EA', label: 'EA (개)', isActive: true },
- { id: 'unit-2', value: 'SET', label: 'SET (세트)', isActive: true },
-];
+const INITIAL_MATERIAL_OPTIONS: MasterOption[] = [];
-const INITIAL_MATERIAL_OPTIONS: MasterOption[] = [
- { id: 'mat-1', value: 'EGI 1.2T', label: 'EGI 1.2T', isActive: true },
- { id: 'mat-2', value: 'SUS 1.2T', label: 'SUS 1.2T', isActive: true },
-];
-
-const INITIAL_SURFACE_TREATMENT_OPTIONS: MasterOption[] = [
- { id: 'surf-1', value: '무도장', label: '무도장', isActive: true },
- { id: 'surf-2', value: '파우더도장', label: '파우더도장', isActive: true },
-];
+const INITIAL_SURFACE_TREATMENT_OPTIONS: MasterOption[] = [];
const ITEM_TYPE_OPTIONS = [
{ value: 'FG', label: '제품 (FG)' },
@@ -140,231 +79,6 @@ const INPUT_TYPE_OPTIONS = [
{ value: 'textarea', label: '텍스트영역' }
];
-// 네이티브 드래그 가능한 섹션 컴포넌트
-interface DraggableSectionProps {
- section: ItemSection;
- index: number;
- moveSection: (dragIndex: number, hoverIndex: number) => void;
- onDelete: () => void;
- onEditTitle: (id: string, title: string) => void;
- editingSectionId: string | null;
- editingSectionTitle: string;
- setEditingSectionTitle: (title: string) => void;
- setEditingSectionId: (id: string | null) => void;
- handleSaveSectionTitle: () => void;
- children: React.ReactNode;
-}
-
-function DraggableSection({
- section,
- index,
- moveSection,
- onDelete,
- onEditTitle,
- editingSectionId,
- editingSectionTitle,
- setEditingSectionTitle,
- setEditingSectionId,
- handleSaveSectionTitle,
- children
-}: DraggableSectionProps) {
- const [isDragging, setIsDragging] = useState(false);
-
- const handleDragStart = (e: React.DragEvent) => {
- e.dataTransfer.effectAllowed = 'move';
- e.dataTransfer.setData('text/plain', JSON.stringify({ index, id: section.id }));
- setIsDragging(true);
- };
-
- const handleDragEnd = () => {
- setIsDragging(false);
- };
-
- const handleDragOver = (e: React.DragEvent) => {
- e.preventDefault();
- e.dataTransfer.dropEffect = 'move';
- };
-
- const handleDrop = (e: React.DragEvent) => {
- e.preventDefault();
- try {
- const data = JSON.parse(e.dataTransfer.getData('text/plain'));
- if (data.index !== index) {
- moveSection(data.index, index);
- }
- } catch (err) {
- // Ignore
- }
- };
-
- return (
- >(() => {
- // SSR 호환: 서버 환경에서는 기본값 반환
- if (typeof window === 'undefined') {
- return [
- { id: 'hierarchy', label: '계층구조', icon: 'FolderTree', isDefault: true, order: 1 },
- { id: 'sections', label: '섹션', icon: 'Layers', isDefault: true, order: 2 },
- { id: 'items', label: '항목', icon: 'ListTree', isDefault: true, order: 3 },
- { id: 'attributes', label: '속성', icon: 'Settings', isDefault: true, order: 4 },
- { id: 'categories', label: '품목분류', icon: 'Folder', isDefault: false, order: 5 }
- ];
- }
-
- const saved = localStorage.getItem('mes-itemMasterTabs');
- let tabs = [];
-
- if (saved) {
- try {
- tabs = JSON.parse(saved);
- } catch {
- tabs = [];
- }
- }
-
- // 기본값이 없으면 설정
- if (!tabs || tabs.length === 0) {
- tabs = [
- { id: 'hierarchy', label: '계층구조', icon: 'FolderTree', isDefault: true, order: 1 },
- { id: 'sections', label: '섹션', icon: 'Layers', isDefault: true, order: 2 },
- { id: 'items', label: '항목', icon: 'ListTree', isDefault: true, order: 3 },
- { id: 'attributes', label: '속성', icon: 'Settings', isDefault: true, order: 4 },
- { id: 'categories', label: '품목분류', icon: 'Folder', isDefault: false, order: 5 }
- ];
- } else {
- // 품목분류 탭이 없으면 추가
- if (!tabs.find((t: any) => t.id === 'categories')) {
- tabs.push({ id: 'categories', label: '품목분류', icon: 'Folder', isDefault: false, order: 5 });
- }
- }
-
- // 중복 제거 (id 기준)
- const uniqueTabs = tabs.filter((tab: any, index: number, self: any[]) =>
- index === self.findIndex((t: any) => t.id === tab.id)
- );
-
- return uniqueTabs;
- });
+ // 마운트 상태 추적 (SSR 호환)
+ const [_mounted, setMounted] = useState(false);
useEffect(() => {
- // 저장 전에도 중복 제거
- const uniqueTabs = customTabs.filter((tab, index, self) =>
- index === self.findIndex(t => t.id === tab.id)
- );
- localStorage.setItem('mes-itemMasterTabs', JSON.stringify(uniqueTabs));
- }, [customTabs]);
+ setMounted(true);
+ }, []);
+
+ // API 로딩 및 에러 상태 관리
+ const [isInitialLoading, setIsInitialLoading] = useState(true); // 초기 데이터 로딩
+ const [_isLoading, setIsLoading] = useState(false); // 개별 작업 로딩
+ const [error, setError] = useState(null); // 에러 메시지
+
+ // 초기 데이터 로딩
+ useEffect(() => {
+ const loadInitialData = async () => {
+ try {
+ setIsInitialLoading(true);
+ setError(null);
+
+ const data = await itemMasterApi.init();
+
+ // 페이지 데이터 로드 (context의 addItemPage 사용)
+ data.pages.forEach(page => {
+ const transformed = transformPagesResponse([page])[0];
+ addItemPage(transformed);
+ });
+
+ // 섹션 템플릿 로드
+ data.sectionTemplates.forEach(template => {
+ const transformed = transformSectionTemplatesResponse([template])[0];
+ addSectionTemplate(transformed);
+ });
+
+ // 마스터 필드 로드
+ data.masterFields.forEach(field => {
+ const transformed = transformMasterFieldsResponse([field])[0];
+ addItemMasterField(transformed);
+ });
+
+ // 커스텀 탭 로드 (local state)
+ if (data.customTabs && data.customTabs.length > 0) {
+ const transformedTabs = transformCustomTabsResponse(data.customTabs);
+ setCustomTabs(prev => [...prev, ...transformedTabs]);
+ }
+
+ // 단위 옵션 로드 (local state)
+ if (data.unitOptions && data.unitOptions.length > 0) {
+ const transformedUnits = transformUnitOptionsResponse(data.unitOptions);
+ setUnitOptions(transformedUnits);
+ }
+
+ console.log('✅ Initial data loaded:', {
+ pages: data.pages.length,
+ templates: data.sectionTemplates.length,
+ masterFields: data.masterFields.length,
+ customTabs: data.customTabs?.length || 0,
+ unitOptions: data.unitOptions?.length || 0,
+ });
+
+ } catch (err) {
+ if (err instanceof ApiError && err.errors) {
+ // Validation 에러 (422)
+ const errorMessages = Object.entries(err.errors)
+ .map(([field, messages]) => `${field}: ${messages.join(', ')}`)
+ .join('\n');
+ toast.error(errorMessages);
+ setError('입력값을 확인해주세요.');
+ } else {
+ const errorMessage = getErrorMessage(err);
+ setError(errorMessage);
+ toast.error(errorMessage);
+ }
+ console.error('❌ Failed to load initial data:', err);
+ } finally {
+ setIsInitialLoading(false);
+ }
+ };
+
+ loadInitialData();
+ }, []);
+
+ // 동적 탭 관리 - SSR 호환: 항상 기본값으로 시작
+ const [customTabs, setCustomTabs] = useState>(() => {
+ return [
+ { id: 'hierarchy', label: '계층구조', icon: 'FolderTree', isDefault: true, order: 1 },
+ { id: 'sections', label: '섹션', icon: 'Layers', isDefault: true, order: 2 },
+ { id: 'items', label: '항목', icon: 'ListTree', isDefault: true, order: 3 },
+ { id: 'attributes', label: '속성', icon: 'Settings', isDefault: true, order: 4 }
+ ];
+ });
+
const [activeTab, setActiveTab] = useState('hierarchy');
-
+
// 속성 하위 탭 관리
- const [attributeSubTabs, setAttributeSubTabs] = useState>(() => {
- // SSR 호환: 서버 환경에서는 기본값 반환
- if (typeof window === 'undefined') {
- return [
- { id: 'units', label: '단위', key: 'units', isDefault: true, order: 0 },
- { id: 'materials', label: '재질', key: 'materials', isDefault: true, order: 1 },
- { id: 'surface', label: '표면처리', key: 'surface', isDefault: true, order: 2 }
- ];
- }
-
- const saved = localStorage.getItem('mes-attributeSubTabs');
- let tabs = [];
-
- if (saved) {
- try {
- tabs = JSON.parse(saved);
- } catch {
- tabs = [];
- }
- }
-
- // 기본값이 없으면 설정
- if (!tabs || tabs.length === 0) {
- tabs = [
- { id: 'units', label: '단위', key: 'units', isDefault: true, order: 0 },
- { id: 'materials', label: '재질', key: 'materials', isDefault: true, order: 1 },
- { id: 'surface', label: '표면처리', key: 'surface', isDefault: true, order: 2 }
- ];
- }
-
- // 중복 제거 (key 기준 - 실제 데이터 의미 기준)
- const uniqueTabs = tabs.filter((tab: any, index: number, self: any[]) =>
- index === self.findIndex((t: any) => t.key === tab.key)
- );
-
- return uniqueTabs;
- });
-
- useEffect(() => {
- // 저장 전에도 중복 제거 (key 기준 - 실제 데이터 의미 기준)
- const uniqueTabs = attributeSubTabs.filter((tab, index, self) =>
- index === self.findIndex(t => t.key === tab.key)
- );
- localStorage.setItem('mes-attributeSubTabs', JSON.stringify(uniqueTabs));
- }, [attributeSubTabs]);
+ const [attributeSubTabs, setAttributeSubTabs] = useState>([
+ { id: 'units', label: '단위', key: 'units', isDefault: true, order: 0 },
+ { id: 'materials', label: '재질', key: 'materials', isDefault: true, order: 1 },
+ { id: 'surface', label: '표면처리', key: 'surface', isDefault: true, order: 2 }
+ ]);
// 마스터 항목이 추가/수정될 때 속성 탭 자동 생성
useEffect(() => {
@@ -511,22 +222,22 @@ export function ItemMasterDataManagement() {
itemMasterFields.forEach(field => {
// 이미 탭이 있는지 확인
- const existingTab = attributeSubTabs.find(tab => tab.key === field.fieldKey);
+ const existingTab = attributeSubTabs.find(tab => tab.key === field.id.toString());
if (!existingTab) {
// 새로운 탭 추가 대상
const maxOrder = Math.max(...attributeSubTabs.map(t => t.order), ...newTabs.map(t => t.order), -1);
const newTab = {
- id: `attr-${field.fieldKey}`,
- label: field.name,
- key: field.fieldKey,
+ id: `attr-${field.id.toString()}`,
+ label: field.field_name,
+ key: field.id.toString(),
isDefault: false,
order: maxOrder + 1
};
newTabs.push(newTab);
- } else if (existingTab.label !== field.name) {
+ } else if (existingTab.label !== field.field_name) {
// 이름이 변경된 경우
- updatedTabs.push({ ...existingTab, label: field.name });
+ updatedTabs.push({ ...existingTab, label: field.field_name });
}
});
@@ -552,49 +263,6 @@ export function ItemMasterDataManagement() {
}
}, [itemMasterFields]);
- // 컴포넌트 마운트 시 localStorage 중복 데이터 정리 (한 번만 실행)
- useEffect(() => {
- const cleanupLocalStorage = () => {
- // mes-attributeSubTabs 정리
- const savedAttrTabs = localStorage.getItem('mes-attributeSubTabs');
- if (savedAttrTabs) {
- try {
- const tabs = JSON.parse(savedAttrTabs);
- const uniqueTabs = tabs.filter((tab: any, index: number, self: any[]) =>
- index === self.findIndex((t: any) => t.key === tab.key)
- );
- if (uniqueTabs.length !== tabs.length) {
- console.log('🧹 localStorage 중복 제거:', tabs.length - uniqueTabs.length, '개 항목 제거됨');
- localStorage.setItem('mes-attributeSubTabs', JSON.stringify(uniqueTabs));
- // 상태도 업데이트
- setAttributeSubTabs(uniqueTabs);
- }
- } catch (error) {
- console.error('localStorage 정리 중 에러:', error);
- }
- }
-
- // mes-itemMasterTabs 정리
- const savedMainTabs = localStorage.getItem('mes-itemMasterTabs');
- if (savedMainTabs) {
- try {
- const tabs = JSON.parse(savedMainTabs);
- const uniqueTabs = tabs.filter((tab: any, index: number, self: any[]) =>
- index === self.findIndex((t: any) => t.id === tab.id)
- );
- if (uniqueTabs.length !== tabs.length) {
- console.log('🧹 메인 탭 중복 제거:', tabs.length - uniqueTabs.length, '개 항목 제거됨');
- localStorage.setItem('mes-itemMasterTabs', JSON.stringify(uniqueTabs));
- setCustomTabs(uniqueTabs);
- }
- } catch (error) {
- console.error('메인 탭 정리 중 에러:', error);
- }
- }
- };
-
- cleanupLocalStorage();
- }, []); // 빈 배열: 컴포넌트 마운트 시 한 번만 실행
const [activeAttributeTab, setActiveAttributeTab] = useState('units');
const [isAddTabDialogOpen, setIsAddTabDialogOpen] = useState(false);
@@ -611,44 +279,11 @@ export function ItemMasterDataManagement() {
const [editingAttributeTabId, setEditingAttributeTabId] = useState(null);
const [deletingAttributeTabId, setDeletingAttributeTabId] = useState(null);
const [isDeleteAttributeTabDialogOpen, setIsDeleteAttributeTabDialogOpen] = useState(false);
-
- // 품목분류 상태
- const [itemCategories, setItemCategories] = useState(() => {
- if (typeof window === 'undefined') return INITIAL_ITEM_CATEGORIES;
- const saved = localStorage.getItem(ITEM_CATEGORIES_KEY);
- return saved ? JSON.parse(saved) : INITIAL_ITEM_CATEGORIES;
- });
- const [unitOptions, setUnitOptions] = useState(() => {
- if (typeof window === 'undefined') return INITIAL_UNIT_OPTIONS;
- const saved = localStorage.getItem(UNIT_OPTIONS_KEY);
- return saved ? JSON.parse(saved) : INITIAL_UNIT_OPTIONS;
- });
-
- const [materialOptions, setMaterialOptions] = useState(() => {
- if (typeof window === 'undefined') return INITIAL_MATERIAL_OPTIONS;
- const saved = localStorage.getItem(MATERIAL_OPTIONS_KEY);
- return saved ? JSON.parse(saved) : INITIAL_MATERIAL_OPTIONS;
- });
-
- const [surfaceTreatmentOptions, setSurfaceTreatmentOptions] = useState(() => {
- if (typeof window === 'undefined') return INITIAL_SURFACE_TREATMENT_OPTIONS;
- const saved = localStorage.getItem(SURFACE_TREATMENT_OPTIONS_KEY);
- return saved ? JSON.parse(saved) : INITIAL_SURFACE_TREATMENT_OPTIONS;
- });
-
- // 사용자 정의 속성 옵션 상태
- const [customAttributeOptions, setCustomAttributeOptions] = useState>(() => {
- if (typeof window === 'undefined') return {};
- const saved = localStorage.getItem(CUSTOM_ATTRIBUTE_OPTIONS_KEY);
- return saved ? JSON.parse(saved) : {};
- });
-
- const [newCategory1, setNewCategory1] = useState('');
- const [newCategory2, setNewCategory2] = useState('');
- const [newCategory3, setNewCategory3] = useState('');
- const [selectedCategory1, setSelectedCategory1] = useState('');
- const [selectedCategory2, setSelectedCategory2] = useState('');
+ const [unitOptions, setUnitOptions] = useState(INITIAL_UNIT_OPTIONS);
+ const [materialOptions, setMaterialOptions] = useState(INITIAL_MATERIAL_OPTIONS);
+ const [surfaceTreatmentOptions, setSurfaceTreatmentOptions] = useState(INITIAL_SURFACE_TREATMENT_OPTIONS);
+ const [customAttributeOptions, setCustomAttributeOptions] = useState>({});
const [isOptionDialogOpen, setIsOptionDialogOpen] = useState(false);
const [editingOptionType, setEditingOptionType] = useState(null);
@@ -665,26 +300,18 @@ export function ItemMasterDataManagement() {
// 칼럼 관리 상태
const [isColumnManageDialogOpen, setIsColumnManageDialogOpen] = useState(false);
const [managingColumnType, setManagingColumnType] = useState(null);
- const [attributeColumns, setAttributeColumns] = useState>(() => {
- if (typeof window === 'undefined') return {};
- const saved = localStorage.getItem('attribute-columns');
- return saved ? JSON.parse(saved) : {};
- });
-
+ const [attributeColumns, setAttributeColumns] = useState>({});
+
// 칼럼 추가 폼 상태
const [newColumnName, setNewColumnName] = useState('');
const [newColumnKey, setNewColumnKey] = useState('');
const [newColumnType, setNewColumnType] = useState<'text' | 'number'>('text');
const [newColumnRequired, setNewColumnRequired] = useState(false);
-
- useEffect(() => {
- localStorage.setItem('attribute-columns', JSON.stringify(attributeColumns));
- }, [attributeColumns]);
// 계층구조 상태
- const [selectedPageId, setSelectedPageId] = useState(itemPages[0]?.id || null);
- const selectedPage = itemPages.find(p => p.id === selectedPageId) || null;
- const [expandedSections, setExpandedSections] = useState>({});
+ const [selectedPageId, setSelectedPageId] = useState(itemPages[0]?.id || null);
+ const selectedPage = itemPages.find(p => p.id === selectedPageId);
+ const [_expandedSections, setExpandedSections] = useState>({});
const [editingSectionId, setEditingSectionId] = useState(null);
const [editingSectionTitle, setEditingSectionTitle] = useState('');
@@ -692,9 +319,9 @@ export function ItemMasterDataManagement() {
useEffect(() => {
let needsUpdate = false;
itemPages.forEach(page => {
- if (!page.absolutePath) {
- const absolutePath = generateAbsolutePath(page.itemType, page.pageName);
- updateItemPage(page.id, { absolutePath });
+ if (!page.absolute_path) {
+ const absolutePath = generateAbsolutePath(page.item_type, page.page_name);
+ updateItemPage(page.id, { absolute_path: absolutePath });
needsUpdate = true;
}
});
@@ -703,16 +330,16 @@ export function ItemMasterDataManagement() {
}
}, []); // 빈 의존성 배열로 최초 1회만 실행
- const [editingPageId, setEditingPageId] = useState(null);
+ const [editingPageId, setEditingPageId] = useState(null);
const [editingPageName, setEditingPageName] = useState('');
-
+
const [isPageDialogOpen, setIsPageDialogOpen] = useState(false);
const [newPageName, setNewPageName] = useState('');
const [newPageItemType, setNewPageItemType] = useState<'FG' | 'PT' | 'SM' | 'RM' | 'CS'>('FG');
- const [editingPathPageId, setEditingPathPageId] = useState(null);
+ const [editingPathPageId, setEditingPathPageId] = useState(null);
const [editingAbsolutePath, setEditingAbsolutePath] = useState('');
-
+
const [isSectionDialogOpen, setIsSectionDialogOpen] = useState(false);
const [newSectionTitle, setNewSectionTitle] = useState('');
const [newSectionDescription, setNewSectionDescription] = useState('');
@@ -728,8 +355,8 @@ export function ItemMasterDataManagement() {
}, []);
const [isFieldDialogOpen, setIsFieldDialogOpen] = useState(false);
- const [selectedSectionForField, setSelectedSectionForField] = useState(null);
- const [editingFieldId, setEditingFieldId] = useState(null);
+ const [selectedSectionForField, setSelectedSectionForField] = useState(null);
+ const [editingFieldId, setEditingFieldId] = useState(null);
const [fieldInputMode, setFieldInputMode] = useState<'master' | 'custom'>('custom'); // 마스터 항목 선택 vs 직접 입력
const [showMasterFieldList, setShowMasterFieldList] = useState(false); // 마스터 항목 목록 표시 여부
const [selectedMasterFieldId, setSelectedMasterFieldId] = useState('');
@@ -750,15 +377,15 @@ export function ItemMasterDataManagement() {
// 조건부 항목 상태
const [newFieldConditionEnabled, setNewFieldConditionEnabled] = useState(false);
const [newFieldConditionTargetType, setNewFieldConditionTargetType] = useState<'field' | 'section'>('field');
- const [newFieldConditionFields, setNewFieldConditionFields] = useState>([]);
+ const [newFieldConditionFields, setNewFieldConditionFields] = useState([]);
const [newFieldConditionSections, setNewFieldConditionSections] = useState([]);
// 임시 입력용
- const [tempConditionFieldKey, setTempConditionFieldKey] = useState('');
+ const [_tempConditionFieldKey, setTempConditionFieldKey] = useState('');
const [tempConditionValue, setTempConditionValue] = useState('');
// 마스터 항목 관리 상태
const [isMasterFieldDialogOpen, setIsMasterFieldDialogOpen] = useState(false);
- const [editingMasterFieldId, setEditingMasterFieldId] = useState(null);
+ const [editingMasterFieldId, setEditingMasterFieldId] = useState(null);
const [newMasterFieldName, setNewMasterFieldName] = useState('');
const [newMasterFieldKey, setNewMasterFieldKey] = useState('');
const [newMasterFieldInputType, setNewMasterFieldInputType] = useState<'textbox' | 'dropdown' | 'checkbox' | 'number' | 'date' | 'textarea'>('textbox');
@@ -773,7 +400,7 @@ export function ItemMasterDataManagement() {
// 섹션 템플릿 관리 상태
const [isSectionTemplateDialogOpen, setIsSectionTemplateDialogOpen] = useState(false);
- const [editingSectionTemplateId, setEditingSectionTemplateId] = useState(null);
+ const [editingSectionTemplateId, setEditingSectionTemplateId] = useState(null);
const [newSectionTemplateTitle, setNewSectionTemplateTitle] = useState('');
const [newSectionTemplateDescription, setNewSectionTemplateDescription] = useState('');
const [newSectionTemplateCategory, setNewSectionTemplateCategory] = useState([]);
@@ -784,12 +411,12 @@ export function ItemMasterDataManagement() {
const [selectedTemplateId, setSelectedTemplateId] = useState(null);
// 섹션 템플릿 확장 상태
- const [expandedTemplateId, setExpandedTemplateId] = useState(null);
+ const [_expandedTemplateId, _setExpandedTemplateId] = useState(null);
// 섹션 템플릿 항목 추가 다이얼로그
const [isTemplateFieldDialogOpen, setIsTemplateFieldDialogOpen] = useState(false);
- const [currentTemplateId, setCurrentTemplateId] = useState(null);
- const [editingTemplateFieldId, setEditingTemplateFieldId] = useState(null);
+ const [currentTemplateId, setCurrentTemplateId] = useState(null);
+ const [editingTemplateFieldId, setEditingTemplateFieldId] = useState(null);
const [templateFieldName, setTemplateFieldName] = useState('');
const [templateFieldKey, setTemplateFieldKey] = useState('');
const [templateFieldInputType, setTemplateFieldInputType] = useState<'textbox' | 'dropdown' | 'checkbox' | 'number' | 'date' | 'textarea'>('textbox');
@@ -800,61 +427,16 @@ export function ItemMasterDataManagement() {
const [templateFieldColumnCount, setTemplateFieldColumnCount] = useState(2);
const [templateFieldColumnNames, setTemplateFieldColumnNames] = useState(['컬럼1', '컬럼2']);
- // 변경사항 추적 상태
- const [pendingChanges, setPendingChanges] = useState<{
- pages: { id: string; action: 'add' | 'update'; data: any }[];
- sections: { id: string; action: 'add' | 'update'; data: any }[];
- fields: { id: string; action: 'add' | 'update'; data: any }[];
- masterFields: { id: string; action: 'add' | 'update'; data: any }[];
- attributes: { id: string; action: 'add' | 'update'; type: string; data: any }[];
- }>({
- pages: [],
- sections: [],
- fields: [],
- masterFields: [],
- attributes: []
- });
- const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-
// BOM 관리 상태
- const [bomItems, setBomItems] = useState(() => {
- if (typeof window === 'undefined') return [];
- const saved = localStorage.getItem('bom-items');
- return saved ? JSON.parse(saved) : [];
- });
-
- // BOM 데이터 저장
- useEffect(() => {
- localStorage.setItem('bom-items', JSON.stringify(bomItems));
- }, [bomItems]);
-
- useEffect(() => {
- localStorage.setItem(ITEM_CATEGORIES_KEY, JSON.stringify(itemCategories));
- }, [itemCategories]);
-
- useEffect(() => {
- localStorage.setItem(UNIT_OPTIONS_KEY, JSON.stringify(unitOptions));
- }, [unitOptions]);
-
- useEffect(() => {
- localStorage.setItem(MATERIAL_OPTIONS_KEY, JSON.stringify(materialOptions));
- }, [materialOptions]);
-
- useEffect(() => {
- localStorage.setItem(SURFACE_TREATMENT_OPTIONS_KEY, JSON.stringify(surfaceTreatmentOptions));
- }, [surfaceTreatmentOptions]);
-
- useEffect(() => {
- localStorage.setItem(CUSTOM_ATTRIBUTE_OPTIONS_KEY, JSON.stringify(customAttributeOptions));
- }, [customAttributeOptions]);
+ const [_bomItems, setBomItems] = useState([]);
// 속성 변경 시 연동된 마스터 항목의 옵션 자동 업데이트
useEffect(() => {
itemMasterFields.forEach(field => {
- const attributeType = (field.property as any).attributeType;
- if (attributeType && attributeType !== 'custom' && field.property.inputType === 'dropdown') {
+ const attributeType = (field.default_properties as any).attributeType;
+ if (attributeType && attributeType !== 'custom' && field.default_properties?.inputType === 'dropdown') {
let newOptions: string[] = [];
-
+
if (attributeType === 'unit') {
newOptions = unitOptions.map(opt => opt.label);
} else if (attributeType === 'material') {
@@ -866,15 +448,15 @@ export function ItemMasterDataManagement() {
const customOptions = customAttributeOptions[attributeType] || [];
newOptions = customOptions.map(opt => opt.label);
}
-
- const currentOptions = field.property.options || [];
+
+ const currentOptions = field.default_properties?.options || [];
const optionsChanged = JSON.stringify(currentOptions.sort()) !== JSON.stringify(newOptions.sort());
-
+
if (optionsChanged && newOptions.length > 0) {
updateItemMasterField(field.id, {
...field,
- property: {
- ...field.property,
+ default_properties: {
+ ...(field.default_properties || {}),
options: newOptions
}
});
@@ -883,59 +465,6 @@ export function ItemMasterDataManagement() {
});
}, [unitOptions, materialOptions, surfaceTreatmentOptions, customAttributeOptions, itemMasterFields]);
- const handleAddCategory1 = () => {
- if (!newCategory1.trim()) return toast.error('대분류명을 입력해주세요');
- if (itemCategories[newCategory1]) return toast.error('이미 존재하는 대분류입니다');
- setItemCategories({ ...itemCategories, [newCategory1]: {} });
- setNewCategory1('');
- toast.success('대분류가 추가되었습니다');
- };
-
- const handleAddCategory2 = () => {
- if (!selectedCategory1) return toast.error('대분류를 선택해주세요');
- if (!newCategory2.trim()) return toast.error('중분류명을 입력해주세요');
- setItemCategories({
- ...itemCategories,
- [selectedCategory1]: { ...itemCategories[selectedCategory1], [newCategory2]: [] }
- });
- setNewCategory2('');
- toast.success('중분류가 추가되었습니다');
- };
-
- const handleAddCategory3 = () => {
- if (!selectedCategory1 || !selectedCategory2 || !newCategory3.trim())
- return toast.error('모든 항목을 입력해주세요');
- setItemCategories({
- ...itemCategories,
- [selectedCategory1]: {
- ...itemCategories[selectedCategory1],
- [selectedCategory2]: [...itemCategories[selectedCategory1][selectedCategory2], newCategory3]
- }
- });
- setNewCategory3('');
- toast.success('소분류가 추가되었습니다');
- };
-
- const handleDeleteCategory1 = (cat1: string) => {
- const newCategories = { ...itemCategories };
- delete newCategories[cat1];
- setItemCategories(newCategories);
- toast.success('삭제되었습니다');
- };
-
- const handleDeleteCategory2 = (cat1: string, cat2: string) => {
- const newCategories = { ...itemCategories };
- delete newCategories[cat1][cat2];
- setItemCategories(newCategories);
- toast.success('삭제되었습니다');
- };
-
- const handleDeleteCategory3 = (cat1: string, cat2: string, cat3: string) => {
- const newCategories = { ...itemCategories };
- newCategories[cat1][cat2] = newCategories[cat1][cat2].filter(c => c !== cat3);
- setItemCategories(newCategories);
- toast.success('삭제되었습니다');
- };
const handleAddOption = () => {
if (!editingOptionType || !newOptionValue.trim() || !newOptionLabel.trim())
@@ -981,8 +510,6 @@ export function ItemMasterDataManagement() {
}));
}
- trackChange('attributes', newOption.id, 'add', newOption, editingOptionType);
-
setNewOptionValue('');
setNewOptionLabel('');
setNewOptionColumnValues({});
@@ -1013,84 +540,134 @@ export function ItemMasterDataManagement() {
};
// 절대경로 자동 생성 함수
- const generateAbsolutePath = (itemType: string, pageName: string): string => {
- const typeMap: Record = {
- 'FG': '제품관리',
- 'PT': '부품관리',
- 'SM': '부자재관리',
- 'RM': '원자재관리',
- 'CS': '소모품관리'
- };
- const category = typeMap[itemType] || '기타';
- return `/${category}/${pageName}`;
+ // 계층구조 핸들러
+ const handleAddPage = async () => {
+ if (!newPageName.trim()) return toast.error('섹션명을 입력해주세요');
+
+ try {
+ setIsLoading(true);
+ const absolutePath = generateAbsolutePath(newPageItemType, newPageName);
+
+ // API 호출
+ const response = await itemMasterApi.pages.create({
+ page_name: newPageName,
+ item_type: newPageItemType,
+ absolute_path: absolutePath,
+ is_active: true,
+ });
+
+ // 응답 변환 및 context에 추가
+ const transformedPage = transformPageResponse(response);
+ addItemPage(transformedPage);
+
+ // 새로 생성된 페이지를 선택
+ setSelectedPageId(transformedPage.id);
+
+ // 폼 초기화
+ setNewPageName('');
+ setNewPageItemType('FG');
+ setIsPageDialogOpen(false);
+
+ toast.success('페이지가 추가되었습니다');
+ } catch (err) {
+ if (err instanceof ApiError && err.errors) {
+ // Validation 에러 (422)
+ const errorMessages = Object.entries(err.errors)
+ .map(([field, messages]) => `${field}: ${messages.join(', ')}`)
+ .join('\n');
+ toast.error(errorMessages);
+ } else {
+ const errorMessage = getErrorMessage(err);
+ toast.error(errorMessage);
+ }
+ console.error('❌ Failed to create page:', err);
+ } finally {
+ setIsLoading(false);
+ }
};
- // 계층구조 핸들러
- const handleAddPage = () => {
- if (!newPageName.trim()) return toast.error('섹션명을 입력해주세요');
- const absolutePath = generateAbsolutePath(newPageItemType, newPageName);
+ const handleDuplicatePage = (pageId: number) => {
+ const originalPage = itemPages.find(p => p.id === pageId);
+ if (!originalPage) return toast.error('페이지를 찾을 수 없습니다');
+
+ // 섹션 인스턴스 깊은 복사 (새로운 ID 부여)
+ const duplicatedSections = originalPage.sections.map(section => ({
+ ...section,
+ id: Date.now(),
+ fields: section.fields?.map(field => ({
+ ...field,
+ id: Date.now()
+ })) || [],
+ bomItems: section.bomItems?.map(item => ({
+ ...item,
+ id: Date.now()
+ }))
+ }));
+
+ // 페이지 복제
+ const duplicatedPageName = `${originalPage.page_name} (복제)`;
+ const absolutePath = generateAbsolutePath(originalPage.item_type, duplicatedPageName);
const newPage: ItemPage = {
- id: `PAGE-${Date.now()}`,
- pageName: newPageName,
- itemType: newPageItemType,
- sections: [],
- isActive: true,
- absolutePath,
- createdAt: new Date().toISOString().split('T')[0]
+ id: Date.now(),
+ page_name: duplicatedPageName,
+ item_type: originalPage.item_type,
+ sections: duplicatedSections,
+ is_active: true,
+ absolute_path: absolutePath,
+ order_no: 0,
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString()
};
+
+ // 페이지 추가
addItemPage(newPage);
- trackChange('pages', newPage.id, 'add', newPage);
setSelectedPageId(newPage.id);
- setNewPageName('');
- setIsPageDialogOpen(false);
- toast.success('페이지가 추가되었습니다 (저장 필요)');
+ toast.success('페이지가 복제되었습니다 (저장 필요)');
};
const handleAddSection = () => {
if (!selectedPage || !newSectionTitle.trim()) return toast.error('하위섹션 제목을 입력해주세요');
+ const sectionType: 'BASIC' | 'BOM' | 'CUSTOM' = newSectionType === 'bom' ? 'BOM' : 'BASIC';
const newSection: ItemSection = {
- id: `SECTION-${Date.now()}`,
- title: newSectionTitle,
+ id: Date.now(),
+ page_id: selectedPage.id,
+ section_name: newSectionTitle,
+ section_type: sectionType,
description: newSectionDescription || undefined,
+ order_no: selectedPage.sections.length + 1,
+ is_collapsible: true,
+ is_default_open: true,
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString(),
fields: [],
- type: newSectionType,
- bomItems: newSectionType === 'bom' ? [] : undefined,
- order: selectedPage.sections.length + 1,
- isCollapsible: true,
- isCollapsed: false,
- createdAt: new Date().toISOString().split('T')[0]
+ bomItems: sectionType === 'BOM' ? [] : undefined
};
console.log('Adding section to page:', {
pageId: selectedPage.id,
- pageName: selectedPage.pageName,
- sectionTitle: newSection.title,
- sectionType: newSection.type,
+ page_name: selectedPage.page_name,
+ sectionTitle: newSection.section_name,
+ sectionType: newSection.section_type,
currentSectionCount: selectedPage.sections.length,
newSection: newSection
});
// 1. 페이지에 섹션 추가
addSectionToPage(selectedPage.id, newSection);
- trackChange('sections', newSection.id, 'add', newSection);
-
- // 2. 섹션관리 탭에도 템플릿으로 자동 추가
+ // 섹션은 페이지의 일부이므로 sections로 별도 추적하지 않음
+
+ // 2. 섹션관리 탭에도 템플릿으로 자동 추가 (계층구조 섹션 = 섹션 탭 섹션)
const newTemplate: SectionTemplate = {
- id: `TEMPLATE-${Date.now()}`,
- title: newSection.title,
+ id: Date.now(),
+ template_name: newSection.section_name,
+ section_type: newSection.section_type,
description: newSection.description,
- category: [selectedPage.itemType], // 현재 페이지의 품목유형을 카테고리로 설정
- fields: [], // 초기에는 빈 필드 배열
- type: newSection.type,
- bomItems: newSection.type === 'bom' ? [] : undefined,
- isCollapsible: true,
- isCollapsed: false,
- isActive: true,
- createdAt: new Date().toISOString().split('T')[0]
+ default_fields: null,
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString()
};
addSectionTemplate(newTemplate);
- trackChange('sections', newTemplate.id, 'add', newTemplate);
-
+
console.log('Section added to both page and template:', {
sectionId: newSection.id,
templateId: newTemplate.id
@@ -1112,55 +689,52 @@ export function ItemMasterDataManagement() {
if (!selectedPage || !editingSectionId || !editingSectionTitle.trim())
return toast.error('하위섹션 제목을 입력해주세요');
- updateSection(selectedPage.id, editingSectionId, { title: editingSectionTitle });
- trackChange('sections', editingSectionId, 'update', { title: editingSectionTitle });
+ updateSection(Number(editingSectionId), { section_name: editingSectionTitle });
setEditingSectionId(null);
toast.success('하위섹션 제목이 수정되었습니다 (저장 필요)');
};
- const handleMoveSectionUp = (sectionId: string) => {
+ const _handleMoveSectionUp = (sectionId: number) => {
if (!selectedPage) return;
-
+
const sections = [...selectedPage.sections];
const index = sections.findIndex(s => s.id === sectionId);
-
+
if (index <= 0) return; // 첫 번째 섹션이거나 못 찾음
-
+
// 배열에서 위치 교환
[sections[index - 1], sections[index]] = [sections[index], sections[index - 1]];
-
+
// order 값 재설정
const updatedSections = sections.map((section, idx) => ({
...section,
order: idx + 1
}));
-
+
// 페이지 업데이트
updateItemPage(selectedPage.id, { sections: updatedSections });
- trackChange('pages', selectedPage.id, 'update', { sections: updatedSections });
toast.success('섹션 순서가 변경되었습니다');
};
- const handleMoveSectionDown = (sectionId: string) => {
+ const _handleMoveSectionDown = (sectionId: number) => {
if (!selectedPage) return;
-
+
const sections = [...selectedPage.sections];
const index = sections.findIndex(s => s.id === sectionId);
-
+
if (index < 0 || index >= sections.length - 1) return; // 마지막 섹션이거나 못 찾음
-
+
// 배열에서 위치 교환
[sections[index], sections[index + 1]] = [sections[index + 1], sections[index]];
-
+
// order 값 재설정
const updatedSections = sections.map((section, idx) => ({
...section,
order: idx + 1
}));
-
+
// 페이지 업데이트
updateItemPage(selectedPage.id, { sections: updatedSections });
- trackChange('pages', selectedPage.id, 'update', { sections: updatedSections });
toast.success('섹션 순서가 변경되었습니다');
};
@@ -1183,104 +757,102 @@ export function ItemMasterDataManagement() {
// 텍스트박스 컬럼 설정
const hasColumns = newFieldInputType === 'textbox' && textboxColumns.length > 0;
-
+
const newField: ItemField = {
- id: editingFieldId || `FIELD-${Date.now()}`,
- name: newFieldName,
- fieldKey: newFieldKey,
- property: {
- inputType: newFieldInputType,
- required: newFieldRequired,
- row: 1,
- col: 1,
- options: newFieldInputType === 'dropdown' && newFieldOptions.trim()
- ? newFieldOptions.split(',').map(o => o.trim())
- : undefined,
- multiColumn: hasColumns,
- columnCount: hasColumns ? textboxColumns.length : undefined,
- columnNames: hasColumns ? textboxColumns.map(c => c.name) : undefined
- },
- description: newFieldDescription || undefined,
- displayCondition,
- createdAt: new Date().toISOString().split('T')[0]
+ id: editingFieldId ? Number(editingFieldId) : Date.now(),
+ section_id: Number(selectedSectionForField),
+ field_name: newFieldName,
+ field_type: newFieldInputType,
+ order_no: 0,
+ is_required: newFieldRequired,
+ placeholder: newFieldDescription || null,
+ default_value: null,
+ display_condition: displayCondition as Record | null || null,
+ validation_rules: null,
+ options: newFieldInputType === 'dropdown' && newFieldOptions.trim()
+ ? newFieldOptions.split(',').map(o => ({ label: o.trim(), value: o.trim() }))
+ : null,
+ properties: hasColumns ? {
+ multiColumn: true,
+ columnCount: textboxColumns.length,
+ columnNames: textboxColumns.map(c => c.name)
+ } : null,
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString()
};
if (editingFieldId) {
- console.log('Updating field:', { pageId: selectedPage.id, sectionId: selectedSectionForField, fieldId: editingFieldId, fieldName: newField.name });
- updateField(selectedPage.id, selectedSectionForField, editingFieldId, newField);
- trackChange('fields', editingFieldId, 'update', newField);
-
+ console.log('Updating field:', { pageId: selectedPage.id, sectionId: selectedSectionForField, fieldId: editingFieldId, fieldName: newField.field_name });
+ updateField(Number(editingFieldId), newField);
+
// 항목관리 탭의 마스터 항목도 업데이트 (동일한 fieldKey가 있으면)
- const existingMasterField = itemMasterFields.find(mf => mf.fieldKey === newField.fieldKey);
+ const existingMasterField = itemMasterFields.find(mf => mf.id.toString() === newField.field_name);
if (existingMasterField) {
const updatedMasterField: ItemMasterField = {
...existingMasterField,
- name: newField.name,
- description: newField.description,
- property: newField.property,
- displayCondition: newField.displayCondition,
- updatedAt: new Date().toISOString().split('T')[0]
+ field_name: newField.field_name,
+ description: newField.placeholder,
+ default_properties: newField.properties,
+ updated_at: new Date().toISOString()
};
updateItemMasterField(existingMasterField.id, updatedMasterField);
- trackChange('masterFields', existingMasterField.id, 'update', updatedMasterField);
}
-
+
toast.success('항목이 섹션에 수정되었습니다!');
} else {
- console.log('Adding field to section:', { pageId: selectedPage.id, sectionId: selectedSectionForField, fieldName: newField.name, fieldKey: newField.fieldKey });
-
+ console.log('Adding field to section:', { pageId: selectedPage.id, sectionId: selectedSectionForField, fieldName: newField.field_name });
+
// 1. 섹션에 항목 추가
- addFieldToSection(selectedPage.id, selectedSectionForField, newField);
- trackChange('fields', newField.id, 'add', newField);
-
+ addFieldToSection(Number(selectedSectionForField), newField);
+
// 2. 항목관리 탭에도 마스터 항목으로 자동 추가 (중복 체크)
- const existingMasterField = itemMasterFields.find(mf => mf.fieldKey === newField.fieldKey);
+ const existingMasterField = itemMasterFields.find(mf => mf.id.toString() === newField.field_name);
if (!existingMasterField) {
const newMasterField: ItemMasterField = {
- id: `MASTER-FIELD-${Date.now()}`,
- name: newField.name,
- fieldKey: newField.fieldKey,
- description: newField.description,
- property: newField.property,
- category: [selectedPage.itemType], // 현재 페이지의 품목유형을 카테고리로 설정
- displayCondition: newField.displayCondition,
- isActive: true,
- usageCount: 1,
- createdAt: new Date().toISOString().split('T')[0]
+ id: Date.now(),
+ field_name: newField.field_name,
+ field_type: newField.field_type === 'textbox' ? 'TEXT' :
+ newField.field_type === 'number' ? 'NUMBER' :
+ newField.field_type === 'date' ? 'DATE' :
+ newField.field_type === 'textarea' ? 'TEXTAREA' :
+ newField.field_type === 'checkbox' ? 'CHECKBOX' : 'SELECT',
+ description: newField.placeholder,
+ default_properties: newField.properties,
+ category: selectedPage.item_type, // 현재 페이지의 품목유형을 카테고리로 설정
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString()
};
addItemMasterField(newMasterField);
- trackChange('masterFields', newMasterField.id, 'add', newMasterField);
-
+
console.log('Field added to both section and master fields:', {
fieldId: newField.id,
- masterFieldId: newMasterField.id,
- fieldKey: newField.fieldKey
+ masterFieldId: newMasterField.id
});
-
+
// 3. dropdown 타입이고 옵션이 있으면 속성관리 탭에도 자동 추가
- if (newField.property.inputType === 'dropdown' && newField.property.options && newField.property.options.length > 0) {
- const existingCustomOptions = customAttributeOptions[newField.fieldKey];
+ if (newField.properties?.inputType === 'dropdown' && newField.options && newField.options.length > 0) {
+ const existingCustomOptions = customAttributeOptions[newField.field_name];
if (!existingCustomOptions || existingCustomOptions.length === 0) {
- const customOptions = newField.property.options.map((option, index) => ({
- id: `CUSTOM-${newField.fieldKey}-${Date.now()}-${index}`,
- value: option,
- label: option,
+ const customOptions = newField.options.map((option: { label: string; value: string }, index: number) => ({
+ id: `CUSTOM-${newField.field_name}-${Date.now()}-${index}`,
+ value: option.value,
+ label: option.label,
isActive: true
}));
setCustomAttributeOptions(prev => ({
...prev,
- [newField.fieldKey]: customOptions
+ [newField.field_name]: customOptions
}));
// 속성관리 탭에 하위 탭으로 추가
- const existingTab = attributeSubTabs.find(tab => tab.key === newField.fieldKey);
+ const existingTab = attributeSubTabs.find(tab => tab.key === newField.field_name);
if (!existingTab) {
const maxOrder = Math.max(...attributeSubTabs.map(t => t.order), -1);
const newTab = {
- id: `attr-${newField.fieldKey}`,
- label: newField.name,
- key: newField.fieldKey,
+ id: `attr-${newField.field_name}`,
+ label: newField.field_name,
+ key: newField.field_name,
isDefault: false,
order: maxOrder + 1
};
@@ -1299,11 +871,11 @@ export function ItemMasterDataManagement() {
}
console.log('Dropdown options added to custom attributes:', {
- attributeKey: newField.fieldKey,
+ attributeKey: newField.field_name,
options: customOptions
});
- toast.success(`항목이 추가되고 "${newField.name}" 속성 탭이 속성관리에 등록되었습니다!`);
+ toast.success(`항목이 추가되고 "${newField.field_name}" 속성 탭이 속성관리에 등록되었습니다!`);
} else {
toast.success('항목이 섹션에 추가되고 마스터 항목으로도 등록되었습니다!');
}
@@ -1333,41 +905,41 @@ export function ItemMasterDataManagement() {
};
const handleEditField = (sectionId: string, field: ItemField) => {
- setSelectedSectionForField(sectionId);
+ setSelectedSectionForField(Number(sectionId));
setEditingFieldId(field.id);
- setNewFieldName(field.name);
- setNewFieldKey(field.fieldKey);
- setNewFieldInputType(field.property.inputType);
- setNewFieldRequired(field.property.required);
- setNewFieldOptions(field.property.options?.join(', ') || '');
- setNewFieldDescription(field.description || '');
-
+ setNewFieldName(field.field_name);
+ setNewFieldKey(field.id.toString());
+ setNewFieldInputType(field.field_type);
+ setNewFieldRequired(field.is_required);
+ setNewFieldOptions(field.options?.map(opt => opt.value).join(', ') || '');
+ setNewFieldDescription(''); // description은 ItemField에 없음
+
// 조건부 표시 설정 로드
- if (field.displayCondition) {
+ if (field.display_condition) {
setNewFieldConditionEnabled(true);
- setNewFieldConditionTargetType(field.displayCondition.targetType);
- setNewFieldConditionFields(field.displayCondition.fieldConditions || []);
- setNewFieldConditionSections(field.displayCondition.sectionIds || []);
+ setNewFieldConditionTargetType(field.display_condition.targetType);
+ setNewFieldConditionFields(field.display_condition.fieldConditions || []);
+ setNewFieldConditionSections(field.display_condition.sectionIds || []);
} else {
setNewFieldConditionEnabled(false);
setNewFieldConditionTargetType('field');
setNewFieldConditionFields([]);
setNewFieldConditionSections([]);
}
-
+
setIsFieldDialogOpen(true);
};
// 마스터 필드 선택 시 폼 자동 채우기
useEffect(() => {
if (fieldInputMode === 'master' && selectedMasterFieldId) {
- const masterField = itemMasterFields.find(f => f.id === selectedMasterFieldId);
+ const masterField = itemMasterFields.find(f => f.id === Number(selectedMasterFieldId));
if (masterField) {
- setNewFieldName(masterField.name);
- setNewFieldKey(masterField.fieldKey);
- setNewFieldInputType(masterField.property.inputType);
- setNewFieldRequired(masterField.property.required);
- setNewFieldOptions(masterField.property.options?.join(', ') || '');
+ setNewFieldName(masterField.field_name);
+ setNewFieldKey(masterField.id.toString());
+ setNewFieldInputType(masterField.default_properties?.inputType);
+ setNewFieldRequired(masterField.default_properties?.required);
+ setNewFieldOptions(masterField.default_properties?.options?.join(', ') || '');
setNewFieldDescription(masterField.description || '');
}
} else if (fieldInputMode === 'custom') {
@@ -1387,11 +959,11 @@ export function ItemMasterDataManagement() {
return toast.error('항목명과 필드 키를 입력해주세요');
// 속성 목록 초기화 (dropdown 타입이고 옵션이 있으면 각 옵션을 속성으로 추가)
- let properties: ItemFieldProperty[] = [];
-
+ let _properties: ItemFieldProperty[] = [];
+
if (newMasterFieldInputType === 'dropdown' && newMasterFieldOptions.trim()) {
const options = newMasterFieldOptions.split(',').map(o => o.trim());
- properties = options.map((opt, idx) => ({
+ _properties = options.map((opt, idx) => ({
id: `prop-${Date.now()}-${idx}`,
key: `${newMasterFieldKey}_${opt.toLowerCase().replace(/\s+/g, '_')}`,
label: opt,
@@ -1404,14 +976,19 @@ export function ItemMasterDataManagement() {
}
const newMasterField: ItemMasterField = {
- id: `MASTER-${Date.now()}`,
- name: newMasterFieldName,
- fieldKey: newMasterFieldKey,
- property: {
+ id: Date.now(),
+ field_name: newMasterFieldName,
+ field_type: newMasterFieldInputType === 'textbox' ? 'TEXT' :
+ newMasterFieldInputType === 'number' ? 'NUMBER' :
+ newMasterFieldInputType === 'date' ? 'DATE' :
+ newMasterFieldInputType === 'textarea' ? 'TEXTAREA' :
+ newMasterFieldInputType === 'checkbox' ? 'CHECKBOX' : 'SELECT',
+ category: newMasterFieldCategory || null,
+ description: newMasterFieldDescription || null,
+ default_validation: null,
+ default_properties: {
inputType: newMasterFieldInputType,
required: newMasterFieldRequired,
- row: 1,
- col: 1,
options: newMasterFieldInputType === 'dropdown' && newMasterFieldOptions.trim()
? newMasterFieldOptions.split(',').map(o => o.trim())
: undefined,
@@ -1419,16 +996,12 @@ export function ItemMasterDataManagement() {
multiColumn: (newMasterFieldInputType === 'textbox' || newMasterFieldInputType === 'textarea') ? newMasterFieldMultiColumn : undefined,
columnCount: (newMasterFieldInputType === 'textbox' || newMasterFieldInputType === 'textarea') && newMasterFieldMultiColumn ? newMasterFieldColumnCount : undefined,
columnNames: (newMasterFieldInputType === 'textbox' || newMasterFieldInputType === 'textarea') && newMasterFieldMultiColumn ? newMasterFieldColumnNames : undefined
- } as any,
- properties: properties.length > 0 ? properties : undefined,
- category: newMasterFieldCategory,
- description: newMasterFieldDescription || undefined,
- isActive: true,
- createdAt: new Date().toISOString().split('T')[0]
+ },
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString()
};
addItemMasterField(newMasterField);
- trackChange('masterFields', newMasterField.id, 'add', newMasterField);
// dropdown 타입이고 attributeType이 'custom'이며 옵션이 있으면 속성관리 탭에도 자동 추가
if (newMasterFieldInputType === 'dropdown' && newMasterFieldAttributeType === 'custom' && newMasterFieldOptions.trim()) {
@@ -1498,17 +1071,17 @@ export function ItemMasterDataManagement() {
const handleEditMasterField = (field: ItemMasterField) => {
setEditingMasterFieldId(field.id);
- setNewMasterFieldName(field.name);
- setNewMasterFieldKey(field.fieldKey);
- setNewMasterFieldInputType(field.property.inputType);
- setNewMasterFieldRequired(field.property.required);
+ setNewMasterFieldName(field.field_name);
+ setNewMasterFieldKey(field.id.toString());
+ setNewMasterFieldInputType(field.default_properties?.inputType);
+ setNewMasterFieldRequired(field.default_properties?.required);
setNewMasterFieldCategory(field.category || '공통');
setNewMasterFieldDescription(field.description || '');
- setNewMasterFieldOptions(field.property.options?.join(', ') || '');
- setNewMasterFieldAttributeType((field.property as any).attributeType || 'custom');
- setNewMasterFieldMultiColumn(field.property.multiColumn || false);
- setNewMasterFieldColumnCount(field.property.columnCount || 2);
- setNewMasterFieldColumnNames(field.property.columnNames || ['컬럼1', '컬럼2']);
+ setNewMasterFieldOptions(field.default_properties?.options?.join(', ') || '');
+ setNewMasterFieldAttributeType((field.default_properties as any).attributeType || 'custom');
+ setNewMasterFieldMultiColumn(field.default_properties?.multiColumn || false);
+ setNewMasterFieldColumnCount(field.default_properties?.columnCount || 2);
+ setNewMasterFieldColumnNames(field.default_properties?.columnNames || ['컬럼1', '컬럼2']);
setIsMasterFieldDialogOpen(true);
};
@@ -1517,11 +1090,11 @@ export function ItemMasterDataManagement() {
return toast.error('항목명과 필드 키를 입력해주세요');
// 속성 목록 업데이트 (dropdown 타입이고 옵션이 있으면 각 옵션을 속성으로 추가)
- let properties: ItemFieldProperty[] = [];
-
+ let _properties2: ItemFieldProperty[] = [];
+
if (newMasterFieldInputType === 'dropdown' && newMasterFieldOptions.trim()) {
const options = newMasterFieldOptions.split(',').map(o => o.trim());
- properties = options.map((opt, idx) => ({
+ _properties2 = options.map((opt, idx) => ({
id: `prop-${Date.now()}-${idx}`,
key: `${newMasterFieldKey}_${opt.toLowerCase().replace(/\s+/g, '_')}`,
label: opt,
@@ -1534,9 +1107,8 @@ export function ItemMasterDataManagement() {
}
updateItemMasterField(editingMasterFieldId, {
- name: newMasterFieldName,
- fieldKey: newMasterFieldKey,
- property: {
+ field_name: newMasterFieldName,
+ default_properties: {
inputType: newMasterFieldInputType,
required: newMasterFieldRequired,
row: 1,
@@ -1548,8 +1120,7 @@ export function ItemMasterDataManagement() {
multiColumn: (newMasterFieldInputType === 'textbox' || newMasterFieldInputType === 'textarea') ? newMasterFieldMultiColumn : undefined,
columnCount: (newMasterFieldInputType === 'textbox' || newMasterFieldInputType === 'textarea') && newMasterFieldMultiColumn ? newMasterFieldColumnCount : undefined,
columnNames: (newMasterFieldInputType === 'textbox' || newMasterFieldInputType === 'textarea') && newMasterFieldMultiColumn ? newMasterFieldColumnNames : undefined
- } as any,
- properties: properties.length > 0 ? properties : undefined,
+ },
category: newMasterFieldCategory,
description: newMasterFieldDescription || undefined
});
@@ -1569,53 +1140,96 @@ export function ItemMasterDataManagement() {
setNewMasterFieldColumnNames(['컬럼1', '컬럼2']);
setIsMasterFieldDialogOpen(false);
- trackChange('masterFields', editingMasterFieldId, 'update', { id: editingMasterFieldId });
toast.success('마스터 항목이 수정되었습니다 (속성 탭에 반영됨, 저장 필요)');
};
- const handleDeleteMasterField = (id: string) => {
+ const handleDeleteMasterField = (id: number) => {
if (confirm('이 마스터 항목을 삭제하시겠습니까?')) {
// 삭제할 마스터 항목 찾기
const fieldToDelete = itemMasterFields.find(f => f.id === id);
-
+
// 마스터 항목 삭제
deleteItemMasterField(id);
-
+
// 속성 탭에서 해당 탭 제거
if (fieldToDelete) {
- setAttributeSubTabs(prev => prev.filter(tab => tab.key !== fieldToDelete.fieldKey));
-
+ setAttributeSubTabs(prev => prev.filter(tab => tab.key !== fieldToDelete.id.toString()));
+
// 삭제된 탭이 현재 활성 탭이면 다른 탭으로 전환
- if (activeAttributeTab === fieldToDelete.fieldKey) {
+ if (activeAttributeTab === fieldToDelete.id.toString()) {
setActiveAttributeTab('units');
}
}
-
+
toast.success('마스터 항목이 삭제되었습니다');
}
};
+ // 페이지 삭제 핸들러 (pendingChanges 제거 포함)
+ const handleDeletePageWithTracking = (pageId: number) => {
+ // 삭제할 페이지 찾기
+ const pageToDelete = itemPages.find(p => p.id === pageId);
+
+ // 해당 페이지의 모든 섹션 ID 수집
+ const sectionIds = pageToDelete?.sections.map(s => s.id) || [];
+
+ // 해당 페이지의 모든 필드 ID 수집
+ const fieldIds = pageToDelete?.sections.flatMap(s => s.fields?.map(f => f.id) || []) || [];
+
+ // ItemMasterContext의 deleteItemPage 호출
+ deleteItemPage(pageId);
+
+ console.log('페이지 삭제 완료:', {
+ pageId,
+ removedSections: sectionIds.length,
+ removedFields: fieldIds.length
+ });
+ };
+
+ // 섹션 삭제 핸들러 (pendingChanges 제거 포함)
+ const handleDeleteSectionWithTracking = (pageId: number, sectionId: number) => {
+ // 삭제할 섹션 찾기
+ const page = itemPages.find(p => p.id === pageId);
+ const sectionToDelete = page?.sections.find(s => s.id === sectionId);
+
+ // 해당 섹션의 모든 필드 ID 수집
+ const fieldIds = sectionToDelete?.fields?.map(f => f.id) || [];
+
+ // ItemMasterContext의 deleteSection 호출
+ deleteSection(Number(sectionId));
+
+ console.log('섹션 삭제 완료:', {
+ sectionId,
+ removedFields: fieldIds.length
+ });
+ };
+
+ // 필드 삭제 핸들러 (pendingChanges 제거 포함)
+ const handleDeleteFieldWithTracking = (pageId: string, sectionId: string, fieldId: string) => {
+ // ItemMasterContext의 deleteField 호출
+ deleteField(Number(fieldId));
+
+ console.log('필드 삭제 완료:', fieldId);
+ };
+
// 섹션 템플릿 핸들러
const handleAddSectionTemplate = () => {
if (!newSectionTemplateTitle.trim())
return toast.error('섹션 제목을 입력해주세요');
const newTemplate: SectionTemplate = {
- id: `TEMPLATE-${Date.now()}`,
- title: newSectionTemplateTitle,
+ id: Date.now(),
+ template_name: newSectionTemplateTitle,
+ section_type: newSectionTemplateType === 'bom' ? 'BOM' : 'BASIC',
description: newSectionTemplateDescription || undefined,
- category: newSectionTemplateCategory.length > 0 ? newSectionTemplateCategory : undefined,
- fields: [],
- type: newSectionTemplateType,
- bomItems: newSectionTemplateType === 'bom' ? [] : undefined,
- isCollapsible: true,
- isCollapsed: false,
- isActive: true,
- createdAt: new Date().toISOString().split('T')[0]
+ default_fields: null,
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString()
};
console.log('Adding section template:', newTemplate);
addSectionTemplate(newTemplate);
+
setNewSectionTemplateTitle('');
setNewSectionTemplateDescription('');
setNewSectionTemplateCategory([]);
@@ -1626,23 +1240,25 @@ export function ItemMasterDataManagement() {
const handleEditSectionTemplate = (template: SectionTemplate) => {
setEditingSectionTemplateId(template.id);
- setNewSectionTemplateTitle(template.title);
+ setNewSectionTemplateTitle(template.template_name);
setNewSectionTemplateDescription(template.description || '');
- setNewSectionTemplateCategory(template.category || []);
- setNewSectionTemplateType(template.type || 'fields');
+ setNewSectionTemplateCategory([]);
+ setNewSectionTemplateType(template.section_type === 'BOM' ? 'bom' : 'fields');
setIsSectionTemplateDialogOpen(true);
};
const handleUpdateSectionTemplate = () => {
- if (!editingSectionTemplateId || !newSectionTemplateTitle.trim())
+ if (!editingSectionTemplateId || !newSectionTemplateTitle.trim())
return toast.error('섹션 제목을 입력해주세요');
- updateSectionTemplate(editingSectionTemplateId, {
+ const updateData = {
title: newSectionTemplateTitle,
description: newSectionTemplateDescription || undefined,
category: newSectionTemplateCategory.length > 0 ? newSectionTemplateCategory : undefined,
type: newSectionTemplateType
- });
+ };
+
+ updateSectionTemplate(editingSectionTemplateId, updateData);
setEditingSectionTemplateId(null);
setNewSectionTemplateTitle('');
@@ -1650,12 +1266,14 @@ export function ItemMasterDataManagement() {
setNewSectionTemplateCategory([]);
setNewSectionTemplateType('fields');
setIsSectionTemplateDialogOpen(false);
- toast.success('섹션이 수정되었습니다');
+ toast.success('섹션이 수정되었습니다 (저장 필요)');
};
- const handleDeleteSectionTemplate = (id: string) => {
+ const handleDeleteSectionTemplate = (id: number) => {
if (confirm('이 섹션을 삭제하시겠습니까?')) {
+ // 섹션 템플릿 삭제
deleteSectionTemplate(id);
+
toast.success('섹션이 삭제되었습니다');
}
};
@@ -1666,35 +1284,25 @@ export function ItemMasterDataManagement() {
return toast.error('템플릿을 선택해주세요');
}
- const template = sectionTemplates.find(t => t.id === selectedTemplateId);
+ const template = sectionTemplates.find(t => t.id === Number(selectedTemplateId));
if (!template) {
return toast.error('템플릿을 찾을 수 없습니다');
}
// 템플릿을 복사해서 섹션으로 추가
- const newSection: ItemSection = {
- id: `SECTION-${Date.now()}`,
- title: template.title,
- description: template.description,
- category: template.category,
- fields: template.fields.map(field => ({
- ...field,
- id: `FIELD-${Date.now()}-${Math.random()}`,
- createdAt: new Date().toISOString().split('T')[0]
- })),
- type: template.type,
- bomItems: template.type === 'bom' && template.bomItems ? template.bomItems.map(bom => ({
- ...bom,
- id: `BOM-${Date.now()}-${Math.random()}`,
- createdAt: new Date().toISOString().split('T')[0]
- })) : undefined,
- order: selectedPage.sections.length + 1,
- isCollapsible: template.isCollapsible,
- isCollapsed: template.isCollapsed,
- createdAt: new Date().toISOString().split('T')[0]
+ const newSection: Omit = {
+ page_id: selectedPage.id,
+ section_name: template.template_name,
+ section_type: template.section_type,
+ 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.title, 'type:', template.type, 'newSection:', newSection);
+ console.log('Loading template to section:', template.template_name, 'type:', template.section_type, 'newSection:', newSection);
addSectionToPage(selectedPage.id, newSection);
setSelectedTemplateId(null);
setIsLoadTemplateDialogOpen(false);
@@ -1711,13 +1319,18 @@ export function ItemMasterDataManagement() {
if (!template) return;
// 항목 탭에 해당 항목이 없으면 자동으로 추가
- const existingMasterField = itemMasterFields.find(f => f.fieldKey === templateFieldKey);
+ const existingMasterField = itemMasterFields.find(f => f.id.toString() === templateFieldKey);
if (!existingMasterField && !editingTemplateFieldId) {
const newMasterField: ItemMasterField = {
- id: `MASTER-${Date.now()}`,
- name: templateFieldName,
- fieldKey: templateFieldKey,
- property: {
+ id: Date.now(),
+ field_name: templateFieldName,
+ field_type: templateFieldInputType === 'textbox' ? 'TEXT' :
+ templateFieldInputType === 'number' ? 'NUMBER' :
+ templateFieldInputType === 'date' ? 'DATE' :
+ templateFieldInputType === 'dropdown' ? 'SELECT' :
+ templateFieldInputType === 'textarea' ? 'TEXTAREA' :
+ templateFieldInputType === 'checkbox' ? 'CHECKBOX' : 'TEXT',
+ default_properties: {
inputType: templateFieldInputType,
required: templateFieldRequired,
row: 1,
@@ -1731,8 +1344,8 @@ export function ItemMasterDataManagement() {
} as any,
category: '공통',
description: templateFieldDescription || undefined,
- isActive: true,
- createdAt: new Date().toISOString().split('T')[0]
+ created_at: new Date().toISOString().split('T')[0],
+ updated_at: new Date().toISOString().split('T')[0]
};
addItemMasterField(newMasterField);
@@ -1768,35 +1381,44 @@ export function ItemMasterDataManagement() {
}
const newField: ItemField = {
- id: editingTemplateFieldId || `FIELD-${Date.now()}`,
- name: templateFieldName,
- fieldKey: templateFieldKey,
- property: {
+ id: editingTemplateFieldId || Date.now(),
+ section_id: 0, // Placeholder for template
+ field_name: templateFieldName,
+ field_type: templateFieldInputType,
+ order_no: 0,
+ is_required: templateFieldRequired,
+ placeholder: templateFieldDescription || null,
+ default_value: null,
+ display_condition: null,
+ validation_rules: null,
+ options: templateFieldInputType === 'dropdown' && templateFieldOptions.trim()
+ ? templateFieldOptions.split(',').map(o => ({ label: o.trim(), value: o.trim() }))
+ : null,
+ properties: {
inputType: templateFieldInputType,
required: templateFieldRequired,
row: 1,
col: 1,
- 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,
- createdAt: new Date().toISOString().split('T')[0]
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString()
};
let updatedFields;
+ const currentFields = template.default_fields ? (typeof template.default_fields === 'string' ? JSON.parse(template.default_fields) : template.default_fields) : [];
+
if (editingTemplateFieldId) {
- updatedFields = template.fields.map(f => f.id === editingTemplateFieldId ? newField : f);
+ updatedFields = Array.isArray(currentFields) ? currentFields.map((f: any) => f.id === editingTemplateFieldId ? newField : f) : [];
toast.success('항목이 수정되었습니다');
} else {
- updatedFields = [...template.fields, newField];
+ updatedFields = Array.isArray(currentFields) ? [...currentFields, newField] : [newField];
toast.success('항목이 추가되었습니다');
}
- updateSectionTemplate(currentTemplateId, { fields: updatedFields });
+ updateSectionTemplate(currentTemplateId, { default_fields: updatedFields });
// 폼 초기화
setTemplateFieldName('');
@@ -1812,109 +1434,116 @@ export function ItemMasterDataManagement() {
setIsTemplateFieldDialogOpen(false);
};
- const handleEditTemplateField = (templateId: string, field: ItemField) => {
+ const handleEditTemplateField = (templateId: number, field: ItemField) => {
setCurrentTemplateId(templateId);
setEditingTemplateFieldId(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']);
+ setTemplateFieldName(field.field_name);
+ setTemplateFieldKey(field.id.toString());
+ setTemplateFieldInputType(field.properties?.inputType);
+ setTemplateFieldRequired(field.is_required);
+ setTemplateFieldOptions(field.options?.map(o => o.value).join(', ') || '');
+ setTemplateFieldDescription(field.placeholder || '');
+ setTemplateFieldMultiColumn(field.properties?.multiColumn || false);
+ setTemplateFieldColumnCount(field.properties?.columnCount || 2);
+ setTemplateFieldColumnNames(field.properties?.columnNames || ['컬럼1', '컬럼2']);
setIsTemplateFieldDialogOpen(true);
};
- const handleDeleteTemplateField = (templateId: string, fieldId: string) => {
+ const handleDeleteTemplateField = (templateId: number, fieldId: string) => {
if (!confirm('이 항목을 삭제하시겠습니까?')) return;
const template = sectionTemplates.find(t => t.id === templateId);
if (!template) return;
- const updatedFields = template.fields.filter(f => f.id !== fieldId);
- updateSectionTemplate(templateId, { fields: updatedFields });
+ 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) => f.id !== fieldId) : [];
+ updateSectionTemplate(templateId, { default_fields: updatedFields });
toast.success('항목이 삭제되었습니다');
};
// BOM 관리 핸들러
- const handleAddBOMItem = (item: Omit) => {
+ const _handleAddBOMItem = (item: Omit) => {
const newItem: BOMItem = {
...item,
- id: `BOM-${Date.now()}`,
- createdAt: new Date().toISOString().split('T')[0]
+ id: Date.now(),
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString(),
+ tenant_id: 1,
+ section_id: 0
};
setBomItems(prev => [...prev, newItem]);
};
- const handleUpdateBOMItem = (id: string, item: Partial) => {
+ const _handleUpdateBOMItem = (id: number, item: Partial) => {
setBomItems(prev => prev.map(bom => bom.id === id ? { ...bom, ...item } : bom));
};
- const handleDeleteBOMItem = (id: string) => {
+ const _handleDeleteBOMItem = (id: number) => {
setBomItems(prev => prev.filter(bom => bom.id !== id));
};
// 템플릿별 BOM 관리 핸들러
- const handleAddBOMItemToTemplate = (templateId: string, item: Omit) => {
+ const handleAddBOMItemToTemplate = (templateId: number, item: Omit) => {
const newItem: BOMItem = {
...item,
- id: `BOM-${Date.now()}`,
- createdAt: new Date().toISOString().split('T')[0]
+ id: Date.now(),
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString(),
+ tenant_id: 1,
+ section_id: 0
};
-
+
const template = sectionTemplates.find(t => t.id === templateId);
if (!template) return;
-
+
const updatedBomItems = [...(template.bomItems || []), newItem];
updateSectionTemplate(templateId, { bomItems: updatedBomItems });
};
- const handleUpdateBOMItemInTemplate = (templateId: string, itemId: string, item: Partial) => {
+ const handleUpdateBOMItemInTemplate = (templateId: number, itemId: number, item: Partial) => {
const template = sectionTemplates.find(t => t.id === templateId);
if (!template || !template.bomItems) return;
-
- const updatedBomItems = template.bomItems.map(bom =>
+
+ const updatedBomItems = template.bomItems.map(bom =>
bom.id === itemId ? { ...bom, ...item } : bom
);
updateSectionTemplate(templateId, { bomItems: updatedBomItems });
};
- const handleDeleteBOMItemFromTemplate = (templateId: string, itemId: string) => {
+ 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 toggleSection = (sectionId: string) => {
+ const _toggleSection = (sectionId: string) => {
setExpandedSections(prev => ({ ...prev, [sectionId]: !prev[sectionId] }));
};
// 탭 관리 함수
const handleAddTab = () => {
if (!newTabLabel.trim()) return toast.error('탭 이름을 입력해주세요');
-
+
const newTab = {
- id: `TAB-${Date.now()}`,
+ id: Date.now().toString(),
label: newTabLabel,
icon: 'FileText',
isDefault: false,
order: customTabs.length + 1
};
-
+
setCustomTabs(prev => [...prev, newTab]);
setNewTabLabel('');
setIsAddTabDialogOpen(false);
toast.success('탭이 추가되었습니다');
};
- const handleEditTab = (tabId: string) => {
+ const _handleEditTab = (tabId: string) => {
const tab = customTabs.find(t => t.id === tabId);
if (!tab || tab.isDefault) return;
-
+
setEditingTabId(tabId);
setNewTabLabel(tab.label);
setIsAddTabDialogOpen(true);
@@ -2010,25 +1639,27 @@ export function ItemMasterDataManagement() {
const moveAttributeTabUp = (tabId: string) => {
const tabIndex = attributeSubTabs.findIndex(t => t.id === tabId);
if (tabIndex <= 0) return;
-
+
const newTabs = [...attributeSubTabs];
const temp = newTabs[tabIndex - 1].order;
newTabs[tabIndex - 1].order = newTabs[tabIndex].order;
newTabs[tabIndex].order = temp;
-
+
setAttributeSubTabs(newTabs.sort((a, b) => a.order - b.order));
+ // hasUnsavedChanges는 computed value이므로 자동 계산됨
};
const moveAttributeTabDown = (tabId: string) => {
const tabIndex = attributeSubTabs.findIndex(t => t.id === tabId);
if (tabIndex >= attributeSubTabs.length - 1) return;
-
+
const newTabs = [...attributeSubTabs];
const temp = newTabs[tabIndex + 1].order;
newTabs[tabIndex + 1].order = newTabs[tabIndex].order;
newTabs[tabIndex].order = temp;
-
+
setAttributeSubTabs(newTabs.sort((a, b) => a.order - b.order));
+ // hasUnsavedChanges는 computed value이므로 자동 계산됨
};
const getTabIcon = (iconName: string) => {
@@ -2041,26 +1672,28 @@ export function ItemMasterDataManagement() {
const moveTabUp = (tabId: string) => {
const tabIndex = customTabs.findIndex(t => t.id === tabId);
if (tabIndex <= 0) return;
-
+
const newTabs = [...customTabs];
const temp = newTabs[tabIndex - 1].order;
newTabs[tabIndex - 1].order = newTabs[tabIndex].order;
newTabs[tabIndex].order = temp;
-
+
setCustomTabs(newTabs.sort((a, b) => a.order - b.order));
+ // hasUnsavedChanges는 computed value이므로 자동 계산됨
toast.success('탭 순서가 변경되었습니다');
};
const moveTabDown = (tabId: string) => {
const tabIndex = customTabs.findIndex(t => t.id === tabId);
if (tabIndex >= customTabs.length - 1) return;
-
+
const newTabs = [...customTabs];
const temp = newTabs[tabIndex + 1].order;
newTabs[tabIndex + 1].order = newTabs[tabIndex].order;
newTabs[tabIndex].order = temp;
-
+
setCustomTabs(newTabs.sort((a, b) => a.order - b.order));
+ // hasUnsavedChanges는 computed value이므로 자동 계산됨
toast.success('탭 순서가 변경되었습니다');
};
@@ -2073,7 +1706,7 @@ export function ItemMasterDataManagement() {
};
// 현재 섹션의 모든 필드 가져오기 (조건부 필드 참조용)
- const getAllFieldsInSection = (sectionId: string) => {
+ const _getAllFieldsInSection = (sectionId: number) => {
if (!selectedPage) return [];
const section = selectedPage.sections.find(s => s.id === sectionId);
return section?.fields || [];
@@ -2082,122 +1715,101 @@ export function ItemMasterDataManagement() {
// 섹션 순서 변경 핸들러 (드래그앤드롭)
const moveSection = (dragIndex: number, hoverIndex: number) => {
if (!selectedPage) return;
-
+
const sections = [...selectedPage.sections];
const [draggedSection] = sections.splice(dragIndex, 1);
sections.splice(hoverIndex, 0, draggedSection);
-
+
// order 값 재설정
const updatedSections = sections.map((section, idx) => ({
...section,
order: idx + 1
}));
-
+
// 페이지 업데이트
updateItemPage(selectedPage.id, { sections: updatedSections });
- trackChange('pages', selectedPage.id, 'update', { sections: updatedSections });
+ // hasUnsavedChanges는 computed value이므로 자동 계산됨
toast.success('섹션 순서가 변경되었습니다 (저장 필요)');
};
// 필드 순서 변경 핸들러
- const moveField = (sectionId: string, dragIndex: number, hoverIndex: number) => {
+ const moveField = (sectionId: number, dragIndex: number, hoverIndex: number) => {
if (!selectedPage) return;
const section = selectedPage.sections.find(s => s.id === sectionId);
- if (!section) return;
+ if (!section || !section.fields) return;
const newFields = [...section.fields];
const [draggedField] = newFields.splice(dragIndex, 1);
newFields.splice(hoverIndex, 0, draggedField);
- reorderFields(selectedPage.id, sectionId, newFields.map(f => f.id));
+ reorderFields(sectionId, newFields.map(f => f.id));
+ // hasUnsavedChanges는 computed value이므로 자동 계산됨
};
- // 변경사항 추적 함수
- const trackChange = (type: 'pages' | 'sections' | 'fields' | 'masterFields' | 'attributes', id: string, action: 'add' | 'update', data: any, attributeType?: string) => {
- setPendingChanges(prev => {
- const updated = { ...prev };
-
- if (type === 'attributes') {
- const existingIndex = updated.attributes.findIndex(item => item.id === id);
- if (existingIndex >= 0) {
- updated.attributes[existingIndex] = { id, action, type: attributeType || '', data };
- } else {
- updated.attributes.push({ id, action, type: attributeType || '', data });
- }
- } else {
- const existingIndex = updated[type].findIndex(item => item.id === id);
- if (existingIndex >= 0) {
- updated[type][existingIndex] = { id, action, data };
- } else {
- updated[type].push({ id, action, data });
- }
- }
-
- return updated;
- });
- setHasUnsavedChanges(true);
- };
-
- // 일괄 저장 핸들러 - 모든 페이지, 섹션, 항목, 속성을 통합 저장
- const handleSaveAllChanges = () => {
- if (!hasUnsavedChanges) {
- return toast.info('저장할 변경사항이 없습니다');
+ // 전체 데이터 초기화 핸들러
+ const _handleResetAllData = () => {
+ if (!confirm('⚠️ 경고: 모든 품목기준관리 데이터(계층구조, 섹션, 항목, 속성)를 초기화하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다!')) {
+ return;
}
try {
- // 모든 변경사항은 이미 DataContext에 실시간으로 반영되어 있습니다.
- // DataContext의 useEffect가 자동으로 localStorage에 저장합니다.
- // 이 함수는 변경사항 추적을 초기화하고 사용자에게 확인 메시지를 보여줍니다.
-
- const totalChanges =
- pendingChanges.pages.length +
- pendingChanges.sections.length +
- pendingChanges.fields.length +
- pendingChanges.masterFields.length +
- pendingChanges.attributes.length;
+ // ItemMasterContext의 모든 데이터 및 캐시 초기화
+ resetAllData();
- // 변경사항 요약
- const summary = [];
- if (pendingChanges.pages.length > 0) summary.push(`페이지 ${pendingChanges.pages.length}개`);
- if (pendingChanges.sections.length > 0) summary.push(`섹션 ${pendingChanges.sections.length}개`);
- if (pendingChanges.fields.length > 0) summary.push(`항목 ${pendingChanges.fields.length}개`);
- if (pendingChanges.masterFields.length > 0) summary.push(`마스터항목 ${pendingChanges.masterFields.length}개`);
- if (pendingChanges.attributes.length > 0) summary.push(`속성 ${pendingChanges.attributes.length}개`);
+ // 로컬 상태 초기화 (ItemMasterContext가 관리하지 않는 컴포넌트 로컬 상태)
+ setUnitOptions([]);
+ setMaterialOptions([]);
+ setSurfaceTreatmentOptions([]);
+ setCustomAttributeOptions({});
+ setAttributeColumns({});
+ setBomItems([]);
- console.log('Confirming changes:', { totalChanges, pendingChanges, currentItemPages: itemPages });
-
- // itemPages, sectionTemplates, itemMasterFields를 명시적으로 localStorage에 저장 (안전성 보장)
- localStorage.setItem('mes-itemPages', JSON.stringify(itemPages));
- localStorage.setItem('mes-sectionTemplates', JSON.stringify(sectionTemplates));
- localStorage.setItem('mes-itemMasterFields', JSON.stringify(itemMasterFields));
- console.log('Saved to localStorage:', {
- itemPages: itemPages.length,
- sectionTemplates: sectionTemplates.length,
- itemMasterFields: itemMasterFields.length
- });
-
- // 속성 탭의 모든 데이터도 localStorage에 명시적으로 저장 (안전성 보장)
- localStorage.setItem(UNIT_OPTIONS_KEY, JSON.stringify(unitOptions));
- localStorage.setItem(MATERIAL_OPTIONS_KEY, JSON.stringify(materialOptions));
- localStorage.setItem(SURFACE_TREATMENT_OPTIONS_KEY, JSON.stringify(surfaceTreatmentOptions));
- localStorage.setItem(CUSTOM_ATTRIBUTE_OPTIONS_KEY, JSON.stringify(customAttributeOptions));
- localStorage.setItem(ITEM_CATEGORIES_KEY, JSON.stringify(itemCategories));
-
- // 변경사항 초기화
- setPendingChanges({
- pages: [],
- sections: [],
- fields: [],
- masterFields: [],
- attributes: []
- });
- setHasUnsavedChanges(false);
-
- toast.success(`✅ 모든 변경사항 저장 완료!\n${summary.join(', ')} - 총 ${totalChanges}건\n페이지, 섹션, 항목, 속성이 모두 자동 목록에 반영되었습니다.`);
+ // 탭 상태 초기화 (기본 탭만 남김)
+ setCustomTabs([
+ { id: 'hierarchy', label: '계층구조', icon: 'FolderTree', isDefault: true, order: 1 },
+ { id: 'sections', label: '섹션', icon: 'Layers', isDefault: true, order: 2 },
+ { id: 'items', label: '항목', icon: 'ListTree', isDefault: true, order: 3 },
+ { id: 'attributes', label: '속성', icon: 'Settings', isDefault: true, order: 4 }
+ ]);
+
+ setAttributeSubTabs([
+ { id: 'units', label: '단위', key: 'units', isDefault: true, order: 0 },
+ { id: 'materials', label: '재질', key: 'materials', isDefault: true, order: 1 },
+ { id: 'surface', label: '표면처리', key: 'surface', isDefault: true, order: 2 }
+ ]);
+
+ console.log('🗑️ 모든 품목기준관리 데이터가 초기화되었습니다');
+ toast.success('✅ 모든 데이터가 초기화되었습니다!\n계층구조, 섹션, 항목, 속성이 모두 삭제되었습니다.');
+
+ // 페이지 새로고침하여 완전히 초기화된 상태 반영
+ setTimeout(() => {
+ window.location.reload();
+ }, 1500);
} catch (error) {
- toast.error('저장 중 오류가 발생했습니다');
- console.error('Save error:', error);
+ toast.error('초기화 중 오류가 발생했습니다');
+ console.error('Reset error:', error);
}
};
+ // 초기 로딩 중 UI
+ if (isInitialLoading) {
+ return (
+
@@ -2252,14 +1831,23 @@ export function ItemMasterDataManagement() {
);
})}
-
+ {/* 전체 초기화 버튼 숨김 처리 - 디자인에 없는 기능 */}
+ {/* */}
{/* 속성 탭 (단위/재질/표면처리 통합) */}
@@ -2607,23 +2195,25 @@ export function ItemMasterDataManagement() {
const currentTabKey = activeAttributeTab;
// 마스터 항목인지 확인
- const masterField = itemMasterFields.find(f => f.fieldKey === currentTabKey);
-
+ const masterField = itemMasterFields.find(f => f.id.toString() === currentTabKey);
+
// 마스터 항목이면 해당 항목의 속성값들을 표시
- if (masterField && masterField.properties && masterField.properties.length > 0) {
+ // Note: default_properties is Record, not an array, so this condition will always be false
+ // This code block may need refactoring to work with the actual data structure
+ if (masterField && masterField.default_properties && Array.isArray(masterField.default_properties)) {
return (
-
+
-
-
-
-
- {(() => {
- console.log('Rendering master fields:', {
- totalFields: itemMasterFields.length,
- fields: itemMasterFields.map(f => ({ id: f.id, name: f.name, fieldKey: f.fieldKey }))
- });
- return null;
- })()}
- {itemMasterFields.length === 0 ? (
-
-
+
{/* 섹션관리 탭 */}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* 일반 섹션 탭 */}
-
- {(() => {
- console.log('Rendering section templates:', {
- totalTemplates: sectionTemplates.length,
- generalTemplates: sectionTemplates.filter(t => t.type !== 'bom').length,
- templates: sectionTemplates.map(t => ({ id: t.id, title: t.title, type: t.type }))
- });
- return null;
- })()}
- {sectionTemplates.filter(t => t.type !== 'bom').length === 0 ? (
-
-
- {/* 모듈 섹션 (BOM) 탭 */}
-
- {sectionTemplates.filter(t => t.type === 'bom').length === 0 ? (
-
-
-
-
+
{/* 계층구조 탭 */}
- {}}
+ deleteItemPage={handleDeletePageWithTracking}
+ duplicatePage={handleDuplicatePage}
+ setIsPageDialogOpen={setIsPageDialogOpen}
+ setIsSectionDialogOpen={setIsSectionDialogOpen}
+ setIsFieldDialogOpen={setIsFieldDialogOpen}
+ handleEditSectionTitle={handleEditSectionTitle}
+ handleSaveSectionTitle={handleSaveSectionTitle}
+ moveSection={moveSection}
+ deleteSection={handleDeleteSectionWithTracking}
+ updateSection={updateSection}
+ deleteField={handleDeleteFieldWithTracking}
+ handleEditField={handleEditField}
+ moveField={moveField}
+ />
- {/* 품목분류 탭 */}
-
-
-
- 품목분류 관리
- 품목을 분류하는 카테고리를 관리합니다 (대분류 → 중분류 → 소분류)
-
-
-
-
-
-
- {/* 사용자 정의 탭들 (품목분류 제외) */}
- {customTabs.filter(tab => !tab.isDefault && tab.id !== 'categories').map(tab => (
+ {/* 사용자 정의 탭들 */}
+ {customTabs.filter(tab => !tab.isDefault).map(tab => (
@@ -3628,2307 +2507,318 @@ export function ItemMasterDataManagement() {
))}
- {/* 탭 관리 다이얼로그 */}
-
+
-
-
- 탭 삭제
-
- "{customTabs.find(t => t.id === deletingTabId)?.label}" 탭을 삭제하시겠습니까?
-
- 이 작업은 되돌릴 수 없습니다. -
-
-
- {
- setIsDeleteTabDialogOpen(false);
- setDeletingTabId(null);
- }}>
- 취소
-
-
- 삭제
-
-
-
-
+ {}}
+ />
- {/* 속성 하위 탭 삭제 확인 다이얼로그 */}
-
-
-
- 속성 탭 삭제
-
- "{attributeSubTabs.find(t => t.id === deletingAttributeTabId)?.label}" 탭을 삭제하시겠습니까?
-
- 이 작업은 되돌릴 수 없습니다. -
-
-
- {
- setIsDeleteAttributeTabDialogOpen(false);
- setDeletingAttributeTabId(null);
- }}>
- 취소
-
-
- 삭제
-
-
-
-
+
-
-
- BOM (자재명세서)
-
- 하위 구성 품목을 관리합니다 ({bomLines.length}개 품목)
-
-
-
-
- 하위 구성 품목이 없습니다. BOM을 추가해주세요.
-
- ) : (
- <>
-
-
-
-
-
- {/* 총 금액 */}
-
-
-
- )}
-
- {/* BOM 추가/수정 다이얼로그 */}
-
-
- {/* 전개도 그리기 캔버스 */}
-
-
- 총 금액
-- ₩{getTotalAmount().toLocaleString()} -
-
- {/* 섹션 헤더 */}
-
- );
-}
-
-// 네이티브 드래그 가능한 필드 컴포넌트
-interface DraggableFieldProps {
- field: ItemField;
- index: number;
- moveField: (dragIndex: number, hoverIndex: number) => void;
- onDelete: () => void;
- onEdit?: () => void;
-}
-
-function DraggableField({ field, index, moveField, onDelete, onEdit }: DraggableFieldProps) {
- const [isDragging, setIsDragging] = useState(false);
-
- const handleDragStart = (e: React.DragEvent) => {
- e.dataTransfer.effectAllowed = 'move';
- e.dataTransfer.setData('text/plain', JSON.stringify({ index, id: field.id }));
- setIsDragging(true);
- };
-
- const handleDragEnd = () => {
- setIsDragging(false);
- };
-
- const handleDragOver = (e: React.DragEvent) => {
- e.preventDefault();
- e.dataTransfer.dropEffect = 'move';
- };
-
- const handleDrop = (e: React.DragEvent) => {
- e.preventDefault();
- try {
- const data = JSON.parse(e.dataTransfer.getData('text/plain'));
- if (data.index !== index) {
- moveField(data.index, index);
- }
- } catch (err) {
- // Ignore
- }
- };
-
- return (
-
-
-
- {/* 섹션 컨텐츠 */}
-
-
-
-
-
- setEditingSectionTitle(e.target.value)}
- className="h-8 bg-white"
- autoFocus
- onKeyDown={(e) => {
- if (e.key === 'Enter') handleSaveSectionTitle();
- if (e.key === 'Escape') setEditingSectionId(null);
- }}
- />
-
-
-
- ) : (
- onEditTitle(section.id, section.title)}
- >
- {section.title}
-
- )}
-
-
-
-
- {children}
-
-
-
- );
-}
-
export function ItemMasterDataManagement() {
const {
itemPages,
@@ -385,123 +99,120 @@ export function ItemMasterDataManagement() {
sectionTemplates,
addSectionTemplate,
updateSectionTemplate,
- deleteSectionTemplate
- } = useData();
+ deleteSectionTemplate,
+ resetAllData
+ } = useItemMaster();
console.log('ItemMasterDataManagement: Current sectionTemplates', sectionTemplates);
// 모든 페이지의 섹션을 하나의 배열로 평탄화
- const itemSections = itemPages.flatMap(page =>
+ const _itemSections = itemPages.flatMap(page =>
page.sections.map(section => ({
...section,
parentPageId: page.id
}))
);
- // 동적 탭 관리
- const [customTabs, setCustomTabs] = useState
-
-
-
- {INPUT_TYPE_OPTIONS.find(t => t.value === field.property.inputType)?.label}
-
- {field.property.required && (
- 필수
- )}
- {field.displayCondition && (
- 조건부
- )}
- {field.order !== undefined && (
- 순서: {field.order + 1}
- )}
-
-
- 필드키: {field.fieldKey}
- {field.displayCondition && (
-
- (조건: {field.displayCondition.fieldKey} = {field.displayCondition.expectedValue})
-
- )}
- {field.description && (
- • {field.description}
- )}
-
-
- {onEdit && (
-
- )}
-
-
-
+
+ );
+ }
+
+ // 에러 발생 시 UI
+ if (error) {
+ return (
+
+ window.location.reload()}
+ />
+
+ );
+ }
+
return (
-
- )}
-
-
-
-
- {pendingChanges.pages.length +
- pendingChanges.sections.length +
- pendingChanges.fields.length +
- pendingChanges.masterFields.length +
- pendingChanges.attributes.length}개 변경사항
-
-
-
-
- {pendingChanges.pages.length > 0 && • 페이지 {pendingChanges.pages.length}개}
- {pendingChanges.sections.length > 0 && • 섹션 {pendingChanges.sections.length}개}
- {pendingChanges.fields.length > 0 && • 항목 {pendingChanges.fields.length}개}
- {pendingChanges.masterFields.length > 0 && • 마스터항목 {pendingChanges.masterFields.length}개}
- {pendingChanges.attributes.length > 0 && • 속성 {pendingChanges.attributes.length}개}
-
-
-
{masterField.name} 속성 목록
+{masterField.field_name} 속성 목록
- 항목 탭에서 추가한 "{masterField.name}" 항목의 속성값들입니다 + 항목 탭에서 추가한 "{masterField.field_name}" 항목의 속성값들입니다
- {masterField.properties.map((property) => {
+ {(masterField.default_properties as any[]).map((property: any) => {
const inputTypeLabel =
property.type === 'textbox' ? '텍스트박스' :
property.type === 'number' ? '숫자' :
@@ -2666,7 +2256,7 @@ export function ItemMasterDataManagement() {
@@ -2822,792 +2412,81 @@ export function ItemMasterDataManagement() {
{/* 항목 탭 */}
옵션:
- {property.options.map((opt, idx) => (
+ {property.options.map((opt: string, idx: number) => (
{opt}
))}
@@ -2688,7 +2278,7 @@ export function ItemMasterDataManagement() {
마스터 항목 속성 관리
- 이 속성들은 항목 탭에서 "{masterField.name}" 항목을 편집하여 추가/수정/삭제할 수 있습니다. + 이 속성들은 항목 탭에서 "{masterField.field_name}" 항목을 편집하여 추가/수정/삭제할 수 있습니다.
-
-
-
- {pendingChanges.masterFields.length}개 변경
-
- )}
-
-
-
- 마스터 항목 관리
- 재사용 가능한 항목 템플릿을 관리합니다
-
- {hasUnsavedChanges && pendingChanges.masterFields.length > 0 && (
-
-
- ) : (
- 등록된 마스터 항목이 없습니다
-- 항목 추가 버튼을 눌러 재사용 가능한 항목을 등록하세요. -
-
- {itemMasterFields.map((field) => (
-
- )}
-
-
- ))}
-
-
-
- {field.name}
-
- {INPUT_TYPE_OPTIONS.find(t => t.value === field.property.inputType)?.label}
-
- {field.property.required && (
- 필수
- )}
- {field.category}
- {(field.property as any).attributeType && (field.property as any).attributeType !== 'custom' && (
-
- {(field.property as any).attributeType === 'unit' ? '단위 연동' :
- (field.property as any).attributeType === 'material' ? '재질 연동' : '표면처리 연동'}
-
- )}
-
-
- 필드키: {field.fieldKey}
- {field.description && (
- • {field.description}
- )}
-
- {field.property.options && field.property.options.length > 0 && (
-
- 옵션: {field.property.options.join(', ')}
- {(field.property as any).attributeType && (field.property as any).attributeType !== 'custom' && (
-
- (속성 탭 자동 동기화)
-
- )}
-
- )}
-
-
-
-
-
-
-
- 섹션관리
- 재사용 가능한 섹션 템플릿을 관리합니다
-
-
-
-
- ) : (
- 등록된 일반 섹션이 없습니다
-- 섹션추가 버튼을 눌러 재사용 가능한 섹션을 등록하세요. -
-
- {sectionTemplates.filter(t => t.type !== 'bom').map((template) => (
-
-
-
-
-
-
- ))}
-
- )}
-
-
-
-
-
- {template.title}
- {template.description && (
- {template.description}
- )}
-
-
- {template.category && template.category.length > 0 && (
-
-
- {template.category.map((cat, idx) => (
-
- {ITEM_TYPE_OPTIONS.find(t => t.value === cat)?.label || cat}
-
- ))}
-
- )}
-
-
-
-
-
- {template.fields.length === 0 ? (
- - 이 템플릿과 관련되는 항목 목록을 조회합니다 -
- -
-
- ) : (
-
-
-
-
- - 항목을 활용을 구간이에만 추가 버튼을 클릭해보세요 -
-- 품목의 목록명, 수량, 입력방법 고객화된 표시할 수 있습니다 -
-
- {template.fields.map((field, index) => (
-
- )}
-
-
- ))}
-
-
-
-
- {INPUT_TYPE_OPTIONS.find(t => t.value === field.property.inputType)?.label}
-
- {field.property.required && (
- 필수
- )}
-
-
- 필드키: {field.fieldKey}
- {field.description && (
- • {field.description}
- )}
-
-
-
-
-
-
-
- ) : (
- 등록된 모듈 섹션이 없습니다
-- 섹션추가 버튼을 눌러 BOM 모듈 섹션을 등록하세요. -
-
- {sectionTemplates.filter(t => t.type === 'bom').map((template) => (
-
-
-
-
- handleAddBOMItemToTemplate(template.id, item)}
- onUpdateItem={(itemId, item) => handleUpdateBOMItemInTemplate(template.id, itemId, item)}
- onDeleteItem={(itemId) => handleDeleteBOMItemFromTemplate(template.id, itemId)}
- />
-
-
- ))}
-
- )}
-
-
-
-
-
- {template.title}
- {template.description && (
- {template.description}
- )}
-
-
- {template.category && template.category.length > 0 && (
-
-
- {template.category.map((cat, idx) => (
-
- {ITEM_TYPE_OPTIONS.find(t => t.value === cat)?.label || cat}
-
- ))}
-
- )}
-
-
-
- {/* 섹션 목록 */}
-
-
-
-
- {itemPages.length === 0 ? (
-
-
-
- {/* 계층구조 */}
-
-
-
-
- {selectedPage ? (
-
-
-
+
- 페이지
-
-
- 섹션을 추가해주세요
- ) : ( - itemPages.map(page => ( -
- {editingPageId === page.id ? (
-
- ))
- )}
-
- setEditingPageName(e.target.value)}
- className="h-7 text-sm"
- autoFocus
- onKeyDown={(e) => {
- if (e.key === 'Enter') {
- if (!editingPageName.trim()) return toast.error('섹션명을 입력해주세요');
- updateItemPage(page.id, { pageName: editingPageName });
- trackChange('pages', page.id, 'update', { pageName: editingPageName });
- setEditingPageId(null);
- toast.success('페이지명이 수정되었습니다 (저장 필요)');
- }
- if (e.key === 'Escape') setEditingPageId(null);
- }}
- />
-
- ) : (
- setSelectedPageId(page.id)}
- onDoubleClick={() => {
- setEditingPageId(page.id);
- setEditingPageName(page.pageName);
- }}
- className={`w-full text-left p-2 rounded hover:bg-gray-50 transition-colors cursor-pointer ${
- selectedPage?.id === page.id ? 'bg-blue-50 border border-blue-200' : 'border'
- }`}
- >
-
- )}
-
-
-
-
-
- {/* 절대경로 표시 */}
- {page.absolutePath && (
-
-
- {page.pageName}
-
- {ITEM_TYPE_OPTIONS.find(t => t.value === page.itemType)?.label}
-
-
-
-
-
-
-
- {page.absolutePath}
-
- )}
-
-
-
-
-
-
-
- {selectedPage?.pageName || '섹션을 선택하세요'}
- {hasUnsavedChanges && (
-
- {pendingChanges.pages.length + pendingChanges.sections.length + pendingChanges.fields.length + pendingChanges.masterFields.length + pendingChanges.attributes.length}개 변경
-
- )}
-
- {selectedPage && (
-
- )}
-
- {/* 일반 섹션 */}
-
- ) : (
-
-
-
- {(() => {
- console.log('Rendering sections for page:', {
- pageId: selectedPage.id,
- pageName: selectedPage.pageName,
- totalSections: selectedPage.sections.length,
- nonBomSections: selectedPage.sections.filter(s => s.type !== 'bom').length,
- sections: selectedPage.sections.map(s => ({ id: s.id, title: s.title, type: s.type }))
- });
- return null;
- })()}
- {selectedPage.sections.length === 0 ? (
- {
- moveSection(dragIndex, hoverIndex);
- }}
- onDelete={() => {
- if (confirm('이 섹션과 모든 항목을 삭제하시겠습니까?')) {
- deleteSection(selectedPage.id, section.id);
- toast.success('섹션이 삭제되었습니다');
- }
- }}
- onEditTitle={handleEditSectionTitle}
- editingSectionId={editingSectionId}
- editingSectionTitle={editingSectionTitle}
- setEditingSectionTitle={setEditingSectionTitle}
- setEditingSectionId={setEditingSectionId}
- handleSaveSectionTitle={handleSaveSectionTitle}
- >
- {/* BOM 타입 섹션 */}
- {section.type === 'bom' ? (
- {
- const newBomItems = [...(section.bomItems || []), {
- ...item,
- id: `BOM-${Date.now()}`,
- createdAt: new Date().toISOString().split('T')[0]
- }];
- updateSection(selectedPage.id, section.id, { type: 'bom', bomItems: newBomItems });
- toast.success('BOM 항목이 추가되었습니다');
- }}
- onEditItem={(itemId, updatedItem) => {
- const newBomItems = (section.bomItems || []).map(item =>
- item.id === itemId ? { ...item, ...updatedItem } : item
- );
- updateSection(selectedPage.id, section.id, { type: 'bom', bomItems: newBomItems });
- toast.success('BOM 항목이 수정되었습니다');
- }}
- onDeleteItem={(itemId) => {
- const newBomItems = (section.bomItems || []).filter(item => item.id !== itemId);
- updateSection(selectedPage.id, section.id, { type: 'bom', bomItems: newBomItems });
- toast.success('BOM 항목이 삭제되었습니다');
- }}
- />
- ) : (
- /* 일반 필드 타입 섹션 */
- <>
- {section.fields.length === 0 ? (
- moveField(section.id, dragIndex, hoverIndex)}
- onDelete={() => {
- if (confirm('이 항목을 삭제하시겠습니까?')) {
- deleteField(selectedPage.id, section.id, field.id);
- toast.success('항목이 삭제되었습니다');
- }
- }}
- onEdit={() => handleEditField(section.id, field)}
- />
- ))
- )}
-
-
- )}
-
- );
- })
- )}
-
- 섹션을 추가해주세요
- ) : ( - selectedPage.sections - .map((section, index) => { - console.log('Rendering section:', section.title, 'type:', section.type, 'bomItems:', section.bomItems); - return ( -항목을 추가해주세요
- ) : ( - section.fields - .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)) - .map((field, fieldIndex) => ( -왼쪽에서 섹션을 선택하세요
- )} -
- {/* 대분류 추가 */}
-
-
-
-
- {/* 대분류 목록 */}
- 대분류 추가
-
- setNewCategory1(e.target.value)}
- />
-
-
-
- {Object.keys(itemCategories).map(cat1 => (
-
-
-
- ))}
-
-
-
- {/* 중분류 추가 */}
- {cat1}
- -
-
-
- {/* 중분류 목록 */}
-
- {
- setSelectedCategory1(cat1);
- setNewCategory2(e.target.value);
- }}
- />
-
-
-
- {Object.keys(itemCategories[cat1] || {}).map(cat2 => (
-
-
-
- ))}
-
-
-
- {/* 소분류 추가 */}
- {cat2}
- -
-
-
- {/* 소분류 목록 */}
-
- {
- setSelectedCategory1(cat1);
- setSelectedCategory2(cat2);
- setNewCategory3(e.target.value);
- }}
- />
-
-
-
- {(itemCategories[cat1]?.[cat2] || []).map((cat3, idx) => (
-
- {cat3}
-
-
- ))}
-
- - 이 작업은 되돌릴 수 없습니다. -
- 이 작업은 되돌릴 수 없습니다. -