fix: 페이지 삭제 시 섹션 동기화 및 코드 정리

- 페이지 삭제 시 독립 섹션 목록 갱신 추가 (독립 엔티티 아키텍처) - ItemForm 컴포넌트 분리 완료 (1607→415줄, 74% 감소) - ItemMasterDataManagement 중복 코드 제거 (getInputTypeLabel 헬퍼) - 문서 업데이트 (realtime-sync-fixes.md) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-28 15:25:33 +09:00
parent 65a8510c0b
commit 9d0cb073ba
16 changed files with 1462 additions and 1435 deletions
--- a/src/components/auth/LoginPage.tsx
+++ b/src/components/auth/LoginPage.tsx
@@ -279,7 +279,7 @@ export function LoginPage() {
              >
                {isLoggingIn ? (
                  <>
-                    <div className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent mr-2"></div>
+                    <div className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-primary-foreground border-r-transparent mr-2"></div>
                    {t('loggingIn') || '로그인 중...'}
                  </>
                ) : (
--- a/src/components/auth/SignupPage.tsx
+++ b/src/components/auth/SignupPage.tsx
@@ -258,9 +258,9 @@ export function SignupPage() {
  if (isChecking) {
    return (
      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
-          <p className="text-muted-foreground">Loading...</p>
+        <div className="text-center space-y-4">
+          <div className="inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent"></div>
+          <p className="text-muted-foreground font-medium">불러오는 중...</p>
        </div>
      </div>
    );
--- a/src/components/business/Dashboard.tsx
+++ b/src/components/business/Dashboard.tsx
@@ -2,6 +2,7 @@

 import { Suspense } from "react";
 import { MainDashboard } from "./MainDashboard";
+import { PageLoadingSpinner } from "@/components/ui/loading-spinner";

 /**
 * Dashboard - 통합 대시보드 컴포넌트
@@ -14,20 +15,10 @@ import { MainDashboard } from "./MainDashboard";
 * - 권한 제어: 백엔드에서 역할에 따라 데이터 제한
 */

-// 공통 로딩 컴포넌트
-const DashboardLoading = () => (
-    <div className="flex items-center justify-center min-h-[60vh]">
-      <div className="text-center space-y-4">
-        <div className="inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent"></div>
-        <p className="text-muted-foreground font-medium">대시보드를 불러오는 중...</p>
-      </div>
-    </div>
-);
-
 export function Dashboard() {
  console.log('🎨 Dashboard component rendering...');
  return (
-      <Suspense fallback={<DashboardLoading />}>
+      <Suspense fallback={<PageLoadingSpinner text="대시보드를 불러오는 중..." />}>
        <MainDashboard />
      </Suspense>
  );
--- a/src/components/items/ItemForm/index.tsx
+++ b/src/components/items/ItemForm/index.tsx
--- a/src/components/items/ItemMasterDataManagement.tsx
+++ b/src/components/items/ItemMasterDataManagement.tsx
@@ -30,7 +30,6 @@ import {
  transformPagesResponse,
  transformSectionsResponse,
  transformSectionTemplatesResponse,
-  transformMasterFieldsResponse,
  transformFieldsResponse,
  transformCustomTabsResponse,
  transformUnitOptionsResponse,
@@ -78,41 +77,40 @@ const INPUT_TYPE_OPTIONS = [
  { value: 'textarea', label: '텍스트영역' }
 ];

+// 입력 타입 라벨 변환 헬퍼 함수 (중복 코드 제거)
+const getInputTypeLabel = (inputType: string | undefined): string => {
+  const labels: Record<string, string> = {
+    textbox: '텍스트박스',
+    number: '숫자',
+    dropdown: '드롭다운',
+    checkbox: '체크박스',
+    date: '날짜',
+    textarea: '텍스트영역',
+  };
+  return labels[inputType || ''] || '텍스트박스';
+};
+
 export function ItemMasterDataManagement() {
  const {
    itemPages,
    loadItemPages,
-    addItemPage: _addItemPage,
    updateItemPage,
    deleteItemPage,
-    addSectionToPage: _addSectionToPage,
    updateSection,
    deleteSection,
-    addFieldToSection: _addFieldToSection,
-    updateField: _updateField,
-    deleteField: _deleteField,
    reorderFields,
    itemMasterFields,
    loadItemMasterFields,
-    addItemMasterField: _addItemMasterField,
-    updateItemMasterField: _updateItemMasterField,
-    deleteItemMasterField: _deleteItemMasterField,
    sectionTemplates,
    loadSectionTemplates,
-    addSectionTemplate: _addSectionTemplate,
-    updateSectionTemplate: _updateSectionTemplate,
-    deleteSectionTemplate: _deleteSectionTemplate,
    resetAllData,
-    tenantId: _tenantId,
    // 2025-11-26 추가: 독립 엔티티 관리
    independentSections,
    loadIndependentSections,
-    independentFields: _independentFields,
    loadIndependentFields,
    refreshIndependentSections,
    refreshIndependentFields,
    linkSectionToPage,
-    unlinkSectionFromPage: _unlinkSectionFromPage,
    linkFieldToSection,
    unlinkFieldFromSection,
    getSectionUsage,
@@ -133,7 +131,7 @@ export function ItemMasterDataManagement() {
      pageCount: itemPages.length,
      pages: itemPages.map(p => ({
        id: p.id,
-        name: p.name,
+        name: p.page_name,
        sectionsCount: p.sections.length,
        sections: p.sections.map(s => ({
          id: s.id,
@@ -160,8 +158,7 @@ export function ItemMasterDataManagement() {
    isPageDialogOpen, setIsPageDialogOpen,
    newPageName, setNewPageName, newPageItemType, setNewPageItemType,
    editingPathPageId, setEditingPathPageId, editingAbsolutePath, setEditingAbsolutePath,
-    handleAddPage, handleDuplicatePage, handleDeletePage: _handleDeletePage,
-    handleUpdatePageName: _handleUpdatePageName, handleUpdateAbsolutePath: _handleUpdateAbsolutePath,
+    handleAddPage, handleDuplicatePage,
  } = pageManagement;

  const {
@@ -173,10 +170,9 @@ export function ItemMasterDataManagement() {
    newSectionType, setNewSectionType,
    sectionInputMode, setSectionInputMode,
    selectedSectionTemplateId, setSelectedSectionTemplateId,
-    expandedSections: _expandedSections, setExpandedSections: _setExpandedSections,
    handleAddSection, handleLinkTemplate,
    handleEditSectionTitle, handleSaveSectionTitle,
-    handleUnlinkSection, handleDeleteSection: _handleDeleteSection, toggleSection: _toggleSection,
+    handleUnlinkSection,
  } = sectionManagement;

  const {
@@ -202,7 +198,7 @@ export function ItemMasterDataManagement() {
    newFieldConditionFields, setNewFieldConditionFields,
    newFieldConditionSections, setNewFieldConditionSections,
    tempConditionValue, setTempConditionValue,
-    handleAddField, handleEditField, handleDeleteField: _handleDeleteField,
+    handleAddField, handleEditField,
  } = fieldManagement;

  const {
@@ -864,15 +860,7 @@ export function ItemMasterDataManagement() {
                    {unitOptions.map((option) => {
                      const columns = attributeColumns['units'] || [];
                      const hasColumns = columns.length > 0 && option.columnValues;
-                      const inputTypeLabel = 
-                        option.inputType === 'textbox' ? '텍스트박스' :
-                        option.inputType === 'number' ? '숫자' :
-                        option.inputType === 'dropdown' ? '드롭다운' :
-                        option.inputType === 'checkbox' ? '체크박스' :
-                        option.inputType === 'date' ? '날짜' :
-                        option.inputType === 'textarea' ? '텍스트영역' :
-                        '텍스트박스';
-                      
+
                      return (
                        <div key={option.id} className="p-4 border rounded hover:bg-gray-50 transition-colors">
                          <div className="flex items-start justify-between gap-3">
@@ -880,7 +868,7 @@ export function ItemMasterDataManagement() {
                              <div className="flex items-center gap-2">
                                <span className="font-medium text-base">{option.label}</span>
                                {option.inputType && (
-                                  <Badge variant="outline" className="text-xs">{inputTypeLabel}</Badge>
+                                  <Badge variant="outline" className="text-xs">{getInputTypeLabel(option.inputType)}</Badge>
                                )}
                                {option.required && (
                                  <Badge variant="destructive" className="text-xs">필수</Badge>
@@ -966,15 +954,7 @@ export function ItemMasterDataManagement() {
                    {materialOptions.map((option) => {
                      const columns = attributeColumns['materials'] || [];
                      const hasColumns = columns.length > 0 && option.columnValues;
-                      const inputTypeLabel = 
-                        option.inputType === 'textbox' ? '텍스트박스' :
-                        option.inputType === 'number' ? '숫자' :
-                        option.inputType === 'dropdown' ? '드롭다운' :
-                        option.inputType === 'checkbox' ? '체크박스' :
-                        option.inputType === 'date' ? '날짜' :
-                        option.inputType === 'textarea' ? '텍스트영역' :
-                        '텍스트박스';
-                      
+
                      return (
                        <div key={option.id} className="p-4 border rounded hover:bg-gray-50 transition-colors">
                          <div className="flex items-start justify-between gap-3">
@@ -982,7 +962,7 @@ export function ItemMasterDataManagement() {
                              <div className="flex items-center gap-2">
                                <span className="font-medium text-base">{option.label}</span>
                                {option.inputType && (
-                                  <Badge variant="outline" className="text-xs">{inputTypeLabel}</Badge>
+                                  <Badge variant="outline" className="text-xs">{getInputTypeLabel(option.inputType)}</Badge>
                                )}
                                {option.required && (
                                  <Badge variant="destructive" className="text-xs">필수</Badge>
@@ -1068,15 +1048,8 @@ export function ItemMasterDataManagement() {
                    {surfaceTreatmentOptions.map((option) => {
                      const columns = attributeColumns['surface'] || [];
                      const hasColumns = columns.length > 0 && option.columnValues;
-                      const inputTypeLabel = 
-                        option.inputType === 'textbox' ? '텍스트박스' :
-                        option.inputType === 'number' ? '숫자' :
-                        option.inputType === 'dropdown' ? '드롭다운' :
-                        option.inputType === 'checkbox' ? '체크박스' :
-                        option.inputType === 'date' ? '날짜' :
-                        option.inputType === 'textarea' ? '텍스트영역' :
-                        '텍스트박스';
-                      
+                      const inputTypeLabel = getInputTypeLabel(option.inputType);
+
                      return (
                        <div key={option.id} className="p-4 border rounded hover:bg-gray-50 transition-colors">
                          <div className="flex items-start justify-between gap-3">
@@ -1173,15 +1146,8 @@ export function ItemMasterDataManagement() {
                      <div className="space-y-3">
                        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                        {propertiesArray.map((property: any) => {
-                          const inputTypeLabel = 
-                            property.type === 'textbox' ? '텍스트박스' :
-                            property.type === 'number' ? '숫자' :
-                            property.type === 'dropdown' ? '드롭다운' :
-                            property.type === 'checkbox' ? '체크박스' :
-                            property.type === 'date' ? '날짜' :
-                            property.type === 'textarea' ? '텍스트영역' :
-                            '텍스트박스';
-                          
+                          const inputTypeLabel = getInputTypeLabel(property.type);
+
                          return (
                            <div key={property.id} className="p-4 border rounded hover:bg-gray-50 transition-colors">
                              <div className="flex items-start justify-between gap-3">
@@ -1283,15 +1249,8 @@ export function ItemMasterDataManagement() {
                        {currentOptions.map((option) => {
                          const columns = attributeColumns[currentTabKey] || [];
                          const hasColumns = columns.length > 0 && option.columnValues;
-                          const inputTypeLabel = 
-                            option.inputType === 'textbox' ? '텍스트박스' :
-                            option.inputType === 'number' ? '숫자' :
-                            option.inputType === 'dropdown' ? '드롭다운' :
-                            option.inputType === 'checkbox' ? '체크박스' :
-                            option.inputType === 'date' ? '날짜' :
-                            option.inputType === 'textarea' ? '텍스트영역' :
-                            '텍스트박스';
-                          
+                          const inputTypeLabel = getInputTypeLabel(option.inputType);
+
                          return (
                            <div key={option.id} className="p-4 border rounded hover:bg-gray-50 transition-colors">
                              <div className="flex items-start justify-between gap-3">
--- a/src/components/items/ItemMasterDataManagement/components/DraggableField.tsx
+++ b/src/components/items/ItemMasterDataManagement/components/DraggableField.tsx
@@ -5,7 +5,7 @@ import { Badge } from '@/components/ui/badge';
 import {
  GripVertical,
  Edit,
-  X
+  Unlink
 } from 'lucide-react';

 // 입력방식 옵션 (ItemMasterDataManagement에서 사용하는 상수)
@@ -111,8 +111,9 @@ export function DraggableField({ field, index, moveField, onDelete, onEdit }: Dr
          size="sm"
          variant="ghost"
          onClick={onDelete}
+          title="섹션에서 연결 해제"
        >
-          <X className="h-4 w-4 text-red-500" />
+          <Unlink className="h-4 w-4 text-orange-500" />
        </Button>
      </div>
    </div>
--- a/src/components/items/ItemMasterDataManagement/components/DraggableSection.tsx
+++ b/src/components/items/ItemMasterDataManagement/components/DraggableSection.tsx
@@ -8,7 +8,7 @@ import {
  Edit,
  Check,
  X,
-  Trash2
+  Unlink
 } from 'lucide-react';

 interface DraggableSectionProps {
@@ -120,7 +120,7 @@ export function DraggableSection({
              onClick={onDelete}
              title="페이지에서 연결 해제"
            >
-              <X className="h-4 w-4 text-gray-500" />
+              <Unlink className="h-4 w-4 text-orange-500" />
            </Button>
          </div>
        </div>
--- a/src/components/items/ItemTypeSelect.tsx
+++ b/src/components/items/ItemTypeSelect.tsx
@@ -17,7 +17,7 @@ import {
 import { type ItemType } from '@/types/item';

 interface ItemTypeSelectProps {
-  value?: ItemType;
+  value?: ItemType | '';
  onChange: (value: ItemType) => void;
  disabled?: boolean;
  required?: boolean;
@@ -56,7 +56,7 @@ export default function ItemTypeSelect({
      )}

      <Select
-        value={value}
+        value={value || undefined}
        onValueChange={onChange}
        disabled={disabled}
      >
--- a/src/components/ui/loading-spinner.tsx
+++ b/src/components/ui/loading-spinner.tsx
@@ -1,5 +1,6 @@
 // 로딩 스피너 컴포넌트
 // API 호출 중 로딩 상태 표시용
+// 대시보드 스타일로 통일 (border-4 border-solid border-primary border-r-transparent)

 import React from 'react';

@@ -15,15 +16,35 @@ export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
  text
 }) => {
  const sizeClasses = {
-    sm: 'h-4 w-4',
-    md: 'h-8 w-8',
-    lg: 'h-12 w-12'
+    sm: 'h-4 w-4 border-2',
+    md: 'h-8 w-8 border-4',
+    lg: 'h-12 w-12 border-4'
  };

  return (
    <div className={`flex flex-col items-center justify-center gap-2 ${className}`}>
-      <div className={`animate-spin rounded-full border-b-2 border-primary ${sizeClasses[size]}`} />
+      <div className={`animate-spin rounded-full border-solid border-primary border-r-transparent ${sizeClasses[size]}`} />
      {text && <p className="text-sm text-muted-foreground">{text}</p>}
    </div>
  );
+};
+
+// 페이지 레벨 로딩 스피너 (전체 화면 중앙 배치)
+interface PageLoadingSpinnerProps {
+  text?: string;
+  minHeight?: string;
+}
+
+export const PageLoadingSpinner: React.FC<PageLoadingSpinnerProps> = ({
+  text = '불러오는 중...',
+  minHeight = 'min-h-[60vh]'
+}) => {
+  return (
+    <div className={`flex items-center justify-center ${minHeight}`}>
+      <div className="text-center space-y-4">
+        <div className="inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent"></div>
+        <p className="text-muted-foreground font-medium">{text}</p>
+      </div>
+    </div>
+  );
 };