[25. 05. 26 / TASK-198] Refactor - 리더보드 UI 개선 #37
Conversation
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
## Walkthrough
리더보드 UI 구성 요소가 단순화되었습니다. `Ranker` 컴포넌트와 관련 파일들이 제거되고, `Rank` 컴포넌트만을 사용하여 모든 랭크 항목을 동일한 방식으로 렌더링하도록 변경되었습니다. import 경로도 정리되었습니다.
## Changes
| 파일/경로 | 변경 요약 |
|-------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------|
| src/app/(auth-required)/layout.tsx | `Notice`와 `Header` import를 하나의 경로로 합침 |
| src/app/(auth-required)/leaderboards/Content.tsx | `Ranker`/`useResponsive`/`SCREENS` 제거, `Rank`만 사용하여 단순화된 리스트 렌더링 |
| src/app/(auth-required)/leaderboards/Rank.tsx | 새로운 `Rank` 컴포넌트 및 인터페이스 추가 |
| src/app/(auth-required)/leaderboards/components/Rank.tsx | 기존 `Rank` 컴포넌트 파일 삭제 |
| src/app/(auth-required)/leaderboards/components/Ranker.tsx | `Ranker` 컴포넌트 및 인터페이스 삭제 |
| src/app/(auth-required)/leaderboards/components/index.ts | `Ranker`/`Rank` 통합 re-export index 파일 삭제 |
| src/app/(auth-required)/components/header/index.tsx | `useModal` import 경로 변경 (`@/hooks/useModal` → `@/hooks`) |
| src/app/(auth-required)/components/notice/index.tsx | `useModal` import 경로 변경 (`@/hooks/useModal` → `@/hooks`) |
| src/app/(auth-required)/leaderboards/page.tsx | `leaderboardList` import 경로 변경 (`@/apis/leaderboard.request` → `@/apis`) |
| src/app/(auth-required)/main/Content.tsx | `useSearchParam` import 경로 변경 (`@/hooks/useSearchParam` → `@/hooks`) |
| src/app/(auth-required)/main/components/Section/index.tsx | import 순서 변경 및 미사용 `ForwardedRef` 제거 |
| src/types/index.ts | `./leaderboard.type` 모듈 export 추가 |
| src/utils/index.tsx | `componentUtil`, `numberUtil`, `dateUtil` 통합 re-export 파일 삭제 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant Content
participant Rank
User->>Content: 페이지 접근
Content->>Rank: 각 랭킹 데이터로 Rank 컴포넌트 호출
Rank-->>Content: 랭킹 UI 반환
Content-->>User: 전체 리더보드 UI 렌더링Possibly related PRs
Suggested reviewers
Poem
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/app/(auth-required)/leaderboards/Rank.tsx (3)
4-9: 인터페이스 정의가 좋습니다.HTMLDivElement 속성을 확장하여 추가적인 div 속성들을 받을 수 있도록 한 것이 좋습니다. 하지만 컴포넌트 구현부에서 이런 추가 속성들을 실제로 전달하지 않고 있습니다.
다음과 같이 추가 속성들을 전달하도록 개선할 수 있습니다:
-export const Rank = ({ name, rank, count, suffix = '회' }: IProp) => { +export const Rank = ({ name, rank, count, suffix = '회', ...rest }: IProp) => { return ( <div className={twMerge( 'min-w-[40%] w-full p-[25px] bg-BG-SUB rounded-[4px] gap-3 justify-between flex', rank - 1 <= 2 ? `border-2 ${colorTable[rank - 1]}` : 'border-0', )} + {...rest} >
11-11: 하드코딩된 색상값 개선 권장.상위 3개 순위의 테두리 색상이 하드코딩된 hex 값으로 되어 있습니다. 디자인 시스템의 색상 토큰을 사용하는 것이 유지보수에 더 좋을 것 같습니다.
다음과 같이 디자인 시스템 색상을 사용하도록 개선할 수 있습니다:
-const colorTable = ['border-[#DAA520]', 'border-[#A9A9A9]', 'border-[#B87333]']; +const colorTable = ['border-gold', 'border-silver', 'border-bronze'];또는 프로젝트의 Tailwind 색상 팔레트에 맞는 색상으로 변경하는 것을 고려해보세요.
13-33: 컴포넌트 구현이 잘 되었습니다.전반적으로 잘 구현된 컴포넌트입니다. 상위 3개 순위에 대한 조건부 스타일링과 반응형 디자인이 잘 적용되어 있습니다.
몇 가지 작은 개선 사항을 제안합니다:
- 순위 검증 추가: rank 매개변수에 대한 최소 검증을 추가하는 것이 좋겠습니다.
- 매직 넘버 상수화:
rank - 1 <= 2조건을 더 명확하게 만들 수 있습니다.+const TOP_RANKS_COUNT = 3; + export const Rank = ({ name, rank, count, suffix = '회' }: IProp) => { + if (rank < 1) { + console.warn('Rank should be 1 or greater'); + } + return ( <div className={twMerge( 'min-w-[40%] w-full p-[25px] bg-BG-SUB rounded-[4px] gap-3 justify-between flex', - rank - 1 <= 2 ? `border-2 ${colorTable[rank - 1]}` : 'border-0', + rank <= TOP_RANKS_COUNT ? `border-2 ${colorTable[rank - 1]}` : 'border-0', )} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/app/(auth-required)/layout.tsx(1 hunks)src/app/(auth-required)/leaderboards/Content.tsx(2 hunks)src/app/(auth-required)/leaderboards/Rank.tsx(1 hunks)src/app/(auth-required)/leaderboards/components/Rank.tsx(0 hunks)src/app/(auth-required)/leaderboards/components/Ranker.tsx(0 hunks)src/app/(auth-required)/leaderboards/components/index.ts(0 hunks)
💤 Files with no reviewable changes (3)
- src/app/(auth-required)/leaderboards/components/index.ts
- src/app/(auth-required)/leaderboards/components/Rank.tsx
- src/app/(auth-required)/leaderboards/components/Ranker.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/app/(auth-required)/leaderboards/Content.tsx (1)
src/app/(auth-required)/leaderboards/Rank.tsx (1)
Rank(13-33)
🔇 Additional comments (4)
src/app/(auth-required)/layout.tsx (1)
6-6: 좋은 리팩토링입니다!Import 경로를 통합하여 코드가 더 깔끔해졌습니다. 기능상 변화 없이 가독성을 개선한 좋은 변경사항입니다.
src/app/(auth-required)/leaderboards/Content.tsx (3)
7-8: Import 정리가 잘 되었습니다.반응형 로직 관련 import들을 제거하고 새로운 Rank 컴포넌트만 import하도록 정리한 것이 좋습니다.
11-11: 통합된 Rank 컴포넌트 사용 승인.새로운 Rank 컴포넌트로 통합하여 코드를 단순화한 것이 좋습니다.
88-92: 리더보드 렌더링 로직 단순화 우수.기존의 복잡한 반응형 로직과 상위 3개 순위에 대한 별도 처리를 제거하고, 모든 순위 항목을 동일한 Rank 컴포넌트로 렌더링하도록 단순화한 것이 훌륭합니다. 이는 PR 목표인 텍스트 잘림 현상 개선과 가독성 향상에 도움이 될 것입니다.
Nuung
reviewed
May 26, 2025
Nuung
reviewed
May 26, 2025
Nuung
reviewed
May 26, 2025
Nuung
requested changes
May 26, 2025
Nuung
approved these changes
May 27, 2025
Jihyun3478
approved these changes
May 27, 2025
ooheunda
approved these changes
May 28, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
🔥 변경 사항
리더보드의 긴 텍스트가 덜 잘리도록 UI를 개선하였습니다.
🏷 관련 이슈
#198📸 스크린샷 (UI 변경 시 필수)
📌 체크리스트
Summary by CodeRabbit
신규 기능
버그 수정
리팩터