Feature/spectator UI #412
Feature/spectator UI #412
Conversation
github-actions
bot
added
build
ohprettyhak
added
v2
and removed
build
![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 @igbinni143, 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!
이 Pull Request는 매니저 및 관전자 애플리케이션의 대규모 리팩토링 및 현대화를 목표로 합니다. 기존의 복잡한 설정 파일들을 제거하고 Biome과 같은 최신 개발 도구를 도입하여 개발 워크플로우를 간소화했습니다. 또한, 두 애플리케이션의 핵심 의존성을 업데이트하고, 매니저 앱에는 새로운 API 구조와 함께 로그인, 선수 관리, 리그 개요 등 다양한 UI 기능을 추가했습니다. 관전자 앱에는 랜딩 페이지를 위한 새로운 탭 내비게이션 컴포넌트가 구현되었습니다. 전반적으로 프로젝트의 기술 스택을 최신화하고 새로운 기능 개발을 위한 견고한 기반을 마련하는 데 중점을 두었습니다.
Highlights
- 설정 및 개발 도구 현대화: 기존 설정 파일들을 제거하고 Biome을 도입하여 코드 포매팅 및 린팅을 통합했습니다. 이는 개발 환경의 일관성과 효율성을 크게 향상시킬 것입니다.
- 주요 의존성 업데이트: Next.js, React 등 핵심 라이브러리를 포함한 주요 의존성들이 최신 버전으로 업데이트되었습니다. 이는 성능 개선과 새로운 기능 활용의 기반이 됩니다.
- 매니저 앱 API 구조 개선: 매니저 앱의 API 호출 구조를 쿼리 및 뮤테이션으로 명확하게 분리하여 관리하기 쉽고 확장성 있는 API 레이어를 구축했습니다.
- 매니저 앱 UI 기능 확장: 로그인, 선수 관리(생성, 수정, 삭제), 리그 개요 및 게임 카드, 하단 내비게이션 메뉴 등 매니저 앱의 여러 새로운 UI 컴포넌트와 페이지가 추가되었습니다.
- 관전자 앱 UI 컴포넌트 추가: 관전자 앱의 랜딩 페이지에 새로운 탭 내비게이션 컴포넌트가 추가되어 사용자 경험을 개선했습니다.
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은 랜딩 페이지에 사용될 탭 네비게이션 컴포넌트를 추가하는 내용이네요. 전반적으로 잘 작성되었지만, 타입 안정성을 높이고 성능을 개선할 수 있는 몇 가지 사항을 제안했습니다. TabNavigation 컴포넌트에서 string 대신 유니온 타입을 사용하고, 상수 배열을 컴포넌트 밖으로 추출하는 것을 권장합니다. 관련하여 page.tsx에서도 useState에 타입을 명시하는 부분을 제안했습니다. 검토 부탁드립니다.
| activeTab: string; | ||
| onTabClick: (tabID: string) => void; |
There was a problem hiding this comment.
activeTab과 onTabClick의 tabID에 string 타입을 사용하는 대신, 더 엄격한 유니온 타입 TabId를 사용하는 것이 좋습니다. 이렇게 하면 타입 안정성을 높일 수 있습니다.
TabId는 컴포넌트 파일 상단에 다음과 같이 정의하고 export하여 부모 컴포넌트에서도 사용할 수 있습니다.
export type TabId = 'previous' | 'recent' | 'teams';| activeTab: string; | |
| onTabClick: (tabID: string) => void; | |
| activeTab: TabId; | |
| onTabClick: (tabID: TabId) => void; |
| const tabs = [ | ||
| { id: 'previous', label: '이전 대회' }, | ||
| { id: 'recent', label: '최근 대회' }, | ||
| { id: 'teams', label: '팀별 보기' }, | ||
| ]; |
There was a problem hiding this comment.
tabs 배열은 렌더링될 때마다 재생성될 필요가 없는 상수 데이터입니다. 컴포넌트 외부로 이동시켜 불필요한 재생성을 방지하고 가독성을 높이는 것이 좋습니다. 상수로 선언할 때는 TABS와 같이 대문자로 표기하는 것이 일반적입니다.
| import { useState } from 'react'; | ||
|
|
||
| const Page = () => { | ||
| const [activeTab, setActiveTab] = useState('recent'); |
There was a problem hiding this comment.
TabNavigation.tsx에서 제안한 대로 TabId 타입을 export한 후, 이 페이지에서 해당 타입을 import하여 useState의 제네릭 타입으로 사용하면 타입 안정성을 향상시킬 수 있습니다. import 문도 다음과 같이 수정해야 합니다.
import { TabNavigation, type TabId } from '~/app/landingpage/_components/TabNavigation';| const [activeTab, setActiveTab] = useState('recent'); | |
| const [activeTab, setActiveTab] = useState<TabId>('recent'); |
🌍 이슈 번호
✅ 작업 내용