docs: add ERP low-code development guidelines and component usage rules

frontend/components/common/TableSettingsModal.tsx

@@ -107,19 +107,25 @@ export function loadTableSettings(settingsId: string): TableSettings | null {
   }
 }
 
-/** 저장된 컬럼 순서/설정을 API 컬럼과 병합 */
+/** 저장된 컬럼 순서/설정을 API 컬럼과 병합 (활성 컬럼 위, 비활성 아래) */
 function mergeColumns(fresh: ColumnSetting[], saved: ColumnSetting[]): ColumnSetting[] {
   const savedMap = new Map(saved.map((s) => [s.columnName, s]));
-  const ordered: ColumnSetting[] = [];
-  // 저장된 순서대로
+  const visible: ColumnSetting[] = [];
+  const hidden: ColumnSetting[] = [];
+  // 저장된 순서대로 복원하되, 활성/비활성 분리
   for (const s of saved) {
     const f = fresh.find((c) => c.columnName === s.columnName);
-    if (f) ordered.push({ ...f, visible: s.visible, width: s.width });
+    if (f) {
+      const merged = { ...f, visible: s.visible, width: s.width };
+      if (s.visible) visible.push(merged);
+      else hidden.push(merged);
+    }
   }
   // 새로 추가된 컬럼은 맨 뒤에
   for (const f of fresh) {
-    if (!savedMap.has(f.columnName)) ordered.push(f);
+    if (!savedMap.has(f.columnName)) hidden.push(f);
   }
+  const ordered = [...visible, ...hidden];
   return ordered;
 }
 
@@ -162,13 +168,7 @@ function SortableColumnRow({
         <GripVertical className="h-4 w-4" />
       </button>
 
-      {/* 표시 체크박스 */}
-      <Checkbox
-        checked={col.visible}
-        onCheckedChange={() => onToggleVisible(col._idx)}
-      />
-
-      {/* 표시 토글 (Switch) */}
+      {/* 표시 토글 */}
       <Switch
         checked={col.visible}
         onCheckedChange={() => onToggleVisible(col._idx)}
@@ -287,7 +287,19 @@ export function TableSettingsModal({
       // localStorage에서 저장된 설정 복원
       const saved = loadTableSettings(settingsId);
       if (saved) {
-        setTempColumns(mergeColumns(freshColumns, saved.columns));
+        let merged = mergeColumns(freshColumns, saved.columns);
+        // defaultVisibleKeys 순서로 활성 컬럼 재정렬
+        if (defaultVisibleKeys) {
+          const visibleInOrder = defaultVisibleKeys
+            .map((key) => merged.find((c) => c.columnName === key && c.visible))
+            .filter((c): c is ColumnSetting => !!c);
+          const visibleExtra = merged.filter(
+            (c) => c.visible && !defaultVisibleKeys.includes(c.columnName),
+          );
+          const hidden = merged.filter((c) => !c.visible);
+          merged = [...visibleInOrder, ...visibleExtra, ...hidden];
+        }
+        setTempColumns(merged);
         setTempFilters(freshFilters.map((f) => {
           const s = saved.filters?.find((sf) => sf.columnName === f.columnName);
           return s ? { ...f, enabled: s.enabled, filterType: s.filterType, width: s.width } : f;
@@ -326,10 +338,12 @@ export function TableSettingsModal({
     onOpenChange(false);
   };
 
-  // 컬럼 설정 초기화
+  // 컬럼 설정 초기화 (defaultVisibleKeys 기준으로 리셋)
   const handleResetColumns = () => {
     setTempColumns(defaultColumns.map((c) => ({ ...c })));
     setTempFrozenCount(0);
+    // localStorage도 제거하여 완전 초기화
+    localStorage.removeItem(getStorageKey(settingsId));
   };
 
   // ===== 컬럼 설정 핸들러 =====