[feat] 매물 검색 API 연동 및 종합 데이터 모듈(소음/환경/편의) 실시간 동기화 구현

[HSCHEOL]

🚀 개요

매물 검색 API(useSearchProperty)의 완벽한 연동과 함께, 서비스 전반의 필터링 시스템을 전역 상태로 리팩토링했습니다. 또한 종합 데이터 모드(소음, 환경, 편의 등)의 실시간 API 연동을 완료하고 SSR 환경에서의 기술적 병목 지점들을 해결하여 서비스의 안정성을 대폭 강화했습니다.

✨ 주요 변경 사항

1. 고도화된 매물 검색 및 필터 연동

• 실시간 필터링: usePropertyStore를 확장하여 검색어, 거래 유형, 가격(보증금/월세/매매가), 면적(평수) 등 모든 필터를 전역 관리하고, 변경 즉시 useSearchProperty API가 호출되도록 구현했습니다.
• 필터 UI 리팩토링: FilterBar와 하위 드랍다운(TransactionType, Space) 컴포넌트 간의 복잡한 Prop Drilling을 제거하고 스토어 기반의 선언적 UI로 전환했습니다.

2. 종합 데이터 모드 실시간 연동 (소음, 환경, 편의)

• 데이터 시각화: 지도상의 소음, 환경, 편의 모듈을 실제 백엔드 데이터와 연동하여 실시간으로 정보를 확인할 수 있도록 구현했습니다.
• 인터랙티브 모듈: 사용자가 활성화한 모듈에 따라 지도의 오버레이 데이터가 동적으로 변경되며, 매물 리스트의 태그와도 상호작용하도록 고도화 작업을 진행했습니다.

3. 사용자 맞춤형 초기화 및 인터랙션

• Navbar 연동: 주거 형태 변경 시 검색 필터는 초기화하되, 사용자의 프로필 선호도(preferredConditions)에 기반한 우선순위 모듈 상태는 자동으로 복구하여 개인화된 경험을 유지합니다.
• 태그-지도 연결: 매물 리스트 내의 특정 조건 태그를 클릭하면 지도상의 해당 데이터 모듈이 즉시 활성화됩니다.

4. 도메인 기능 및 UI/UX 강화

• 매물 상세 & 비교: Swiper UI 커스텀 및 애니메이션을 최적화하고, 이미지 경로 오류(src="string")에 대한 세련된 Fallback 처리를 적용했습니다.
• 애니메이션: 랜딩 페이지 InfoBadge 등에 Framer Motion을 활용한 애니메이션을 추가하여 서비스의 프리미엄한 감도를 높였습니다.

🛠 기술적 개선 사항

1. Axios 파라미터 직렬화 커스텀

• 문제 해결: 배열형 파라미터 전달 시 백엔드 규격(대괄호 없는 콤마 구분)과 일치하지 않던 문제를 axios-instance.ts의 커스텀 paramsSerializer와 Flattening 로직으로 해결했습니다.

2. SSR 하이드레이션(Hydration) Mismatch 해결

• 패턴 적용: Zustand Persist 사용 시 서버와 클라이언트의 초기 데이터 불일치 문제를 isMounted 지연 렌더링 패턴으로 해결했습니다.

3. 성능 및 안정성 최적화

• Cascading Render 방지: useEffect 내의 상태 업데이트를 비동기로 처리하여 불필요한 연쇄 렌더링과 린트 경고를 해결했습니다.
• Suspense 경계: useSearchParams 관련 컴포넌트의 Suspense 설정을 통해 빌드 안정성을 확보했습니다.

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 사용자 선호도에 따른 맞춤형 태그 시스템 추가
  • 지도 모드에서 편의시설, 환경, 소음 정보 표시 기능 강화
  • 최근에 본 집 카드 컴포넌트 추가
  • 마크다운 기반 AI 요약 렌더링 지원

• 개선

  • 필터 및 검색 상태 관리 개선
  • 모듈 활성화 로직 최적화
  • 지도 마커 및 오버레이 사용성 강화

• 스타일

  • 버튼, 배지, 탭 바 스타일 조정
  • 컨테이너 간격 및 레이아웃 개선

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
frontend	Ready	Preview, Comment	Feb 10, 2026 9:15am

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

파악 내용 (Walkthrough)

이 PR은 사용자 선호도 기반 맞춤형 부동산 추천, 강화된 지도 모드 기능, 필터링 시스템을 도입합니다. 맵 모드 저장소를 확장하여 편의시설, 환경, 소음 데이터를 통합하고, 각 모듈에서 동적 데이터 페칭을 추가합니다. 사용자 선호 조건과 매물의 상위 강점을 교차 검증하여 개인화된 태그를 생성하고, 필터링 시스템을 통합한 검색 쿼리를 구현합니다.

변경 사항 (Changes)

코호트 / 파일(s)	요약
사용자 선호도 기반 추천 app/compare/page.tsx, app/components/list/list_section/CurationSection.tsx	CONDITION_MAP을 도입하여 조건 번호를 한글 레이블로 매핑. 점수 분석 로직을 추가하고 사용자 선호도와 매물의 상위 강점을 교차 검증하여 개인화된 태그 생성. 마크다운 렌더링 추가로 요약 콘텐츠 표시 향상.
네비게이션 및 모듈 관리 app/components/layout/Navbar.tsx, app/map/page.tsx, app/store/moduleStore.ts	모듈 저장소에 resetModules와 resetToUserPreference 메서드 추가. 네비게이션 플로우에 필터 초기화 및 모듈 리셋 로직 통합. 모드별 모듈 초기화 전략(맵 모드 vs 리스트 모드) 구현.
리스트 및 필터링 시스템 app/components/list/List.tsx, app/components/map/FilterBar.tsx, app/store/propertyStore.ts	propertyStore에 keyword, selectedTypes, depositRange, monthlyRentRange, salePriceRange, spaceRange 필터 상태 추가. 필터 활성화 조건에 따라 mainPropertyQuery 또는 searchPropertyQuery 선택. 매물을 맵 마커로 변환하여 setPropertiesOnMap 호출.
리스트 아이템 및 상세 페이지 app/components/list/ListItem.tsx, app/components/list/ListDetail.tsx, app/components/list/list_section/School*, app/components/list/list_section/SummarySection.tsx	ListItem에 conditionIds와 onTagClick 프로퍼티 추가하여 태그 상호작용 활성화. 탭 자동 스크롤 로직 및 좋아요 아이콘 경로 업데이트. 학교 섹션 DOM 구조 최적화 및 스타일링 조정.
모듈 컴포넌트 데이터 통합 app/components/module/{Accessibility,Convenience,Environment,Noise,Safety,TimeSlider}Module.tsx	각 모듈에서 mapModeStore를 통해 selectedProperty 및 propertyScores 접근. 동적 점수 표시 및 API 데이터 페칭(편의시설, 환경, 소음) 추가. useEffect로 데이터 동기화 및 모듈 비활성화 시 상태 초기화.
지도 컴포넌트 및 오버레이 app/components/map/KakaoMap.tsx, app/components/map/MapHeader.tsx, app/components/map/MapOverlays.tsx	새로운 MapOverlays 컴포넌트 추가하여 시설, 환경, 소음 등 다양한 오버레이 정의. KakaoMap에서 맵 모드와 리스트 모드 구분하여 마커 렌더링. MapHeader에서 selectedProperty 기반으로 제목 동적 설정.
마이페이지 및 사용자 정보 app/components/mypage/{UserInfo,RecentHouseCard,CurationComparison,CurationInfo}.tsx, app/mypage/layout.tsx	새로운 RecentHouseCard 컴포넌트 도입하여 최근 본 집 카드 렌더링. UserInfo에서 최근 본 집과 찜한 집 데이터 페칭 및 개인화된 태그 생성. URL 파라미터와 동기화하는 클라이언트 사이드 메뉴 선택 로직 추가.
UI 컴포넌트 및 스타일링 app/components/ui/{RegionBadge,RangeSlider}.tsx, app/components/{start,signup}/*, app/layout.tsx, app/globals.css	RegionBadge에 size 프로퍼티 추가하여 sm/md 크기 옵션 제공. RangeSlider에 내부 상태 추가로 드래그 중 즉시 반영. InfoBadge에 framer-motion 애니메이션 추가. 전역 스크롤바 숨김 스타일 개선.
저장소 및 타입 정의 app/store/{mapModeStore,userStore}.ts, app/types/nearby-noise.ts, shared/api/{auth.ts,axios-instance.ts}	mapModeStore에 propertiesOnMap, convenienceInfras, environmentInfras, noiseInfras 등 다양한 인프라 상태 추가. User 인터페이스에 onboardingStatus 필드 추가. NearbyNoiseItem 타입 정의. Axios GET 파라미터 처리 개선.
로그인 및 온보딩 app/login/{page.tsx,actions.ts}, app/components/onboarding/step2/RegionSelectionStep.tsx, app/components/list/list_section/detail/ContactModal.tsx, package.json	loginAction에서 onboardingStatus 반환. 로그인 성공 후 온보딩 상태에 따라 /map 또는 /onboarding으로 리다이렉트. RegionBadge import 경로 업데이트. react-markdown, rehype-raw 의존성 추가.

수열 다이어그램 (Sequence Diagram)

sequenceDiagram
    actor User
    participant List as 리스트 컴포넌트
    participant Store as propertyStore
    participant API as API
    participant Map as mapModeStore
    participant Module as 모듈 컴포넌트

    User->>List: 필터 입력 (keyword, type, price)
    List->>Store: setKeyword, setSelectedTypes, setDepositRange 호출
    List->>Store: isFilterActive 확인
    alt 필터 활성화
        List->>API: searchPropertyQuery 요청 (필터링된 조건)
    else 필터 없음
        List->>API: mainPropertyQuery 요청 (기본 조건)
    end
    API-->>List: 매물 목록 반환
    List->>Map: setPropertiesOnMap으로 매물을 맵 마커로 변환
    List->>Module: onTagClick 핸들러로 조건ID 전달
    User->>Module: 태그 클릭 (조건 선택)
    Module->>Store: toggleModule로 모듈 활성화
    Module->>API: 해당 모듈 데이터 페칭
    API-->>Module: 동적 데이터 (편의시설, 환경, 소음 등)
    Module->>Map: 데이터를 오버레이로 맵에 표시
    Map-->>User: 맵 업데이트 + 오버레이 렌더링

Loading

예상 코드 리뷰 난이도

🎯 4 (Complex) | ⏱️ ~60분

관련 PR (Possibly related PRs)

• [feat] 핵심 기능 API 연동 #7: compare/page.tsx, CurationSection, List, ListDetail, ListItem, 지도 컴포넌트 및 mapModeStore/moduleStore 저장소를 동일하게 수정하여 사용자 선호도 기반 추천 기능 구현
• 인증 플로우 구축과 매물/지도 관련 주요 기능 및 UI 구현 #5: Navbar, List, ListItem, ListDetail, FilterBar, KakaoMap 및 모든 저장소(mapModeStore, moduleStore, propertyStore, userStore)를 수정하여 필터링 및 지도 모드 통합 시스템 구축
• [feat]큐레이션 + 온보딩 페이지 퍼블리싱 #3: RegionSelectionStep 및 RegionBadge 컴포넌트 도입 및 업데이트, 온보딩 흐름 개선 관련

토끼의 시 (Poem)

🐰 필터링 마법이 빛나고,
지도 위에 정보 가득 담기고,
사용자 맘에 쏙 드는 추천들이
모듈마다 춤을 춘다네!
개인화된 태그로 마음 사로잡고,
부동산의 모든 것을 보여주는
이 여정, 참 멋지지 않나! ✨🏡

✨ 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 dev

---

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