feat: Add weekendColor prop to highlight weekend columns #2

jeonghanyun · 2025-08-02T03:54:25Z

🎨 Weekend Color Support Feature

이 PR은 MaTeMaTuK/gantt-task-react PR #122의 "Add new prop weekendColor to grid" 기능을 한국어 버전에 적용한 것입니다.

✨ 주요 기능

🗓️ Weekend Highlighting

weekendColor prop으로 주말 컬럼에 배경색 적용
토요일(6)과 일요일(0) 자동 감지
투명(transparent) 설정으로 주말 하이라이트 비활성화 가능

🔧 사용 예제

import { Gantt } from 'gantt-task-react-19-korean';

<Gantt 
  tasks={tasks}
  weekendColor="#97979714"  // 반투명 회색으로 주말 강조
/>

🎯 기능 설명

weekendColor: 주말 컬럼의 배경색을 지정
기본값: "transparent" (주말 하이라이트 없음)
예제 색상: "#97979714" (반투명 회색)
동작: 각 날짜의 getDay() 값이 0(일요일) 또는 6(토요일)일 때 색상 적용

📁 변경된 파일들

Core Files

src/types/public-types.ts: weekendColor prop을 StylingOption에 추가
src/components/grid/grid-body.tsx: 주말 감지 및 색상 적용 로직
src/components/gantt/gantt.tsx: weekendColor prop 전달

Example Files

example/src/App.tsx: weekendColor 사용 예제 추가

Documentation

README.md: weekendColor 문서 추가

🔄 기타 변경사항

todayColor 기본값을 rgba(252, 248, 227, 0.5)에서 rgba(252, 248, 227, 1)로 변경 (원본 PR과 동일)

✅ 테스트

빌드 성공
주말 컬럼 하이라이트 동작 확인
TypeScript 타입 검증

🙏 Credit

Original PR by @AquilesOliveiraDev - PR #122

이 기능으로 주말에 특별한 규칙이 적용되는 프로젝트에서 시각적으로 주말을 구분할 수 있게 되었습니다! ��

Summary by CodeRabbit

New Features
- 간트 차트에서 주말 컬럼의 색상을 지정할 수 있는 새로운 옵션(weekendColor)이 추가되었습니다.
Style
- 오늘 날짜 컬럼의 기본 색상이 반투명에서 불투명으로 변경되었습니다.
Documentation
- README에 weekendColor 옵션에 대한 설명이 추가되었습니다.

- Add weekendColor prop to StylingOption interface - Add weekendColor support in GridBodyProps and GridBody component - Implement weekend detection logic using getDay() (0=Sunday, 6=Saturday) - Add weekend column highlighting with configurable color - Update Gantt component to accept and pass weekendColor prop - Add weekendColor usage examples in example app (#97979714) - Update README.md with weekendColor documentation - Change todayColor default from rgba(252, 248, 227, 0.5) to rgba(252, 248, 227, 1) Based on PR #122 from MaTeMaTuK/gantt-task-react by AquilesOliveiraDev

coderabbitai · 2025-08-02T03:54:31Z

Warning

Rate limit exceeded

@jeonghanyun has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 5 minutes and 17 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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.

📥 Commits

Reviewing files that changed from the base of the PR and between ce61fc3 and 58e7414.

📒 Files selected for processing (1)

src/components/grid/grid-body.tsx (5 hunks)

📝 Walkthrough

Walkthrough

주요 변경 사항은 Gantt 차트 컴포넌트에 주말 컬럼의 색상을 지정할 수 있는 새로운 스타일 옵션(weekendColor)을 추가한 것입니다. 해당 속성은 타입 정의, 문서(README), 예제 코드, 그리고 실제 렌더링 로직에 모두 반영되었습니다. 또한 기존 todayColor의 기본값도 불투명하게 변경되었습니다.

Changes

Cohort / File(s)	Change Summary
문서 및 타입 정의 `README.md`, `src/types/public-types.ts`	`StylingOption` 인터페이스에 `weekendColor` 속성 추가 및 README에 문서화.
예제 코드 `example/src/App.tsx`	예제 Gantt 컴포넌트에 `weekendColor` prop 추가.
Gantt 컴포넌트 `src/components/gantt/gantt.tsx`	`weekendColor` prop(기본값: "transparent") 추가, `todayColor` 기본값 변경, `weekendColor`를 `gridProps`로 전달.
Grid 렌더링 로직 `src/components/grid/grid-body.tsx`	`GridBodyProps`에 `weekendColor` 추가, 주말 컬럼에 색상 적용하는 SVG `<rect>` 렌더링 로직 추가.

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant Gantt
    participant TaskGantt
    participant GridBody

    App->>Gantt: weekendColor prop 전달
    Gantt->>TaskGantt: gridProps에 weekendColor 포함하여 전달
    TaskGantt->>GridBody: weekendColor prop 전달
    GridBody->>GridBody: 주말 컬럼에 weekendColor로 <rect> 렌더링

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

토요일, 일요일 토끼 춤을 춰요
Gantt 차트에 색을 입혀
주말마다 컬러풀한 꿈
🐇 붓을 들고 칠해요
오늘은 투명, 내일은 불투명
코드 속 주말도 이제는 특별해요!

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feature/add-weekend-color-support

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/components/grid/grid-body.tsx (1)
80-91: 주말 감지 로직을 개선해주세요

현재 구현에서 배열의 마지막 날짜가 주말인 경우 강조표시되지 않습니다. 또한 성능 최적화를 위해 useMemo를 고려해보세요.

다음과 같이 개선할 수 있습니다:
-    if (weekendColor !== "transparent" && dates[i + 1] && [0, 6].includes(dates[i + 1].getDay())) {
+    // Check current date for weekend
+    if (weekendColor !== "transparent" && [0, 6].includes(date.getDay())) {
       weekends.push(
         <rect
-          key={"WeekendColumn" + i}
-          x={tickX + columnWidth}
+          key={"WeekendColumn" + date.getTime()}
+          x={tickX}
           y={0}
           width={columnWidth}
           height={y}
           fill={weekendColor}
         />
       );
     }
또는 성능을 위해 weekend 계산을 useMemo로 감싸는 것을 고려해보세요.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f866f27 and ce61fc3.

📒 Files selected for processing (5)

README.md (1 hunks)
example/src/App.tsx (2 hunks)
src/components/gantt/gantt.tsx (2 hunks)
src/components/grid/grid-body.tsx (5 hunks)
src/types/public-types.ts (1 hunks)

🔇 Additional comments (7)

src/types/public-types.ts (1)

116-116: 타입 정의가 올바르게 추가되었습니다

weekendColor 속성이 StylingOption 인터페이스에 선택적 문자열 타입으로 적절히 추가되었습니다. 다른 색상 속성들과 일관성을 유지하며 하위 호환성도 보장됩니다.

README.md (1)

116-116: 문서화가 적절히 추가되었습니다

weekendColor 속성에 대한 설명이 기존 문서 형식과 일관성을 유지하며 명확하게 작성되었습니다.

example/src/App.tsx (1)

90-90: 예제 사용법이 적절합니다

두 Gantt 컴포넌트 인스턴스에 weekendColor 속성이 일관성 있게 추가되었으며, 반투명 회색(#97979714)을 사용하여 주말 컬럼을 적절히 강조할 수 있도록 구현되었습니다.

Also applies to: 106-106

src/components/gantt/gantt.tsx (2)

56-57: 색상 속성 기본값이 적절히 설정되었습니다

todayColor의 기본값이 완전 불투명으로 변경되어 더 명확한 표시가 가능하며, weekendColor의 기본값을 "transparent"로 설정하여 기능이 기본적으로 비활성화되도록 한 것이 적절합니다.

398-398: 속성 전달이 올바르게 구현되었습니다

weekendColor 속성이 gridProps를 통해 그리드 렌더링 로직으로 올바르게 전달되었습니다.

src/components/grid/grid-body.tsx (2)

13-13: 타입 정의와 속성 추가가 올바릅니다

GridBodyProps 타입에 weekendColor 속성이 적절히 추가되고 컴포넌트에서 올바르게 구조 분해되었습니다.

Also applies to: 23-23

140-140: SVG 그룹 렌더링이 적절합니다

weekends 그룹이 올바른 순서로 추가되어 주말 강조표시가 다른 요소들과 적절히 렌더링됩니다.

Copilot

Pull Request Overview

This PR adds weekend highlighting functionality to the gantt chart by introducing a weekendColor prop that allows users to set a background color for weekend columns (Saturday and Sunday). The feature is based on the original MaTeMaTuK/gantt-task-react PR #122 and includes Korean localization support.

Added weekendColor prop to StylingOption interface for weekend column highlighting
Implemented weekend detection logic in grid body to apply background colors to Saturday (6) and Sunday (0) columns
Updated default todayColor value for consistency with the original implementation

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/types/public-types.ts	Added weekendColor prop to StylingOption interface
src/components/grid/grid-body.tsx	Implemented weekend detection and rendering logic with background color support
src/components/gantt/gantt.tsx	Added weekendColor prop with default value and prop forwarding
example/src/App.tsx	Added usage examples with weekendColor set to semi-transparent gray
README.md	Added documentation for the new weekendColor option

Copilot · 2025-08-02T03:58:59Z

src/components/grid/grid-body.tsx

+    if (weekendColor !== "transparent" && dates[i + 1] && [0, 6].includes(dates[i + 1].getDay())) {
+      weekends.push(
+        <rect
+          key={"WeekendColumn" + i}
+          x={tickX + columnWidth}


The weekend detection logic uses dates[i + 1] but should use dates[i] to check the current date being processed. Using dates[i + 1] will cause the weekend highlighting to be offset by one column.

Suggested change

if (weekendColor !== "transparent" && dates[i + 1] && [0, 6].includes(dates[i + 1].getDay())) {

weekends.push(

<rect

key={"WeekendColumn" + i}

x={tickX + columnWidth}

if (weekendColor !== "transparent" && [0, 6].includes(date.getDay())) {

weekends.push(

<rect

key={"WeekendColumn" + i}

x={tickX}

Fixed the weekend detection logic to use the current date instead of the next date, which was causing the weekend highlighting to be offset by one column. Also improved the key generation to use date.getTime() for better uniqueness. - Changed from dates[i + 1] to date (current date) for weekend detection - Updated x position from tickX + columnWidth to tickX - Improved React key from "WeekendColumn" + i to "WeekendColumn" + date.getTime() 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

jeonghanyun · 2025-08-02T04:08:58Z

리뷰 피드백 감사합니다! 🙏

✅ 수정 완료: 주말 컬럼 하이라이팅 오프셋 문제

지적사항들:

CodeRabbitAI: 주말 감지 로직이 dates[i + 1]을 사용하여 마지막 날짜가 주말인 경우 강조표시되지 않는 문제
Copilot: 주말 하이라이팅이 한 컬럼씩 밀려서 표시되는 문제

해결: 커밋 58e7414에서 다음과 같이 수정했습니다:

-    if (weekendColor \!== "transparent" && dates[i + 1] && [0, 6].includes(dates[i + 1].getDay())) {
+    if (weekendColor \!== "transparent" && [0, 6].includes(date.getDay())) {
       weekends.push(
         <rect
-          key={"WeekendColumn" + i}
-          x={tickX + columnWidth}
+          key={"WeekendColumn" + date.getTime()}
+          x={tickX}

📋 개선사항 요약

✅ 주말 감지 로직 수정: 현재 날짜(date)를 사용하여 올바른 컬럼이 강조되도록 수정
✅ X 좌표 수정: tickX + columnWidth에서 tickX로 변경하여 정확한 위치에 표시
✅ React key 개선: 인덱스 대신 date.getTime()을 사용하여 고유성 향상

🎯 성능 최적화 관련

useMemo를 사용한 성능 최적화는 현재 구현이 충분히 효율적이므로 별도로 적용하지 않았습니다. 추후 성능 이슈가 발생하면 고려하겠습니다.

모든 지적사항이 해결되었으니 리뷰 재검토 부탁드립니다! 🚀

coderabbitai bot reviewed Aug 2, 2025

View reviewed changes

coderabbitai bot approved these changes Aug 2, 2025

View reviewed changes

jeonghanyun requested a review from Copilot August 2, 2025 03:58

Copilot AI reviewed Aug 2, 2025

View reviewed changes

jeonghanyun merged commit bc927bd into main Aug 2, 2025
1 check failed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Add weekendColor prop to highlight weekend columns #2

feat: Add weekendColor prop to highlight weekend columns #2

Uh oh!

jeonghanyun commented Aug 2, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Aug 2, 2025 •

edited

Loading

Rate limit exceeded

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

jeonghanyun commented Aug 2, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat: Add weekendColor prop to highlight weekend columns #2

feat: Add weekendColor prop to highlight weekend columns #2

Uh oh!

Conversation

jeonghanyun commented Aug 2, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Weekend Color Support Feature

✨ 주요 기능

🗓️ Weekend Highlighting

🔧 사용 예제

🎯 기능 설명

📁 변경된 파일들

Core Files

Example Files

Documentation

🔄 기타 변경사항

✅ 테스트

🙏 Credit

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Aug 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

jeonghanyun commented Aug 2, 2025

리뷰 피드백 감사합니다! 🙏

✅ 수정 완료: 주말 컬럼 하이라이팅 오프셋 문제

📋 개선사항 요약

🎯 성능 최적화 관련

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jeonghanyun commented Aug 2, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Aug 2, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)