QI1-204-메인페이지-문제 - 페이지네이션, 모바일 필터 레이아웃 수정

[yshls]

📝 변경 사항

1. 카테고리 변경 전 제거,
2. 모바일 필터 레이아웃 변경

🔍 변경 사항 세부 설명

🕵️‍♀️ 요청사항

📷 스크린샷 (선택)

<변경 전>

<변경 전>

[gemini-code-assist]

Summary of Changes

Hello @yshls, I'm Gemini Code Assist¹! 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!

I've implemented a fix to remove the '거래 중' (TRADING) option from the transaction status filter, streamlining the user interface. Concurrently, I've undertaken a significant refactor of the HomePage component's data fetching and display logic. Instead of fetching data page by page, the component now fetches all relevant card data upfront. This enables more robust client-side filtering and sorting, which are now efficiently handled using useMemo hooks, improving overall responsiveness and maintainability.

Highlights

• Removal of 'TRADING' Status: The 'TRADING' option has been removed from the transaction status filter in the UI and its corresponding type definition, addressing a specific UI fix.
• Refactored Data Fetching: The HomePage component's data fetching logic has been refactored to retrieve all relevant card data from the API in a single operation (or chained requests until all data is available), shifting the pagination strategy from server-side to client-side.
• Client-Side Filtering and Sorting with useMemo: Client-side filtering by postView (e.g., 'FAVORITE_POSTS') and sorting by sortBy (e.g., 'RATING') are now performed efficiently using useMemo hooks after all data is fetched, optimizing performance and improving responsiveness.
• Improved sortCards Utility Function: The sortCards utility function has been improved to create a shallow copy of the array before sorting, ensuring that the original array remains immutable and preventing unintended side effects.

Using Gemini Code Assist

The 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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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 or fill out our survey to provide feedback.

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

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 PR은 거래 상태 필터에서 '거래 중' 옵션을 제거하고, 데이터 로딩 및 필터링 로직을 크게 리팩터링합니다. 기존의 페이지별 데이터 로딩 방식에서 필터 조건에 맞는 모든 데이터를 한 번에 불러와 클라이언트에서 페이징하는 방식으로 변경되었습니다. 이로 인해 클라이언트 측 필터링 및 정렬의 정확성은 향상되었지만, 데이터 양이 많을 경우 초기 로딩 성능에 영향을 줄 수 있습니다. sortCards 함수의 중복 로직 제거 및 데이터 로딩 중 에러 핸들링 개선 등 몇 가지 제안 사항을 포함했습니다.

[seungwoo505]

굿

[hyonun321]

LGTM