Refactor/#79 가독성을 위한 리팩토링

[leeleeleeleejun]

#️⃣연관된 이슈

#79

📝작업 내용

프로젝트 구조를 정비하고, 지도 관련 컴포넌트의 네이밍 직관성을 높였으며, 지도 조작 시 발생하는 불필요한 연산을 줄이기 위해 성능 최적화를 진행했습니다.

1. 프로젝트 구조 개선 (Providers 디렉토리 분리)

• root 레벨에 흩어져 있던 Provider 컴포넌트들을 별도 디렉토리(providers)로 이동하여 응집도를 높였습니다.

2. 네이밍 리팩토링 (가독성 및 의미 명확화)

• PlaceMarker의 handlePreviewPlace prop이름을 onClick으로 변경
• PreviewPlace를 PlaceSummaryCard 컴포넌트로 이름 변경
• CurrentLocationButton 컴포넌트에서 previewPlaceId를 selectedPlaceId로 변경

3. 지도 인터랙션 성능 최적화 (이벤트 통합 및 Debounce 적용)

기존 문제
지도의 움직임을 감지하기 위해 onTouchEnd, onMouseUp, onZoomChanged 등 여러 이벤트를 개별적으로 관리하여 로직이 분산되어 있었습니다.

해결 방안
이벤트 통합: 지도 중심 좌표 변경 감지를 onCenterChanged 이벤트 하나로 통합하여 로직을 단순화했습니다.
Debounce 적용: 지도 이동 중 수시로 발생하는 이벤트를 제어하기 위해 useDebounced 훅을 적용했습니다.
TypeScript에서 매개변수 반공변성 이슈 해결을 위해 제네릭에 any를 허용하되, Parameters로 타입 안전성을 확보했습니다.

4. Banner 컴포넌트 리팩토링 (Carousel)

이름 변경
Banner → Carousel (슬라이드 기능을 제공하는 컴포넌트의 특성을 더 잘 나타내는 표준적인 이름으로 변경)

인터페이스 개선
contents prop으로 배열을 받던 방식에서, children을 사용하는 방식으로 변경하여 합성 패턴을 적용했습니다.

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

Summary by CodeRabbit

• 새로운 기능

  • 사진 갤러리가 Carousel로 개선되어 더욱 매끄러운 이미지 탐색을 지원합니다.
  • 지도에서 장소 선택 시 장소 요약 카드가 표시되는 새로운 UI가 추가됩니다.

• 개선사항

  • 지도 상호작용이 최적화되어 더 반응성 있는 사용자 경험을 제공합니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

배너 컴포넌트를 캐러셀로 교체하고, HydrationBoundaryPage 임포트 경로를 정규화하며, 지도 컴포넌트에 디바운싱 로직을 추가하고, PreviewPlace를 PlaceSummaryCard로 이름 변경하고, 새로운 useDebounced 훅을 도입했습니다.

Changes

Cohort / File(s)	변경 사항
배너→캐러셀 컴포넌트 교체 packages/ui/src/components/Carousel/Carousel.tsx, packages/ui/src/components/Carousel/index.tsx, packages/ui/src/components/Banner/index.tsx	Banner 컴포넌트를 Carousel로 이름 변경, props를 contents: React.ReactNode[]에서 children: ReactNode[]로 변경하고 인덱스에서 재내보내기 추가 및 Banner 내보내기 제거
요청/장소 상세 페이지 배너→캐러셀 전환 apps/admin/src/app/requests/[id]/RequestDetailPage.tsx, apps/web/app/places/[id]/PlaceDetailPage.tsx, apps/web/app/requests/[id]/RequestDetailPage.tsx, apps/web/app/places/new/_components/Step/PlacePreview/PlacePreview.tsx	Banner 임포트를 Carousel로 교체하고 contents prop을 children으로 변경하며 사진 렌더링 로직 조정
홈페이지 배너→캐러셀 전환 apps/web/app/(home)/page.tsx	HydrationBoundaryPage 임포트 경로 업데이트 및 배너 콘텐츠를 Carousel 래퍼로 변경
HydrationBoundaryPage 임포트 경로 정규화 apps/web/app/categories/[id]/page.tsx, apps/web/app/events/food-slot/page.tsx, apps/web/app/events/lucky-draw/page.tsx, apps/web/app/likes/page.tsx, apps/web/app/places/[id]/page.tsx, apps/web/app/profile/page.tsx, apps/web/app/requests/[id]/page.tsx, apps/web/app/requests/page.tsx	@/HydrationBoundaryPage에서 @/_components/HydrationBoundaryPage로 임포트 경로 변경
지도 컴포넌트 리팩토링 apps/web/app/map/MapComponent.tsx, apps/web/app/map/_components/CurrentLocationButton/CurrentLocationButton.tsx, apps/web/app/map/_components/Marker/Marker.tsx, apps/web/app/map/constants/CurrentLocationButton.ts	디바운싱된 지도 중심 변경 처리 추가, selectedPlaceId 상태 도입, BOTTOM_OFFSET 상수 정의, MarkerComponent의 handlePreviewPlace prop을 onClick으로 변경
PreviewPlace→PlaceSummaryCard 컴포넌트 이름 변경 apps/web/app/map/_components/PlaceSummaryCard/PlaceSummaryCard.tsx, apps/web/app/map/_components/PlaceSummaryCard/index.tsx, apps/web/app/map/_components/PreviewPlace/index.tsx	PreviewPlace를 PlaceSummaryCard로 이름 변경, 새 인덱스에서 재내보내기 추가 및 기존 PreviewPlace 내보내기 제거
새로운 useDebounced 훅 apps/web/app/_hooks/useDebounced.ts	함수를 디바운싱하는 새로운 React 훅 추가 (기본 지연: 300ms), 타이머 정리 및 에러 로깅 포함
앱 레이아웃 업데이트 apps/web/app/layout.tsx	QueryProvider, NaverMapProvider, HeroProvider 래퍼 추가, CampusInitializer를 Suspense로 감싸기, Kakao JS SDK 스크립트 태그 추가

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant MapComponent
    participant useDebounced
    participant NaverMap
    participant PlaceMarker
    participant PlaceSummaryCard

    User->>NaverMap: 지도 중심 변경
    NaverMap->>MapComponent: onCenterChanged 호출
    MapComponent->>useDebounced: 디바운싱된 핸들러 트리거
    useDebounced->>MapComponent: 300ms 후 selectedPlaceId 초기화
    MapComponent->>MapComponent: selectedPlace 파생값 업데이트
    
    User->>PlaceMarker: 마커 클릭
    PlaceMarker->>MapComponent: onClick 콜백 실행
    MapComponent->>MapComponent: selectedPlaceId 설정
    MapComponent->>PlaceSummaryCard: 선택된 장소 데이터 전달
    PlaceSummaryCard->>User: 장소 요약 카드 표시
    
    alt 장소 선택됨
        MapComponent->>MapComponent: CurrentLocationButton bottomOffset = BOTTOM_OFFSET.WITH_SUMMARY_CARD (220)
    else 장소 선택 안 됨
        MapComponent->>MapComponent: CurrentLocationButton bottomOffset = BOTTOM_OFFSET.WITH_BOTTOM_SHEET
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Feat/#48 admin 관련 메인 페이지 및 등록 조회 상세 페이지 UI 작업 #49: Banner 컴포넌트 패키징 및 RequestDetailPage/PlaceDetailPage의 Banner→Carousel API 변경을 동일하게 수정합니다.
• Feat/#69 지도 페이지 UX 개선 및 버그 수정 #70: MapComponent.tsx를 수정하는 다른 PR과 겹치며, 하나는 디바운싱된 중심 처리를 추가하고 다른 하나는 last-map-center 저장소 사용을 추가합니다.
• Refactor/#54 API 응답 형식 수정 및 연결 테스트, 로직 수정 #55: 지도 관련 컴포넌트(MapComponent, Marker/PreviewPlace 및 관련 내보내기/props)를 같은 영역에서 수정합니다.

Suggested labels

🔨 Refactor

Poem

🐰 배너에서 캐러셀로, 경로들을 정렬하고,
디바운싱된 손길로 지도를 부드럽게 어루만지며,
이름을 바꾸고, 훅을 만들고,
컴포넌트들이 춤을 추며 새롭게 정렬되네! 🎠✨

✨ Finishing touches

• 📝 Generate docstrings

---

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.}