Feat/sidebar change #162
Feat/sidebar change #162
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @dasosann, 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. 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
전반적으로 사이드바를 페이지에서 재사용 가능한 컴포넌트로 리팩터링하는 작업이 잘 이루어졌습니다. 슬라이드 애니메이션과 상태 관리를 통해 컴포넌트 기반 사이드바가 잘 동작하도록 구현되었습니다. 코드 품질을 더욱 향상시키기 위해 몇 가지 개선 사항을 제안했습니다. React의 key 사용에 대한 모범 사례, 코드 간결성, 그리고 비동기 작업 후 컴포넌트 unmount 시 발생할 수 있는 잠재적인 메모리 누수 문제에 대한 수정이 포함되어 있습니다. 제안된 변경 사항들을 검토하고 반영해주시면 감사하겠습니다.
src/feature/album/detail/sidebar/components/AlbumParticipants.tsx
Outdated
Show resolved
Hide resolved
| {!data.isExpired && !isEditMode && ( | ||
| <button | ||
| onClick={() => setIsEditMode(true)} | ||
| type='button' | ||
| className='typo-body-sm-medium text-text-subtle bg-button-tertiary-fill rounded-[4px] px-3 py-1.5' | ||
| > | ||
| 편집 | ||
| </button> | ||
| )} | ||
| {isEditMode && ( | ||
| <button | ||
| onClick={() => setIsEditMode(false)} | ||
| type='button' | ||
| className='typo-body-sm-medium text-text-subtle bg-button-tertiary-fill rounded-[4px] px-3 py-1.5' | ||
| > | ||
| 완료 | ||
| </button> | ||
| )} |
There was a problem hiding this comment.
편집/완료 버튼 로직이 두 개의 분리된 button으로 구현되어 있어 코드가 중복됩니다. 하나의 버튼으로 통합하고 isEditMode 상태에 따라 텍스트를 동적으로 변경하면 더 간결하고 유지보수하기 좋은 코드가 됩니다.
| {!data.isExpired && !isEditMode && ( | |
| <button | |
| onClick={() => setIsEditMode(true)} | |
| type='button' | |
| className='typo-body-sm-medium text-text-subtle bg-button-tertiary-fill rounded-[4px] px-3 py-1.5' | |
| > | |
| 편집 | |
| </button> | |
| )} | |
| {isEditMode && ( | |
| <button | |
| onClick={() => setIsEditMode(false)} | |
| type='button' | |
| className='typo-body-sm-medium text-text-subtle bg-button-tertiary-fill rounded-[4px] px-3 py-1.5' | |
| > | |
| 완료 | |
| </button> | |
| )} | |
| {!data.isExpired && ( | |
| <button | |
| onClick={() => setIsEditMode((prev) => !prev)} | |
| type='button' | |
| className='typo-body-sm-medium text-text-subtle bg-button-tertiary-fill rounded-[4px] px-3 py-1.5' | |
| > | |
| {isEditMode ? '완료' : '편집'} | |
| </button> | |
| )} |
| const handleExit = async (): Promise<void> => { | ||
| try { | ||
| await mutateAsync(albumId); | ||
| router.replace('/main'); | ||
| Toast.check(`${data?.title ? `${data.title} ` : ''}앨범이 삭제됐어요.`); | ||
| setIsClosing(true); | ||
| setTimeout(() => { | ||
| setIsClosing(false); | ||
| router.replace('/main'); | ||
| Toast.check( | ||
| `${informData?.title ? `${informData.title} ` : ''}앨범이 삭제됐어요.`, | ||
| ); | ||
| }, 400); | ||
| } catch (e) { | ||
| console.log(e); | ||
| Toast.alert(`앨범 삭제를 실패하였어요.\n다시한번 시도해주세요.`); | ||
| } | ||
| }; |
There was a problem hiding this comment.
handleExit 함수에 두 가지 개선점을 제안합니다.
router.replace('/main')가 호출되면 현재 컴포넌트는 unmount됩니다. Unmount된 컴포넌트의 상태를 업데이트(setIsClosing(false))하려고 하면 React에서 메모리 누수 경고가 발생할 수 있으므로, 해당 상태 업데이트를 제거하는 것이 안전합니다.- 에러를 로깅할 때는
console.log보다console.error를 사용하는 것이 의미상 더 명확하며, 브라우저 개발자 도구에서 에러를 쉽게 필터링하고 식별할 수 있습니다.
const handleExit = async (): Promise<void> => {
try {
await mutateAsync(albumId);
setIsClosing(true);
setTimeout(() => {
router.replace('/main');
Toast.check(
`${informData?.title ? `${informData.title} ` : ''}앨범이 삭제됐어요.`,
);
}, 400);
} catch (e) {
console.error(e);
Toast.alert(`앨범 삭제를 실패하였어요.\n다시한번 시도해주세요.`);
}
};
요약
기존 페이지로 구성되어있던 사이드바를
컴포넌트로 변경
구현 사항
📸 스크린샷
Need Review
Reference
📜 리뷰 규칙
Reviewer는 아래 P5 Rule을 참고하여 리뷰를 진행합니다.
P5 Rule을 통해 Reviewer는 Reviewee에게 리뷰의 의도를 보다 정확히 전달할 수 있습니다.