From 7dbeccc1822882fc6ee0e870bb3639da90781e79 Mon Sep 17 00:00:00 2001
From: johngreen <ramses7448@gmail.com>
Date: Fri, 22 May 2026 13:09:08 +0900
Subject: [PATCH] =?UTF-8?q?feat(=ED=85=8C=EC=9D=B4=EB=B8=94=ED=83=80?=
 =?UTF-8?q?=EC=9E=85):=20=EC=99=80=EC=9D=B4=EB=93=9C=20=EB=AA=A8=EB=8B=88?=
 =?UTF-8?q?=ED=84=B0=EC=97=90=EC=84=9C=20=EC=9A=B0=EC=B8=A1=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=8C=A8=EB=84=90=20=EA=B3=A0=EC=A0=95=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=20=E2=80=94=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20?=
 =?UTF-8?q?in=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

기존엔 컬럼 행 클릭해야 우측 패널이 슬라이드로 들어옴. 와이드 모니터에선 우측에 큰 빈 공간이
남는데도 패널이 숨어있어 화면이 흔들려 보임 → 일관성 ↓

와이드(xl 이상)에선 패널을 일반 flex child 로 고정해서 항상 표시. 좁은 화면은 기존
오버레이 슬라이드 유지 (가운데 영역 좁아지는 것 방지).

- page.tsx: 우측 패널 컨테이너에 xl: 상태로 relative + 슬라이드 무력화
- ColumnDetailPanel: 컬럼 선택 안 한 상태일 때 "컬럼을 선택해주세요" 빈 상태 안내 UI 추가

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../(main)/admin/systemMng/tableMngList/page.tsx |  5 ++++-
 .../admin/table-type/ColumnDetailPanel.tsx       | 16 ++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
index 4118f898..93228eb1 100644
--- a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
@@ -1772,11 +1772,14 @@ export default function TableManagementPage() {
           )}
         </div>
 
-        {/* 우측: 상세 패널 (overlay slide-in/out — 가운데 본문 위에 부드럽게 등장) */}
+        {/* 우측: 상세 패널
+            - 와이드 모니터 (xl 이상): 항상 보이는 고정 3-pane
+            - 좁은 화면: 기존처럼 슬라이드 in 오버레이 */}
         <div
           className={cn(
             "bg-card absolute top-0 right-0 bottom-0 z-20 flex w-[380px] flex-col overflow-hidden border-l shadow-2xl transition-transform duration-300 ease-out",
             selectedColumn ? "translate-x-0" : "pointer-events-none translate-x-full",
+            "xl:relative xl:z-0 xl:flex-shrink-0 xl:translate-x-0 xl:pointer-events-auto xl:shadow-none xl:transition-none",
           )}
         >
           <ColumnDetailPanel
diff --git a/frontend/components/admin/table-type/ColumnDetailPanel.tsx b/frontend/components/admin/table-type/ColumnDetailPanel.tsx
index d1556a11..c03e960a 100644
--- a/frontend/components/admin/table-type/ColumnDetailPanel.tsx
+++ b/frontend/components/admin/table-type/ColumnDetailPanel.tsx
@@ -113,8 +113,20 @@ export function ColumnDetailPanel({
   }, [referenceTableOptions, tables]);
 
   // early return 은 반드시 모든 hook 호출 뒤에 (Rules of Hooks).
-  // overlay 패턴으로 항상 마운트되므로 column null 케이스가 정상적으로 들어옴.
-  if (!column) return null;
+  // 컬럼 선택 안 한 상태에서도 패널이 항상 보이는 와이드 레이아웃 대응 — 빈 상태 안내 UI 표시.
+  if (!column) {
+    return (
+      <div className="flex h-full w-full flex-col items-center justify-center border-l bg-card px-6 text-center">
+        <div className="rounded-full bg-muted/60 p-4">
+          <Settings2 className="h-8 w-8 text-muted-foreground/60" />
+        </div>
+        <p className="mt-4 text-sm font-medium text-foreground">컬럼을 선택해주세요</p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          좌측 그리드에서 컬럼을 선택하면 여기에 상세 설정이 표시됩니다.
+        </p>
+      </div>
+    );
+  }
 
   return (
     <div className="flex h-full w-full flex-col border-l bg-card">
-- 
2.52.0