feat: Add Korean date expression support with Jira-style Today arrow#3
Conversation
- Add getWeekOfMonth function for monthly week calculation
- Add Korean locale support (locale='kor') in calendar component
- Year view: Display as '2024년 1월'
- Month view: Show month names in Korean
- Week view: Display as '1월 1주' format
- Day view: Display as '1월 1일 (월)' format
- Hour/PartOfDay views: Korean date format support
- Add Jira-style Today indicator with orange arrow
- Replace simple rect with SVG containing vertical line and triangle arrow
- Orange color (#fea362) for better visibility
- Improve tooltip date format
- Separate task name and date information
- Use 'YYYY-MM-DD ~ YYYY-MM-DD' format
- Simplify project visual style
- Remove triangular decorations from project bars
- Clean rectangular design only
- Add fontSize={12} to task labels for better readability
- Add Korean locale examples in demo app (locale='kor')
- Update calendar styling with divider lines and center alignment
Based on PR #254 from MaTeMaTuK/gantt-task-react by ohshinyeop
Korean date expressions are fundamentally different from English formats
|
Warning Rate limit exceeded@jeonghanyun has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 1 minutes and 38 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (5)
📝 WalkthroughWalkthrough이번 변경에서는 Gantt 컴포넌트에 한국어 로케일을 적용하고, 캘린더와 그리드, 툴팁, 태스크 아이템, 프로젝트 바의 시각적 요소 및 날짜 라벨 포맷을 로케일에 맞게 개선하였습니다. 또한 월별 주차 계산을 위한 헬퍼 함수가 추가되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant 사용자
participant App
participant Gantt
participant Calendar
participant GridBody
participant Tooltip
사용자->>App: Gantt 차트 렌더링 요청 (locale="kor")
App->>Gantt: locale="kor" 전달
Gantt->>Calendar: 날짜/라벨 렌더링 (한국어 포맷 적용)
Gantt->>GridBody: 오늘 표시 SVG 그룹 렌더링
Gantt->>Tooltip: 태스크명/날짜 범위 분리 표시
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15–20 minutes Poem
✨ 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
🧹 Nitpick comments (3)
src/components/grid/grid-body.tsx (2)
91-91: SVG에서 z-index 속성이 작동하지 않습니다.SVG 요소에서
z={1000}속성은 효과가 없습니다. SVG에서는 요소의 순서가 렌더링 순서를 결정합니다.다음과 같이 수정하세요:
-<svg z={1000}> +<svg>
108-109: 색상값을 상수로 분리하는 것을 고려하세요.
#fea362색상값이 여러 곳에 하드코딩되어 있습니다. 유지보수성을 위해 상수로 분리하는 것을 권장합니다.파일 상단에 상수를 정의하세요:
+const TODAY_ARROW_COLOR = "#fea362";그리고 하드코딩된 색상을 대체하세요:
-fill: "#fea362", -stroke: "#fea362", +fill: TODAY_ARROW_COLOR, +stroke: TODAY_ARROW_COLOR,Also applies to: 121-122
src/components/other/tooltip.tsx (1)
127-127: 불필요한 빈 요소를 제거하세요.빈
<p></p>태그를 사용하는 대신 CSS 마진이나 패딩을 활용하는 것이 더 적절합니다.다음과 같이 수정하세요:
-<p></p> -<p - className={styles.tooltipDefaultContainerParagraph} - style={{ marginTop: 4 }} -> +<p + className={styles.tooltipDefaultContainerParagraph} + style={{ marginTop: 12 }} +>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
example/src/App.tsx(2 hunks)src/components/calendar/calendar.tsx(7 hunks)src/components/grid/grid-body.tsx(1 hunks)src/components/other/tooltip.tsx(1 hunks)src/components/task-item/project/project.tsx(0 hunks)src/components/task-item/task-item.tsx(1 hunks)src/helpers/date-helper.ts(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/task-item/project/project.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/calendar/calendar.tsx (1)
src/helpers/date-helper.ts (3)
getLocaleMonth(183-192)getWeekOfMonth(219-241)getLocalDayOfWeek(194-207)
🔇 Additional comments (15)
src/components/task-item/task-item.tsx (1)
120-120: 좋은 개선사항입니다!태스크 라벨의 폰트 크기를 명시적으로 12로 설정하여 텍스트 가독성과 일관성을 개선했습니다.
src/components/grid/grid-body.tsx (1)
92-125: Today 지시자의 시각적 개선이 훌륭합니다!단순한 사각형에서 Jira 스타일의 화살표 디자인으로 개선하여 현재 날짜의 시각적 강조 효과가 크게 향상되었습니다.
example/src/App.tsx (1)
81-81: 한국어 로케일 설정이 올바르게 적용되었습니다!두 Gantt 컴포넌트 모두에 일관성 있게
locale="kor"속성을 설정하여 한국어 지원을 활성화했습니다.Also applies to: 96-96
src/components/other/tooltip.tsx (1)
126-137: 툴팁 내용 분리로 가독성이 크게 개선되었습니다!태스크명과 날짜 정보를 분리하여 표시하고, 날짜 형식을 YYYY-MM-DD로 통일한 것이 사용자 경험을 향상시킵니다.
src/components/calendar/calendar.tsx (11)
9-9: 새로운 헬퍼 함수 도입 확인됨
getWeekNumberISO8601에서getWeekOfMonth로 변경된 것은 월별 주차 계산을 위한 적절한 개선입니다. 한국어 로케일에서 "1월 1주" 형태로 표시하기 위해 필요한 변경사항입니다.
43-60: 시각적 개선을 위한 구조 변경Year view에서 bottom text를
<g>태그로 그룹화하고 수직 구분선을 추가한 것은 좋은 개선입니다.textAnchor="middle"과alignmentBaseline="middle"로 텍스트 정렬도 개선되었습니다.
142-159: Month view 구조 통일성 확인Year view와 동일한 패턴으로 변경되어 일관성을 유지하고 있습니다.
199-209: 한국어 로케일 지원 구현한국어 로케일을 위한 날짜 포맷팅이 적절히 구현되었습니다:
- Top label: "2024년 1월" 형태
- Bottom label: "1월 1주" 형태 (새로운
getWeekOfMonth함수 사용)기존 로케일과의 호환성도 유지되고 있습니다.
212-229: Week view 시각적 개선다른 view들과 동일한 패턴으로 수직 구분선과 텍스트 그룹화가 적용되어 일관성을 유지합니다.
261-273: Day view 한국어 포맷팅한국어 로케일에서 "1월 1일 (월)" 형태로 표시하는 것이 자연스럽고 직관적입니다.
getLocalDayOfWeek함수를 활용한 구현도 적절합니다.
276-293: Day view 구조 개선다른 view들과 동일한 패턴으로 구현되어 일관성을 유지합니다.
335-352: PartOfDay view 구조 통일시간 표시 부분에서도 동일한 시각적 개선 패턴이 적용되었습니다.
355-369: PartOfDay view 한국어 지원Day view와 동일한 한국어 포맷팅이 적용되어 일관성을 유지합니다.
399-416: Hour view 구조 개선다른 view들과 동일한 패턴으로 구현되어 전체적인 일관성을 유지합니다.
420-434: Hour view 한국어 지원 및 버그 수정한국어 로케일 지원이 추가되었고, 기존 코드에서
displayDate대신date를 사용하던 부분이 수정되어 정확성이 개선되었습니다.getLocalDayOfWeek에서 "long" 형태를 사용하는 것도 적절합니다.
There was a problem hiding this comment.
Pull Request Overview
This PR adds comprehensive Korean date expression support to the Gantt chart library along with visual improvements including a Jira-style today indicator. The changes enable Korean locale (locale="kor") with appropriate date formatting for all view modes and enhance the visual design with simplified project bars and improved styling.
- Added Korean date expressions for all ViewMode types (Year, Month, Week, Day, Hour, PartOfDay)
- Implemented Jira-style today indicator with orange arrow design replacing simple rectangle
- Simplified project bar design and improved tooltip formatting
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/helpers/date-helper.ts | Adds getWeekOfMonth utility function for Korean week-of-month calculation |
| src/components/calendar/calendar.tsx | Implements Korean date formatting logic and visual improvements with separator lines |
| src/components/grid/grid-body.tsx | Replaces today indicator with Jira-style arrow design |
| src/components/other/tooltip.tsx | Improves tooltip format separating task name from date range |
| src/components/task-item/project/project.tsx | Simplifies project bar by removing triangular decorations |
| src/components/task-item/task-item.tsx | Sets consistent fontSize for task labels |
| example/src/App.tsx | Demonstrates Korean locale usage in example application |
| return new Date(date.setDate(diff)); | ||
| }; | ||
|
|
||
| export const getWeekOfMonth = (date: any) => { |
There was a problem hiding this comment.
The parameter type should be Date instead of any for better type safety and API consistency with other date helper functions.
| export const getWeekOfMonth = (date: any) => { | |
| export const getWeekOfMonth = (date: Date) => { |
| const startOfMonth = new Date(date.getFullYear(), date.getMonth(), 1); | ||
|
|
||
| // 주어진 날짜의 첫 번째 월요일을 가져옵니다. | ||
| const firstMonday: any = new Date(startOfMonth); |
There was a problem hiding this comment.
The variable type should be Date instead of any since it's initialized as a Date object.
| const firstMonday: any = new Date(startOfMonth); | |
| const firstMonday: Date = new Date(startOfMonth); |
| date, | ||
| locale, | ||
| "long" | ||
| )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`; |
There was a problem hiding this comment.
This line uses date instead of displayDate which is inconsistent with the Korean version above and the logic that sets displayDate = dates[i - 1]. Should use displayDate for consistency.
| date, | |
| locale, | |
| "long" | |
| )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`; | |
| displayDate, | |
| locale, | |
| "long" | |
| )}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`; |
1. Improved type safety in getWeekOfMonth function - Changed parameter type from 'any' to 'Date' - Added explicit return type 'number' - Fixed date arithmetic to use getTime() for proper type safety 2. Fixed SVG and styling issues in grid-body.tsx - Removed ineffective z-index from SVG element - Extracted TODAY_ARROW_COLOR constant for maintainability 3. Cleaned up tooltip formatting - Removed empty <p> tag and adjusted marginTop to 12px 4. Fixed date reference bug in calendar.tsx - Corrected non-Korean locale to use displayDate instead of date - Ensures consistent date handling across all locales 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
리뷰 피드백 감사합니다! 🙏✅ 모든 지적사항 수정 완료커밋 394df6b에서 다음 사항들을 수정했습니다: 1. 타입 안전성 개선 (getWeekOfMonth 함수)-export const getWeekOfMonth = (date: any) => {
+export const getWeekOfMonth = (date: Date): number => {
// ...
- const firstMonday: any = new Date(startOfMonth);
+ const firstMonday = new Date(startOfMonth);
// ...
- const diffDays = Math.ceil((date - firstMonday) / (24 * 60 * 60 * 1000));
+ const diffDays = Math.ceil((date.getTime() - firstMonday.getTime()) / (24 * 60 * 60 * 1000));2. SVG 및 스타일링 이슈 수정 (grid-body.tsx)
const TODAY_ARROW_COLOR = "#fea362";3. 툴팁 포맷 정리 (tooltip.tsx)
4. 날짜 참조 버그 수정 (calendar.tsx)
📋 리뷰 요약총 리뷰 피드백:
모든 지적사항이 해결되었으니 리뷰 재검토 부탁드립니다! 🚀 한국어 날짜 표현 지원과 시각적 개선사항이 잘 구현되었습니다:
|
🇰🇷 Korean Date Expression Support
이 PR은 MaTeMaTuK/gantt-task-react PR #254의 "Support for Korean date expressions" 기능을 한국어 버전에 적용한 것입니다.
✨ 주요 기능
📅 Korean Date Expressions (locale='kor')
2024년 1월형식으로 표시1월 1주형식으로 주차 표시1월 1일 (월)형식으로 날짜 표시🎯 Jira-style Today Indicator
#fea362)로 시각적 강조🎨 Visual Improvements
fontSize={12}로 가독성 개선YYYY-MM-DD ~ YYYY-MM-DD형식🔧 사용 예제
📅 한국어 날짜 형식 예시
20242024January, 20242024년 1월W011월 1주Mon, 11월 1일 (월)Mon, 1 January1월 1일 (월)📁 변경된 파일들
Core Files
src/helpers/date-helper.ts:getWeekOfMonth함수 추가src/components/calendar/calendar.tsx: 한국어 날짜 표현 로직 및 시각적 개선src/components/grid/grid-body.tsx: Jira 스타일 Today 화살표 구현src/components/other/tooltip.tsx: 툴팁 날짜 형식 개선src/components/task-item/project/project.tsx: 프로젝트 바 단순화src/components/task-item/task-item.tsx: 텍스트 크기 조정Example Files
example/src/App.tsx: 한국어 locale 사용 예제 (locale="kor")🔧 기술 세부사항
getWeekOfMonth 함수
getWeekNumberISO8601대체)Today Indicator SVG Structure
✅ 테스트
🙏 Credit
Original PR by @ohshinyeop - PR #254
"한국식 날짜 표기는 영어와 매우 다릅니다" - 이제 한국 사용자들이 더 자연스럽게 Gantt Chart를 사용할 수 있습니다! 🎉
Summary by CodeRabbit
신규 기능
개선 사항
기타