refactor(IN-305): /videos 페이지 기획 및 디자인 변경사항 반영#128
Merged
Conversation
로직(정렬 필터 제거 -> 정렬 탭으로 추가) - 영상 목록 필터링(키워드·정렬·포맷·광고·기간)이 실제로 동작하도록 mock API 수정 - 정렬 기준을 SearchAndFilter 드롭다운에서 VideoList 내부 버튼으로 이동 - 캘린더로 선택한 기간을 startDate/endDate 쿼리 파라미터로 URL에 반영 - publishedAt 형식을 ISO 8601로 변경하여 날짜 범위 필터링이 정확하게 동작하도록 수정 디자인 - video type chip 수정: 롱/숏 타입 칩 제거 - 서치바 컬러 수정
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (7)
요약이 PR은 비디오 목록에 정렬 및 날짜 범위 필터링 기능을 추가합니다. 필터 타입을 확장하고 API 요청 형식을 단순화한 후, VideoList 컴포넌트에 정렬 UI를 구현하고 페이지 수준에서 상태를 관리합니다. 또한 CalendarFilter를 통한 날짜 범위 선택이 URL 쿼리 파라미터로 자동 반영되며, 여러 UI 세부 사항과 목 데이터가 개선됩니다. 변경사항비디오 정렬 및 기간 필터링
🎯 3 (Moderate) | ⏱️ ~25 minutes 추천 리뷰어
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/shared/api/mock/mockUser.ts (1)
33-41:⚠️ Potential issue | 🟡 Minor | ⚡ Quick win로그인 응답과
mockUser상태 간의 의미적 불일치
mockUserDetails가plan: 'GROWTH',isOnboardingCompleted: true로 변경되고mockUser.userChannelDetails도mockUserChannelDetails로 채워졌습니다. 그러나mockLoginResponse.responseDto.userChannelDetails는 여전히null입니다. 온보딩이 완료된 사용자라면 로그인 응답에도 채널 정보가 함께 내려오는 것이 자연스러우며, 현재 상태는 로그인 직후 분기(isOnboardingCompleted=true인데 채널 정보 없음)에서 예상치 못한 UI 흐름을 유발할 수 있습니다. 의도된 시나리오인지 확인 부탁드립니다.🔧 일관성 맞추기 제안
responseDto: { accessToken: mockAccessToken, userDetails: mockUserDetails, - userChannelDetails: null, + userChannelDetails: mockUserChannelDetails, },🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/shared/api/mock/mockUser.ts` around lines 33 - 41, The mock login payload is inconsistent: mockUserDetails now shows plan: 'GROWTH' and isOnboardingCompleted: true and mockUserChannelDetails is populated, but mockLoginResponse.responseDto.userChannelDetails is still null; update mockLoginResponse to set responseDto.userChannelDetails to mockUserChannelDetails (or explicitly document/guard this as an intentional edge-case) so the returned login object (mockLoginResponse) matches the in-memory mockUser state; check the symbols mockLoginResponse, responseDto.userChannelDetails, mockUserDetails, and mockUserChannelDetails when making the change.src/entities/videos/ui/VideoCard.tsx (1)
20-32:⚠️ Potential issue | 🟡 Minor | ⚡ Quick win
isShort불사용에 따른 타입 정리 필요
src/entities/videos/ui/VideoCard.tsx는VideoCardItem디스트럭처에서isShort를 더 이상 사용하지 않는데,src/entities/videos/model/types.ts의VideoCardItem에는isShort: boolean이 그대로 필수로 남아 호출부에서 계속 값을 제공해야 합니다. 카드에서 필요 없다면 타입에서 제거(또는 optional 처리)하거나, 필요하다면VideoCard에서 활용 로직을 추가하세요.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/entities/videos/ui/VideoCard.tsx` around lines 20 - 32, The VideoCard component destructures VideoCardItem but no longer uses isShort; update the model/type or component to be consistent: either remove isShort from the VideoCardItem definition in types.ts (or change it to optional isShort?: boolean) and adjust any callers that currently supply it, or reintroduce usage inside the VideoCard function (e.g., handle short-format rendering) so the prop is consumed; target the VideoCard component and the VideoCardItem type declaration to keep the prop optional/removed across all usages.
🧹 Nitpick comments (1)
src/entities/videos/ui/VideoCard.tsx (1)
46-52: 💤 Low valueTODO 주석 처리 계획 확인
bg-primitive-brand-clear-200토큰이 임시값으로 표시되어 있습니다. 디자인 토큰이 확정되는 시점에 후속 작업으로 정리될 수 있도록 이슈로 관리하는 것을 권장합니다.별도 트래킹 이슈를 생성해드릴까요?
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/entities/videos/ui/VideoCard.tsx` around lines 46 - 52, The temporary design token bg-primitive-brand-clear-200 is used in the VideoCard ad badge (the conditional render guarded by isAd and the span element that shows "AD"); replace the hardcoded temporary token with the finalized design token when available and, until then, create a tracking issue to follow up so this TODO is not lost—ensure the follow-up references the VideoCard component (the isAd conditional and the ad badge span) and the TODO comment so the change can be applied once the design token is finalized.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/features/videos/api/videosApi.ts`:
- Around line 42-55: The sort switch on params.sort misses the 'LATEST' branch
so default returns 0 and leaves ordering unchanged; add a case for 'LATEST' in
the comparator (alongside existing cases like 'VIEWS','LIKES','VPH','OUTLIER')
and sort by the video's timestamp field (e.g., createdAt or publishedAt) in
descending order to ensure newest-first ordering for VideoSort.LATEST when
filtered is sorted.
In `@src/features/videos/ui/VideoList.tsx`:
- Around line 33-37: The sort buttons in VideoList.tsx are only indicating
selection visually; update the button rendered in the map (the element using
selectedSort, option.value and onSortChange) to include an accessible pressed
state by adding aria-pressed with a boolean expression
(aria-pressed={selectedSort === option.value}) so assistive technologies can
detect which option is selected; ensure the attribute value is a boolean, not a
string, and leave existing styling and onClick behavior unchanged.
In `@src/shared/ui/search-bar/SearchBar.tsx`:
- Around line 16-21: The SearchBar component currently hardcodes the container
width with w-[58rem], causing overflow and preventing callers from overriding
sizing; modify the SearchBar component so the outer div uses a default
responsive width (e.g., w-full or remove the fixed w-[58rem]) and merge any
incoming className prop into the container’s className (not only the internal
<Input>) so parents can override width (e.g., allow passing w-full or max-w-*).
Update the container class composition in the SearchBar component (the outer
<div> with cn(...)) to include the component’s className prop and change the
default width to a flexible value.
---
Outside diff comments:
In `@src/entities/videos/ui/VideoCard.tsx`:
- Around line 20-32: The VideoCard component destructures VideoCardItem but no
longer uses isShort; update the model/type or component to be consistent: either
remove isShort from the VideoCardItem definition in types.ts (or change it to
optional isShort?: boolean) and adjust any callers that currently supply it, or
reintroduce usage inside the VideoCard function (e.g., handle short-format
rendering) so the prop is consumed; target the VideoCard component and the
VideoCardItem type declaration to keep the prop optional/removed across all
usages.
In `@src/shared/api/mock/mockUser.ts`:
- Around line 33-41: The mock login payload is inconsistent: mockUserDetails now
shows plan: 'GROWTH' and isOnboardingCompleted: true and mockUserChannelDetails
is populated, but mockLoginResponse.responseDto.userChannelDetails is still
null; update mockLoginResponse to set responseDto.userChannelDetails to
mockUserChannelDetails (or explicitly document/guard this as an intentional
edge-case) so the returned login object (mockLoginResponse) matches the
in-memory mockUser state; check the symbols mockLoginResponse,
responseDto.userChannelDetails, mockUserDetails, and mockUserChannelDetails when
making the change.
---
Nitpick comments:
In `@src/entities/videos/ui/VideoCard.tsx`:
- Around line 46-52: The temporary design token bg-primitive-brand-clear-200 is
used in the VideoCard ad badge (the conditional render guarded by isAd and the
span element that shows "AD"); replace the hardcoded temporary token with the
finalized design token when available and, until then, create a tracking issue
to follow up so this TODO is not lost—ensure the follow-up references the
VideoCard component (the isAd conditional and the ad badge span) and the TODO
comment so the change can be applied once the design token is finalized.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 275090dd-d08b-4cd1-abcf-69b48dbbf636
📒 Files selected for processing (11)
src/entities/videos/ui/VideoCard.tsxsrc/features/influencer/ui/InfluencerList.tsxsrc/features/videos/api/videosApi.tssrc/features/videos/mock/mockVideos.tssrc/features/videos/model/types.tssrc/features/videos/ui/VideoList.tsxsrc/pages/videos/ui/VideosPage.tsxsrc/shared/api/mock/mockUser.tssrc/shared/ui/search-bar/SearchBar.tsxsrc/widgets/videos/ui/CalendarFilter.tsxsrc/widgets/videos/ui/SearchAndFilter.tsx
src/features/videos/api/videosApi.ts: Axios로 /channel/:channelId/videos에 실제 HTTP GET 요청하도록 변경 src/features/videos/model/useVideos.ts: params의 각 필드를 primitive 값으로 분리
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 작업 개요
🗂 작업 유형
✏️ 작업 내용
로직(정렬 필터 제거 -> 정렬 탭으로 추가)
디자인
✅ 셀프 체크리스트
💬 리뷰어에게
Summary by CodeRabbit
릴리스 노트
New Features
Bug Fixes
Chores