feat: 모바일카드 컴포넌트 구현 #135
feat: 모바일카드 컴포넌트 구현 #135
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedFailed to post review comments WalkthroughRestructures review form submission from a dual-form (normal/premium) system to a unified multi-step architecture. Consolidates card subcomponents, adds subscription bookmarking and responsive layouts to club exploration. Updates routing, styling, and design tokens while maintaining core functionality. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Areas requiring extra attention:
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @yura0302, 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/UX 개선 사항과 개발 환경 업데이트를 포함합니다. 특히, 모바일 환경에서의 동아리 카드 표시를 최적화하고, 리뷰 작성 과정을 더욱 체계적이고 유연하게 만들었으며, 개발 생산성을 높이기 위한 AI 가이드 및 라이브러리 업데이트가 이루어졌습니다. Highlights
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
|
|
Note Docstrings generation - SUCCESS |
Docstrings generation was requested by @yura0302. * #135 (comment) The following files were modified: * `public/mockServiceWorker.js` * `src/components/(pages)/club/explore/Explore.tsx` * `src/components/molecules/card/Card.tsx` * `src/components/molecules/card/CardOverlay.tsx` * `src/components/molecules/card/MobileCard.tsx`
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| const toggleSubscription = useToggleClubSubscription() | ||
|
|
||
| const clubs = clubsData?.content || [] | ||
| const subscribes = subscribesData?.data?.content || [] |
There was a problem hiding this comment.
useExploreClubs에서 반환되는 clubsData는 clubsData.content로 접근하는 반면, useUserSubscribes에서 반환되는 subscribesData는 subscribesData.data.content로 접근하고 있습니다. API 응답 데이터 구조에 일관성이 부족해 보입니다. 가능하다면 API 응답 형식을 { content: [...] } 또는 { data: { content: [...] } } 중 하나로 통일하여 클라이언트 측에서 데이터를 다루기 용이하게 만드는 것을 고려해보세요. 이는 코드의 예측 가능성을 높이고 잠재적인 버그를 줄일 수 있습니다.
| }) { | ||
| const meta = [kind?.trim(), clubName?.trim(), clubYear?.trim(), part?.trim()] | ||
| .filter(Boolean) | ||
| .join(' · ') |
There was a problem hiding this comment.
메타 정보의 구분자로 일반 공백( )을 사용하고 계십니다. 새로 추가된 MobileCard에서는 더 나은 가독성을 위해 thin space(\u2009)를 사용한 \u2009·\u2009를 구분자로 사용하고 있습니다. UI의 일관성을 위해 여기에서도 thin space를 사용하도록 수정하는 것이 좋겠습니다.
.join('\u2009·\u2009')
| onClick={handleClick} | ||
| > | ||
| <Card.Image | ||
| logoUrl={club.logoUrl || '/images/default.svg'} |
There was a problem hiding this comment.
Card.Image 컴포넌트는 logoUrl이 null이나 undefined일 경우 fallbackSrc prop을 사용하여 대체 이미지를 표시하도록 이미 구현되어 있습니다. 따라서 여기서 || '/images/default.svg'와 같이 fallback을 중복으로 처리할 필요가 없습니다. 코드를 간결하게 유지하기 위해 중복 로직을 제거하는 것이 좋습니다.
| logoUrl={club.logoUrl || '/images/default.svg'} | |
| logoUrl={club.logoUrl} |
| <Card.Content className="px-[6px]"> | ||
| <Card.Title className="">{club.clubName}</Card.Title> | ||
| <Card.Description>{club.description}</Card.Description> | ||
| <Card.Meta part={club.categories.join(' · ')} /> |
There was a problem hiding this comment.
메타 정보의 구분자로 일반 공백( )을 사용하고 계십니다. MobileCard에서는 더 나은 가독성을 위해 thin space(\u2009)를 사용한 \u2009·\u2009를 구분자로 사용하고 있습니다. UI의 일관성을 위해 여기에서도 thin space를 사용하도록 수정하는 것이 좋겠습니다.
| <Card.Meta part={club.categories.join(' · ')} /> | |
| <Card.Meta part={club.categories.join('\u2009·\u2009')} /> |
* Feat/#99 (#107) * feat: 검색 부분 미비한 로직 추가 * fix: 이미지 수정 * Feat/#79 (#96) * fix: 히어로 이미지 수정 * feat: 프리미엄 후기 구현 * feat: 세부페이지 구현 * fix: 에러해결 --------- Co-authored-by: yura <[email protected]> * feat: 좋아요 API 명세 추가 --------- Co-authored-by: oaoong <[email protected]> Co-authored-by: yura <[email protected]> * style: 디자인토큰, 타이포그래피 수정 (#112) * style: 디자인토큰, 타이포그래피 수정 * fix: onsuccess 콜백에 mutaiton 인자 추가 --------- Co-authored-by: yura <[email protected]> * fix : 디자인 토큰, 타이포그래피 수정 (#113) * style: 디자인토큰, 타이포그래피 수정 * fix: onsuccess 콜백에 mutaiton 인자 추가 * fix: mutation파일에 onmutationresult 추가 --------- Co-authored-by: yura <[email protected]> * style: 배경 기본 색상 변경 * fix: tab filter 마감순 추가 (#129) Co-authored-by: yura <[email protected]> * fix: 탐색하기 레이아웃 수정 (#131) * style: 탐색하기 사이드바, 히어로 이미지 수정 * style: 탐색하기 레이아웃 수정 --------- Co-authored-by: yura <[email protected]> * feat: 리뷰 작성 레이아웃 (#132) * feat: 리뷰 작성 연결 페이지 재정의 * feat: 리뷰 UI 개발사항 반영 * fix: formatting * feat: QnA 컴포넌트 추가 * feat: 모바일카드 컴포넌트 구현 (#135) * refactor: card 컴포넌트 수정 * feat: 북마크 추가 * refactor: card 컴포넌트 수정 * feat: 모바일 카드 구현 * feat: 탐색하기 리팩토링 (#137) * feat: drawer 구현 * feat: 탐색 반응형 구현 * build: next 버전 패치 * build: lock파일 삭제 및 재설치 --------- Co-authored-by: oaoong <[email protected]> Co-authored-by: yura <[email protected]>
* Feat/#99 (#107) * feat: 검색 부분 미비한 로직 추가 * fix: 이미지 수정 * Feat/#79 (#96) * fix: 히어로 이미지 수정 * feat: 프리미엄 후기 구현 * feat: 세부페이지 구현 * fix: 에러해결 --------- Co-authored-by: yura <[email protected]> * feat: 좋아요 API 명세 추가 --------- Co-authored-by: oaoong <[email protected]> Co-authored-by: yura <[email protected]> * style: 디자인토큰, 타이포그래피 수정 (#112) * style: 디자인토큰, 타이포그래피 수정 * fix: onsuccess 콜백에 mutaiton 인자 추가 --------- Co-authored-by: yura <[email protected]> * fix : 디자인 토큰, 타이포그래피 수정 (#113) * style: 디자인토큰, 타이포그래피 수정 * fix: onsuccess 콜백에 mutaiton 인자 추가 * fix: mutation파일에 onmutationresult 추가 --------- Co-authored-by: yura <[email protected]> * style: 배경 기본 색상 변경 * fix: tab filter 마감순 추가 (#129) Co-authored-by: yura <[email protected]> * fix: 탐색하기 레이아웃 수정 (#131) * style: 탐색하기 사이드바, 히어로 이미지 수정 * style: 탐색하기 레이아웃 수정 --------- Co-authored-by: yura <[email protected]> * feat: 리뷰 작성 레이아웃 (#132) * feat: 리뷰 작성 연결 페이지 재정의 * feat: 리뷰 UI 개발사항 반영 * fix: formatting * feat: QnA 컴포넌트 추가 * feat: 모바일카드 컴포넌트 구현 (#135) * refactor: card 컴포넌트 수정 * feat: 북마크 추가 * refactor: card 컴포넌트 수정 * feat: 모바일 카드 구현 * feat: 탐색하기 리팩토링 (#137) * feat: drawer 구현 * feat: 탐색 반응형 구현 * build: next 버전 패치 (#139) * build: next 버전 업데이트 (#143) * build: 빌드수정 --------- Co-authored-by: oaoong <[email protected]> Co-authored-by: yura <[email protected]>
1 participant
🔗 관련 이슈
Closes #134
✨ 변경사항
탐색하기 페이지 모바일 카드 col4Phone 스타일 변경 (vertical -> horizontal)
🎯 리뷰 포인트
📝 추가 정보
Summary by CodeRabbit
Release Notes
New Features
UI/UX Improvements
✏️ Tip: You can customize this high-level summary in your review settings.