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 |
src/helpers/date-helper.ts
Outdated
| 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) => { |
src/helpers/date-helper.ts
Outdated
| 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); |
src/components/calendar/calendar.tsx
Outdated
| 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 <[email protected]>
리뷰 νΌλλ°± κ°μ¬ν©λλ€! πβ λͺ¨λ μ§μ μ¬ν μμ μλ£μ»€λ° 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
μ κ· κΈ°λ₯
κ°μ μ¬ν
κΈ°ν