사이드바 모션 추가 및 Gnb 버튼 사용#46
Conversation
Summary of ChangesHello @jungwon123, 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
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
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은 사이드바에 framer-motion을 사용하여 애니메이션을 추가하고, 기존의 SidebarAddButton을 GnbAddButton으로 교체하는 변경 사항을 담고 있습니다. 전반적으로 사이드바의 사용자 경험을 향상시키는 좋은 개선입니다. 몇 가지 코드 개선점을 제안합니다. Sidebar.tsx 컴포넌트에서 하드코딩된 값들을 상수로 추출하고, 중복되는 애니메이션 로직과 렌더링 로직을 리팩토링하여 코드의 가독성과 유지보수성을 높일 수 있습니다.
| {teamSelect && | ||
| (typeof teamSelect === 'function' ? teamSelect(isCollapsed) : teamSelect)} | ||
| {typeof children === 'function' ? children(isCollapsed) : children} | ||
| {addButton && (typeof addButton === 'function' ? addButton(isCollapsed) : addButton)} |
There was a problem hiding this comment.
teamSelect, children, addButton을 렌더링하는 로직이 중복되고, children prop의 렌더링 방식이 다른 두 prop과 일관되지 않습니다. 이로 인해 children prop에 0과 같은 falsy 값이 전달될 경우 의도치 않게 렌더링되는 문제가 발생할 수 있습니다.
이 로직을 헬퍼 함수로 추출하여 중복을 제거하고 일관성을 확보하는 것을 권장합니다.
const renderSlot = (slotNode: ReactNode | ((isCollapsed: boolean) => ReactNode)) => {
if (!slotNode) return null;
return typeof slotNode === 'function' ? slotNode(isCollapsed) : slotNode;
};위 함수를 컴포넌트 내부에 정의하고 다음과 같이 코드를 개선할 수 있습니다.
| {teamSelect && | |
| (typeof teamSelect === 'function' ? teamSelect(isCollapsed) : teamSelect)} | |
| {typeof children === 'function' ? children(isCollapsed) : children} | |
| {addButton && (typeof addButton === 'function' ? addButton(isCollapsed) : addButton)} | |
| {renderSlot(teamSelect)} | |
| {renderSlot(children)} | |
| {renderSlot(addButton)} |
| <aside className={clsx(styles.sidebar, isCollapsed && styles.collapsed)}> | ||
| <motion.aside | ||
| className={clsx(styles.sidebar, isCollapsed && styles.collapsed)} | ||
| animate={{ width: isCollapsed ? 72 : 270 }} |
There was a problem hiding this comment.
사이드바의 접혔을 때와 펼쳤을 때의 너비 값(72, 270)이 하드코딩되어 있습니다. 이 값들을 "매직 넘버"라고 부르며, 코드의 가독성과 유지보수성을 저해할 수 있습니다. 이 값들을 상수로 정의하여 사용하는 것을 권장합니다.
예를 들어, 컴포넌트 외부에 다음과 같이 상수를 선언할 수 있습니다.
const SIDEBAR_WIDTH = {
COLLAPSED: 72,
EXPANDED: 270,
};| animate={{ width: isCollapsed ? 72 : 270 }} | |
| animate={{ width: isCollapsed ? SIDEBAR_WIDTH.COLLAPSED : SIDEBAR_WIDTH.EXPANDED }} |
| <motion.div | ||
| key="icon" | ||
| initial={{ opacity: 0, scale: 0.8 }} | ||
| animate={{ opacity: 1, scale: 1 }} | ||
| exit={{ opacity: 0, scale: 0.8 }} | ||
| transition={{ duration: 0.2 }} | ||
| > |
There was a problem hiding this comment.
로고 아이콘과 전체 로고의 애니메이션 속성이 중복으로 정의되어 있습니다. framer-motion의 variants를 활용하여 중복을 제거하고 코드를 더 간결하게 만들 수 있습니다.
예를 들어, 다음과 같이 variants 객체를 정의하고 사용할 수 있습니다.
const logoVariants = {
hidden: { opacity: 0, scale: 0.8 },
visible: { opacity: 1, scale: 1 },
};이렇게 하면 motion.div가 더 깔끔해집니다.
| <motion.div | |
| key="icon" | |
| initial={{ opacity: 0, scale: 0.8 }} | |
| animate={{ opacity: 1, scale: 1 }} | |
| exit={{ opacity: 0, scale: 0.8 }} | |
| transition={{ duration: 0.2 }} | |
| > | |
| <motion.div | |
| key="icon" | |
| variants={logoVariants} | |
| initial="hidden" | |
| animate="visible" | |
| exit="hidden" | |
| transition={{ duration: 0.2 }} | |
| > |
4 participants
Summary
사이드바 모션 추가 및 Gnb 버튼 사용하도록 수정하였습니다
Issue
Scope