From 75f68834973ecdfd715849b51f47d10aeb9967be Mon Sep 17 00:00:00 2001
From: johngreen <ramses7448@gmail.com>
Date: Mon, 18 May 2026 08:06:07 +0900
Subject: [PATCH] =?UTF-8?q?fix(=ED=85=8C=EC=9D=B4=EB=B8=94=ED=83=80?=
 =?UTF-8?q?=EC=9E=85):=20=ED=97=A4=EB=8D=94=20=EC=9D=B8=EB=9D=BC=EC=9D=B8?=
 =?UTF-8?q?=20=ED=8E=B8=EC=A7=91=EC=9D=84=20=EB=AA=85=EC=8B=9C=EC=A0=81=20?=
 =?UTF-8?q?=EC=97=B0=ED=95=84=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=A7=84?=
 =?UTF-8?q?=EC=9E=85=EC=9C=BC=EB=A1=9C=20+=20=EC=BB=AC=EB=9F=BC=EB=AA=85?=
 =?UTF-8?q?=20=ED=8F=B0=ED=8A=B8=20=EC=B6=95=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1) 테이블 헤더 (표시명/설명) 편집 진입 방식 변경
   - 기존: 텍스트 div 자체가 role="button" + onClick 이라 무심코 클릭 시 input 으로 전환
   - 변경: 텍스트는 단순 span, 옆에 작은 Pencil 아이콘 버튼 추가. 그 버튼 클릭해야 편집 모드 진입.
   - 연필 아이콘은 평소 muted-foreground/50 톤, hover 시 진해짐 (group-hover 의존 X — Tailwind variant 캐시 회피).
   - 편집 모드 동작 (Enter / Esc / blur 커밋) 은 그대로.

2) ColumnGrid: 컬럼 라벨 text-sm → text-xs (14px → 12px)
   - 가운데 본문 컬럼 행이 너무 커보이던 문제. 좌측 list 폰트(이전 commit) 와 비례 맞춤.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../admin/systemMng/tableMngList/page.tsx     | 69 +++++++++----------
 .../admin/table-type/ColumnGrid.tsx           |  2 +-
 2 files changed, 34 insertions(+), 37 deletions(-)

diff --git a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
index 144203bd..1054a84f 100644
--- a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
@@ -20,6 +20,7 @@ import {
   Check,
   ChevronsUpDown,
   Loader2,
+  Pencil,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { LoadingSpinner } from "@/components/common/LoadingSpinner";
@@ -1551,26 +1552,24 @@ export default function TableManagementPage() {
                       className="h-7 -mx-2 px-2 text-[15px] font-bold tracking-tight"
                     />
                   ) : (
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        setEditingHeaderValue(tableLabel);
-                        setEditingHeaderField("label");
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
+                    <div className="group flex items-center gap-1.5">
+                      <span className="text-[15px] font-bold tracking-tight">
+                        {tableLabel || (
+                          <span className="text-muted-foreground/60">{selectedTable}</span>
+                        )}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => {
                           setEditingHeaderValue(tableLabel);
                           setEditingHeaderField("label");
-                        }
-                      }}
-                      className="-mx-2 cursor-text rounded px-2 py-0.5 text-[15px] font-bold tracking-tight hover:bg-muted/60 transition-colors"
-                      title="클릭하여 표시명 편집"
-                    >
-                      {tableLabel || (
-                        <span className="text-muted-foreground/60">{selectedTable}</span>
-                      )}
+                        }}
+                        className="text-muted-foreground/50 hover:text-foreground transition-colors"
+                        title="표시명 편집"
+                        aria-label="표시명 편집"
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </button>
                     </div>
                   )}
                   {/* table_name (코드, 편집 불가) */}
@@ -1596,26 +1595,24 @@ export default function TableManagementPage() {
                       className="mt-1 h-7 -mx-2 px-2 text-xs"
                     />
                   ) : (
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        setEditingHeaderValue(tableDescription);
-                        setEditingHeaderField("description");
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
+                    <div className="group mt-0.5 flex items-center gap-1.5">
+                      <span className="text-xs text-muted-foreground">
+                        {tableDescription || (
+                          <span className="text-muted-foreground/50">+ 설명 추가</span>
+                        )}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => {
                           setEditingHeaderValue(tableDescription);
                           setEditingHeaderField("description");
-                        }
-                      }}
-                      className="-mx-2 mt-0.5 cursor-text rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-muted/60 transition-colors"
-                      title="클릭하여 설명 편집"
-                    >
-                      {tableDescription || (
-                        <span className="text-muted-foreground/50">+ 설명 추가</span>
-                      )}
+                        }}
+                        className="text-muted-foreground/50 hover:text-foreground transition-colors"
+                        title="설명 편집"
+                        aria-label="설명 편집"
+                      >
+                        <Pencil className="h-2.5 w-2.5" />
+                      </button>
                     </div>
                   )}
                 </div>
diff --git a/frontend/components/admin/table-type/ColumnGrid.tsx b/frontend/components/admin/table-type/ColumnGrid.tsx
index e1f94a82..2a17b716 100644
--- a/frontend/components/admin/table-type/ColumnGrid.tsx
+++ b/frontend/components/admin/table-type/ColumnGrid.tsx
@@ -144,7 +144,7 @@ export function ColumnGrid({
 
                       {/* 라벨 + 컬럼명 (한글라벨 (영어명) 동시 표시) */}
                       <div className="min-w-0">
-                        <div className="truncate text-sm font-medium">
+                        <div className="truncate text-xs font-medium">
                           {column.display_name && column.display_name !== column.column_name
                             ? `${column.display_name} (${column.column_name})`
                             : column.column_name}