fix: 사이드바 수정, 인풋 수정, 댓글 수정#57
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
This pull request introduces several improvements to the sidebar and comment input components. Key changes include adding a border to comment cards, enhancing the CommentInput component with an optional profile image, and making the SidebarButton component capable of rendering as a Link when an href is provided. The sidebar now also supports a defaultCollapsed prop and improved login/logout states. Additionally, responsive adjustments have been made to the mobile header and drawer. Overall, the changes improve the UI/UX and flexibility of these components.
| export default function CommentInput({ className, profileImage, ...props }: CommentInputProps) { | ||
| if (profileImage) { | ||
| return ( | ||
| <div className={styles.withProfile}> | ||
| <div className={styles.profileImage}>{profileImage}</div> | ||
| <div className={styles.inputArea}> | ||
| <ActionTextArea className={clsx(styles.textarea, className)} {...props} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
The conditional rendering for profileImage creates two distinct return paths. While functional, consider extracting the common ActionTextArea rendering logic to avoid duplication and improve readability. This would make the component more concise and easier to maintain.
export default function CommentInput({ className, profileImage, ...props }: CommentInputProps) {
const actionTextArea = (
<ActionTextArea className={clsx(styles.textarea, className)} {...props} />
);
if (profileImage) {
return (
<div className={styles.withProfile}>
<div className={styles.profileImage}>{profileImage}</div>
<div className={styles.inputArea}>{actionTextArea}</div>
</div>
);
}
return (
<ActionTextArea
wrapperClassName={styles.wrapper}
className={clsx(styles.textarea, className)}
{...props}
/>
);
}
| const renderFooter = () => { | ||
| if (footer) { | ||
| return ( | ||
| <div className={styles.footer} onClick={onProfileClick}> | ||
| {renderSlot(footer)} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if (!isLoggedIn) { | ||
| return ( | ||
| <motion.div className={styles.footer} onClick={onProfileClick} layout> | ||
| <AnimatePresence> | ||
| {!isCollapsed && ( | ||
| <motion.div | ||
| className={styles.profileImage} | ||
| initial={{ opacity: 0, scale: 0.8 }} | ||
| animate={{ opacity: 1, scale: 1 }} | ||
| exit={{ opacity: 0, scale: 0.8 }} | ||
| transition={{ duration: 0.2 }} | ||
| > | ||
| <Image src={humanBig} alt="" width={40} height={40} /> | ||
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| <motion.span className={styles.loginText} layout transition={{ duration: 0.3 }}> | ||
| 로그인 | ||
| </motion.span> | ||
| </motion.div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className={styles.footer} onClick={onProfileClick}> | ||
| <div className={styles.profileImage}>{profileImage}</div> | ||
| <AnimatePresence> | ||
| {!isCollapsed && ( | ||
| <motion.div | ||
| className={styles.profileInfo} | ||
| initial={{ opacity: 0, x: -10 }} | ||
| animate={{ opacity: 1, x: 0 }} | ||
| exit={{ opacity: 0, x: -10 }} | ||
| transition={{ duration: 0.2 }} | ||
| > | ||
| <span className={styles.profileName}>{profileName}</span> | ||
| <span className={styles.profileTeam}>{profileTeam}</span> | ||
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
The renderFooter function has become quite large and handles multiple conditional rendering scenarios (footer prop, logged in/out states). Consider breaking this down into smaller, more focused helper functions (e.g., renderLoggedInFooter, renderLoggedOutFooter) to improve readability and maintainability. This will make the logic easier to follow and test.
yooolleee
left a comment
yooolleee
left a comment
There was a problem hiding this comment.
배포 환경에서 에러가 난것으로 보입니다 에러 해결후에 머지 하시면 좋을 것 같습니다 먼저 어프로브는 남깁니다.
4 participants
Summary
사이드바 미로그인시 로그인 텍스트로 뜨게 하기
사이드바가 열린채로 있을지 닫힌채로 있을지 조작 가능하도록 수정하기
랜딩에서는 닫는게 깔끔하다고 판단되면 닫아두기
그 외에 페이지에서는 열어두기
span -> a태그로 페이지 이동
수정 완료하였습니다.