[FEAT] Add Plant Theme #2

seock1000 · 2025-06-25T13:36:22Z

📌 Summary

Add new "Plant" theme for contribution chart
This theme visualizes contribution levels as seed🫘 → sprout🌱 → leaf🌿 → flower 🌻

🎯 Motivation

To provide a more nature-inspired Git style

🔧 Changes

Add PlantTheme object in themes.ts
Define custom backgroundPattern with SVG soil texture
Modify generateThemedSVG to apply pattern fill

✅ Checklist

Tested new theme locally
Confirmed SVG renders without errors
Checked compatibility with existing themes

Summary by CodeRabbit

신규 기능
- "plant" 테마가 추가되어, 식물 테마를 선택할 수 있습니다.
- 식물 테마에는 새로운 배경 패턴과 식물 관련 이모지가 포함되어 있습니다.
개선 사항
- SVG 생성 시, 테마에 따라 배경 패턴이 적용되어 더욱 다양한 시각적 스타일을 제공합니다.

vercel · 2025-06-25T13:36:27Z

Someone is attempting to deploy a commit to the chapdo Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-06-25T13:36:44Z

"""

Walkthrough

새로운 "plant" 테마가 추가되어, 관련 태그와 SVG 배경 패턴 지원이 확장되었습니다. ThemeStyle 인터페이스에 선택적 backgroundPattern 속성이 도입되었고, SVG 생성 함수는 테마의 패턴을 동적으로 적용할 수 있도록 개선되었습니다. 기존 로직에는 영향이 없습니다.

Changes

파일/경로	변경 요약
app/page.tsx	TAGS 배열에 `{ label: "plant" }` 태그 추가
lib/themes.ts	`ThemeStyle`에 `backgroundPattern` 속성 추가, `PlantTheme` 테마 및 패턴, 이모지, 색상 추가
lib/svg-generator.ts	테마의 `backgroundPattern` 적용 로직 추가, SVG 배경에 패턴 동적 할당

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Page
    participant SVGGen
    participant Themes

    User->>Page: plant 태그 선택
    Page->>SVGGen: generateThemedSVG(username, "plant")
    SVGGen->>Themes: themes["plant"] 조회
    Themes-->>SVGGen: PlantTheme 반환 (backgroundPattern 포함)
    SVGGen->>SVGGen: SVG <defs>에 backgroundPattern 적용
    SVGGen-->>Page: 패턴이 적용된 SVG 반환
    Page-->>User: SVG 렌더링

Poem

🌱
새싹이 돋는 테마가 왔어요,
머리카락, 불꽃 사이에 초록이 피었죠.
패턴과 색으로 화면을 장식,
토끼도 기뻐 깡충깡충 뛰었답니다!
SVG 속에 숲이 자라나요.
🐇✨
"""

📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between d3af33d and c1ec071.

📒 Files selected for processing (2)

lib/svg-generator.ts (2 hunks)
lib/themes.ts (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

lib/svg-generator.ts
lib/themes.ts

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate Unit Tests

Create PR with Unit Tests
Post Copyable Unit Tests in Comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 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 auto-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: 2

🧹 Nitpick comments (1)

lib/svg-generator.ts (1)
58-59: 디버깅 로그를 제거하세요.

프로덕션 코드에서 console.log 문들을 제거해야 합니다.

다음과 같이 수정하세요:
-	console.log("defs:", defs);
-	console.log("fillValue:", fillValue);

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 19bba8a and d3af33d.

📒 Files selected for processing (3)

app/page.tsx (1 hunks)
lib/svg-generator.ts (2 hunks)
lib/themes.ts (2 hunks)

🔇 Additional comments (6)

lib/themes.ts (3)

10-10: 인터페이스 확장이 적절합니다.

ThemeStyle 인터페이스에 선택적 backgroundPattern 속성을 추가한 것이 적절합니다. 기존 테마들과의 호환성을 유지하면서 새로운 기능을 지원할 수 있습니다.

84-98: 이모지 매핑이 직관적입니다.

식물의 성장 단계를 나타내는 이모지 선택이 매우 직관적입니다 (씨앗 → 새싹 → 풀잎 → 꽃). 사용자가 커밋 레벨을 쉽게 이해할 수 있을 것입니다.

65-82: SVG 패턴 구조를 검증하세요.

토양 질감을 표현하는 SVG 패턴이 상세하게 구현되어 있습니다. 하지만 패턴의 복잡성과 렌더링 성능에 대한 검증이 필요합니다.

다음 스크립트를 실행하여 SVG 패턴의 유효성을 검증해보세요:
#!/bin/bash
# SVG 패턴 유효성 검증

# SVG 패턴에서 사용된 요소들 확인
echo "SVG 패턴에 사용된 요소들:"
cat lib/themes.ts | grep -A 15 "backgroundPattern:" | grep -E "(rect|ellipse|circle)"

# 패턴 크기와 복잡도 분석
echo "패턴 복잡도 분석:"
cat lib/themes.ts | grep -A 15 "backgroundPattern:" | grep -c -E "(rect|ellipse|circle)"
app/page.tsx (1)

63-63: 태그 추가가 적절합니다.

새로운 "plant" 태그가 기존 태그들과 일관된 구조로 추가되었습니다. 사용자가 새로운 테마를 선택할 수 있게 됩니다.

lib/svg-generator.ts (2)

13-14: 패턴 처리 변수가 적절하게 추가되었습니다.

배경 패턴과 고유 패턴 ID를 위한 변수들이 적절하게 추가되었습니다.

63-64: SVG 구조가 올바르게 개선되었습니다.

<defs> 요소와 패턴 기반 fill 속성이 올바르게 추가되어 배경 패턴을 지원합니다.

coderabbitai · 2025-06-25T13:39:06Z

lib/themes.ts

+	colorMap: {
+		none: "#f0fdf4",
+		low: "#bbf7d0",
+		medium: "#86efac",
+		high: "#4ade80",
+		max: "#f472b6",
+	},
+};


🛠️ Refactor suggestion

색상 매핑에서 일관성 문제가 있습니다.

max 레벨의 색상이 #f472b6 (분홍색)으로 설정되어 있어 다른 녹색 계열 색상들과 일관성이 떨어집니다. 식물 테마에 더 적합한 색상을 고려해보세요.

다음과 같이 수정을 제안합니다:

colorMap: { none: "#f0fdf4", low: "#bbf7d0", medium: "#86efac", high: "#4ade80", - max: "#f472b6", + max: "#16a34a", // 더 진한 녹색 또는 황금색 "#fbbf24" },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

colorMap: {

none: "#f0fdf4",

low: "#bbf7d0",

medium: "#86efac",

high: "#4ade80",

max: "#f472b6",

},

};

colorMap: {

none: "#f0fdf4",

low: "#bbf7d0",

medium: "#86efac",

high: "#4ade80",

max: "#16a34a", // 더 진한 녹색 또는 황금색 "#fbbf24"

},

};

🤖 Prompt for AI Agents

In lib/themes.ts around lines 100 to 107, the color assigned to the 'max' level in the colorMap is inconsistent with the other green shades, as it is currently set to a pink color (#f472b6). To fix this, replace the 'max' color value with a green shade that aligns with the existing green palette to maintain theme consistency.

lib/svg-generator.ts

[FEAT] Add Plant Theme

d3af33d

coderabbitai bot reviewed Jun 25, 2025

View reviewed changes

[FIX] modify review point

c1ec071

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[FEAT] Add Plant Theme #2

[FEAT] Add Plant Theme #2

Uh oh!

seock1000 commented Jun 25, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Jun 25, 2025

Uh oh!

coderabbitai bot commented Jun 25, 2025 •

edited

Loading

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!

coderabbitai bot Jun 25, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

[FEAT] Add Plant Theme #2

Are you sure you want to change the base?

[FEAT] Add Plant Theme #2

Uh oh!

Conversation

seock1000 commented Jun 25, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

🎯 Motivation

🔧 Changes

✅ Checklist

Summary by CodeRabbit

Uh oh!

vercel bot commented Jun 25, 2025

Uh oh!

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

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

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!

coderabbitai bot Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

seock1000 commented Jun 25, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jun 25, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)