feat(테이블타입): 헤더 표시명/설명 inline click-to-edit (Google Docs 패턴) #17

2026-05-14T01:53:04Z

johngreen commented

2026-05-14 01:53:04 +00:00

요약

테이블 타입 관리 페이지 중앙 헤더 UX 개선. 기존의 "헤딩 + 옆에 input box 2개 + 전체 저장 버튼" 구조를 Google Docs / Notion 식 inline click-to-edit 로 교체.

기존 문제

같은 값을 헤딩과 input 양쪽에서 중복 표시
항상 폼처럼 보여 컬럼 그리드 시선을 뺏음
라벨만 바꾸려는 의도가 "전체 설정 저장" 에 묶여 흐려짐

변경

헤딩 텍스트 자체를 클릭하면 그 자리에서 input 으로 변신
blur 또는 Enter → PUT /label 즉시 저장, Esc → 취소
hover 시 muted/60 배경 + cursor: text + title tooltip 으로 affordance
설명 비어있으면 + 설명 추가 힌트 표시
표시명은 비울 수 없게 가드 (toast.error)
"전체 설정 저장" → "컬럼 설정 저장" 으로 책임 분리 (헤더는 inline 즉시 저장)

키보드 접근성

Tab → 헤딩 focus → Enter/Space 편집 모드 진입
Esc 취소, Enter 커밋 (blur 트리거)

Test plan

표시명 헤딩 클릭 → input 으로 변환, 수정 후 Enter → 토스트 + DB 반영
설명 비어있을 때 + 설명 추가 표시, 클릭 → input
Esc 로 취소 시 원본 값 유지
표시명 비우고 blur 시 toast.error
컬럼 설정 저장 버튼이 라벨/설명에 영향 주지 않음

## 요약 테이블 타입 관리 페이지 중앙 헤더 UX 개선. 기존의 "헤딩 + 옆에 input box 2개 + 전체 저장 버튼" 구조를 Google Docs / Notion 식 inline click-to-edit 로 교체. ## 기존 문제 - 같은 값을 헤딩과 input 양쪽에서 중복 표시 - 항상 폼처럼 보여 컬럼 그리드 시선을 뺏음 - 라벨만 바꾸려는 의도가 "전체 설정 저장" 에 묶여 흐려짐 ## 변경 - 헤딩 텍스트 자체를 클릭하면 그 자리에서 input 으로 변신 - **blur 또는 Enter → PUT /label 즉시 저장**, Esc → 취소 - hover 시 muted/60 배경 + `cursor: text` + title tooltip 으로 affordance - 설명 비어있으면 `+ 설명 추가` 힌트 표시 - 표시명은 비울 수 없게 가드 (toast.error) - "전체 설정 저장" → "컬럼 설정 저장" 으로 책임 분리 (헤더는 inline 즉시 저장) ## 키보드 접근성 - Tab → 헤딩 focus → Enter/Space 편집 모드 진입 - Esc 취소, Enter 커밋 (blur 트리거) ## Test plan - [ ] 표시명 헤딩 클릭 → input 으로 변환, 수정 후 Enter → 토스트 + DB 반영 - [ ] 설명 비어있을 때 `+ 설명 추가` 표시, 클릭 → input - [ ] Esc 로 취소 시 원본 값 유지 - [ ] 표시명 비우고 blur 시 toast.error - [ ] 컬럼 설정 저장 버튼이 라벨/설명에 영향 주지 않음

johngreen added 1 commit 2026-05-14 01:53:04 +00:00

feat(테이블타입): 헤더 표시명/설명 inline click-to-edit (Google Docs 패턴) ca241c017d

기존 "헤딩 + 옆에 input box 2개 + 저장 버튼" 구조의 UX 문제:
- 같은 값을 헤딩과 input 양쪽에서 중복 표시
- 항상 폼처럼 보여 컬럼 그리드 시선을 뺏음
- 라벨만 바꾸려는 의도가 "전체 설정 저장" 에 묶여 흐려짐

변경: 헤딩 텍스트 자체를 클릭하면 그 자리에서 input 으로 변신
(Google Docs 문서 제목 / Notion 패턴).
- blur 또는 Enter → PUT /label 즉시 저장
- Esc → 취소
- hover 시 muted/60 배경, cursor: text, title tooltip 으로 affordance
- 설명이 비어 있으면 "+ 설명 추가" 힌트 표시
- 표시명은 비울 수 없게 가드 (toast.error)

"전체 설정 저장" → "컬럼 설정 저장" 으로 책임 분리:
- 헤더 라벨/설명: inline 즉시 저장
- 컬럼 input_type/web_type/detail_settings 등 일괄: 버튼

키보드 접근성:
- Tab 으로 헤딩에 focus → Enter/Space 로 편집 모드
- Esc 로 취소, Enter 로 커밋 (blur 트리거)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

johngreen merged commit 0552425f47 into main

2026-05-14 01:53:05 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: gbpark/invyone#17