feat(ui): 시스템 컴포넌트 추가 및 매니저 로그인 구현 #408
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @ohprettyhak, 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!
이 PR은 UI 컴포넌트 라이브러리에 새로운 시스템 컴포넌트(버튼, 입력 필드, 선택 상자)를 추가하고 기존 컴포넌트(타이포그래피, 배지)를 개선합니다. 또한, 이러한 새로운 컴포넌트를 활용하여 매니저 애플리케이션의 로그인 페이지를 구현합니다.
Highlights
- 새로운 UI 컴포넌트 추가: 새로운 UI 시스템 컴포넌트인 Button, Input, Select가 packages/ui에 추가되었습니다.
- 기존 UI 컴포넌트 개선: 기존 Badge 컴포넌트의 크기 및 변형 타입이 변경되고, Typography 컴포넌트의 size prop이 fontSize로 리팩토링되는 등 Typography 및 Badge 컴포넌트가 개선되었습니다.
- 매니저 로그인 페이지 구현: 매니저 애플리케이션에 새로운 LoginForm 컴포넌트가 추가되었으며, 이는 새로 추가된 Button 및 Input 컴포넌트를 사용하여 로그인 기능을 제공합니다.
- API 베이스 패키지 빌드 시스템 변경: packages/api-base 패키지의 빌드 시스템이 변경되어, build.js 파일이 제거되고 package.json에서 dist 파일을 참조하는 대신 src 파일을 직접 참조하도록 업데이트되었습니다. 이는 모노레포 환경에서 패키지 소비 방식을 최적화하기 위한 변경으로 보입니다.
- 새로운 의존성 추가 (ts-pattern): packages/ui에 ts-pattern 라이브러리가 새로운 의존성으로 추가되어, 컴포넌트 로직 내에서 패턴 매칭을 활용할 수 있게 되었습니다.
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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| 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 issue 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
-
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. ↩
There was a problem hiding this comment.
Code Review
이번 PR은 UI 패키지에 Button, Input, Select 등 새로운 시스템 컴포넌트를 추가하고 기존 Badge, Typography 컴포넌트를 개선하는 등 중요한 변경 사항을 담고 있습니다. 또한, 새로운 컴포넌트를 활용하여 매니저 앱의 로그인 페이지를 구현하셨네요. 전반적으로 컴포넌트 아키텍처가 잘 설계되었고, CSS 변수와 ts-pattern 같은 현대적인 기술을 잘 활용하셨습니다. 몇 가지 중요한 수정 사항과 일관성 및 유지보수성을 높이기 위한 제안 사항을 리뷰에 남겼습니다. 특히 로그인 폼의 기능과 관련된 치명적인 버그가 있으니 꼭 확인해주세요.
… ts-pattern for size and variant handling
|
/gemini review |
There was a problem hiding this comment.
Code Review
안녕하세요. 이번 PR에서는 새로운 UI 컴포넌트(Button, Input, Select, Toast)를 추가하고 기존 컴포넌트(Badge, Typography)를 개선하여 매니저 로그인 페이지를 구현해주셨네요. 전체적으로 컴포넌트 설계가 잘 되어 있고, ts-pattern과 CSS 변수를 활용하여 코드의 가독성과 유지보수성을 높인 점이 인상적입니다.
몇 가지 개선점을 제안드렸습니다.
login-form.tsx에서 페이지 이동 시useRouter를 사용하도록 변경하여 사용자 경험을 개선할 수 있습니다.Input.tsx와Select.tsx에서 불필요한role="presentation"속성을 제거하여 코드를 더 명확하게 만들 수 있습니다.
자세한 내용은 각 파일의 인라인 코멘트를 확인해주세요. 좋은 작업 감사합니다!
🌍 이슈 번호
✅ 작업 내용
Button,Input,Select,Toast컴포넌트를 추가하고,Typography,Badge컴포넌트를 개선했어요.