[feat] 마이페이지 좋아요 기능 연결 및 /mycd 라우팅 처리#119
Conversation
Summary of ChangesHello @hansololiviakim, 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은 마이페이지의 '좋아요한 CD' 기능과 관련된 사용자 경험을 개선하고, 데이터 구조의 일관성을 확보하며, UI/UX의 작은 결함을 수정합니다. 특히, 사용자가 좋아요한 CD를 더 쉽게 재생할 수 있도록 라우팅 로직을 추가하고, CD 목록 표시 방식을 개선하여 반응형 디자인을 지원합니다. 또한, API 응답 타입 변경에 맞춰 데이터 처리 로직을 업데이트하고, 폰트 상속 문제를 해결하여 전반적인 디자인 일관성을 높였습니다. 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 Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughPlaylist의 CD 응답 필드 통합(onlyCdResponse → cdResponse)과 cdItems 경로 업데이트, Playlist/Cd 컴포넌트에 cdVariant·isPublic 추가 및 레이아웃/네비게이션·모달 로직이 마이페이지/홈/트랙리스트에 적용되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MyLikedCdList
participant Modal
participant Router
User->>MyLikedCdList: CD 클릭 (onLikedCdClick)
alt cdId 없음
MyLikedCdList->>MyLikedCdList: no-op
else cd 비공개
MyLikedCdList->>Modal: open({title, desc, cta})
User->>Modal: 닫기/확인 클릭
Modal->>MyLikedCdList: close
else cd 공개
MyLikedCdList->>Router: navigate(`/tracklist?id=...`)
Router->>User: 트랙리스트 페이지 로드
end
sequenceDiagram
participant User
participant TrackList
participant Router
User->>TrackList: "모두 재생" 클릭
TrackList->>TrackList: onCdPlayClick 구성 (playlistId, isFromMyCdList)
TrackList->>Router: navigate(`/mycd?id=${playlistId}${isFromMyCdList ? '' : '&type=LIKE'}`)
Router->>User: /mycd 페이지 로드
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 다양한 레벨의 변경(타입, UI/네비게이션 로직, 스타일, 훅 옵션, 컴포넌트 API 확장)이 여러 파일에 걸쳐 분산되어 있어 동작/타입 일관성 및 렌더/네비게이션 경로를 확인하는 데 시간이 걸립니다. Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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 |
|
🎵 Storybook Link 🎵 |
![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은 마이페이지의 좋아요 기능과 라우팅을 개선하는 중요한 변경사항을 담고 있습니다. 전반적으로 코드 변경 사항은 의도한 대로 잘 구현되었습니다. API 응답 타입 변경에 맞춰 관련 코드들을 잘 수정해주셨고, 글로벌 스타일에 폰트 상속을 추가하여 일관성을 높인 점도 좋습니다. 몇 가지 코드 개선점을 제안드립니다. MyLikedCdList 컴포넌트에서 Playlist로 props를 전달할 때 발생한 작은 버그가 있었고, 일부 불필요한 CSS 코드가 포함되어 있었습니다. 또한, React의 useCallback을 활용한 성능 최적화와 매직 스트링을 제거하여 코드 가독성을 높일 수 있는 부분에 대한 피드백을 포함했습니다. 자세한 내용은 각 파일의 리뷰 코멘트를 참고해주세요.
| & > { | ||
| } |
There was a problem hiding this comment.
CdButton styled-component 내부에 비어있고 유효하지 않은 CSS 선택자 & > {}가 포함되어 있습니다. 이 코드는 아무런 역할을 하지 않으며 CSS 파싱 오류를 유발할 수 있으므로 제거해야 합니다.
| position: relative; | ||
| width: 140px; | ||
| height: 140px; | ||
| width: ${({ $cdVariant }) => ($cdVariant === 'responsive' ? '100%' : '140px')}; |
There was a problem hiding this comment.
CdBox 컴포넌트의 width 속성이 부모 컴포넌트인 Wrapper와 동일한 로직으로 중복 정의되어 있습니다. Wrapper가 이미 너비를 제어하고 있으므로, CdBox는 width: 100%로 설정하여 부모의 너비를 따르게 하면 코드가 더 간결해집니다. 이 경우 CdBox에 전달되는 $cdVariant prop은 더 이상 필요하지 않게 됩니다.
| width: ${({ $cdVariant }) => ($cdVariant === 'responsive' ? '100%' : '140px')}; | |
| width: 100%; |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/mypage/ui/main/components/MyLikedCdList.tsx (1)
130-137: 스타일 문법 오류: 불필요한 빈 규칙 제거
& > {}는 유효하지 않은 CSS입니다. 제거하세요.const CdButton = styled.button` width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; - - & > { - } `
🧹 Nitpick comments (4)
src/shared/ui/Cd.tsx (1)
12-29: variant 타입을 sizeMap에서 파생해 드리프트를 방지하세요.리터럴 유니온을 수동 유지하면 sizeMap 변경 시 불일치가 납니다. sizeMap 키로부터 타입을 유도하세요.
인터페이스 변경:
-export interface CdProps { - variant: - | 'xxl' - | 'xl' - | 'lg' - | 'md' - | 'sm' - | 'xs' - | 'share' - | 'customize' - | 'carousel' - | 'responsive' - | 'home' - | 'mycd' +export interface CdProps { + variant: CdVariant bgColor?: 'none' | 'default' | 'dark' stickers?: CdCustomData[] isPublic?: boolean }추가(파일 내 임의 위치, sizeMap 인접 권장):
type CdVariant = keyof typeof sizeMapsrc/widgets/playlist/Playlist.tsx (3)
57-63: 스타일 프롭 타입 좁히기
$cdVariant: string대신CdProps['variant']로 제한하세요. 오타/불일치 예방됩니다.-const Wrapper = styled.div<{ $cdVariant: string }>` +const Wrapper = styled.div<{ $cdVariant: CdProps['variant'] }>`
64-73: 스타일 프롭 타입 좁히기 (동일)
CdBox도 동일하게 타입을 좁혀 주세요.-const CdBox = styled.div<{ $cdVariant: string }>` +const CdBox = styled.div<{ $cdVariant: CdProps['variant'] }>`
38-41: 클릭 가능한 div의 접근성 개선 제안
div + onClick대신button/a(Link)사용을 권장합니다. 최소한role="button"과 키보드 핸들러(Enter/Space)를 추가하세요.예:
-<Wrapper onClick={handleClick} $cdVariant={cdVariant}> +<Wrapper as="button" type="button" onClick={handleClick} $cdVariant={cdVariant}>또는 라우팅 시:
-<Wrapper onClick={handleClick} $cdVariant={cdVariant}> +<Wrapper as={Link} to={`/discover/${id}`} $cdVariant={cdVariant}>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/features/recommend/types/recommend.ts(1 hunks)src/pages/home/index.tsx(2 hunks)src/pages/mypage/ui/main/components/MyLikedCdList.tsx(4 hunks)src/pages/mypage/ui/tracklist/index.tsx(2 hunks)src/shared/styles/globalStyle.ts(1 hunks)src/shared/ui/Cd.tsx(1 hunks)src/widgets/playlist/Playlist.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js,jsx}
⚙️ CodeRabbit configuration file
**/*.{ts,tsx,js,jsx}: ## 1. 일반적인 코딩 컨벤션포맷팅
.prettierrc설정에 따라 포맷팅 확인- 들여쓰기: 2칸 스페이스
- 최대 줄 길이: 100자
- 세미콜론 사용 안함
- 따옴표: 작은따옴표 사용
- 괄호 안 공백: 있음
- 화살표 함수 괄호: 항상 사용
- 줄바꿈: LF 사용
네이밍 컨벤션
- 컴포넌트: PascalCase (예: UserProfile)
- 유틸리티/훅/변수: camelCase (예: getUserData, useUserInfo)
- 상수: UPPER_SNAKE_CASE (예: API_BASE_URL)
- 이미지 파일: kebab-case (예: user-profile-icon.png)
주석 사용
- 복잡한 로직에만 주석 추가
- 불필요한 주석 지양 (코드로 설명 가능한 것)
- TODO/FIXME 형식:
// TODO: 설명 - 작성자가독성
- 매직 넘버 지양, 의미있는 상수 사용
- 함수는 하나의 책임만 가지도록 작성 (최대 20줄 권장)
- 중첩 깊이 최소화 (3단계 이하 권장)
2. React 모범 사례
컴포넌트 작성
- 최신 React hooks 사용 권장
- 컴포넌트는 단일 책임 원칙 준수
- Presentational/Container 컴포넌트 분리
- 성능 최적화: memo, useCallback, useMemo 적절히 사용
- 대용량 리스트는 가상화 라이브러리 사용 고려
상태 관리
- Zustand와 Tanstack Query를 일관되게 사용
- 상태 구조는 정규화된 형태로 관리
- 에러 처리: Error Boundary와 try-catch 또는 onError 콜백 활용
3. 스타일링
Styled Components
- Styled Components 일관되게 사용
- 스타일드 컴포넌트명은 의미있게 작성
- 동적 스타일링은 props나 CSS 변수 활용
- 테마 시스템 활용하여 글로벌 스타일 관리
- 재사용 가능한 스타일은 mixin이나 확장으로 관리
- CSS 포맷팅 가독성 유지
- 사용하지 않는 스타일이나 중복 스타일 제거
4. Vite 및 빌드 최적화
- 모듈 import 최적화 (tree-shaking 고려)
- 환경변수는 .env 파일로 관리
- vite.config.ts에서 빌드 성능 튜닝 (sourcemap 설정, 플러그인 최적화 등)
5. 아키텍처 및 개발 환경
폴더 구조
- Feature-Sliced Design (FSD) 구조 준수
- 레이어별 참조 규칙 엄격히 적용
타입스크립트
- strict 모드 사용
- 타입 명시적으로 작성 (any 사용 지양)
- path alias (@/_) 절대 경로 import 사용
Git 훅
- Husky 설정으로 pre-commit, commit-msg 린팅 확인
6. 기타 가이드라인
- 충분한 근거와 함께 리뷰 제공
- 정보 검증 후 답변
- 간결하고 명확한 응답
- 필요시 추가 컨텍스트 요청
- 검증되지 않은 주장 지양
- 가능한 경우 출처 명시
- 별도 언급 없으면 JavaScript 기준
- 한국어로 응답
- 대부분 브라우저에서 지원하는 ES6+ 기능 활용
- 코드 리뷰를 통한 유지보수성 향상에 적극 활용
Files:
src/features/recommend/types/recommend.tssrc/shared/styles/globalStyle.tssrc/shared/ui/Cd.tsxsrc/pages/mypage/ui/tracklist/index.tsxsrc/pages/home/index.tsxsrc/pages/mypage/ui/main/components/MyLikedCdList.tsxsrc/widgets/playlist/Playlist.tsx
🧬 Code graph analysis (2)
src/pages/mypage/ui/main/components/MyLikedCdList.tsx (4)
src/shared/ui/Modal.tsx (1)
ModalProps(9-19)src/shared/lib/useSingleSelect.ts (1)
useSingleSelect(3-11)src/shared/ui/ContentHeader.tsx (1)
SortType(8-8)src/entities/playlist/model/useMyCd.ts (1)
useMyLikedCdList(19-25)
src/widgets/playlist/Playlist.tsx (2)
src/entities/playlist/types/playlist.ts (1)
CdCustomData(8-20)src/shared/ui/Cd.tsx (1)
CdProps(12-29)
🪛 Biome (2.1.2)
src/pages/mypage/ui/main/components/MyLikedCdList.tsx
[error] 11-11: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🔇 Additional comments (2)
src/pages/home/index.tsx (1)
60-61: 데이터 경로 전환(LGTM)
onlyCdResponse → cdResponse로의 경로 변경이 타입 정의와 일치합니다. 추가 이슈 없습니다.Also applies to: 76-77
src/features/recommend/types/recommend.ts (1)
9-11: 리뷰 의견 불일치: 타입 변경이 로컬 스코프에만 영향
src/features/recommend/types/recommend.ts에서onlyCdResponse제거는 해당 파일에만 국한되며 브레이킹 체인지가 아닙니다.
onlyCdResponse는 여전히 다른 타입 정의 파일에서 유지되고 있습니다:
src/features/search/types/search.ts:41- 여전히 정의됨src/entities/playlist/types/playlist.ts:70- 여전히 정의됨컴포넌트들(
PlaylistLayout.tsx,SearchResultPage.tsx등)에서 사용하는onlyCdResponse는 recommend.ts가 아닌 다른 타입 파일에서 가져오므로, 이 변경은 나머지 코드베이스에 영향을 주지 않습니다.Likely an incorrect or invalid review comment.
2 participants
🛰️ 관련 이슈
✨ 주요 변경 사항
1️⃣ /mypage/{id}/tracklist 에서 모두 재생 버튼 클릭 시 /mycd 라우팅
2️⃣ 좋아요한 CD 리스트 출력 컴포넌트 Cd Cd → Playlist 변경 및 반응형 대응
3️⃣ api 수정에 맞춰 recommend response 타입 onlyCdResponse → cdResponse 수정
4️⃣ button에 pretendard 폰트 부분적으로 상속되지 않는 현상이 있어 font-family: inherit 추가
🗯️ PR 포인트
🚀 알게된 점
📖 참고 자료 (선택)
Summary by CodeRabbit
새로운 기능
스타일
리팩토