[FIX] 캐러셀 모바일 뷰 이슈

[ho0010]

#️⃣연관된 이슈

[FIX] 10월 3주차 QA 사항 - 호준 #279

📝작업 내용

캐러셀 모바일 뷰 이슈

• pc환경에서는 문제가 없지만 모바일 뷰에서 캐러셀이 부드럽지 않게 동작하는 버그를 확인해 수정했습니다.

• pc 동작

  default.mov

• pc 모바일 뷰 동작

  default.mp4

• 모바일 동작

  default.mp4

• 코드 개선 후 동작

  default.mov

• 배포 후 모바일 뷰 동작

  default.mp4

다른 메모리 관련 수정사항도 추가했습니다.

Summary by CodeRabbit

릴리스 노트

• 버그 수정

  • 터치 기반 드래그 기능 제거로 캐러셀 안정성 개선
  • 검색어 공백 처리 개선 및 카테고리 필터링 로직 강화

• 성능 개선

  • 애니메이션 전환 시간 조정 및 GPU 가속 최적화로 스크롤 성능 향상
  • 캐러셀 초기화 및 리사이즈 이벤트 처리 개선으로 렌더링 안정성 증대

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thip	Ready	Preview	Comment	Oct 18, 2025 8:16am

💡 Enable Vercel Agent with $100 free credit for automated AI reviews

[coderabbitai]

둘러보기

캐러셀 컴포넌트에서 터치 이벤트 핸들링을 제거하고, GPU 가속을 위한 CSS 변환을 추가했습니다. 또한 useInfiniteCarousel 훅의 초기 스크롤 계산에 requestAnimationFrame을 추가하고 리사이즈 디바운싱을 구현했으며, 그룹 검색 페이지의 loadMore 함수 로직을 개선했습니다.

변경 사항

분류 / 파일(들)	변경 요약
터치 이벤트 제거 src/components/group/MyGroupBox.tsx, src/components/group/RecruitingGroupCarousel.tsx	touchStart, touchMove, touchEnd 이벤트 핸들러 및 바인딩 제거. 마우스 기반 드래깅은 유지
GPU 가속 및 애니메이션 개선 src/components/group/MyGroupCard.tsx, src/components/group/RecruitingGroupCarousel.tsx	CSS transform: translateZ(0) 및 will-change: transform 추가. RecruitingGroupCarousel의 transition 기간을 0.2s에서 0.3s로 증가
캐러셀 훅 타이밍 개선 src/hooks/useInfiniteCarousel.ts	requestAnimationFrame을 사용한 초기 스크롤 계산, 리사이즈 디바운싱(150ms), 확장된 cleanup 로직 추가
그룹 검색 로직 개선 src/pages/groupSearch/GroupSearch.tsx	loadMore 함수에서 searchTerm 트리밍 로직 개선, category와 isAllCategory 파라미터 추가, 초기 권한 검사 로직 개선

Sequence Diagram(s)

sequenceDiagram
    participant Mount as Component<br/>Mount
    participant RAF as requestAnimationFrame
    participant Layout as Layout
    participant ScrollHandler as handleScroll
    participant Timeout as setTimeout<br/>(100ms)
    
    Mount->>RAF: scheduleRAF for<br/>initial scroll
    RAF->>Layout: wait for layout
    Layout->>ScrollHandler: trigger scroll<br/>calculation
    Mount->>Timeout: also schedule<br/>setTimeout 100ms
    Timeout->>ScrollHandler: secondary<br/>trigger (fallback)
    
    Note over RAF,Timeout: Cleanup on unmount:<br/>cancel RAF + timeout

Loading

sequenceDiagram
    participant Carousel as CarouselComponent
    participant ResizeListener as Resize<br/>Listener
    participant Debouncer as Resize<br/>Debouncer
    
    Carousel->>ResizeListener: attach resize listener<br/>(150ms debounce)
    
    alt Rapid Resizes
        ResizeListener->>Debouncer: clear previous<br/>resizeTimer
        ResizeListener->>Debouncer: schedule new<br/>initializeScroll
    end
    
    Note over Carousel,Debouncer: Single initializeScroll call<br/>after 150ms no-resize window

Loading

추정 코드 리뷰 노력

🎯 3 (Moderate) | ⏱️ ~20분

관련 가능 이슈

• [FIX] 10월 3주차 QA 사항 - 호준 #279: 캐러셀 컴포넌트(MyGroupBox/RecruitingGroupCarousel)에서 터치 이벤트 핸들링 제거로 모바일 캐러셀 동작 문제 직접 해결

관련 가능 PR

• fix: carousel 로직 복구 #128: MyGroupBox 및 RecruitingGroupCarousel과 useInfiniteCarousel 훅의 동일한 컴포넌트 수정으로 연관
• feat: search 로직 변경, 무한 스크롤 추가 #148: GroupSearch.tsx의 loadMore/무한 스크롤 검색 로직 변경으로 연관
• fix: QA 사항 반영 #208: RecruitingGroupCarousel의 Item 스타일드 컴포넌트 CSS 변경(transform/translateZ/will-change)으로 연관

제안 검토자

• heeeeyong
• ljh130334

시

🐰 터치를 빼고 마우스를 택하고,
GPU는 가속을 붙여주며,
타이밍을 다듬은 애니메이션,
검색도 더 똑똑해졌네!
✨ 부드러운 캐러셀의 춤을!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title Check	❓ Inconclusive	제목 "[FIX] 10월 3주차 QA 사항 - 호준"은 PR의 변경사항과 관련이 있지만, 매우 모호하고 일반적입니다. "QA 사항"이라는 표현은 구체적인 정보를 제공하지 않으며, 실제 변경사항(카로셀 터치 이벤트 제거, 애니메이션 성능 최적화, 모바일 뷰 개선 등)을 명확히 드러내지 않습니다. PR 목표에는 모바일 뷰의 카로셀 부드러운 동작 수정이 주요 내용이지만, 제목만으로는 이를 파악하기 어렵습니다. 개발자가 git 히스토리를 훑어볼 때 이 PR의 주요 목적을 즉시 이해하기 어려울 것으로 판단됩니다.	제목을 더 구체적이고 설명적으로 변경하기를 권장합니다. 예를 들어 "[FIX] 모바일 카로셀 터치 이벤트 제거 및 성능 최적화" 또는 "[FIX] 카로셀 모바일 뷰 부드러운 동작 개선"과 같이 변경하면, 스캔하는 개발자들이 해당 PR의 목적을 명확히 파악할 수 있습니다.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/QA10-3

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 061408d and 023c008.

📒 Files selected for processing (5)

• src/components/group/MyGroupBox.tsx (0 hunks)
• src/components/group/MyGroupCard.tsx (1 hunks)
• src/components/group/RecruitingGroupCarousel.tsx (1 hunks)
• src/hooks/useInfiniteCarousel.ts (1 hunks)
• src/pages/groupSearch/GroupSearch.tsx (1 hunks)

💤 Files with no reviewable changes (1)

• src/components/group/MyGroupBox.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

src/pages/groupSearch/GroupSearch.tsx (1)

src/api/rooms/getSearchRooms.ts (1)

• getSearchRooms (26-52)

🔇 Additional comments (7)

src/components/group/MyGroupCard.tsx (1)

70-70: GPU 가속 최적화가 적절하게 적용되었습니다.

transform: translateZ(0)를 추가하여 GPU 가속을 활성화한 것은 모바일 캐러셀 성능 개선에 효과적인 방법입니다. 기존의 will-change: transform과 함께 작동하여 부드러운 애니메이션을 제공합니다.

src/components/group/RecruitingGroupCarousel.tsx (1)

158-160: GPU 가속 및 애니메이션 최적화가 잘 적용되었습니다.

아이템에 다음과 같은 성능 개선 사항이 추가되었습니다:

• 트랜지션 시간을 0.3초로 연장하여 더 부드러운 애니메이션 제공
• will-change: transform으로 브라우저에 최적화 힌트 제공
• transform: translateZ(0)로 GPU 가속 활성화

이러한 변경사항은 모바일에서 캐러셀 성능을 개선하는 데 효과적입니다.

src/pages/groupSearch/GroupSearch.tsx (2)

224-226: 검색어 처리 로직이 명확하게 개선되었습니다.

trimmedTerm을 미리 계산하고 재사용하여 코드 중복을 제거했으며, isAllCategory 조건을 명시적으로 처리하여 가독성이 향상되었습니다. 조기 반환 조건도 논리적으로 올바릅니다.

---

231-236: API 호출 파라미터가 올바르게 전달되고 있습니다.

trimmedTerm과 isAllCategory를 getSearchRooms API에 정확하게 전달하고 있으며, src/api/rooms/getSearchRooms.ts의 함수 시그니처와 일치합니다.

src/hooks/useInfiniteCarousel.ts (3)

60-76: RAF 기반 스크롤 초기화로 레이아웃 스래싱을 방지했습니다.

requestAnimationFrame을 사용하여 스크롤 초기화를 레이아웃 계산 이후로 지연시키는 것은 좋은 접근입니다. 새로운 RAF를 스케줄링하기 전에 기존 RAF를 취소하는 로직(line 62-64)도 적절합니다.

---

80-88: 리사이즈 디바운서가 효과적으로 구현되었습니다.

150ms 디바운스를 통해 과도한 재초기화를 방지하고 성능을 개선했습니다. 타이머가 중복 실행되지 않도록 기존 타이머를 먼저 클리어하는 로직도 올바릅니다.

---

94-102: 정리(cleanup) 로직이 포괄적으로 개선되었습니다.

언마운트 시 다음 항목들을 모두 정리하여 메모리 누수를 방지합니다:

• 초기화 타이머
• 스크롤 이벤트 리스너
• 리사이즈 이벤트 리스너
• 리사이즈 디바운스 타이머
• 대기 중인 RAF

이는 PR 목표에서 언급된 "메모리 관련 수정"과 일치합니다.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• QA10-3: Request failed with status code 404

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}