fix: 사이드바 기능 추가 및 렌더링 최적화 @jungwon123#79
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에서는 사이드바의 기능을 완성하고, 컴포넌트 메모이제이션 및 비제어 컴포넌트(useRef) 도입을 통해 렌더링 성능을 최적화한 점이 훌륭합니다. 특히 ArticleCard를 Link 컴포넌트로 전환하여 SEO와 사용자 경험을 개선한 부분이 좋습니다. 다만, 여러 컴포넌트에서 중복되는 외부 클릭 감지 로직이나 유틸리티 함수들을 공통화하고, 로고 클릭 영역의 웹 접근성을 보완한다면 더욱 완성도 높은 코드가 될 것입니다.
| useEffect(() => { | ||
| if (!showProfileMenu) return; | ||
| const handleClickOutside = (e: MouseEvent) => { | ||
| if (profileMenuRef.current && !profileMenuRef.current.contains(e.target as Node)) { | ||
| setShowProfileMenu(false); | ||
| } | ||
| }; | ||
| document.addEventListener('mousedown', handleClickOutside); | ||
| return () => document.removeEventListener('mousedown', handleClickOutside); | ||
| }, [showProfileMenu]); |
There was a problem hiding this comment.
외부 클릭 시 프로필 메뉴를 닫는 로직이 Sidebar 컴포넌트(56-65행)와 완전히 동일하게 구현되어 있습니다. 이러한 공통 로직은 useClickOutside와 같은 커스텀 훅으로 분리하여 관리하면 코드 중복을 줄이고 유지보수성을 높일 수 있습니다.
| <div | ||
| className={styles.logo} | ||
| onClick={onLogoClick} | ||
| role={onLogoClick ? 'button' : undefined} | ||
| tabIndex={onLogoClick ? 0 : undefined} | ||
| > |
There was a problem hiding this comment.
로고 클릭 시 페이지를 이동하는 기능을 div 태그와 onClick 핸들러로 구현하셨습니다. 현재 tabIndex와 role이 설정되어 있지만, 키보드 사용자를 위한 Enter 또는 Space 키 이벤트 핸들러가 누락되어 있어 접근성이 떨어집니다. 접근성을 위해 Link 컴포넌트를 사용하거나 button 태그를 사용하는 것을 권장합니다.
| <div | ||
| className={styles.logo} | ||
| onClick={onLogoClick} | ||
| role={onLogoClick ? 'button' : undefined} | ||
| tabIndex={onLogoClick ? 0 : undefined} | ||
| > |
There was a problem hiding this comment.
모바일 헤더와 마찬가지로 사이드바의 로고 영역도 div 대신 Link 컴포넌트를 사용하여 웹 접근성을 개선하는 것이 좋습니다. 현재 구현으로는 키보드 포커스는 가지만 실제 실행은 되지 않는 문제가 있습니다.
| function formatDate(dateString: string): string { | ||
| const date = new Date(dateString); | ||
| const year = date.getFullYear(); | ||
| const month = (date.getMonth() + 1).toString().padStart(2, '0'); | ||
| const day = date.getDate().toString().padStart(2, '0'); | ||
| return `${year}. ${month}. ${day}`; | ||
| } | ||
|
|
||
| function formatLikeCount(count: number): string { | ||
| if (count >= 1000) { | ||
| return '999+'; | ||
| } | ||
| return count.toString(); | ||
| } |
There was a problem hiding this comment.
formatDate와 formatLikeCount 함수는 게시판 목록뿐만 아니라 상세 페이지 등 여러 곳에서 재사용될 가능성이 높은 유틸리티 함수입니다. 현재 ArticleDetailPage 등에서도 유사한 로직이 중복 사용되고 있으므로, src/utils와 같은 공통 디렉토리로 분리하여 관리하는 것을 추천합니다.
4 participants
Summary
fix: 사이드바 기능 추가 및 렌더링 최적화
Issue