feat(테이블타입): DBeaver 식 탭 분리 + 입력 타입 아이콘 lucide 통일 #24

Merged
johngreen merged 3 commits from johngreen into main 2026-05-21 10:22:55 +00:00
Contributor

Summary

1) 컬럼 그리드 DBeaver 식 탭 분리

  • 기존 "참조/설정" 컬럼이 두 가지 역할 (참조 대상 표시 vs default_value 표시) 을 한 셀에 욱여넣어서 text/number/date 행에선 대부분 빈 칸 → 시각 노이즈 큼
  • DBeaver 의 Columns / Foreign Keys 탭 분리 패턴 차용:
    • 컬럼 탭 (기본) — 컬럼 본연의 속성만 (라벨 / 타입 / PK NN IDX UQ / ⋯). 참조/설정 컬럼 제거, 라벨 셀 폭 확보
    • 참조 탭 — entity / code / category / numbering 컬럼만 모아 표 형태로. 종류별 그룹 헤더 + (소스 컬럼 / 참조 종류 / 참조 대상) 3컬럼. code 행에서 누락되어있던 코드 그룹 표시도 같이 채움
  • ReferenceListView 신규 컴포넌트

2) 입력 타입 아이콘 lucide 로 통일

  • 기존엔 iconChar 문자열에 T(글자) / #(기호) / {}(코드) / 📎(emoji) 식으로 letter/symbol/emoji 혼재
  • 13개 입력 타입 전부 lucide 아이콘으로 매핑 (Type / Hash / Calendar / Braces / Link2 등)
  • FALLBACK_TYPE_CONFIG export 해서 legacy/unknown 도 같은 인터페이스

3) CLAUDE.md 컨벤션 추가

  • UI/구조 변경 제안 시 ASCII Before/After 그림 의무화 — 글로만 설명 금지

Test plan

  • 테이블 선택 → 컬럼 탭 (기본 활성) 에 컬럼 행 표시 확인. 참조/설정 컬럼 사라졌는지
  • 참조 탭 클릭 → entity/code/numbering 컬럼만 종류별 그룹으로 표시
  • 참조 탭에서 code 행에 코드 그룹명 (코드: DEFECT_TYPE) 보이는지
  • 양 탭에서 행 클릭 시 우측 상세 패널 슬라이드 in 동일하게 동작
  • 상세 패널 타입 선택 카드 13개 아이콘 모두 lucide 로 통일됐는지 (T, # 같은 글자 안 보여야 함)
  • ⋯ 메뉴 → 컬럼 삭제 여전히 동작 (#23 회귀 없는지)
## Summary ### 1) 컬럼 그리드 DBeaver 식 탭 분리 - 기존 "참조/설정" 컬럼이 두 가지 역할 (참조 대상 표시 vs default_value 표시) 을 한 셀에 욱여넣어서 text/number/date 행에선 대부분 `—` 빈 칸 → 시각 노이즈 큼 - DBeaver 의 Columns / Foreign Keys 탭 분리 패턴 차용: - **컬럼 탭** (기본) — 컬럼 본연의 속성만 (라벨 / 타입 / PK NN IDX UQ / ⋯). 참조/설정 컬럼 제거, 라벨 셀 폭 확보 - **참조 탭** — entity / code / category / numbering 컬럼만 모아 표 형태로. 종류별 그룹 헤더 + (소스 컬럼 / 참조 종류 / 참조 대상) 3컬럼. code 행에서 누락되어있던 코드 그룹 표시도 같이 채움 - `ReferenceListView` 신규 컴포넌트 ### 2) 입력 타입 아이콘 lucide 로 통일 - 기존엔 `iconChar` 문자열에 `T`(글자) / `#`(기호) / `{}`(코드) / `📎`(emoji) 식으로 letter/symbol/emoji 혼재 - 13개 입력 타입 전부 lucide 아이콘으로 매핑 (`Type` / `Hash` / `Calendar` / `Braces` / `Link2` 등) - `FALLBACK_TYPE_CONFIG` export 해서 legacy/unknown 도 같은 인터페이스 ### 3) CLAUDE.md 컨벤션 추가 - UI/구조 변경 제안 시 ASCII Before/After 그림 의무화 — 글로만 설명 금지 ## Test plan - [ ] 테이블 선택 → 컬럼 탭 (기본 활성) 에 컬럼 행 표시 확인. 참조/설정 컬럼 사라졌는지 - [ ] 참조 탭 클릭 → entity/code/numbering 컬럼만 종류별 그룹으로 표시 - [ ] 참조 탭에서 code 행에 코드 그룹명 (`코드: DEFECT_TYPE`) 보이는지 - [ ] 양 탭에서 행 클릭 시 우측 상세 패널 슬라이드 in 동일하게 동작 - [ ] 상세 패널 타입 선택 카드 13개 아이콘 모두 lucide 로 통일됐는지 (T, # 같은 글자 안 보여야 함) - [ ] ⋯ 메뉴 → 컬럼 삭제 여전히 동작 (#23 회귀 없는지)
johngreen added 3 commits 2026-05-21 10:22:52 +00:00
기존 컨벤션에 § 💬 추가. 글로만 설명하면 사용자가 이해 못 함 — 변경 전/후 두 그림을 무조건
그려서 보여줘야 함. 코드 인용 (file:line, CSS class) 최소화하고 영문/SQL/전문용어 풀어쓰기.
3줄 패턴 (무슨 일 / 사용자 영향 / 어떻게 고치는지) 권장.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
기존엔 iconChar 문자열에 'T'(글자) / '#'(기호) / '{}'(코드) / '📎'(emoji) 식으로 일관성 없게
표시. 카드 그리드에서 시각 노이즈 큼.

- TypeColorConfig.iconChar(string) → Icon(LucideIcon) 으로 교체
- 13개 입력 타입 전부 lucide 아이콘 매핑 (Type/Hash/Calendar/Braces/Link2 등)
- FALLBACK_TYPE_CONFIG export 해서 TypeOverviewStrip 의 legacy/unknown 도 같은 인터페이스 따름

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ColumnGrid 의 "참조/설정" 컬럼이 두 가지 다른 역할 (entity/code/numbering 의 참조 대상 표시
vs 그 외 타입의 default_value 표시) 을 한 셀에 욱여넣고 있었음. text/number/date 행에선
대부분 — 빈 칸. 진단 결과는 architect 가 동의한 대로 컬럼 통째 제거가 답.

DBeaver 의 Columns / Foreign Keys 탭 분리 패턴 차용:
- 컬럼 탭 (기본 활성) — 컬럼 본연의 속성만 (라벨 / 타입 / PK NN IDX UQ / ⋯). 참조/설정 컬럼
  통째 제거, grid 6→5 컬럼으로 슬림화. 라벨 셀 폭 1fr 로 확보
- 참조 탭 — entity / code / category / numbering 컬럼만 모아 표 형태로. 종류별 그룹 헤더
  + (소스 컬럼 / 참조 종류 / 참조 대상) 3컬럼 그리드. code 행에서 누락되어있던 코드 그룹
  표시도 같이 채움

ReferenceListView 신규 컴포넌트로 분리. 사용자가 행 클릭하면 우측 상세 패널 슬라이드 in
하는 기존 동작은 양 탭 모두 동일.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
johngreen merged commit 7e71730015 into main 2026-05-21 10:22:55 +00:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: gbpark/invyone#24