Skip to content

Conversation

@Taeil08
Copy link
Contributor

@Taeil08 Taeil08 commented Aug 2, 2025

🧩 관련 이슈 번호

📌 작업 내용

  • usememo로 성능 최적화는 시도했지만 밑에 영상과 이슈를 적어놨습니다..
  • 카드 랜더링 개수 최대 20에서 최대 100개로 수정 - 현재 토탈 개수 다 나옵니다
스크린샷 2025-08-02 오후 7 25 36 스크린샷 2025-08-02 오후 7 22 09

✅ 체크리스트

  • PR 하기 전에 이슈에서 빼먹은건 없는지 확인했습니다
  • 라벨 및 마일스톤을 사이드 탭에서 등록했습니다.
  • PR을 보내는 브랜치가 올바른지 확인했습니다.
  • 팀원들이 리뷰하기 쉽도록 설명을 자세하게 작성했습니다.
  • 변경사항을 충분히 테스트 했습니다.
  • (함수를 구현 했을 때) JSDoc을 양식에 맞춰서 작성했습니다.
  • 컨벤션에 맞게 구현했습니다.

📷 UI 변경 사항 (선택)

  • 영상보단 실제로가 더 빠르긴합니다 녹화하면서 찍으니깐 더 느린거 같아요
2025-08-02.7.27.00.mov

❓무슨 문제가 발생했나요? (선택)

-Issue로는 데스크탑에선 페이지네이션 4페이지로 갈때 조금 느립니다 데스크탑일떄는 4페이지(아이템개수:8 * 3페이지)
태블릿일때는 7페이지(아이템개수:4 *6페이지) 모바일일떄는(아이템 개수:6 * 4페이지) 5페이지에서 렉이 좀 걸리는데 각 페이지 별로 렉 걸리는 카드개수 시점이 24개까진 괜찮은데 25개째부터 나오는 페이지로 넘어갈때 렉이 좀 걸립니다.

💬 기타 참고 사항 (선택)

Summary by CodeRabbit

Summary by CodeRabbit

  • Refactor

    • 메인 페이지의 상태 관리 및 성능이 개선되었습니다. 검색, 필터, 정렬, 페이지네이션 로직이 통합되어 더 빠르고 일관된 사용자 경험을 제공합니다.
    • 불필요한 상태와 useEffect가 제거되고, 메모이제이션을 통해 렌더링 성능이 향상되었습니다.
  • Bug Fixes

    • 인기 활동 캐러셀에서 항상 4개의 아이템이 표시되도록 수정되었습니다.
  • New Features

    • 활동 카드 이미지가 뷰포트에 가까워질 때만 로드되어 페이지 로딩 속도가 빨라졌습니다.
  • Chores

    • 모바일 전용 캐러셀 컴포넌트가 제거되었습니다.

@Taeil08 Taeil08 added this to the 5차 스프린트 milestone Aug 2, 2025
@Taeil08 Taeil08 self-assigned this Aug 2, 2025
@Taeil08 Taeil08 added the ♻️ Refactor 코드 리팩토링 label Aug 2, 2025
@coderabbitai
Copy link

coderabbitai bot commented Aug 2, 2025

📝 Walkthrough

Walkthrough

MainPage 컴포넌트가 대규모로 리팩터링되어 상태 관리와 성능, 코드 명확성이 개선되었습니다. 검색, 필터, 정렬, 페이지네이션 로직이 useMemo와 useCallback을 활용해 통합 및 최적화되었으며, 불필요한 상태와 useEffect가 제거되었습니다. MobileCarousel 컴포넌트가 삭제되었고, MainCard 이미지에 lazy loading이 추가되었습니다.

Changes

Cohort / File(s) Change Summary
MainPage 리팩터링
apps/what-today/src/pages/main/index.tsx
MainPage 컴포넌트의 상태 관리, 검색/필터/정렬/페이지네이션 로직을 useMemo와 useCallback으로 최적화. 불필요한 상태 제거, 쿼리 옵션 개선, Carousel 및 카드 렌더링 방식 변경.
MobileCarousel 삭제
packages/design-system/src/components/Carousel/MobileCarousel.tsx
MobileCarousel 컴포넌트 파일 삭제. 모바일용 가로 스크롤 카드 리스트 컴포넌트 제거.
MainCard 이미지 지연 로딩
packages/design-system/src/components/MainCard/Image.tsx
MainCard 이미지 컴포넌트에 loading='lazy' 속성 추가. 이미지 뷰포트 진입 시 로드하도록 변경.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant MainPage
  participant ActivitiesAPI
  participant Carousel
  participant MainCard

  User->>MainPage: 페이지 진입/검색/정렬/카테고리/페이지 변경
  MainPage->>ActivitiesAPI: 활동 목록 쿼리 (최대 100개)
  ActivitiesAPI-->>MainPage: 활동 데이터 반환
  MainPage->>MainPage: useMemo로 필터/정렬/페이지네이션 처리
  MainPage->>Carousel: 인기 활동 전달 (정렬된 데이터)
  MainPage->>MainCard: 카드 렌더링 (React.memo 활용)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Possibly related PRs

Suggested labels

✨ Feat

Suggested reviewers

  • kjhyun0830
  • MyungJiwoo

Poem

🐇
코드는 깔끔, 상태는 슬림
useMemo, useCallback, 토끼의 꿈
카드도 느긋이 lazy로 로딩
MobileCarousel, 이제는 안녕
성능과 명료함, 오늘도 점프!
🥕✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.


📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between de89368 and 360b9f6.

📒 Files selected for processing (1)
  • apps/what-today/src/pages/main/index.tsx (5 hunks)
🧰 Additional context used
🧠 Learnings (9)
📓 Common learnings
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.
Learnt from: Taeil08
PR: What-Today-FE/What-Today#134
File: apps/what-today/src/pages/experiences/iindex.tsx:11-16
Timestamp: 2025-07-25T03:14:08.579Z
Learning: Taeil08이 What-Today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#98
File: apps/what-today/src/hooks/useKakaoOAuth.ts:37-65
Timestamp: 2025-07-21T13:40:52.209Z
Learning: MyungJiwoo encountered multiple API calls when adding all dependencies to useEffect in OAuth callback hooks. The solution is to use useRef to prevent duplicate requests and useCallback to memoize the async function, keeping only essential dependencies (searchParams and the memoized function) in the dependency array.
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#89
File: packages/design-system/src/components/bottomsheet/hooks/index.ts:44-51
Timestamp: 2025-07-21T04:36:28.477Z
Learning: HarrySeop encountered a scroll restoration issue in the useBodyScrollLock hook where the base page jumps to the top during mount/unmount of the bottom sheet component. They tried adding isLocked check in cleanup function and ref-based approaches but both failed to resolve the issue. They decided to defer this fix to a later refactoring.
Learnt from: Taeil08
PR: What-Today-FE/What-Today#150
File: apps/what-today/src/pages/main/index.tsx:45-50
Timestamp: 2025-07-28T00:26:02.960Z
Learning: Taeil08은 What-Today 프로젝트에서 로딩 및 에러 상태 처리와 같은 UX 관련 사항은 팀원들과 회의를 통해 결정한 후 구현하는 접근 방식을 선호한다.
Learnt from: Taeil08
PR: What-Today-FE/What-Today#107
File: apps/what-today/src/pages/main/index.tsx:13-158
Timestamp: 2025-07-24T04:47:25.214Z
Learning: Taeil08은 What-Today 프로젝트에서 API 연결 예정인 임시 더미 데이터의 경우, 나중에 삭제될 예정이므로 데이터 품질 개선을 하지 않는 접근법을 선호한다.
📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.

Applied to files:

  • apps/what-today/src/pages/main/index.tsx
📚 Learning: myungjiwoo encountered multiple api calls when adding all dependencies to useeffect in oauth callbac...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#98
File: apps/what-today/src/hooks/useKakaoOAuth.ts:37-65
Timestamp: 2025-07-21T13:40:52.209Z
Learning: MyungJiwoo encountered multiple API calls when adding all dependencies to useEffect in OAuth callback hooks. The solution is to use useRef to prevent duplicate requests and useCallback to memoize the async function, keeping only essential dependencies (searchParams and the memoized function) in the dependency array.

Applied to files:

  • apps/what-today/src/pages/main/index.tsx
📚 Learning: harryseop encountered a scroll restoration issue in the usebodyscrolllock hook where the base page j...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#89
File: packages/design-system/src/components/bottomsheet/hooks/index.ts:44-51
Timestamp: 2025-07-21T04:36:28.477Z
Learning: HarrySeop encountered a scroll restoration issue in the useBodyScrollLock hook where the base page jumps to the top during mount/unmount of the bottom sheet component. They tried adding isLocked check in cleanup function and ref-based approaches but both failed to resolve the issue. They decided to defer this fix to a later refactoring.

Applied to files:

  • apps/what-today/src/pages/main/index.tsx
📚 Learning: taeil08이 what-today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 ...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#134
File: apps/what-today/src/pages/experiences/iindex.tsx:11-16
Timestamp: 2025-07-25T03:14:08.579Z
Learning: Taeil08이 What-Today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.

Applied to files:

  • apps/what-today/src/pages/main/index.tsx
📚 Learning: user kjhyun0830 follows an incremental development approach in what-today project, implementing ui f...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.

Applied to files:

  • apps/what-today/src/pages/main/index.tsx
📚 Learning: in the selectroot component (packages/design-system/src/components/select/selectroot.tsx), myungjiwo...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#57
File: packages/design-system/src/components/select/SelectRoot.tsx:37-38
Timestamp: 2025-07-17T01:20:26.915Z
Learning: In the SelectRoot component (packages/design-system/src/components/select/SelectRoot.tsx), MyungJiwoo questioned the need for implementing controlled component pattern. The current implementation only handles internal→external state changes via onChangeValue callback, but doesn't handle external→internal changes when the value prop is updated, which breaks the typical React controlled component contract.

Applied to files:

  • apps/what-today/src/pages/main/index.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), the input type s...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:18:33.545Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), the input type should be 'checkbox' rather than 'radio' to support the intended toggle behavior where users can click a selected option again to deselect it. The handleChange function already implements this toggle logic with `onSelect?.(isSelected ? '' : value);`.

Applied to files:

  • apps/what-today/src/pages/main/index.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), when using type=...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:33:19.860Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), when using type="checkbox" for toggle behavior, adding role="radio" maintains proper semantic meaning for screen readers while preserving the desired UX functionality where users can click to deselect options.

Applied to files:

  • apps/what-today/src/pages/main/index.tsx
🔇 Additional comments (8)
apps/what-today/src/pages/main/index.tsx (8)

19-26: 성능 최적화가 잘 적용되었습니다.

React.memo를 사용한 MainCard 최적화는 카드 컴포넌트의 불필요한 리렌더링을 방지하여 성능을 개선합니다. 특히 100개의 카드를 렌더링하는 상황에서 효과적입니다.


37-49: 반응형 처리가 효율적으로 구현되었습니다.

useCallback을 사용하여 handleResize 함수를 메모이제이션하고, useEffect에서 적절한 cleanup을 수행하여 메모리 누수를 방지했습니다. 반응형 브레이크포인트도 합리적으로 설정되었습니다.


52-59: 데이터 페칭 최적화가 PR 목표에 부합합니다.

카드 개수를 100개로 증가시키는 PR 목표가 올바르게 구현되었습니다. staleTime과 gcTime 설정, 그리고 불필요한 refetch 옵션 비활성화를 통해 성능도 최적화되었습니다.


62-73: 인기 체험 정렬 로직이 올바르게 구현되었습니다.

useMemo를 사용한 성능 최적화와 함께, 리뷰 수 우선 정렬 후 동점일 경우 최신순으로 정렬하는 로직이 합리적입니다. slice()를 사용하여 원본 배열 변경을 방지한 것도 좋습니다.


75-106: 3단계 메모이제이션 파이프라인이 훌륭하게 구현되었습니다.

필터링 → 정렬 → 페이지네이션으로 이어지는 명확한 데이터 처리 흐름과 각 단계별 useMemo 최적화가 뛰어납니다. 이전의 복잡한 useEffect 로직을 대체하여 코드 가독성과 성능을 크게 개선했습니다.


108-133: 이벤트 핸들러 최적화가 적절하게 구현되었습니다.

모든 핸들러에 useCallback을 적용하여 불필요한 재생성을 방지했고, 검색/정렬/카테고리 변경 시 페이지를 1로 리셋하는 UX 로직도 적절합니다. 의존성 배열도 최소화되어 효율적입니다.


135-151: 카드 렌더링 최적화가 효과적으로 구현되었습니다.

useCallback으로 메모이제이션된 renderCards 함수와 React.memo 최적화된 MainCard의 조합이 100개 카드 렌더링 성능을 크게 개선할 것입니다. 키 생성 로직도 React 재조정에 적합합니다.


163-163: 컴포넌트 통합이 최적화된 핸들러와 잘 연결되었습니다.

Carousel의 고정된 itemsPerPage, Select와 RadioGroup의 메모이제이션된 핸들러 연결, Pagination의 최적화된 페이지 변경 처리가 모두 적절하게 구현되었습니다.

Also applies to: 179-179, 201-201, 242-242

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch refactor/taeil/208

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary or @coderabbitai 요약 to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions
Copy link

github-actions bot commented Aug 2, 2025

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

Copy link
Contributor

@MyungJiwoo MyungJiwoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

현재 체험 등록/수정시 메인 페이지에서 새로고침을 해야만 반영되는 오류가 있었는데, 쿼리키를 바꿨으니 잘 되길 바랍니다..! 고생하셨어요!~

@github-actions
Copy link

github-actions bot commented Aug 2, 2025

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

@Taeil08 Taeil08 merged commit 3016707 into develop Aug 2, 2025
2 checks passed
@Taeil08 Taeil08 deleted the refactor/taeil/208 branch August 2, 2025 11:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

♻️ Refactor 코드 리팩토링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants