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

@@ -0,0 +1,10 @@
+import { Router } from "express";
+import { authenticateToken } from "../middleware/authMiddleware";
+
+const router = Router();
+
+router.use(authenticateToken);
+
+// TODO: 포장/적재정보 관리 API 구현 예정
+
+export default router;

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>

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>