Conversation
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
design: 모바일 UX 개선 (#216)
Summary of ChangesHello @AndyH0ng, 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은 애플리케이션의 모바일 반응형 디자인과 사용자 경험을 개선하는 데 중점을 둡니다. 특히 슬라이드 편집 및 보기 페이지의 모바일 가시성을 향상시키고, 로그인 버튼 컴포넌트를 더 유연한 Dropdown 컴포넌트로 리팩토링하여 불필요한 코드를 제거했습니다. 전반적으로 모바일 환경에서의 사용성을 높이고 코드의 유지보수성을 개선하는 변경사항입니다. Highlights
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
이번 PR은 슬라이드 페이지의 모바일 반응형 UI를 구현하고, 관련 컴포넌트들을 리팩토링하는 내용을 담고 있습니다. 전반적으로 모바일 레이아웃이 잘 구현되었고, LoginButton과 ShareButton에서 useLocation 의존성을 제거하여 코드가 간소화된 점이 좋습니다. 또한 Popover를 재사용 가능한 Dropdown 컴포넌트로 대체하여 추상화 수준을 높인 것도 훌륭한 개선입니다. 몇 가지 코드 중복 및 일관성 관련하여 유지보수성을 더 높일 수 있는 부분을 아래 주석으로 제안했습니다.
| className={clsx( | ||
| 'h-7 items-center gap-1.5 rounded-md bg-transparent px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-200 focus-visible:outline-2 focus-visible:outline-main min-w-0', | ||
| showOnMobile ? 'inline-flex' : 'hidden md:inline-flex', | ||
| )} |
There was a problem hiding this comment.
className을 생성하는 로직이 77-80 라인에서도 동일하게 반복되고 있습니다. 코드 중복을 줄이고 유지보수성을 높이기 위해 이 clsx 호출을 컴포넌트 상단의 변수로 추출하여 두 버튼에서 공유하는 것을 권장합니다.
예시:
const buttonClassName = clsx(
'h-7 items-center gap-1.5 rounded-md bg-transparent px-2 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-200 focus-visible:outline-2 focus-visible:outline-main min-w-0',
showOnMobile ? 'inline-flex' : 'hidden md:inline-flex',
);References
- Extract complex or repetitive conditional
classNamelogic into a helper function, using utilities likeclsxto improve readability and maintainability.
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> | ||
| <path | ||
| d="m15 18-6-6 6-6" | ||
| stroke="currentColor" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| </svg> |
There was a problem hiding this comment.
이전 슬라이드로 가는 버튼의 SVG 아이콘이 코드에 직접 포함되어 있습니다. 106-114 라인의 다음 슬라이드 버튼 아이콘도 마찬가지입니다. 프로젝트의 다른 부분에서 아이콘을 처리하는 방식과 일관성을 맞추고 재사용성을 높이기 위해 이 SVG들을 별도의 파일(예: ChevronLeftIcon.svg, ChevronRightIcon.svg)로 추출하고, svgr을 통해 React 컴포넌트로 임포트하여 사용하는 것을 권장합니다.
1 participant
📌 관련 이슈