style: 커뮤니티 navbar 위치 및 스타일 변경#52
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @FlashingFuture, 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은 커뮤니티 페이지의 내비게이션바 사용자 경험을 개선하기 위해 위치와 스타일을 전반적으로 변경합니다. 기존 하단에 고정되어 있던 내비게이션바를 헤더 바로 아래 상단에 고정시키고, 시각적으로 더 깔끔한 탭 형태의 디자인으로 변경했습니다. 또한, '전체보기' 탭을 추가하여 콘텐츠 접근성을 높였으며, 레이아웃 변경에 맞춰 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
이번 PR은 커뮤니티 네비게이션 바를 화면 하단에서 상단 헤더 바로 아래로 이동하고 스타일을 변경하는 작업을 성공적으로 수행했습니다. 특히 CommunityAppLayout.tsx의 구조가 더 명확해진 점이 좋습니다.
다만, 코드 품질과 안정성을 높이기 위해 몇 가지 수정이 필요해 보입니다.
- 스타일(높이, offset, 트랜지션 시간)에 직접 값을 입력한 "매직 넘버"가 여러 곳에서 발견되었습니다. 스타일 가이드에 따라 이러한 값들은 테마 파일로 옮겨 일관성을 유지하고 관리를 용이하게 하는 것이 좋습니다.
NavKey타입 정의에 중요한 문제가 있습니다. 이전 키인'home'이 타입에 남아있어communityStore의 초기 상태와 충돌을 일으킵니다. 이로 인해 페이지 로드 시 버그가 발생할 수 있으므로 반드시 수정이 필요합니다.
자세한 내용은 각 파일에 남긴 코멘트를 참고해주세요.
| } | ||
|
|
||
| export type NavKey = 'home' | 'photo' | 'route' | 'run'; | ||
| export type NavKey = 'home' | 'photo' | 'route' | 'run' | 'all'; |
There was a problem hiding this comment.
NavKey 타입에 더 이상 사용되지 않는 'home'이 남아있습니다. CommunityNavigator.tsx에서는 'home'이 'all'로 대체되었습니다. 이 불일치로 인해 communityStore의 초기 상태(activeNav: 'home')가 유효하지 않게 되어, 커뮤니티 페이지 첫 로드 시 네비게이션 바의 활성 상태가 올바르게 표시되지 않는 등 예기치 않은 동작을 유발할 수 있습니다. NavKey에서 'home'을 제거하고, communityStore.ts의 초기 상태를 'all'과 같은 유효한 값으로 변경해야 합니다.
| export type NavKey = 'home' | 'photo' | 'route' | 'run' | 'all'; | |
| export type NavKey = 'photo' | 'route' | 'run' | 'all'; |
| tabs, | ||
| children, | ||
| topOffset = 72, | ||
| topOffset = 56, |
There was a problem hiding this comment.
| import type { NavKey } from '@/types/community'; | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| type BaseProps = React.ComponentProps<typeof AppLayout>; |
There was a problem hiding this comment.
Props 타입에서 더 이상 사용되지 않는 activeNav가 제거되었어야 하지만, 이전 코드(type Props = BaseProps & { activeNav?: NavKey };)에서 NavKey 타입이 types/community에서 import 되고 있었습니다. 현재 코드에서는 NavKey import가 제거되었지만, CommunityNavigator 내부에서 NavKey를 export하고 있으므로, 이 컴포넌트의 Props 타입도 CommunityNavigator에서 export한 NavKey를 사용하는 것이 타입 안정성 측면에서 더 명확할 수 있습니다. 현재 구조 변경으로 인해 이 prop이 필요없어졌지만, 추후 비슷한 패턴을 사용할 때 참고하시면 좋을 것 같습니다.
| gap: 2px; | ||
| const TabButton = styled.button<{ active?: boolean }>` | ||
| ${({ theme }) => theme.typography.small}; | ||
| height: 36px; |
| transition: | ||
| background 0.15s ease, | ||
| color 0.15s ease, | ||
| border-color 0.15s ease; |
There was a problem hiding this comment.
transition 속성에 사용된 0.15s는 하드코딩된 값입니다. 1 theme.ts에 정의된 transition 값을 (예: theme.transition.fast) 사용하면 앱 전체의 애니메이션 속도를 일관되게 관리할 수 있습니다.
transition:
background ${({ theme }) => theme.transition.fast},
color ${({ theme }) => theme.transition.fast},
border-color ${({ theme }) => theme.transition.fast};
Style Guide References
Footnotes
-
재사용 가능한 값들은 테마 또는 상수 파일에서 관리하여 일관성을 유지하고 재사용성을 높여야 합니다. ↩
1 participant
작업 내용