feat: Add extra columns support with configurable column widths and date formats#1
Conversation
…ate formats - Add ExtraColumn interface for custom columns with optional render functions - Add DateFormat type with 'locale' and 'iso8601' options for date formatting - Add nameColumnWidth, fromColumnWidth, toColumnWidth props for configurable column widths - Add extraColumns prop to Task interface for storing additional column data - Update TaskListHeader and TaskListTable components to support extra columns - Add date format selector in example with ISO 8601 (YYYY-MM-DD) support - Export new DateFormat and ExtraColumn types from main index - Add example demonstrating extra columns with status, assignee, priority, and budget - Update README with comprehensive documentation for new features BREAKING CHANGE: Task interface extended with optional extraColumns field
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthrough이번 변경은 Gantt 차트의 작업 목록(Task List)에 사용자 정의 컬럼(Extra Columns)을 추가하고, 기본 컬럼의 너비 및 날짜 포맷을 커스터마이즈할 수 있도록 기능을 확장합니다. 관련 타입, 컴포넌트, 스타일, 예제, 문서가 추가 및 수정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant ExtraColumnsApp
participant Gantt
participant TaskList
participant TaskListHeader
participant TaskListTable
App->>ExtraColumnsApp: 렌더링
ExtraColumnsApp->>Gantt: tasks, extraColumns, 컬럼너비, dateFormat 등 전달
Gantt->>TaskList: extraColumns, 컬럼너비, dateFormat 등 전달
TaskList->>TaskListHeader: extraColumns, 컬럼너비 전달
TaskList->>TaskListTable: extraColumns, 컬럼너비, dateFormat 전달
TaskListHeader-->>TaskList: 헤더 렌더링
TaskListTable-->>TaskList: 테이블 렌더링 (extraColumns 포함)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20분 Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (12)
README.md(1 hunks)example/src/App.tsx(2 hunks)example/src/ExtraColumnsApp.tsx(1 hunks)example/src/extra-columns-helper.tsx(1 hunks)example/src/index.css(1 hunks)package.json(2 hunks)src/components/gantt/gantt.tsx(2 hunks)src/components/task-list/task-list-header.tsx(4 hunks)src/components/task-list/task-list-table.tsx(6 hunks)src/components/task-list/task-list.tsx(6 hunks)src/index.tsx(1 hunks)src/types/public-types.ts(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/components/task-list/task-list.tsx (2)
src/index.tsx (2)
ExtraColumn(6-6)DateFormat(7-7)src/types/public-types.ts (2)
ExtraColumn(16-21)DateFormat(14-14)
src/components/task-list/task-list-header.tsx (3)
src/index.tsx (1)
ExtraColumn(6-6)src/types/public-types.ts (1)
ExtraColumn(16-21)example/src/extra-columns-helper.tsx (1)
extraColumns(117-172)
src/components/task-list/task-list-table.tsx (3)
src/index.tsx (2)
ExtraColumn(6-6)DateFormat(7-7)src/types/public-types.ts (2)
ExtraColumn(16-21)DateFormat(14-14)example/src/extra-columns-helper.tsx (1)
extraColumns(117-172)
src/types/public-types.ts (1)
src/index.tsx (7)
DateFormat(7-7)ExtraColumn(6-6)Task(5-5)GanttProps(4-4)EventOption(10-10)DisplayOption(9-9)StylingOption(8-8)
🔇 Additional comments (38)
src/index.tsx (1)
6-7: 새로운 타입 export가 올바르게 추가되었습니다.
ExtraColumn과DateFormat타입이 public API로 적절히 노출되어 패키지 사용자들이 새로운 기능을 활용할 수 있도록 했습니다.example/src/App.tsx (2)
5-5: ExtraColumnsApp 컴포넌트 import가 적절합니다.새로운 기능을 시연하기 위한 컴포넌트가 올바르게 import되었습니다.
107-107: ExtraColumnsApp 컴포넌트가 적절히 렌더링되었습니다.기존 Gantt 컴포넌트들 다음에 새로운 기능을 시연하는 컴포넌트가 깔끔하게 추가되었습니다.
src/components/gantt/gantt.tsx (2)
61-65: 새로운 props가 올바르게 추가되었습니다.
extraColumns,nameColumnWidth,fromColumnWidth,toColumnWidth,dateFormatprops가 적절한 기본값과 함께 추가되어 Gantt 컴포넌트의 커스터마이징 기능을 확장했습니다.dateFormat의 기본값 "locale"도 합리적입니다.
454-458: props가 TaskList 컴포넌트로 올바르게 전달되었습니다.새로운 props들이
tableProps객체를 통해TaskList컴포넌트로 적절히 전달되어 기능이 하위 컴포넌트에서 활용될 수 있도록 구성되었습니다.example/src/index.css (3)
84-94: 기본 배지 스타일이 잘 정의되었습니다.
.status-badge와.priority-badge에 대한 공통 스타일이 일관성 있게 정의되어 있으며, 패딩, 테두리 반경, 폰트 스타일링 등이 적절합니다.
96-112: 상태 배지 스타일이 직관적으로 구성되었습니다.각 상태별로 적절한 색상이 사용되었고,
.status-pending에서 가독성을 위해 텍스트 색상을 조정한 점이 좋습니다.
114-130: 우선순위 배지 스타일이 체계적으로 정의되었습니다.우선순위별로 구분되는 색상 체계가 잘 구성되어 있으며,
.priority-medium에서 대비를 고려한 텍스트 색상 조정이 접근성 측면에서 바람직합니다.package.json (2)
2-10: 패키지 메타데이터가 한국어 버전에 맞게 올바르게 업데이트되었습니다.패키지 이름, 버전, 설명, 작성자, 홈페이지, 저장소 URL이 한국어 버전에 맞게 적절히 수정되었습니다. 버전 1.1.0으로의 업데이트도 새로운 기능 추가에 적합합니다.
28-30: 키워드에 한국어 관련 태그가 적절히 추가되었습니다."korean"과 "한국어" 키워드가 추가되어 한국어 사용자들이 패키지를 더 쉽게 찾을 수 있도록 개선되었습니다.
src/components/task-list/task-list-header.tsx (5)
3-3: ExtraColumn 타입 import가 올바르게 추가되었습니다.새로운 기능을 위한 타입 import가 적절히 추가되었습니다.
10-13: 새로운 props 정의가 잘 구성되었습니다.extraColumns와 컬럼 너비 설정을 위한 선택적 props들이 명확하게 정의되었습니다. 모두 optional로 설정되어 기존 코드와의 하위 호환성을 보장합니다.
19-22: Props 구조분해할당이 적절합니다.extraColumns에 빈 배열을 기본값으로 설정한 것이 좋은 방어적 프로그래밍 관행입니다. undefined 체크 없이 안전하게 map 함수를 사용할 수 있습니다.
41-41: 컬럼 너비 fallback 로직이 올바릅니다.커스텀 너비가 제공되지 않을 때 기본 rowWidth로 fallback하는 로직이 적절하게 구현되었습니다. 기존 동작을 유지하면서 새로운 기능을 추가했습니다.
Also applies to: 56-56, 71-71
76-95: Extra columns 렌더링 로직이 잘 구현되었습니다.다음과 같은 좋은 실천 사항들이 적용되었습니다:
- React.Fragment를 사용하여 불필요한 DOM 요소 생성 방지
- 고유한 key prop 사용 (column.key)
- 기존 스타일과 일관성 있는 구조 (separator + header item)
- 컬럼 너비 fallback 로직 적용
README.md (1)
147-246: Extra Columns 지원에 대한 문서화가 훌륭합니다.새롭게 추가된 "Extra Columns Support" 섹션이 매우 포괄적이고 잘 구성되어 있습니다:
- 실용적인 코드 예제와 함께 기능 사용법을 명확하게 설명
- ExtraColumn 인터페이스의 모든 속성을 표로 정리하여 이해하기 쉬움
- 컬럼 너비 설정과 날짜 형식 옵션에 대한 상세한 설명 제공
- 필수 필드가 적절히 표시됨 (*Required 마킹)
- 실제 구현과 일치하는 예제 코드
이 문서는 개발자들이 새로운 기능을 효과적으로 활용할 수 있도록 도움을 줄 것입니다.
example/src/ExtraColumnsApp.tsx (5)
1-11: 컴포넌트 초기화와 상태 관리가 적절합니다.React hooks를 사용한 상태 관리가 깔끔하게 구현되었습니다. 필요한 모든 의존성이 올바르게 import되었고, 초기 상태값들이 적절히 설정되었습니다.
13-20: 뷰 모드에 따른 컬럼 너비 동적 조정이 잘 구현되었습니다.각 ViewMode에 맞는 적절한 컬럼 너비를 설정하여 사용자 경험을 향상시켰습니다. 조건문이 명확하고 이해하기 쉽습니다.
27-45: 사용자 인터페이스 컨트롤이 직관적입니다.ViewSwitcher와 DateFormat 선택기가 잘 배치되었고, 사용자가 쉽게 기능을 테스트할 수 있도록 구성되었습니다. 스타일링도 깔끔하게 처리되었습니다.
48-79: Gantt 컴포넌트 설정이 포괄적입니다.새로운 기능들(extraColumns, 커스텀 너비, dateFormat)이 모두 적절히 설정되었고, 이벤트 핸들러들이 유의미한 피드백을 제공합니다. 특히 삭제 확인 다이얼로그는 좋은 UX 관행입니다.
82-104: 교육적 콘텐츠가 매우 유용합니다.기능 설명과 사용법 가이드가 명확하고 포괄적입니다. 개발자들이 새로운 기능을 이해하고 구현하는 데 큰 도움이 될 것입니다.
example/src/extra-columns-helper.tsx (2)
4-115: 샘플 데이터가 잘 구성되었습니다.다양한 작업 유형(project, task, milestone)과 현실적인 프로젝트 관리 데이터를 포함한 comprehensive한 샘플이 제공되었습니다. extraColumns 데이터도 다양한 데이터 타입과 상태를 잘 보여줍니다.
117-172: ExtraColumn 설정이 훌륭합니다.커스텀 렌더 함수들이 잘 구현되었습니다:
- 상태와 우선순위에 대한 스타일링된 배지
- 예산 포맷팅 로직 (0 이하일 때 "-" 표시)
- 각 컬럼의 적절한 너비 설정
- 타입 안전성을 위한 적절한 타입 캐스팅
이는 개발자들이 커스텀 렌더링을 구현하는 좋은 예시가 됩니다.
src/components/task-list/task-list.tsx (3)
3-3: 타입 import가 적절히 추가되었습니다.ExtraColumn과 DateFormat 타입이 올바른 경로에서 import되었습니다.
20-24: Props 인터페이스 확장이 잘 구현되었습니다.새로운 props들이 모두 optional로 정의되어 기존 코드와의 하위 호환성을 보장합니다. TaskListHeader와 TaskListTable의 타입 정의도 일관성 있게 업데이트되었습니다.
Also applies to: 30-33, 45-49
68-72: Props 전달 로직이 올바릅니다.새로운 props들이 컴포넌트에서 적절히 구조분해할당되고, headerProps와 tableProps를 통해 자식 컴포넌트들에게 정확히 전달됩니다. 코드가 깔끔하고 이해하기 쉽습니다.
Also applies to: 88-91, 104-108
src/components/task-list/task-list-table.tsx (7)
3-3: 새로운 타입 임포트가 올바르게 추가되었습니다.
ExtraColumn과DateFormat타입이 올바르게 임포트되어 컴포넌트에서 사용되고 있습니다.
18-20: ISO 날짜 포맷 함수가 올바르게 구현되었습니다.
toISODateString함수가 Date 객체를 yyyy-MM-dd 형식으로 변환하는 로직이 정확합니다.
39-43: 새로운 props가 올바르게 정의되었습니다.추가 컬럼과 컬럼 너비, 날짜 포맷을 위한 props가 적절한 타입과 기본값으로 정의되어 있습니다. 기본값 설정으로 하위 호환성도 유지됩니다.
Also applies to: 52-56
63-68: 날짜 포맷팅 로직이 효율적으로 구현되었습니다.
useMemo를 사용하여dateFormatprop에 따라 적절한 포맷팅 함수를 선택하는 로직이 올바르며, 성능 최적화도 잘 되어 있습니다.
95-96: 컬럼 너비 커스터마이징이 올바르게 구현되었습니다.기본 컬럼들(이름, 시작일, 종료일)에 대해 사용자 정의 너비를 지원하면서 기본값으로의 fallback도 적절히 처리되었습니다.
Also applies to: 117-118, 126-127
121-121: 날짜 포맷팅 적용이 일관되게 구현되었습니다.시작일과 종료일 모두에 새로운
formatDate함수가 일관되게 적용되어 사용자가 선택한 날짜 포맷으로 표시됩니다.Also applies to: 130-130
132-148: 추가 컬럼 렌더링 로직이 유연하고 안전하게 구현되었습니다.사용자 정의 렌더 함수와 기본 문자열 표시를 모두 지원하며, 옵셔널 체이닝으로 안전한 데이터 접근이 보장되고, title 속성 처리도 적절합니다.
src/types/public-types.ts (5)
14-14: DateFormat 타입이 명확하게 정의되었습니다.두 가지 날짜 포맷 옵션을 유니온 타입으로 정의하여 타입 안전성을 제공합니다.
16-21: ExtraColumn 인터페이스가 유연하고 완전하게 설계되었습니다.필수 필드(key, title)와 선택적 필드(width, render)의 조합이 다양한 사용 사례를 지원할 수 있도록 잘 설계되었습니다.
43-46: Task 인터페이스 확장이 적절하게 구현되었습니다.
extraColumns속성이 선택적으로 정의되어 하위 호환성을 유지하며, key-value 구조로 유연한 데이터 저장이 가능합니다. JSDoc 주석도 명확합니다.
139-142: StylingOption 인터페이스 업데이트가 일관되게 적용되었습니다.TaskListHeader와 TaskListTable 컴포넌트 props가 일관되게 업데이트되었으며, dateFormat은 테이블에만 적절히 추가되었습니다. 모든 props가 선택적으로 정의되어 하위 호환성을 유지합니다.
Also applies to: 157-161
167-186: GanttProps 인터페이스 확장이 잘 문서화되어 구현되었습니다.새로운 props들이 명확한 JSDoc 주석과 함께 추가되었으며, 모든 props가 선택적으로 정의되어 기존 코드와의 호환성을 유지합니다.
Changed import path in extra-columns-helper.tsx from '../../dist/types/public-types' to '../../src/types/public-types' to reference source code directly instead of build output, as recommended in code review. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
리뷰 피드백 감사합니다! 🙏✅ 수정 완료: Import 경로 문제지적사항: 해결: 커밋 c631ff4에서 import 경로를 소스 코드를 직접 참조하도록 수정했습니다: -import { Task, ExtraColumn } from "../../dist/types/public-types";
+import { Task, ExtraColumn } from "../../src/types/public-types";📋 전체 리뷰 응답 요약총 38개의 긍정적인 피드백을 받았으며, 주요 사항들을 확인했습니다:
**1개의 중요한 이슈 (Import 경로 문제)**만 발견되어 즉시 수정했습니다. 모든 지적사항이 해결되었으니 리뷰 재검토 부탁드립니다! 🚀 |
1 participant
🚀 Extra Columns Support Feature
이 PR은 MaTeMaTuK/gantt-task-react PR #274의 "Add extra column support" 기능을 한국어 버전에 적용한 것입니다.
✨ 주요 기능
📊 Extra Columns
🎨 컬럼 너비 설정
nameColumnWidth: 이름 컬럼 너비 설정fromColumnWidth: 시작일 컬럼 너비 설정toColumnWidth: 종료일 컬럼 너비 설정📅 날짜 형식 선택
"locale" | "iso8601"🔧 사용 예제
📁 변경된 파일들
Core Files
src/types/public-types.ts: ExtraColumn, DateFormat 타입 추가src/components/gantt/gantt.tsx: 새로운 props 지원src/components/task-list/: 헤더 및 테이블 컬럼 지원✅ 테스트
📦 npm 패키지
이 기능으로 Gantt Chart에서 더욱 풍부한 정보를 표시할 수 있게 되었습니다! 🎉
Summary by CodeRabbit
새로운 기능
문서화
스타일
예제
패키지
타입