Merged
Conversation
어드민 랭킹 페이지에 반응형을 새롭게 적용했고 모바일의 경우 바디 타이포그래피 컴포넌트가 렌더링 되지 않습니다.
아코디언 아이콘의 크기를 작게하고 위치를 변하단으로 옮겼습니다.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
Walkthrough관리자 랭킹 UI의 모바일/데스크톱 레이아웃과 테이블 스타일을 재구성하고, 랭킹 스냅샷 조회용 쿼리 키/옵션( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 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 unit tests (beta)
📝 Coding Plan
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 Tip CodeRabbit can use OpenGrep to find security vulnerabilities and bugs across 17+ programming languages.OpenGrep is compatible with Semgrep configurations. Add an |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/admin/feed/_components/RankContainer.tsx`:
- Around line 1-4: The file RankContainer currently marks the whole component as
a client ("use client") but you should shrink the client boundary: keep
RankContainer as a server component and extract only the interactive mobile
toggle UI into a small client component (e.g., create a MobileToggle or
ToggleMobileButton component) that imports React hooks/useState; replace the
inline toggle in RankContainer with that new client component; ensure any
state/handlers needed by the server are passed via props and avoid hoisting "use
client" to the whole file—apply the same extraction pattern for the related code
around the lines referenced (the mobile toggle block).
- Around line 49-54: The parent Flex's onClick toggles only the local isOpen
used by the arrow icon, causing desync with the Accordion's internal state;
remove the Flex onClick handler and make Accordion the single source of truth by
wiring its control props (e.g., value/onValueChange or open/onOpenChange
depending on your Accordion API) to the isOpen/setIsOpen pair, and update the
arrow icon to read isOpen so the visual state and Accordion expansion stay
synchronized (look for isOpen, setIsOpen, the Flex onClick, the Accordion
component, and the arrow icon render).
In `@src/app/admin/ranking/_components/RankingHeader.tsx`:
- Line 9: The Flex container in RankingHeader.tsx uses dir="col" but
className="hidden md:block", which forces display:block at md+ and breaks the
intended flex layout; change the class to "hidden md:flex" (or remove the hidden
if it should always show) so the element remains a flex container at md+ and
preserves the column direction defined by dir="col" on the Flex component.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
src/app/admin/feed/_components/RankContainer.tsxsrc/app/admin/ranking/_components/RankingHeader.tsxsrc/app/admin/ranking/_components/RankingTable.tsx
keemsebin
approved these changes
Mar 9, 2026
Collaborator
keemsebin
left a comment
keemsebin
left a comment
There was a problem hiding this comment.
이렇게 사용되는 컴포넌트가 해당 컴포넌트 뿐이라 디자인 시스템을 수정하는게 좋을지 따로 아이콘 컴포넌트만 추가하느게 좋을지 고민이 되어 우선은 일반 아이콘 컴포넌트만 추가했습니다. 이 부분에 대해서 피드백 주시면 감사하겠습니다.
요런 디자인이 하나라면, 디자인 시스템 수정보다는 도메인에 종속적인 컴포넌트를 하나 만들 것 같아요. 또, 기존 아코디언 컴포넌트 활용이 불가능한지도 확인해 볼 것 같네용
use client를 사용하게 되었는데 해당 페이지는 유저 상호작용이 많은 페이지라서 성능 저하의 걱정이 있습니다. 만약 다루는 데이터가 많다면 디자인 시스템을 수정하는 게 나을지 궁금합니다! 답변 남겨주시면 감사하겠습니다!
어떤 성능 저하의 걱정이 있었는지 궁금해요! 성능적인 면에서 데이터 갯수와 디자인 시스템이 어떤 연관이 있는지도 궁금하네용
수고하셨습니다~
변경된dds에 맞춰 useState를 제거했습니다. 추가적으로 피그마에 맞게 디자인을 수정했습니다.
지난 달 탭에서 서버에서 제공하는 스냅샷 형식의 api를 볼 수 있게 처리했습니다.
JangYEhoon00
changed the title
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Line 29: package-lock.json still pins ddingdong-design-system at v2.0.4 while
package.json requires v2.0.5, so update the lockfile: reinstall or explicitly
install the updated package (e.g., run npm install or npm install
ddingdong-design-system@2.0.5) to regenerate package-lock.json, verify that
package-lock.json now references ddingdong-design-system v2.0.5, run a quick
build/test to ensure RankContainer.tsx's iconAlign/iconClassName props work, and
commit the updated package-lock.json alongside package.json.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: dad49980-3f74-4451-8a71-63017f164600
📒 Files selected for processing (5)
package.jsonsrc/app/_api/queries/ranking.tssrc/app/admin/feed/_components/RankContainer.tsxsrc/app/admin/ranking/page.tsxsrc/app/admin/ranking/utils/getRankingDate.ts
잘못 적용시킨 스타일을 수정했습니다.
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
3 participants
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.
🔥 연관 이슈
🚀 작업 내용
2026-03-03.1.03.57.mov
default.mov
🤔 고민했던 내용
이렇게 사용되는 컴포넌트가 해당 컴포넌트 뿐이라 디자인 시스템을 수정하는게 좋을지 따로 아이콘 컴포넌트만 추가하느게 좋을지 고민이 되어 우선은 일반 아이콘 컴포넌트만 추가했습니다. 이 부분에 대해서 피드백 주시면 감사하겠습니다.
💬 리뷰 중점사항
use client를 사용하게 되었는데 해당 페이지는 유저 상호작용이 많은 페이지라서 성능 저하의 걱정이 있습니다. 만약 다루는 데이터가 많다면 디자인 시스템을 수정하는 게 나을지 궁금합니다! 답변 남겨주시면 감사하겠습니다!
Summary by CodeRabbit