Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @dodaaaaam, 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은 '사진수다 검색' 페이지의 사용자 경험을 개선하기 위해 검색 결과가 없어도 필터링 옵션을 항상 표시하도록 변경합니다. 또한, 로딩 스켈레톤 UI의 간격을 조정하여 시각적 일관성을 높였습니다. 이를 통해 사용자는 검색 결과 유무와 관계없이 필터 기능을 활용할 수 있습니다. 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
이 PR은 사진수다 검색 결과가 없을 때도 필터링 UI를 표시하도록 로직을 변경합니다. 주요 변경 사항은 PhotoFeedSearchPage에서 검색 결과가 0개일 때의 렌더링 방식을 수정한 것입니다. 코드 리뷰 결과, 몇 가지 레이아웃 불일치 문제와 코드 개선점을 발견했습니다. 스켈레톤 UI의 간격이 실제 컴포넌트와 다르게 적용되어 있어 수정을 제안했으며, 불필요한 조건문을 제거하여 코드 가독성을 높일 것을 권장합니다.
| if (isSearchPending) { | ||
| return ( | ||
| <section className="columns-2 gap-4 md:columns-3 xl:columns-4"> | ||
| <section className="columns-2 md:columns-3 xl:columns-4"> |
There was a problem hiding this comment.
gap-4 클래스를 제거하면 스켈레톤 카드들의 열(column) 사이 간격이 사라져 레이아웃이 깨져 보일 수 있습니다. 실제 검색 결과와 일관된 UI를 위해 gap-4를 다시 추가하는 것을 권장합니다.
| <section className="columns-2 md:columns-3 xl:columns-4"> | |
| <section className="columns-2 gap-4 md:columns-3 xl:columns-4"> |
|
|
||
| {/* 텍스트 영역 */} | ||
| <div className="mt-1 w-full"> | ||
| <div className="mt-1 mb-2 w-full"> |
There was a problem hiding this comment.
PhotoCard 컴포넌트는 하단 마진이 없으며, 부모 컨테이너의 gap 속성으로 아이템 간의 간격이 조절됩니다. 스켈레톤 UI도 이와 일관성을 맞추기 위해 mb-2를 제거하는 것이 좋습니다. 실제 카드 목록은 gap-4(1rem)를 사용하는데, mb-2(0.5rem)는 다른 간격을 만들어냅니다.
| <div className="mt-1 mb-2 w-full"> | |
| <div className="mt-1 w-full"> |
| <PhotoCardSkeleton | ||
| key={`skeleton-${i}`} | ||
| className={heightClass} | ||
| className={`mb-2 ${heightClass}`} |
There was a problem hiding this comment.
section에 gap-4를 다시 사용한다면, 이 mb-2 클래스는 더 이상 필요하지 않습니다. 또한 이 클래스는 스켈레톤 전체가 아닌 내부 이미지 요소에 적용되어 의도치 않은 레이아웃을 유발할 수 있습니다.
| className={`mb-2 ${heightClass}`} | |
| className={heightClass} |
| } | ||
|
|
||
| if (previewList.length > 0) { | ||
| if (previewList.length >= 0) { |
There was a problem hiding this comment.
previewList는 ?? [] 구문을 통해 항상 배열로 존재하므로, length는 0 이상일 수밖에 없습니다. 따라서 if (previewList.length >= 0) 조건문은 항상 참이므로 불필요합니다. 조건문을 제거하고 내부 JSX를 바로 반환하여 코드를 더 명확하게 만들 수 있습니다.
MlNTYS
left a comment
MlNTYS
left a comment
There was a problem hiding this comment.
PRAISE: API 콜 하는 상태 전환 로직만 한번 봐주시면 좋을 거 같아요! 수고하셨습니다~
4 participants
🔀 Pull Request Title
사진수다 검색 결과 없는 경우에도 필터링 추가
📌 PR 설명
이번 PR에서 어떤 작업을 했는지 요약해주세요.
📷 스크린샷
UI 변경이 있을 경우 스크린샷을 첨부해주세요.