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

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>