From 8da48bfe9c3cf253cd7cecfec8c08beb6d20b2c0 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 16 Mar 2026 18:43:42 +0900
Subject: [PATCH] feat: enhance V2TableListConfigPanel with editable column
 locking feature

- Added a button to toggle the editable state of columns in the V2TableListConfigPanel, allowing users to lock or unlock editing for specific columns.
- Implemented visual indicators (lock/unlock icons) to represent the editable state of each column, improving user interaction and clarity.
- Enhanced the button's tooltip to provide context on the current state (editable or locked) when hovered.

These updates aim to improve the usability of the table configuration panel by providing users with more control over column editing capabilities.

Made-with: Cursor
---
 .../config-panels/V2TableListConfigPanel.tsx  | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/components/v2/config-panels/V2TableListConfigPanel.tsx b/frontend/components/v2/config-panels/V2TableListConfigPanel.tsx
index a815b41c..8af58507 100644
--- a/frontend/components/v2/config-panels/V2TableListConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2TableListConfigPanel.tsx
@@ -957,7 +957,38 @@ export const V2TableListConfigPanel: React.FC<V2TableListConfigPanelProps> = ({
                                   />
                                   <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>