FC-DEV-FinalProject / FinalProject_2VEN_FE

데브코스 파이널프로젝트 시스메틱 2조 이븐한조 FE 리포지토리
0 stars 1 forks source link

[feat] 트레이더 목록 페이지 추가수정 건 #175

Closed Panda-raccoon closed 1 day ago

Panda-raccoon commented 1 day ago

🚀 풀 리퀘스트 제안

📋 작업 내용

반복된 데이터 말고 20개의 데이터로 필터링 하는 걸 적용하느라 코드가 깁니다..

뱃지 형태 뱃지는 전략 많은 순으로 1위 ~ 10위까지 부여 // strategiesCount 기준으로 상위 10명을 식별 const badgeRank = [...traders] .sort((a, b) => b.strategiesCount - a.strategiesCount) .slice(0, 10) .map((trader) => trader.traderId);

필터링구분

페이지 이동 아이콘 클릭 -> 전체칸 클릭 으로 수정

🔧 변경 사항

주요 변경 사항을 요약해 주세요.

📸 스크린샷 (선택 사항)

image image

📄 기타

추가적으로 전달하고 싶은 내용이나 특별한 요구 사항이 있으면 작성해 주세요.

Sourcery에 의한 요약

트레이더 목록 페이지를 개선하여 전략 수와 등록 날짜에 따라 트레이더를 정렬할 수 있는 필터링 옵션을 추가합니다. 전략 수를 기준으로 상위 10명의 트레이더에 대한 배지 랭킹 시스템을 구현합니다. 페이지 전환을 위한 링크를 사용하도록 내비게이션을 업데이트합니다.

새로운 기능:

개선 사항:

Original summary in English ## Summary by Sourcery Enhance the trader list page by adding filtering options for sorting traders by strategy count and registration date. Implement a badge ranking system for the top 10 traders based on strategy count. Update navigation to use links for page transitions. New Features: - Add filtering options to sort traders by the number of strategies and by new traders based on registration date. Enhancements: - Implement badge ranking for the top 10 traders based on the number of strategies.
netlify[bot] commented 1 day ago

Deploy Preview for sysmetics ready!

Name Link
Latest commit fc0bfd006503760f58ebe5626f998827ec512471
Latest deploy log https://app.netlify.com/sites/sysmetics/deploys/673ee06bf6871b00091a2866
Deploy Preview https://deploy-preview-175--sysmetics.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

sourcery-ai[bot] commented 1 day ago

리뷰어 가이드 by Sourcery

이 PR은 거래자 목록 페이지의 개선 사항을 구현하며, 필터링, 정렬 및 탐색 기능에 중점을 둡니다. 구현은 하드코딩된 반복 데이터를 20명의 고유 거래자로 구성된 고정 세트로 대체하고, 상위 거래자에 대한 배지 순위를 추가하며, 전략 수와 등록 날짜를 기준으로 정렬 기능을 구현합니다.

TraderListPage 컴포넌트에 대한 업데이트된 클래스 다이어그램

classDiagram
    class TraderData {
        int traderId
        string name
        string profileImage
        string description
        int strategiesCount
        string createdAt
    }
    class TraderListProps {
        TraderData[] traders
        int[] badgeRank
    }
    class TraderList {
        +TraderList(TraderListProps props)
    }
    TraderList --> TraderListProps
    TraderListProps --> TraderData

파일 수준 변경 사항

변경 사항 세부 사항 파일
동적 거래자 데이터 생성을 정적 거래자 데이터셋으로 대체
  • 반복적인 데이터 생성 로직 제거
  • 상세 정보가 포함된 20개의 고유 거래자 프로필 추가
  • 정렬 목적으로 각 거래자에 대한 createdAt 필드 추가
src/pages/trader/TraderListPage.tsx
거래자 목록에 대한 정렬 기능 구현
  • 전략 수에 따른 정렬 추가
  • 등록 날짜(최신순)에 따른 정렬 추가
  • useState를 사용한 정렬 상태 관리 구현
src/pages/trader/TraderListPage.tsx
거래자 카드 탐색 및 순위 표시 강화
  • 아이콘 클릭 탐색을 Link 컴포넌트를 사용한 전체 카드 클릭으로 대체
  • 전략 수를 기준으로 상위 10명의 거래자에 대한 배지 시스템 구현
  • 팔로워 수 표시 제거 및 순위 배지로 대체
  • 카드 호버 효과 및 스타일링 업데이트
src/components/common/TraderList.tsx

관련된 문제일 가능성


팁 및 명령어 #### Sourcery와 상호작용하기 - **새로운 리뷰 트리거:** 풀 리퀘스트에 `@sourcery-ai review`라고 댓글을 남깁니다. - **토론 계속하기:** Sourcery의 리뷰 댓글에 직접 답글을 남깁니다. - **리뷰 댓글에서 GitHub 이슈 생성:** 리뷰 댓글에서 이슈를 생성하도록 Sourcery에 요청합니다. - **풀 리퀘스트 제목 생성:** 풀 리퀘스트 제목 어디에나 `@sourcery-ai`를 작성하여 언제든지 제목을 생성합니다. - **풀 리퀘스트 요약 생성:** 풀 리퀘스트 본문 어디에나 `@sourcery-ai summary`를 작성하여 언제든지 PR 요약을 생성합니다. 이 명령을 사용하여 요약이 삽입될 위치를 지정할 수도 있습니다. #### 경험 맞춤화하기 [대시보드](https://app.sourcery.ai)에 접속하여: - Sourcery가 생성한 풀 리퀘스트 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화하거나 비활성화합니다. - 리뷰 언어를 변경합니다. - 사용자 정의 리뷰 지침을 추가, 제거 또는 편집합니다. - 기타 리뷰 설정을 조정합니다. #### 도움 받기 - 질문이나 피드백이 있는 경우 [지원 팀에 문의](mailto:support@sourcery.ai)하세요. - 자세한 가이드와 정보를 보려면 [문서](https://docs.sourcery.ai)를 방문하세요. - [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) 또는 [GitHub](https://github.com/sourcery-ai)에서 Sourcery 팀을 팔로우하여 소식을 받아보세요.
Original review guide in English ## Reviewer's Guide by Sourcery This PR implements improvements to the trader list page, focusing on filtering, sorting, and navigation functionality. The implementation replaces hardcoded repeating data with a fixed set of 20 unique traders, adds badge ranking for top traders, and implements sorting capabilities based on strategy count and registration date. #### Updated Class Diagram for TraderListPage Component ```mermaid classDiagram class TraderData { int traderId string name string profileImage string description int strategiesCount string createdAt } class TraderListProps { TraderData[] traders int[] badgeRank } class TraderList { +TraderList(TraderListProps props) } TraderList --> TraderListProps TraderListProps --> TraderData ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Replaced dynamic trader data generation with static trader dataset |
  • Removed repetitive data generation logic
  • Added 20 unique trader profiles with detailed information
  • Added createdAt field for each trader for sorting purposes
| `src/pages/trader/TraderListPage.tsx` | | Implemented sorting functionality for trader list |
  • Added sorting by number of strategies
  • Added sorting by registration date (newest first)
  • Implemented sort state management using useState
| `src/pages/trader/TraderListPage.tsx` | | Enhanced trader card navigation and ranking display |
  • Replaced icon click navigation with full card click using Link component
  • Implemented badge system for top 10 traders based on strategy count
  • Removed follower count display and replaced with ranking badge
  • Updated card hover effects and styling
| `src/components/common/TraderList.tsx` | ### Possibly linked issues - **#1**: PR addresses filtering and badge display as outlined in the issue, with additional data handling. ---
Tips and commands #### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).