[feat] 핵심 기능 API 연동 by HSCHEOL · Pull Request #7 · D-ingle/frontend

HSCHEOL · 2026-02-09T06:21:10Z

🚀 개요

우리 집 찾기 서비스 '딩글'의 핵심 도메인(매물 조회, 찜, 최근 본 매물, 주요 스팟)에 대한 백엔드 API 연동을 완료하고, 마이페이지 및 종합 데이터 모드의 사용자 경험을 고도화했습니다.

✨ 주요 변경 사항

1. 매물 찜(Wishlist) 기능 서버 연동

기존 로컬 상태 기반의 찜 기능을 매물 관리 API(usePropertyZzim)로 전환했습니다.
리스트, 상세 페이지, 지도 마커 등 서비스 전반에서 찜 상태가 실시간으로 동기화되도록 구현했습니다.

2. 마이페이지(My Page) 기능 완성

찜한 집: 서버 데이터를 활용하여 사용자가 찜한 매물 목록을 렌더링합니다.
최근 본 집: Zustand Persist와 서버 조회를 결합하여 브라우저 종료 후에도 최근 본 매물 이력이 유지되도록 구현했습니다.
주요 스팟(Principal Spot): 카카오 우편번호 서비스와 주요 스팟 저장/조회 API를 연동했습니다.

3. 종합 데이터 모드(지도) 고도화

자주 가는 곳 모듈: 마이페이지의 '주요 스팟'과 데이터를 실시간 동기화하여 지도 화면에서도 즉시 확인 및 수정이 가능합니다.
모듈 동적 레이아웃: 편의, 안전, 환경 등 각 모듈의 상태와 아이콘을 API 데이터에 맞춰 정교하게 조정했습니다.

4. Navbar 및 전역 필터링 개선

Navbar의 주거 형태(아파트, 원룸 등) 선택 시 전역 스토어(usePropertyStore)를 통해 메인 매물 리스트가 즉시 필터링되도록 개선했습니다.
하이라이트 로직을 개선하여 지도 페이지(/map)에서만 현재 선택된 타입이 강조되도록 처리했습니다.

5. AI 큐레이션 및 상세 페이지

매물 상세 뷰에 AI가 추천하는 큐레이션 코멘트를 연동했습니다.
매물 비교 페이지의 UI 완성도를 높이고 점수별 하이라이트 로직을 추가했습니다.

🛠 기술적 개선 사항

**Next.js 최적화**: useSearchParams 사용 시 Suspense 경계 설정을 통해 빌드 타임 에러를 해결하고 안정성을 확보했습니다. **상태 관리**: Zustand와 React Query를 적재적소에 활용하여 데이터 일관성을 유지하고 불필요한 리렌더링을 방지했습니다. **코드 품질**: 미사용 임포트 제거 및 ESLint 경고 대응을 통해 최적화된 프로덕션 빌드 사양을 맞췄습니다.

Summary by CodeRabbit

릴리스 노트

New Features
- 부동산 비교 페이지 추가: 최대 3개의 매물을 나란히 비교할 수 있습니다.
- 새로운 랜딩 페이지 디자인으로 사용자 온보딩 개선.
- 온보딩 단계별 선택(주거 형태, 지역, 분위기) 추가.
Improvements
- 지도 필터 모듈 시스템 최적화 및 UI 개선.
- 최근 본 매물 및 찜한 매물 목록 동적 업데이트.
- 부동산 상세 정보 페이지 다양한 섹션 개선.

vercel · 2026-02-09T06:21:15Z

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

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

coderabbitai · 2026-02-09T06:21:28Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

부동산 비교 기능을 추가하고 모듈 기반 상태 관리 체계로 전환했습니다. 새로운 비교 페이지, 온보딩 플로우, 동적 데이터 바인딩이 도입되었으며 사용자 선호도 기반 초기화가 구현되었습니다.

Changes

코호트 / 파일	요약
비교 기능 `app/compare/page.tsx`, `app/components/mypage/CompareCard`, `app/components/mypage/CompareMain`, `app/components/mypage/CompareSidebar`, `app/components/mypage/CompareSidebarCard`, `app/components/mypage/CompareTag`, `app/components/mypage/CurationComparison`, `app/components/mypage/BasicInfoComparison`	새로운 비교 페이지 및 UI 컴포넌트 추가. 사용자가 최대 3개 매물을 선택하여 기본정보, 큐레이션 데이터를 비교 가능. URL 동기화 및 좌측 사이드바에서 동적 데이터 페칭.
모듈 상태 관리 및 스토어 `app/store/moduleStore`, `app/store/propertyStore`, `app/store/recentViewStore`, `app/store/mapModeStore`	모듈 활성화 상태, 선택 부동산 유형, 최근 본 매물 추적, 지도 선택 상태 관리를 위한 새로운 Zustand 스토어 4개 추가.
List 컴포넌트 동적화 `app/components/list/List`, `app/components/list/ListItem`, `app/components/list/ListDetail`	정적 목업 데이터를 API 기반 동적 데이터로 교체. 부동산 ID 기반 상세보기 자동 열기, 사용자 정보 통합, 모듈 기반 필터링 로직 도입.
List 섹션 컴포넌트 재구성 `app/components/list/list_section/SummarySection`, `app/components/list/list_section/CurationSection`, `app/components/list/list_section/DetailInfoSection`, `app/components/list/list_section/FacilitiesSection`, `app/components/list/list_section/AgencySection`, `app/components/list/list_section/detail/ContactModal`	모든 섹션 컴포넌트를 props 기반 동적 렌더링으로 변경. API 데이터를 전달받아 표시 가능하도록 리팩토링.
모듈 컴포넌트 스토어 기반 전환 `app/components/module/NoiseModule`, `app/components/module/EnvironmentModule`, `app/components/module/SafetyModule`, `app/components/module/AccessibilityModule`, `app/components/module/ConvenienceModule`, `app/components/module/FavoritePlacesModule`	로컬 상태에서 moduleStore 기반 활성화 상태로 전환. 모듈 토글 로직을 중앙집중식으로 관리하도록 변경.
지도 및 네비게이션 `app/components/layout/Navbar`, `app/components/map/KakaoMap`, `app/components/map/FilterBar`, `app/map/page.tsx`	Navbar에 부동산 유형 선택 기능 추가. KakaoMap에 선택된 부동산 표시 기능 추가. 지도 진입 시 사용자 선호 모듈 자동 활성화 로직 도입. 필터바에서 주거형태 필터 제거.
랜딩 및 온보딩 플로우 `app/page.tsx`, `app/onboarding/page.tsx`, `app/onboarding/steps/page.tsx`, `app/components/start/MainVisual`, `app/components/start/LandingContainer`, `app/components/start/InfoBadge`	홈 페이지를 정적 랜딩 페이지로 재구성. 온보딩 플로우를 3단계 선택식으로 재설계. 새로운 시각적 컴포넌트(LandingContainer, MainVisual, InfoBadge) 추가.
기타 컴포넌트 및 유틸리티 `app/components/curation/Curation`, `app/components/list/list_section/SchoolItem`, `app/components/list/list_section/SchoolSection`, `app/components/ui/PriorityToggle`, `app/components/ui/Toast`, `app/components/mypage/LikedHouses`, `app/components/mypage/RecentlyViewedHouses`, `app/components/mypage/UserInfo`, `app/hooks/usePropertyZzim`, `app/utils/format`, `next.config.ts`	Curation에 transparentBg prop 추가. 새로운 usePropertyZzim 훅 추가. 숫자를 한국식 가격 문자열로 변환하는 포맷팅 유틸리티 추가. 좋아요 토글, 토스트 알림 등 UI 개선. Next.js 원격 이미지 도메인 설정 추가.

Sequence Diagram

sequenceDiagram
    actor User
    participant ComparePage as Compare<br/>Page
    participant API as API Endpoints
    participant CompareSidebar as CompareSidebar<br/>(Like List)
    participant CompareMain as CompareMain<br/>(Display)
    participant Store as Data Stores

    User->>ComparePage: 접근 (URL: ids=1,2,3)
    ComparePage->>Store: 초기 selectedIds 읽기
    ComparePage->>API: useRecentView(ids) 호출
    ComparePage->>API: useCompareList(ids) 호출
    ComparePage->>API: useQueries(getCurateQueryOptions) 호출
    API-->>ComparePage: 부동산 기본정보, 상세정보, 큐레이션 데이터 반환
    
    ComparePage->>CompareSidebar: 선택 가능한 매물 목록 표시
    CompareSidebar->>API: useLikeList 호출
    API-->>CompareSidebar: 찜한 매물 목록 반환
    
    User->>CompareSidebar: 매물 선택/해제
    CompareSidebar->>Store: selectedIds 상태 업데이트
    CompareSidebar->>ComparePage: 선택 변경 콜백
    ComparePage->>ComparePage: URL 동기화 (ids 파라미터 업데이트)
    
    ComparePage->>CompareMain: selectedHouses, curationData, basicInfo 전달
    CompareMain->>CompareMain: CompareCard 3개 렌더링
    CompareMain->>CompareMain: CurationComparison 렌더링 (큐레이션 비교)
    CompareMain->>CompareMain: BasicInfoComparison 렌더링 (기본정보 비교)
    
    CompareMain-->>User: 비교 결과 화면 표시
    
    User->>CompareMain: 매물 제거 클릭
    CompareMain->>ComparePage: onRemove 콜백
    ComparePage->>Store: selectedIds에서 제거
    ComparePage->>ComparePage: 데이터 재페칭 및 UI 업데이트

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

[feat]종합데이터 지도 모드 및 기능별 모듈(안전·편의·접근성 등) #6: Curation.tsx 컴포넌트 수정 및 모듈/상태 관리 변경사항과 직접 겹침
인증 플로우 구축과 매물/지도 관련 주요 기능 및 UI 구현 #5: Navbar, List, ListDetail, mypage 컴포넌트 등 UI/컴포넌트 코드베이스 전반적으로 겹침

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

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

HSCHEOL added 11 commits February 6, 2026 11:05

feat:매물 비교하기 페이지 퍼블리싱

f631d3c

fix:종합 데이터 모드 디자인 피드백 반영 수정

e8c5d89

create:swagger 기반 orval hook 함수들 생성

b9065e8

feat:매물 리스트 조회 및 상세 조회 API 연동

ee4ea09

feat:디자인 피드백 일부 수정 및 찜/찜 취소 API 연동

3495ca7

feat:찜한 리스트 불러오기 API 연동 및 최근 본 매물 불러오기 API 연동

fb250a4

feat:랜딩 페이지 구현 및 라우팅 구조 변경

dc28e4c

create:swagger 기반 orval hook 함수들 생성

f65512e

feat:비교하기 API 연동 / AI 요약 텍스트 API 연동

a4c632e

feat:자주가는 스팟 저장/조회 API 연동

d7a837e

feat:Navbar에 따라 동적으로 매물 list 렌더링 되도록 수정

e73b367

HSCHEOL self-assigned this Feb 9, 2026

HSCHEOL added the feature Something isn't working label Feb 9, 2026

HSCHEOL merged commit 0219aa1 into main Feb 9, 2026
2 of 5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[feat] 핵심 기능 API 연동#7

[feat] 핵심 기능 API 연동#7
HSCHEOL merged 11 commits into
mainfrom
dev

HSCHEOL commented Feb 9, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Feb 9, 2026

Uh oh!

Uh oh!

coderabbitai Bot commented Feb 9, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

HSCHEOL commented Feb 9, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 개요

✨ 주요 변경 사항

🛠 기술적 개선 사항

Summary by CodeRabbit

릴리스 노트

Uh oh!

vercel Bot commented Feb 9, 2026

Uh oh!

Uh oh!

coderabbitai Bot commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

HSCHEOL commented Feb 9, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Feb 9, 2026 •

edited

Loading