플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 이사 서비스와 생활 서비스(인터넷/렌탈/청소)가 카테고리 체계상 다른 속성을 가져 공통 카드 스키마 설계가 필요함 - 필터 칩과 검색 세그먼트를 동시에 적용할 때 상태 동기화 로직이 복잡해질 수 있어 URL 쿼리 상태 관리 전략이 필요함 - 카드 그리드 이미지 로딩량이 많아지는 상황에서 초기 렌더 체감을 고려한 지연 로딩(lazy loading) 설계가 필요함 - 퀵
프로젝트 성과
세그먼트 검색바 & 필터 칩 컴포넌트 구현
지역·이사유형·평수 3개 세그먼트로 구성된 sticky 검색바와 가로 스크롤 필터 칩 10종을 컴포넌트화
카드 그리드 반응형 레이아웃 설계
CSS Grid 기반 2~4열 반응형 카드 그리드 구현, 카드 hover 인터랙션과 즐겨찾기 토글 상태 관리 설계
생활 서비스 카테고리 확장 구조 구축
이사 서비스 외 인터넷가입·렌탈·입주청소 카테고리를 동일 그리드 구조에 얹는 확장형 필터 체계 설계
퀵뷰 상세 drawer 컴포넌트 구현
카드 클릭 시 페이지 이동 없이 상세 정보를 노출하는 퀵뷰 drawer 컴포넌트, 포커스 트랩과 접근성을 고려해 설계
핵심 기능
이사 서비스 카탈로그 검색
지역·이사유형·평수를 조합해 검색할 수 있는 세그먼트 검색바와 필터 칩, 반응형 카드 그리드로 다양한 이사 서비스를 한눈에 탐색할 수 있는 카탈로그 메인 화면을 구현합니다
진행 단계
서비스 카탈로그 정보구조 설계
2026.09
이사·생활서비스 카테고리 분류 체계 설계, 검색·필터 조건 정의
프로젝트 상세
1) 포트폴리오 소개 이사 서비스를 인터넷가입·렌탈·입주청소 등 생활 서비스와 함께 검색·비교할 수 있는 마켓플레이스형 카탈로그를 React 기반 검색·필터·카드 그리드 구조로 설계·구현하는 확장 데모입니다. 단일 이사 서비스에서 생활 전반의 서비스 확장성을 갖춘 플랫폼으로 발전시킬 수 있는 가능성을 보여줍니다. 2) 작업 범위 - 이사 서비스 카탈로그 검색: 지역·이사유형·평수를 조합해 검색할 수
