Feat/global component #14
Conversation
Summary of ChangesHello @dasosann, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request enhances the application's visual appeal by introducing a new global Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
Hello. I have conducted a code review focusing on overall improvements. The token generation script has been improved recursively, and the addition of duplication removal and validation has resulted in a very clean and scalable structure, which is impressive. The addition of the Blur component and layout integration are also well done. However, I have identified a few improvements that can further enhance code quality and stability, and I have left comments below. Please check them.
| function resolveValue(value, depth = 0) { | ||
| if (depth > 10 || typeof value !== "string") return value; | ||
|
|
||
| const match = value.match(/^\{(.+)\}$/); | ||
| if (!match) return value; | ||
|
|
||
| const ref = match[1]; | ||
|
|
||
| // Grayscale 참조 | ||
| if (ref.startsWith("Grayscale.")) { | ||
| const key = ref.replace("Grayscale.", ""); | ||
| return `var(--${key})`; | ||
| const parts = ref.split("."); | ||
| const lastPart = parts[parts.length - 1]; | ||
| const tokenName = sanitizeKey(lastPart); | ||
|
|
||
| // tokenMap에서 찾기 | ||
| for (const [key, token] of tokenMap.entries()) { | ||
| if (token.name === tokenName) { | ||
| return `var(--${token.name})`; | ||
| } | ||
| } | ||
|
|
||
| // Colors 참조 | ||
| if (ref.startsWith("Colors.Pink.")) { | ||
| const key = ref.replace("Colors.Pink.", ""); | ||
| return `var(--${key})`; | ||
| } | ||
| if (ref.startsWith("Colors.Flame.")) { | ||
| const key = ref.replace("Colors.Flame.", ""); | ||
| return `var(--${key})`; | ||
| } | ||
| if (ref.startsWith("Colors.Orange.")) { | ||
| const key = ref.replace("Colors.Orange.", ""); | ||
| return `var(--${key})`; | ||
| // 못 찾으면 그대로 반환 | ||
| return value; | ||
| } |
There was a problem hiding this comment.
The token generation script is producing invalid CSS values in the app/tokens.css file. For example, values like --bg: {colors.indigo.200}; or --h3: roundTo({fontSizes.body}*1.25^3); are included without proper filtering.
Reason:
The resolveValue function attempts to find tokens using only the last part of the full path (200) when resolving token references, instead of the full path (colors.indigo.200). This approach makes the reference ambiguous, and names that are just numbers are considered invalid variable names, causing the resolution to fail. Also, expressions like roundTo() are not currently handled by the script.
Suggestion:
- Modify the
resolveValuefunction to use the full path of the reference to recursively traverse thetoken.jsonobject and find the correct value. - Since values containing expressions (e.g.,
roundTo) cannot be processed by the current script, it's recommended to add logic to output a warning and exclude them from CSS variable generation.
| <html lang="ko" className={pretendard.variable}> | ||
| <body | ||
| className={`${pretendard.className} flex justify-center bg-white antialiased md:bg-gray-100`} | ||
| className={`${pretendard.className} antialiase flex justify-center bg-white`} |
There was a problem hiding this comment.
There's a typo in the style class. antialiase should be corrected to antialiased. Tailwind CSS's anti-aliasing utility is antialiased. This typo can cause the font rendering to look different from what was intended.
Additionally, according to the repository style guide (line 55), consider using a utility like clsx or cn when combining multiple classes. For example, you can use it like this: cn(pretendard.className, 'antialiased', ...).
| className={`${pretendard.className} antialiase flex justify-center bg-white`} | |
| className={`${pretendard.className} antialiased flex justify-center bg-white`} |
References
- When using conditional styling, it is recommended to use
clsxortailwind-merge(or thecnutility). Although this is a simple string concatenation, consider using a utility for consistency. (link)
| <main> | ||
| <Blur /> | ||
| </main> |
There was a problem hiding this comment.
The <Blur /> component is being rendered redundantly. This component is already applied to the top-level div in app/layout.tsx, providing a background effect across all pages. There's no need to call it again in page.tsx, and it's best to remove it as it causes unnecessary rendering.
| <main> | |
| <Blur /> | |
| </main> | |
| <main> | |
| {/* Add the content of this page here. The Blur effect is provided globally from the layout. */} | |
| </main> |
PR Type
Enhancement
Description
토큰 생성 스크립트 완전 개선 및 CSS 변수 정리
Blur 배경 컴포넌트 추가 및 레이아웃 통합
배경색 및 텍스트 색상 유틸리티 클래스 대폭 확대
개발 편의성 향상 (pnpm 스크립트 추가)
Diagram Walkthrough
File Walkthrough
generate-tokens.js
토큰 생성 스크립트 완전 개선scripts/generate-tokens.js
tokens.css
CSS 변수 및 유틸리티 클래스 대폭 확대app/tokens.css
Blur.tsx
Blur 배경 효과 컴포넌트 추가components/common/Blur.tsx
layout.tsx
Blur 컴포넌트 레이아웃 통합app/layout.tsx
bg-background-app-base토큰으로 변경relative클래스 추가 (Blur 절대 위치 기준)page.tsx
페이지 구조 간소화app/page.tsx
package.json
토큰 생성 npm 스크립트 추가package.json
token스크립트 추가 (pnpm run token으로 토큰 생성)✨ Describe tool usage guide:
Overview:
The
describetool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.When commenting, to edit configurations related to the describe tool (
pr_descriptionsection), use the following template:With a configuration file, use the following template:
Enabling\disabling automation
meaning the
describetool will run automatically on every PR.the tool will replace every marker of the form
pr_agent:marker_namein the PR description with the relevant content, wheremarker_nameis one of the following:type: the PR type.summary: the PR summary.walkthrough: the PR walkthrough.diagram: the PR sequence diagram (if enabled).Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all.
Custom labels
The default labels of the
describetool are quite generic: [Bug fix,Tests,Enhancement,Documentation,Other].If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases.
Examples for custom labels:
Main topic:performance- pr_agent:The main topic of this PR is performanceNew endpoint- pr_agent:A new endpoint was added in this PRSQL query- pr_agent:A new SQL query was added in this PRDockerfile changes- pr_agent:The PR contains changes in the DockerfileThe list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases.
Note that Labels are not mutually exclusive, so you can add multiple label categories.
Make sure to provide proper title, and a detailed and well-phrased description for each label, so the tool will know when to suggest it.
Inline File Walkthrough 💎
For enhanced user experience, the
describetool can add file summaries directly to the "Files changed" tab in the PR page.This will enable you to quickly understand the changes in each file, while reviewing the code changes (diffs).
To enable inline file summary, set
pr_description.inline_file_summaryin the configuration file, possible values are:'table': File changes walkthrough table will be displayed on the top of the "Files changed" tab, in addition to the "Conversation" tab.true: A collapsable file comment with changes title and a changes summary for each file in the PR.false(default): File changes walkthrough will be added only to the "Conversation" tab.Utilizing extra instructions
The
describetool can be configured with extra instructions, to guide the model to a feedback tailored to the needs of your project.Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description.
Examples for extra instructions:
Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.
More PR-Agent commands
See the describe usage page for a comprehensive guide on using this tool.