Feat/button component

[dasosann]

PR Type

Enhancement

---

Description

• 폰트 사이즈 유틸리티 클래스명 text-{size}-{weight}에서 typo-{size}-{weight}로 변경

• 새로운 Button 컴포넌트 추가 (fixed, disabled, safeArea 등 다양한 옵션 지원)

• 기존 Blur 컴포넌트를 Button 컴포넌트로 교체

---

Diagram Walkthrough

flowchart LR
  A["폰트 유틸리티<br/>text → typo"] --> B["tokens.css<br/>클래스명 변경"]
  C["Button 컴포넌트<br/>신규 생성"] --> D["다양한 옵션<br/>fixed, disabled, safeArea"]
  E["page.tsx<br/>Blur → Button"] --> F["컴포넌트 교체"]
  B --> G["스타일 시스템<br/>통일"]
  D --> G
  F --> G

Loading

File Walkthrough

	Relevant files
Formatting	tokens.css 폰트 유틸리티 클래스명 일괄 변경                                                                              app/tokens.css 모든 폰트 사이즈 유틸리티 클래스명을 text-{size}-{weight}에서 typo-{size}-{weight}로 변경 10px부터 24px까지 모든 사이즈와 weight(400, 500, 600, 700) 조합 업데이트 +28/-28
Configuration changes	generate-tokens.js 토큰 생성 스크립트 클래스명 패턴 수정                                                                        scripts/generate-tokens.js 폰트 사이즈 유틸리티 생성 로직의 클래스명 패턴을 typo-{size}-{weight}로 변경 주석 업데이트로 변경된 네이밍 규칙 반영 +2/-2
Enhancement	Button.tsx 새로운 Button 컴포넌트 구현                                                                              components/ui/Button.tsx React.forwardRef를 활용한 새로운 Button 컴포넌트 생성 fixed 포지셔닝, disabled 상태, safeArea 지원 등 다양한 옵션 제공 Tailwind 클래스와 인라인 스타일 혼합 지원으로 유연한 스타일링 가능 primary 버튼에 border와 shadow 자동 적용 +125/-0  page.tsx 페이지 컴포넌트 업데이트                                                                                        app/page.tsx Blur 컴포넌트 제거 및 Button 컴포넌트 import 추가 기존 Blur 컴포넌트를 fixed={true} 옵션의 Button으로 교체 +2/-1

---

---

✨ Describe tool usage guide:

---

Overview:
The describe tool 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_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the describe tool is: pr_commands = ["/describe", ...] meaning the describe tool will run automatically on every PR. Markers are an alternative way to control the generated description, to give maximal control to the user. If you set: pr_commands = ["/describe --pr_description.use_description_markers=true", ...] the tool will replace every marker of the form pr_agent:marker_name in the PR description with the relevant content, where marker_name is 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 describe tool 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 performance New endpoint - pr_agent:A new endpoint was added in this PR SQL query - pr_agent:A new SQL query was added in this PR Dockerfile changes - pr_agent:The PR contains changes in the Dockerfile ... The 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 describe tool 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_summary in 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 describe tool 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: [pr_description] extra_instructions="""- The PR title should be in the format: '<PR type>: <title>' - The title should be short and concise (up to 10 words) - ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /help_docs <QUESTION>: Given a path to documentation (either for this repository or for a given one), ask a question. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the describe usage page for a comprehensive guide on using this tool.

[gemini-code-assist]

Summary of Changes

Hello @dasosann, I'm Gemini Code Assist¹! 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 focuses on enhancing the UI component library by introducing a versatile Button component and standardizing typography utility class names. The changes aim to provide a more robust and consistent foundation for building user interfaces, making components more reusable and styles more predictable.

Highlights

• New Button Component: A new, highly customizable Button component has been introduced, supporting various styling options, fixed positioning, and safe area handling.
• Typography Class Renaming: All font size and weight utility classes in app/tokens.css have been refactored from text-{size}-{weight} to typo-{size}-{weight} for improved naming consistency.
• Token Generation Script Update: The generate-tokens.js script has been updated to reflect the new typo- prefix for typography utility classes, ensuring consistency in generated styles.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이번 PR은 폰트 유틸리티 클래스명 변경과 새로운 Button 컴포넌트 추가 및 기존 Blur 컴포넌트 교체를 포함합니다. 폰트 유틸리티 클래스명 변경은 일관된 스타일 시스템을 구축하는 데 기여하며, 새로운 Button 컴포넌트는 다양한 옵션을 지원하여 재사용성과 유연성을 높였습니다. 전반적으로 코드 품질 향상에 긍정적인 영향을 미칠 것으로 보입니다. 다만, React 19의 권장 사항과 코드 스타일 측면에서 몇 가지 개선할 점이 있습니다.

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

Code Review

안녕하세요. Button 컴포넌트 추가 및 타이포그래피 유틸리티 클래스 리팩터링 PR에 대한 리뷰입니다.

전반적으로 새로운 Button 컴포넌트는 다양한 옵션을 제공하여 재사용성이 높고, typo- 접두사로 클래스명을 변경하여 디자인 시스템의 일관성을 높인 점이 좋습니다. 몇 가지 개선점을 제안드리며, 이는 제공된 레포지토리 스타일 가이드를 기반으로 합니다.

주요 리뷰 내용은 다음과 같습니다:

• React 19 ref 처리 방식: 최신 React 패턴에 맞게 ref prop 타입을 간소화했습니다. (스타일 가이드 23번)
• Tailwind CSS 사용: 인라인 스타일로 작성된 부분을 Tailwind 유틸리티 클래스로 통합하여 일관성을 높였습니다. (스타일 가이드 60번)
• 웹 표준 준수: 버튼의 기본 type을 명시하여 예기치 않은 동작을 방지하도록 제안했습니다. (스타일 가이드 80번)

자세한 내용은 각 파일의 주석을 확인해주세요.

[gemini-code-assist]

웹 표준(스타일 가이드 규칙 80)을 준수하고 예기치 않은 동작을 방지하기 위해 버튼의 type을 명시적으로 지정하는 것이 좋습니다. type의 기본값을 'button'으로 설정하면, 이 컴포넌트가 <form> 안에서 사용될 때 의도치 않은 폼 제출을 막을 수 있습니다. 이 제안은 props로 type이 전달될 경우 해당 값을 우선적으로 사용합니다.

Suggested change

	{...props}
	{...{ type: "button", ...props }}

References

1. 폼 제출 버튼은 type="submit"을 명시하는 등, 버튼의 역할을 명확히 하여 웹 표준을 준수해야 합니다. 일반 버튼의 경우 type="button"을 명시하여 의도치 않은 동작을 방지하는 것이 좋습니다. ^(link)

[dasosann]

type의 기본값을 button으로 설정완료