[refactor] CD CRUD 알파테스트 및 리팩토링#121
Conversation
|
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. Walkthrough마이페이지 및 마이CD 관련 UI와 내비게이션 흐름을 다듬고, 드래그-스크롤 훅을 추가했으며 로딩 상태 지표(isFetching)를 반영하도록 수정하고 일부 모의(mock) 데이터 파일을 삭제했습니다. 또한 CD 스티커 위치와 입력/로고 스타일 소량 조정이 포함됩니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MyPage
participant Location as LocationState
participant Tabs
User->>MyPage: /mypage 접근
MyPage->>Location: useLocation 읽기
alt prevSelectedTab 존재
Location-->>MyPage: { prevSelectedTab }
MyPage->>Tabs: 탭 복원(setTab(prevSelectedTab))
MyPage->>Location: navigate(replace, state cleared)
else
MyPage->>Tabs: 기본 탭 유지
end
Tabs-->>User: 마이페이지 렌더링
sequenceDiagram
participant User
participant ThemeList
participant Hook as useDragScroll
participant Container
User->>ThemeList: mousedown
ThemeList->>Hook: start drag (record pos)
User->>ThemeList: mousemove
Hook->>Container: update scrollLeft
User->>ThemeList: mouseup / mouseleave
Hook->>Hook: stop drag, cleanup
Container-->>User: 스크롤 반영
sequenceDiagram
participant User
participant Tracklist
participant Router
User->>Tracklist: 재생 클릭 (item)
Tracklist->>Router: navigate(`/mycd/${id}${type==='LIKE' ? '?type=LIKE' : ''}`)
Router-->>User: mycd 페이지로 이동
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (8)
🧰 Additional context used📓 Path-based instructions (1)**/*.{ts,tsx,js,jsx}⚙️ CodeRabbit configuration file
Files:
🧬 Code graph analysis (4)src/pages/mypage/ui/main/components/MyCdList.tsx (1)
src/pages/mypage/ui/main/components/MyLikedCdList.tsx (1)
src/pages/mypage/ui/customize/step1/index.tsx (1)
src/pages/mypage/ui/customize/index.tsx (1)
🔇 Additional comments (10)
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 @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 CRUD 기능의 알파 테스트 단계에서 발견된 여러 개선 사항과 버그 수정, 그리고 전반적인 리팩토링을 포함합니다. 사용자 경험을 향상시키기 위한 UI/UX 조정, 데이터 처리 로직 개선, 그리고 코드베이스 정리를 통해 애플리케이션의 안정성과 사용성을 높이는 데 중점을 두었습니다. 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
|
![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은 CD CRUD 관련 알파 테스트 피드백을 반영하고 전반적인 리팩토링을 진행한 것으로 보입니다. 사용하지 않는 mock 파일을 제거하고, 마이페이지의 상태 유지 로직을 개선했으며, CD 편집 시 데이터 로딩 문제를 해결하는 등 여러 개선 사항이 포함되어 있습니다. 특히 드래그 스크롤 커스텀 훅 추가와 같이 사용자 경험을 향상시키기 위한 노력도 돋보입니다. 몇 가지 코드 개선 제안을 포함하여 리뷰를 남겼습니다. 전반적으로 좋은 변경이라고 생각합니다.
|
🎵 Storybook Link 🎵 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/shared/ui/Cd.tsx (1)
98-98: 매직 넘버 대신 상수화 고려1픽셀 오프셋 조정이 의도적인 것으로 보이지만,
-1이라는 매직 넘버가 코드에 직접 하드코딩되어 있습니다. 이 값이 특정한 목적(예: 스티커 렌더링 정렬 보정)을 가지고 있다면 상수로 정의하거나 주석으로 설명하는 것이 좋습니다.다음과 같이 개선할 수 있습니다:
+// 스티커 Y좌표 렌더링 보정값 +const STICKER_Y_OFFSET = 1 + <img key={`${cdItemId}-${xCoordinate}-${yCoordinate}`} src={src} alt="cd-sticker" style={{ position: 'absolute', left: xCoordinate * ratio, - top: yCoordinate * ratio - 1, + top: yCoordinate * ratio - STICKER_Y_OFFSET, width: width * ratio, height: height * ratio, transform: `scale(${scale}) rotate(${angle}rad)`, transformOrigin: 'top left', pointerEvents: 'none', }} />src/shared/lib/useDragScroll.ts (1)
3-36: 드래그 스크롤 훅 구현 검토 및 개선 제안전반적으로 드래그 스크롤 기능이 잘 구현되었습니다. 다만 몇 가지 개선 사항을 제안합니다.
1. 마우스 커서 스타일 추가
드래그 가능 영역임을 시각적으로 표시하기 위해 커서 스타일을 변경하는 것이 좋습니다:
const down = (e: MouseEvent) => { isDown = true + if (el) el.style.cursor = 'grabbing' startX = e.pageX - el.offsetLeft scrollLeft = el.scrollLeft } -const leave = () => (isDown = false) -const up = () => (isDown = false) +const leave = () => { + isDown = false + if (el) el.style.cursor = 'grab' +} +const up = () => { + isDown = false + if (el) el.style.cursor = 'grab' +}그리고 초기 설정:
useEffect(() => { const el = ref.current if (!el) return + + el.style.cursor = 'grab' let startX = 02. 사용자 선택(user-select) 방지
드래그 중 텍스트가 선택되는 것을 방지하기 위해:
const down = (e: MouseEvent) => { + e.preventDefault() isDown = true startX = e.pageX - el.offsetLeft scrollLeft = el.scrollLeft }3. 접근성 고려사항
현재 마우스 이벤트만 지원하는데, 키보드 네비게이션이나 터치 이벤트 지원을 고려해야 합니다. 특히 모바일에서도 사용될 수 있는 컴포넌트라면 터치 이벤트 추가를 검토하세요:
const touchDown = (e: TouchEvent) => { isDown = true startX = e.touches[0].pageX - el.offsetLeft scrollLeft = el.scrollLeft } const touchMove = (e: TouchEvent) => { if (!isDown) return e.preventDefault() el.scrollLeft = scrollLeft - (e.touches[0].pageX - el.offsetLeft - startX) } el.addEventListener('touchstart', touchDown) el.addEventListener('touchmove', touchMove, { passive: false }) el.addEventListener('touchend', up)
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
src/App.tsx(0 hunks)src/entities/playlist/model/useMyCd.ts(2 hunks)src/pages/mypage/mock/likeUser.json(0 hunks)src/pages/mypage/mock/myPlaylist.json(0 hunks)src/pages/mypage/mock/playlistLinks.json(0 hunks)src/pages/mypage/ui/customize/index.tsx(1 hunks)src/pages/mypage/ui/customize/step2/index.tsx(4 hunks)src/pages/mypage/ui/customize/step3/index.tsx(1 hunks)src/pages/mypage/ui/main/index.tsx(3 hunks)src/pages/mypage/ui/tracklist/index.tsx(2 hunks)src/shared/lib/useDragScroll.ts(1 hunks)src/shared/ui/Cd.tsx(1 hunks)
💤 Files with no reviewable changes (4)
- src/pages/mypage/mock/likeUser.json
- src/App.tsx
- src/pages/mypage/mock/playlistLinks.json
- src/pages/mypage/mock/myPlaylist.json
🧰 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/pages/mypage/ui/tracklist/index.tsxsrc/pages/mypage/ui/customize/index.tsxsrc/shared/lib/useDragScroll.tssrc/shared/ui/Cd.tsxsrc/entities/playlist/model/useMyCd.tssrc/pages/mypage/ui/customize/step3/index.tsxsrc/pages/mypage/ui/customize/step2/index.tsxsrc/pages/mypage/ui/main/index.tsx
🧬 Code graph analysis (4)
src/pages/mypage/ui/customize/index.tsx (1)
src/entities/playlist/model/useMyCd.ts (1)
useMyCdActions(27-66)
src/pages/mypage/ui/customize/step3/index.tsx (1)
src/shared/styles/theme.ts (1)
theme(3-122)
src/pages/mypage/ui/customize/step2/index.tsx (1)
src/shared/lib/useDragScroll.ts (1)
useDragScroll(3-36)
src/pages/mypage/ui/main/index.tsx (1)
src/pages/mypage/types/mypage.ts (1)
MYPAGE_TAB_TYPE(3-3)
🔇 Additional comments (6)
src/pages/mypage/ui/tracklist/index.tsx (2)
54-54: LGTM! 네비게이션 로직 개선쿼리 파라미터 대신 경로 기반 ID를 사용하는 방향으로 변경되었으며,
isFromMyCdList조건에 따라 선택적으로?type=LIKE쿼리를 추가하는 로직이 적절합니다.
115-122: LGTM! 탭 상태 복원 로직 정상 작동
prevSelectedTab상태를 통해 마이페이지로 돌아갈 때 이전 탭 위치를 복원하는 로직이 올바르게 구현되었습니다.isFromMyCdList조건에 따라like또는null을 전달하는 로직도 적절합니다.이 변경사항은
src/pages/mypage/ui/main/index.tsx의 탭 복원 로직과 잘 연동됩니다.src/pages/mypage/ui/customize/step3/index.tsx (1)
125-125: LGTM! 버튼 타이포그래피 개선버튼 폰트를
label(13px/18px)에서body2-normal(14px/20px)로 변경하여 가독성이 향상되었습니다.src/pages/mypage/ui/customize/index.tsx (1)
51-55: LGTM! 캐시 렌더링 문제 해결
isFetching상태를 추가하여 React Query의 캐시 데이터가 잠시 노출되는 문제를 해결했습니다.refetchOnMount: 'always'옵션과 함께 사용할 때 네트워크 응답을 기다리는 동안 로딩 상태를 유지하는 올바른 접근 방식입니다.PR 설명에 언급된 "트랙리스트 수정 시 이전 데이터가 잠시 노출되던 현상" 해결에 기여합니다.
src/pages/mypage/ui/customize/step2/index.tsx (1)
26-26: LGTM! 드래그 스크롤 기능 추가테마 리스트에 마우스 드래그로 스크롤할 수 있는 기능이 올바르게 구현되었습니다.
useDragScroll훅을 임포트하고,themeListRef를 생성하여ThemeListContainer에 연결하는 구조가 적절합니다.Also applies to: 44-44, 56-56, 941-941
src/entities/playlist/model/useMyCd.ts (1)
34-34: LGTM! 로딩 상태 지표 개선
isFetching상태를 추가로 노출하여 React Query 캐시 렌더링 문제를 해결할 수 있게 되었습니다. 이 변경사항은src/pages/mypage/ui/customize/index.tsx에서 사용되어 이전 데이터가 잠시 노출되는 문제를 방지합니다.Also applies to: 61-61
2 participants
🛰️ 관련 이슈
✨ 주요 변경 사항
1️⃣ 마이페이지 /tracklist → /mycd 라우팅 시 url 형식 수정
2️⃣ 미사용 mock 파일 제거
3️⃣ 마이페이지 /tracklist에서 뒤로가기 시 마이페이지 tab 선택 상태값 복원
4️⃣ 스티커 렌더링 y좌표 위치 상세 조정
5️⃣ /customize step3 버튼 폰트, pc 배경 중 로고 사이즈 수정
6️⃣ /customize step2 테마 버튼 리스트 마우스 드래그 스크롤 기능 추가
7️⃣ 트랙리스트 수정 시 이전 데이터가 잠시 노출되던 현상 수정
🗯️ PR 포인트
🚀 알게된 점
▪️ cd 수정 후 재편집 시 이전 데이터 잠시 노출되던 문제
refetchOnMount: 'always'옵션으로 refetch는 수행되지만, React Query가 네트워크 응답 전에 캐시된 데이터를 즉시 렌더링하기 때문isFetching상태를 함께 체크하여 refetch 중에는 로딩 상태를 유지하도록 처리함▪️ 마이페이지 탭 state가 유지되던 문제
history.state에 남아 세션 내에서 계속 유지되기 때문📖 참고 자료 (선택)
Summary by CodeRabbit
새로운 기능
버그 수정
스타일
기타