Conversation
|
Thanks for the contribution! Please review the labels and make any necessary changes. |
Summary of ChangesHello @eunhyekimyeah, 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은 다양한 사용자 유형에 따라 동적으로 변경되는 하단 내비게이션 바를 구현합니다. expo-router의 Tabs 컴포넌트를 활용하여 사용자 정의 탭 바를 통합하고, 각 탭에 대한 플레이스홀더 화면을 추가했습니다. 또한, 새로운 색상 토큰과 React Native에서 스타일을 일관되게 적용하기 위한 토큰 상수를 정의하여 전반적인 UI 기반을 마련했습니다. Highlights
Changelog
Activity
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
Feat/#12 navigation PR을 잘 검토했습니다. 사용자 유형에 따라 동적으로 탭 바를 구성하는 기능이 추가되었네요. tabConfig.ts를 통해 설정을 분리한 구조가 깔끔하고 확장성이 뛰어나 보입니다.
코드의 완성도를 높이기 위해 몇 가지 개선점을 제안드립니다.
_layout.tsx에서tabBarprop에 함수를 전달하는 방식을 수정하여 불필요한 리렌더링을 방지하고 성능을 개선할 수 있습니다.BottomTabBar.tsx에서 하드코딩된 색상 값을 디자인 토큰으로 관리하여 디자인 시스템의 일관성을 높이는 것이 좋습니다.
추가적으로, 현재 global.styles.css와 tokens.ts 간에 토큰 값을 수동으로 동기화하고 있는데, 장기적으로는 스크립트를 통해 이 과정을 자동화하여 실수를 줄이고 유지보수성을 높이는 방향을 고려해보시면 좋을 것 같습니다.
chunjaemin
left a comment
chunjaemin
left a comment
There was a problem hiding this comment.
바텀바 구현해 주신 것 잘 확인했습니다 레이어와 세그먼트 분리를 깔끔 하게 해주셔서 인상깊네요 ㅎㅎ 이대로 머지하면 될 것 같습니다 고생하셨어요
밑에 적는건 수정하셨으면 하기보단 이런 개선사항이 있을 수 있을 것 같다 정도의 코드리뷰입니다!
[bottom-tab-bar 슬라이스 index.ts 추가]
일반적으로 FSD 구조에서는 slice레이어에 index.ts라는 파일을 두어 slice레이어의 모든 export를 index.ts에서 하도록 권장하더라구요
export 하는 파일이 향후에 이름이 수정 된다던가, slice 폴더 구조를 바꾼다던가 했을 때 index.ts가 없다면 연결되어 있는 모든 view에 찾아가서 수정해주어야 하는데 index.ts가 있다면 view에 직접 찾아가지 않고 index.ts만 수정하면 되는 장점이 있다고 해요 FSD구조 공부하다가 알게 된 건데 공유하면 좋을 것 같아서 적어봅니다!
브랜치를 이동한 후 expo를 통해 실행하니 다음과 같은 에러메시지 창이 나옵니다..! |
There was a problem hiding this comment.
IOS 안드로이드 모두 같은 문제가 발생하는걸 확인했습니다!
궁금해서 문제를 좀 찾아봤는데 다음과 같은 문제가 있다고 하네요!
[문제가 되는 코드 덩어리]
export default function TabLayout() {
return (
<Tabs tabBar={TabBarAdapter} screenOptions={{ headerShown: false }}>
<Tabs.Screen name="index" />
<Tabs.Screen name="nearby" />
<Tabs.Screen name="coupons" />
<Tabs.Screen name="dashboard" />
<Tabs.Screen name="chat" />
<Tabs.Screen name="account" />
</Tabs>
);
}
[문제가 되는 코드]
tabBar={TabBarAdapter}
=> props로 컴포넌트를 전달해주면서 생긴 문제라고 하네요. tabBar props는 일반함수를 받도록 설계된 props라는데, 컴포넌트를 일반함수라고 생각하고 실행하다 보니 컴포넌트안에 있는 hook을 비정상적인 타이밍에 수행하게 되면서 생긴 문제 같습니다. (TabBarAdapter에 hook이 적혀있는건 아니지만 컴파일 할 때 hook이 추가된다고 하네요)
다른 방식으로 전달해주어야 할 것 같아요..!
이건 예시 권장 사항인데 참고하시면 도움 되실 것 같습니다
<Tabs
screenOptions={{ headerShown: false }}
tabBar={({ state, navigation }) => {
const activeRouteName = state.routes[state.index]?.name ?? "index";
return (
<BottomTabBar
userType={TEMP_USER_TYPE}
activeRouteName={activeRouteName}
onTabPress={(routeName) => navigation.navigate(routeName)}
/>
);
}}
>
{/* screens... */}
</Tabs>
4 participants
📝 요약
⚙️ 작업 내용
🔗 관련 이슈
✅ 체크리스트
💬 리뷰어에게
이는 채정님이 svgr setting이 머지된 후에 그를 이용해 아이콘을 임포트해서 사용 예정입니다.