feat: 테이블 리스트 컴포넌트 제목 편집 기능 추가

- TableListConfigPanel에 테이블 제목 입력 필드 추가
- 제목 표시 우선순위: 사용자 입력 제목 → 테이블 라벨명 → 테이블명
- 사용자가 제목을 비워두면 자동으로 테이블 라벨명 또는 테이블명 표시
- 화면 편집기에서 테이블 제목을 자유롭게 수정 가능
This commit is contained in:
kjs 2025-10-31 11:10:09 +09:00
parent 0b30c76b35
commit 3d6ce26f9d
2 changed files with 30 additions and 2 deletions

View File

@ -874,7 +874,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<div {...domProps}>
{tableConfig.showHeader && (
<div className="px-4 py-3 border-b border-border sm:px-6 sm:py-4">
<h2 className="text-base font-semibold text-foreground sm:text-lg">{tableConfig.title || tableLabel}</h2>
<h2 className="text-base font-semibold text-foreground sm:text-lg">
{tableConfig.title || tableLabel || finalSelectedTable}
</h2>
</div>
)}
@ -936,7 +938,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
{/* 헤더 */}
{tableConfig.showHeader && (
<div className="px-4 py-3 border-b border-border flex-shrink-0 sm:px-6 sm:py-4">
<h2 className="text-base font-semibold text-foreground sm:text-lg">{tableConfig.title || tableLabel}</h2>
<h2 className="text-base font-semibold text-foreground sm:text-lg">
{tableConfig.title || tableLabel || finalSelectedTable}
</h2>
</div>
)}

View File

@ -727,6 +727,30 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
<div className="text-sm font-medium"> </div>
<div className="space-y-6">
{/* 테이블 제목 설정 */}
<div className="space-y-3">
<div>
<h3 className="text-sm font-semibold"> </h3>
</div>
<hr className="border-border" />
<div className="space-y-1">
<Label htmlFor="tableTitle" className="text-xs">
( )
</Label>
<Input
id="tableTitle"
type="text"
value={config.title || ""}
onChange={(e) => handleChange("title", e.target.value)}
placeholder="테이블 제목 입력..."
className="h-8 text-xs"
/>
<p className="text-[10px] text-muted-foreground">
우선순위: 사용자
</p>
</div>
</div>
{/* 가로 스크롤 및 컬럼 고정 */}
<div className="space-y-3">
<div>