기존 shadcn 기본 Tabs 가 둥근 알약 (segmented control) 스타일이라 탭이 아니라 토글처럼
보임. 사용자가 "탭이 눈에 잘 안 띈다" 지적.
Gmail/Drive/GitHub/Vercel 공통 패턴인 underline 스타일로 변경:
- TabsList: 전체 폭 + 하단 1px 구분선, 배경/padding 제거
- TabsTrigger: 평면 + 활성 시 2px primary 밑줄 + 글자 색 강조, 비활성은 muted
- 글자 / 아이콘 크기 한 단계 ↑ (text-xs→text-sm, h-3.5→h-4)
- 비활성에도 transparent border-b-2 줘서 layout shift 방지
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
기존엔 컬럼 행 클릭해야 우측 패널이 슬라이드로 들어옴. 와이드 모니터에선 우측에 큰 빈 공간이
남는데도 패널이 숨어있어 화면이 흔들려 보임 → 일관성 ↓
와이드(xl 이상)에선 패널을 일반 flex child 로 고정해서 항상 표시. 좁은 화면은 기존
오버레이 슬라이드 유지 (가운데 영역 좁아지는 것 방지).
- page.tsx: 우측 패널 컨테이너에 xl: 상태로 relative + 슬라이드 무력화
- ColumnDetailPanel: 컬럼 선택 안 한 상태일 때 "컬럼을 선택해주세요" 빈 상태 안내 UI 추가
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>
- DdlService.dropColumn: ALTER TABLE ... DROP COLUMN (CASCADE 미사용 → FK 참조 시 Postgres 거부, DBeaver 동일)
- 시스템 테이블 / 예약 컬럼(id/created_date/updated_date/company_code/writer) 보호
- 같은 트랜잭션에서 table_type_columns / column_labels 메타 청소 + ddl_execution_log 기록
- DdlController: DELETE /api/ddl/tables/{table}/columns/{column} (SUPER_ADMIN 전용)
- ddlApi.dropColumn 헬퍼
- ColumnGrid: ... 버튼을 DropdownMenu 로 교체, "컬럼 삭제" destructive 메뉴 아이템
- page.tsx: 컬럼 삭제 확인 다이얼로그 + 핸들러, FK 거부 시 토스트로 안내
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
오늘 시리즈 후속 UX 다듬기 + 회귀 fix:
1) ColumnDetailPanel: dropdown key 중복 방어
- codeInfoOptions 에 placeholder "none" + 데이터 "none" 중복 시 React 가 'two children
with the same key, none' 으로 거부 → filter 로 사전 제거.
- refTableOpts 도 referenceTableOptions/tables 어디서든 중복 들어오면 같은 증상 →
Set 기반 dedupe.
2) ColumnDetailPanel: hook 순서 위반 수정
- 기존 'if (!column) return null' 이 useMemo(refTableOpts) 앞에 있어서
column null/존재 케이스마다 hook 호출 수가 달라짐 (Rules of Hooks 위반).
overlay 패턴 도입 후 column null 케이스가 자주 들어오면서 드러남.
- early return 을 모든 hook 뒤로 이동.
3) v5-layout.css 탭바: Chrome 식 outline 스타일
- 비활성 탭도 각자 outline 보이게 (border:1px solid var(--v5-border))로 카드처럼 분리.
- 활성 탭은 border + surface-hover 배경 + 위쪽 primary 1px inset 강조선.
- 위 모서리 rounded, margin-bottom:-1px 로 탭바 하단 border 와 seamless 연결.
4) 좌측 테이블 list 폰트 사이즈 축소
- 한글명 16px → 13px, 영문명 12px → 10.5px, 행 padding 7px → 6px.
- 280px 좁은 패널에 맞는 컴팩트 비율로 v5 컨벤션 정렬.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
기존 UX 이슈 3가지:
- 좌측 테이블 목록에서 체크박스 첫 선택 시 삭제 버튼이 등장하면서
헤더 영역 높이가 변해 아래 리스트가 살짝 밀림 (layout shift).
- 우측 디테일 패널이 conditional render 라 컬럼 클릭 시 가운데 본문이
380px 만큼 좁아져 컬럼명/라벨이 truncate 되며 "찌그러진" 느낌.
- 닫는 방법이 X 버튼뿐이라 토글 직관성 부족.
변경:
- 좌측 헤더 영역에 min-h-9 고정 — 삭제 버튼 등장해도 높이 고정, 리스트 안 흔들림.
- 우측 디테일 패널을 overlay 로 전환: absolute right-0 z-20 + shadow-2xl.
transition-transform + translate-x-{0|full} 로 300ms ease-out slide-in/out.
pointer-events-none 으로 닫혀있을 때 클릭 차단.
- 가운데 본문 width 변동 0 — 컬럼 클릭해도 안 좁아짐.
- 컬럼 토글: 같은 컬럼 재클릭 시 디테일 패널 닫힘. X 버튼/외부 트리거도 그대로 동작.
invyone admin 다른 화면들과의 일관성보다 가운데 본문 공간 보존이 우선이라
overlay 패턴 채택. 다른 화면(screenMngList, deptMngList)은 detail 영역이
처음부터 펼쳐진 2-pane 구조라 별개.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
기존 "헤딩 + 옆에 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>
테이블 타입 관리 페이지에서 PK/IDX 토글 후 UI 상태가 갱신되지 않던 버그.
1. Backend: TableManagementService.parseColumnArray
- PostgreSQL ARRAY_AGG 가 java.sql.Array (PgArray) 로 오는데
List/String 만 처리해서 항상 List.of() 반환 → columns 빈 배열
- 조치: java.sql.Array 분기 추가, arr.getArray() → Object[] → List<String>
2. Frontend: loadConstraints
- 백엔드는 result.put("primary_key", ...) 로 snake_case 반환
- 프론트가 data.primaryKey 로 camelCase 로 읽어 undefined → 항상 빈 PK
- 조치: data.primary_key 로 통일
이전 PR (#14) 의 IDX payload 수정과 합쳐, PK/IDX 토글이 API 호출/DB 적용/
UI 반영까지 한 사이클로 동작.
검증:
- gradle compileJava BUILD SUCCESSFUL
- solution.invyone.com 에서 IDX 토글 양방향 확인 예정
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
테이블 타입 관리 페이지에서 IDX 토글 / 테이블 라벨 저장이 400 에러로
조용히 실패하던 버그. 백엔드는 body.get("column_name") / get("index_type")
/ get("display_name") 등 snake_case 로 읽는데 프론트가 camelCase 로 보내고
있었음 (CLAUDE.md Map key snake_case 컨벤션 위반).
- POST /table-management/tables/:t/indexes
{ columnName, indexType, action } → { column_name, index_type, action }
- PUT /table-management/tables/:t/label
{ displayName } → { display_name }
PK 는 다이얼로그 확인 흐름, NN/UQ 는 key 가 맞아 영향 없음.
SUPER_ADMIN 으로 테스트 시 IDX 만 안 되던 증상 일치.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- input-type-mapping.ts: BaseInputType 10개 → UserSelectableInputType 8개 (박창현 image 2). vexplor_rps INPUT_TYPE_DETAIL_TYPES 포팅, select/checkbox/radio variant 를 code base 로 흡수
- input-types.ts: USER_SELECTABLE_INPUT_TYPE_ORDER/LABELS re-export (InputType 12개는 그대로)
- getDetailType.ts (신규): getWidgetVariants / getDefaultWidgetVariant helper
- 드롭다운 호출처 7개 8개 제한: ColumnDetailPanel, AddColumnModal, ColumnDefinitionTable, tableMngList/page.tsx, TableSettingModal, TypeOverviewStrip, types.ts
- ColumnDetailPanel: Legacy row 드롭다운 disabled + v5-glow-sm Alert 배너
- backward shim: BaseInputType / BASE_INPUT_TYPE_OPTIONS / getBaseInputType 등 V2/Properties/DetailSettingsPanel 호환
운영 DB 96.6% 가 이미 8개 안 (V0, 35,316 row). DB zero touch, mapper 5곳 보호.
spec: .omc/specs/deep-dive-table-type-storage-ui-separation.md (v3.2)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Added handling for unique and nullable column toggles in TableManagementPage, allowing for better column configuration.
- Updated ExcelUploadModal to include depth and ancestors in valid options for category values, enhancing the categorization process.
- Improved user feedback in ExcelUploadModal by clarifying success messages and ensuring proper handling of duplicate actions.
- Refactored category value flattening logic to maintain depth and ancestor information, improving data structure for better usability.
These enhancements aim to provide users with a more flexible and intuitive experience when managing table configurations and uploading Excel data.
- Increased the width of the left panel in the Table Management page from 240px to 280px for better visibility.
- Updated text sizes in the Table Management page for table names and descriptions to enhance readability.
- Expanded the width of the right panel in the Table Management page from 320px to 380px to accommodate additional content.
- Adjusted text sizes in the Column Detail Panel for improved clarity and consistency.
These changes aim to enhance the user interface and improve the overall user experience in the table management section.
- Introduced `onPkToggle` and `onIndexToggle` props to the `ColumnGrid` component, allowing users to toggle primary key and index states directly from the UI.
- Updated the `TableManagementPage` to handle these new toggle events, enhancing the interactivity and usability of the table management features.
These changes aim to improve the table configuration process within the ERP system, providing users with more control over their table structures.
- Implemented Korean prioritization in table filtering, allowing for better sorting of table names based on Korean characters.
- Updated the UI to a more compact design with a top bar for better accessibility and user experience.
- Added new button styles and functionalities for creating and duplicating tables, enhancing the overall management capabilities.
- Improved the column detail panel with clearer labeling and enhanced interaction for selecting data types and reference tables.
These changes aim to streamline the table management process and improve usability within the ERP system.
- Implemented a new API endpoint to retrieve numbering rules based on table and column names, enhancing the flexibility of numbering rule management.
- Added a new service method to handle the retrieval of numbering columns specific to a company, ensuring proper company code filtering.
- Updated the frontend to load and display numbering columns, allowing users to select and manage numbering rules effectively.
- Refactored existing logic to improve the handling of numbering rules, including fallback mechanisms for legacy data.
These changes enhance the functionality and user experience in managing numbering rules within the application.
- Added a new query parameter `deleteNumberingRules` to the `deleteScreenGroup` function, allowing users to specify if numbering rules should be deleted when a root screen group is removed.
- Updated the `deleteScreenGroup` controller to handle the deletion of numbering rules conditionally based on the new parameter.
- Enhanced the frontend `ScreenGroupTreeView` component to include a checkbox for users to confirm the deletion of numbering rules when deleting a root group, improving user control and clarity during deletion operations.
- Implemented appropriate warnings and messages to inform users about the implications of deleting numbering rules, ensuring better user experience and data integrity awareness.
- Replaced existing toast error messages with the new `showErrorToast` utility across multiple components, improving consistency in error reporting.
- Updated error messages to provide more specific guidance for users, enhancing the overall user experience during error scenarios.
- Ensured that all relevant error handling in batch management, external call configurations, cascading management, and screen management components now utilizes the new utility for better maintainability.
- Updated the `getCategoryColumnsByCompany` and `getCategoryColumnsByMenu` functions to exclude reference columns from category column queries, improving data integrity.
- Modified the `TableManagementService` to include `category_ref` in the column management logic, ensuring proper handling of category references during data operations.
- Enhanced the frontend components to support category reference mapping, allowing for better data representation and user interaction.
- Implemented category label conversion in various components to improve the display of category data, ensuring a seamless user experience.
- Updated ExcelUploadModal to automatically generate numbering codes when Excel values are empty, enhancing user experience during data uploads.
- Modified TableListComponent to display only the first image in case of multiple images, ensuring clarity in image representation.
- Improved data handling logic in TableListComponent to prevent unnecessary processing of string values.
- Added support for tracking updated detail records during the Excel upload process, improving feedback to users on the number of records inserted and updated.
- Updated response messages to provide clearer information about the processing results, including the number of newly inserted and updated detail records.
- Refactored related components to ensure consistency in handling detail updates and improve overall user experience during uploads.
- Implemented new API endpoints for managing primary keys and indexes in the table management system.
- Added functionality to retrieve table constraints, set primary keys, toggle indexes, and manage NOT NULL constraints.
- Enhanced the frontend to support PK and index management, including loading constraints and handling user interactions for toggling indexes and setting primary keys.
- Improved error handling and logging for better debugging and user feedback during these operations.
- 컬럼의 detailSettings을 동적으로 계산하여 다양한 입력 타입에 맞는 설정을 포함하도록 수정하였습니다.
- Numbering, Entity, Code 타입에 대한 추가 설정을 detailSettings에 포함시켜 데이터 저장 시 유연성을 높였습니다.
- V2Input 컴포넌트에서 채번 규칙 ID를 formData에 저장하는 기능을 추가하여 데이터 처리의 일관성을 강화하였습니다.
- 레이아웃 변환 함수에 메타데이터를 포함하여 레이아웃 정보를 더욱 풍부하게 하였습니다.
- 채번 규칙 저장 API에서 ruleName을 필수로 설정하고, tableName과 columnName은 선택적으로 변경하였습니다.
- 테이블 관리 페이지에서 자동 저장 기능을 제거하고, 전체 저장 버튼으로 저장하도록 수정하였습니다.
- 카테고리 컬럼 선택 시, 선택된 컬럼의 테이블 이름과 컬럼 이름을 함께 전달하도록 개선하였습니다.
johngreen
DDD1542
gbpark