From d8901553549532d46e53b146cefd7032628615e0 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Wed, 11 Mar 2026 16:56:36 +0900
Subject: [PATCH] feat: implement packaging routes and enhance table
 configuration UI

- Added a new `packagingRoutes.ts` file to manage packaging and loading information APIs, with authentication middleware applied.
- Enhanced the `TableListConfigPanel` and `ColumnsConfigPanel` components to include editable column locking functionality, allowing users to toggle editability with visual feedback.
- Improved user experience by providing clear indications of column editability status through lock/unlock icons.

Made-with: Cursor
---
 backend-node/src/routes/packagingRoutes.ts    | 10 ++++++
 .../v2-table-list/TableListConfigPanel.tsx    | 33 ++++++++++++++++++-
 .../config-panels/ColumnsConfigPanel.tsx      | 33 ++++++++++++++++++-
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 backend-node/src/routes/packagingRoutes.ts

diff --git a/backend-node/src/routes/packagingRoutes.ts b/backend-node/src/routes/packagingRoutes.ts
new file mode 100644
index 00000000..f501269e
--- /dev/null
+++ b/backend-node/src/routes/packagingRoutes.ts
@@ -0,0 +1,10 @@
+import { Router } from "express";
+import { authenticateToken } from "../middleware/authMiddleware";
+
+const router = Router();
+
+router.use(authenticateToken);
+
+// TODO: 포장/적재정보 관리 API 구현 예정
+
+export default router;
diff --git a/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
index 759c57dd..c5f1ad54 100644
--- a/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
@@ -1508,7 +1508,38 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                               />
                               <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                               <span className="truncate text-xs">{column.columnLabel}</span>
-                              <span className="ml-auto text-[10px] text-primary/80">
+                              {isAlreadyAdded && (
+                                <button
+                                  type="button"
+                                  title={
+                                    config.columns?.find((c) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false
+                                      ? "편집 잠금 (클릭하여 해제)"
+                                      : "편집 가능 (클릭하여 잠금)"
+                                  }
+                                  className={cn(
+                                    "ml-auto flex-shrink-0 rounded p-0.5 transition-colors",
+                                    config.columns?.find((c) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false
+                                      ? "text-destructive hover:bg-destructive/10"
+                                      : "text-muted-foreground hover:bg-muted",
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    const currentCol = config.columns?.find((c) => c.columnName === matchingJoinColumn.joinAlias);
+                                    if (currentCol) {
+                                      updateColumn(matchingJoinColumn.joinAlias, {
+                                        editable: currentCol.editable === false ? undefined : false,
+                                      });
+                                    }
+                                  }}
+                                >
+                                  {config.columns?.find((c) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false ? (
+                                    <Lock className="h-3 w-3" />
+                                  ) : (
+                                    <Unlock className="h-3 w-3" />
+                                  )}
+                                </button>
+                              )}
+                              <span className={cn("text-[10px] text-primary/80", !isAlreadyAdded && "ml-auto")}>
                                 {column.inputType || column.dataType}
                               </span>
                             </div>
diff --git a/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx
index 22817ee0..d8905f76 100644
--- a/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx
@@ -457,7 +457,38 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                             />
                             <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                             <span className="truncate text-xs">{column.columnLabel}</span>
-                            <span className="ml-auto text-[10px] text-primary/80">
+                            {isAlreadyAdded && (
+                              <button
+                                type="button"
+                                title={
+                                  config.columns?.find((c: ColumnConfig) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false
+                                    ? "편집 잠금 (클릭하여 해제)"
+                                    : "편집 가능 (클릭하여 잠금)"
+                                }
+                                className={cn(
+                                  "ml-auto flex-shrink-0 rounded p-0.5 transition-colors",
+                                  config.columns?.find((c: ColumnConfig) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false
+                                    ? "text-destructive hover:bg-destructive/10"
+                                    : "text-muted-foreground hover:bg-muted",
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  const currentCol = config.columns?.find((c: ColumnConfig) => c.columnName === matchingJoinColumn.joinAlias);
+                                  if (currentCol) {
+                                    onUpdateColumn(matchingJoinColumn.joinAlias, {
+                                      editable: currentCol.editable === false ? undefined : false,
+                                    });
+                                  }
+                                }}
+                              >
+                                {config.columns?.find((c: ColumnConfig) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false ? (
+                                  <Lock className="h-3 w-3" />
+                                ) : (
+                                  <Unlock className="h-3 w-3" />
+                                )}
+                              </button>
+                            )}
+                            <span className={cn("text-[10px] text-primary/80", !isAlreadyAdded && "ml-auto")}>
                               {column.inputType || column.dataType}
                             </span>
                           </div>