맞춤 인테리어 필름 주문 스튜디오

소재·용도·색상 카테고리로 필터링하며 다양한 맞춤 필름 상품을 카드 그리드로 탐색하고, 카드 클릭 시 퀵뷰로 핵심 옵션 정보를 바로 확인할 수 있는 탐색 화면을 제공합니다.

• 소재·용도·색상 다중 필터를 URL 쿼리스트링과 동기화하는 탐색 상태 관리 구현
• 카드 그리드에 Intersection Observer 기반 무한 스크롤 페이지네이션 적용
• 카드 클릭 시 전체 페이지 이동 없이 핵심 옵션·가격 정보를 보여주는 퀵뷰 drawer 컴포넌트 설계

필터 조건을 URL 상태와 동기화해 탐색 결과를 공유 가능한 링크로 유지하고, 퀵뷰 drawer로 페이지 전환 없이 상품을 빠르게 훑어볼 수 있는 탐색 경험을 설계합니다.

재질 → 색상/패턴 → 사이즈(가로×세로) → 마감 가공 → 시공 서비스까지 5단계를 순서대로 선택하며, 이전 단계의 선택 결과에 따라 다음 단계의 선택지가 동적으로 제한되는 옵션 빌더 화면을 제공합니다.

• 옵션 의존 규칙을 트리 구조 스키마로 모델링해 상위 단계 선택에 따라 하위 옵션 목록을 동적으로 필터링하는 로직 구현
• 단계별 옵션 선택마다 클라이언트에서 실시간으로 합산 가격을 재계산하는 가격 엔진 설계
• 5단계 선택 진행 상태를 스텝 인디케이터로 시각화하고 이전 단계로 돌아가도 이후 선택이 유지되는 상태 관리 구현

옵션 조합 규칙을 서버와 클라이언트가 동일한 스키마로 공유하는 구조를 설계해, 프론트에서 보여주는 선택지와 실제 주문 가능한 조합이 항상 일치하도록 합니다.

현장 실측 재단이 필요한 특수 필름 상품은 일반 상품과 다른 주문 흐름을 적용해, 실측 요청 접수·재단 후 환불 제한 안내·별도 시공 배송비 산정을 함께 처리합니다.

• 상품 유형(일반/특수재단)별 주문 정책을 규칙 테이블로 분리해 결제·환불 로직에서 조건 분기 처리
• 현장 실측이 필요한 상품은 결제 전 실측 요청 폼을 노출하는 조건부 UI 플로우 구현
• 재단 완료 후 상품에는 환불 제한 정책을 자동 적용하고 주문 확인 화면에 정책 고지 문구를 노출하는 로직 구현

상품 유형에 따라 분기되는 정책을 하나의 규칙 테이블로 관리해, 특수 상품이 추가되어도 결제·환불 코드를 직접 수정하지 않고 정책만 추가할 수 있는 구조를 설계합니다.

서로 다른 옵션 조합의 상품을 하나의 장바구니에서 함께 관리하며, 옵션별 상세 내역을 다시 확인하고 배송지·시공 일정을 입력한 뒤 PG 결제로 주문을 완료하는 흐름을 제공합니다.

• 장바구니 담기 시점의 옵션 조합과 가격을 스냅샷으로 저장해 주문 확정 전까지 일관된 금액을 유지하는 구조 구현
• 포트원(아임포트) SDK 연동으로 카드·간편결제 처리 및 결제 상태 웹훅 수신 구현
• 주문-결제-배송준비 상태를 단일 상태 머신으로 관리해 중복 결제 요청을 차단하는 로직 구현

옵션 스냅샷과 결제 상태 머신을 결합해, 다단계 옵션 상품이 섞인 장바구니에서도 주문 확정 시점의 금액과 구성이 그대로 보존되는 결제 흐름을 설계합니다.