fix: 로그아웃 기능 사이드바 내장 기능으로 구현, 마이페이지및 자유게시판 사이드바 드롭다운 사용, 변경시 성공 토스트 구현#82
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
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
로그아웃 기능의 내장화와 사이드바 드롭다운 적용을 통해 전반적인 코드 구조가 깔끔해졌습니다. 특히 마이페이지에서 변경 성공 시 토스트 알림을 추가하여 사용자 경험을 개선한 점이 훌륭합니다. 다만, 공통 컴포넌트(MobileHeader)가 특정 도메인 컴포넌트(TeamSidebarDropdown)에 의존하는 구조는 향후 유지보수와 재사용성 측면에서 위험 요소가 될 수 있습니다. 또한, 여러 컴포넌트에서 동일한 로그아웃 및 이동 로직이 반복되고 있어 이를 공통화할 필요가 있습니다.
| import Image from 'next/image'; | ||
| import clsx from 'clsx'; | ||
| import MobileDrawer from './MobileDrawer'; | ||
| import TeamSidebarDropdown from '@/app/(root)/[teamid]/_domain/components/Team/TeamSidebarDropdown'; |
There was a problem hiding this comment.
공통 컴포넌트 폴더(src/components)에 위치한 MobileHeader가 특정 도메인(src/app/(root)/[teamid])의 컴포넌트를 직접 참조하고 있습니다. 이는 컴포넌트 간의 결합도를 높이고 재사용성을 떨어뜨리는 설계입니다. drawerContent의 기본값을 외부(예: layout)에서 주입하거나, 의존성을 역전시킬 수 있는 방법을 고려해 보세요.
There was a problem hiding this comment.
코드 수정 완료하여 의존석 역전하였습니다
| isLoggedIn, | ||
| profileImage, | ||
| onMenuClick, | ||
| drawerContent, |
There was a problem hiding this comment.
onMenuClick이 MobileHeaderProps에는 정의되어 있고 주석으로도 호환성을 위해 유지한다고 되어 있으나, 구조 분해 할당에서 누락되었습니다. 이를 추가해야 내부에서 사용할 수 있습니다.
| drawerContent, | |
| drawerContent, onMenuClick, |
| const defaultLogout = useCallback(async () => { | ||
| await fetch('/api/auth/logout', { method: 'POST' }); | ||
| router.push('/login'); | ||
| }, [router]); | ||
|
|
||
| const handleLogout = onLogout ?? defaultLogout; | ||
| const handleProfileClick = onProfileClick ?? (() => router.push('/mypage')); | ||
| const handleLogoClick = onLogoClick ?? (() => router.push('/addteam')); |
There was a problem hiding this comment.
로그아웃 처리 및 페이지 이동 로직이 MobileHeader, Sidebar, layout 세 곳에서 중복되어 정의되어 있습니다. 특히 defaultLogout 로직은 완전히 동일하므로, 이를 별도의 유틸리티 함수나 커스텀 훅으로 분리하여 코드 중복을 제거하고 유지보수성을 높이는 것이 좋습니다.
| type="button" | ||
| className={styles.menuButton} | ||
| onClick={onMenuClick} | ||
| onClick={() => setIsDrawerOpen(true)} |
There was a problem hiding this comment.
호환성을 위해 onMenuClick이 전달된 경우 드로어를 여는 것과 동시에 해당 콜백을 호출해 주는 것이 좋습니다.
| onClick={() => setIsDrawerOpen(true)} | |
| onClick={() => { onMenuClick?.(); setIsDrawerOpen(true); }} |
| const defaultLogout = useCallback(async () => { | ||
| await fetch('/api/auth/logout', { method: 'POST' }); | ||
| router.push('/login'); | ||
| }, [router]); | ||
|
|
||
| const handleLogout = onLogout ?? defaultLogout; | ||
| const handleProfileClick = onProfileClick ?? (() => router.push('/mypage')); | ||
| const handleLogoClick = onLogoClick ?? (() => router.push('/addteam')); |
There was a problem hiding this comment.
로그아웃 및 이동 핸들러 로직이 MobileHeader와 동일하게 중복 정의되어 있습니다. 공통 로직을 한 곳에서 관리하도록 개선을 권장합니다.
| {successToast && ( | ||
| <Toast | ||
| isOpen | ||
| message={successToast} | ||
| actionLabel="" | ||
| onDismiss={() => setSuccessToast(null)} | ||
| className={styles.toast} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
hasChanges에 의한 안내 토스트와 successToast가 동시에 활성화될 경우, 두 토스트가 겹쳐서 보일 수 있습니다. toastWrapper의 CSS가 스택 구조를 지원하지 않는다면, 하나의 토스트 상태 변수를 사용하여 메시지 내용만 교체하는 방식으로 개선하는 것을 추천합니다.
There was a problem hiding this comment.
Code Review
이 PR은 사이드바와 모바일 헤더 컴포넌트의 리팩토링에 중점을 두어 로그아웃, 마이페이지 탐색 및 팀 선택 로직을 캡슐화했습니다. 팀 관련 기능을 위해 TeamSidebarDropdown을 도입하고 MobileDrawer를 MobileHeader에 직접 통합했습니다. 또한, 프로필 이름 및 비밀번호 변경에 대한 성공 토스트 알림을 추가하여 사용자 경험을 개선했습니다. 전반적으로 컴포넌트 재사용성을 높이고 루트 레이아웃을 단순화하여 유지보수성을 향상시키는 잘 구조화된 변경 사항입니다.
3 participants
Summary
Issue