← 포트폴리오 목록
펫밸런스 지사몰 스토어
반려동물 사료·간식·영양제 분양형 지사몰의 1단계 샘플사이트(메인·서브·상세·장바구니·로그인·회원가입)를 최우선으로 구현하는 프로젝트입니다.
필터 갤러리 상태 URL 동기화 구현카테고리·가격대 필터 조합을 URL 쿼리로 동기화해 새로고침·공유 시에도 조건이 유지되는 구조를 설계합니다.
8단계 문진 추천 매칭 로직 설계Zustand 상태관리와 가중치 규칙 기반 매칭 알고리즘으로 문진 응답을 상품 카탈로그와 연결하는 구조를 구현합니다.
정기결제 재시도 큐 아키텍처 구축Bull Queue 기반 결제 실패 재시도와 상태 머신(활성/일시정지/해지)으로 구독 결제 흐름을 관리하는 구조를 설계합니다.
Overview
프로젝트 개요
반려동물 사료·간식·영양제 분양형 지사몰의 1단계 샘플사이트(메인·서브·상세·장바구니·로그인·회원가입)를 최우선으로 구현하는 프로젝트입니다. 밸런스키트 문진 기반 맞춤 추천, 결제·정산 정책, 100~200개 지사몰까지 확장성 있는 템플릿 기반 복제를 고려한 다중몰 데이터 구조 위에서 설계하며, 비용 효율과 속도(1단계 우선순위)를 기준으로 구현합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
8개 문진 문항 조합에 따른 114종 상품 매칭 규칙을 확장 가능한 구조로 설계할 필요가 있습니다
정기구독 결제 실패·해지·변경이 뒤섞이는 상황에서 구독 상태 전이의 일관성을 보장하는 설계가 필요합니다
모바일웹 우선 PWA 환경에서 다양한 기기의 뷰포트에 대응하는 반응형 레이아웃 검증이 필요합니다
비회원 주문 조회와 회원 주문 내역을 하나의 마이페이지 구조에서 자연스럽게 통합하는 UX 설계가 필요합니다
구현 내용
핵심 기능 상세
핵심 기능 1
카테고리 탐색
강아지/고양이 기준 카테고리와 필터 레일로 사료·간식·영양제 상품을 탐색하고, 카드형 그리드에서 가격·배지·재고 상태를 한눈에 확인할 수 있는 화면입니다
핵심 기능 2
밸런스키트 문진
연령·몸무게·알러지 등 8문항 단계형 문진을 진행하면 결과 화면에서 맞춤 상품과 월 구독가를 바로 확인할 수 있는 화면입니다
핵심 기능 3
정기구독 관리
밸런스키트 결과에서 바로 구독을 등록하고, 다음 결제일과 결제 수단을 관리하며 해지·변경할 수 있는 화면입니다. PG 표준 API를 통한 자동결제 등록과 정기결제 스케줄을 관리하는 구조로 구현합니다
핵심 기능 4
마이페이지
카카오 소셜 로그인으로 간편 가입하고, 비회원도 주문 조회가 가능한 마이페이지 화면입니다. OAuth2 소셜 로그인과 비회원 주문 조회를 함께 지원하는 인증 구조로 구현합니다
구현 과정
프로젝트 진행 단계
STEP 1
요구사항 분석 및 다중몰 대응 DB 설계
카테고리·상품·구독 테이블 20여개 정의, 몰 구분 컬럼을 포함한 스키마 설계
STEP 2
밸런스키트 문진 & 추천 로직 개발
8단계 위저드 UI 구현, 가중치 기반 추천 매칭 로직 및 API 12개 개발
STEP 3
상품 갤러리 & 구독 결제 연동
필터 갤러리 화면 구현, 토스페이먼츠 정기결제 API 연동 및 빌링키 발급 플로우 구축
STEP 4
인증 및 마이페이지 통합
카카오 OAuth2 로그인, 비회원 주문조회, 마이페이지 화면 구현
STEP 5
PWA 최적화 및 통합 테스트
Service Worker 캐싱 전략 적용, 크로스 브라우저 및 모바일 반응형 검증
프로젝트 성과
주요 성과
필터 갤러리 상태 URL 동기화 구현카테고리·가격대 필터 조합을 URL 쿼리로 동기화해 새로고침·공유 시에도 조건이 유지되는 구조를 설계합니다.
8단계 문진 추천 매칭 로직 설계Zustand 상태관리와 가중치 규칙 기반 매칭 알고리즘으로 문진 응답을 상품 카탈로그와 연결하는 구조를 구현합니다.
정기결제 재시도 큐 아키텍처 구축Bull Queue 기반 결제 실패 재시도와 상태 머신(활성/일시정지/해지)으로 구독 결제 흐름을 관리하는 구조를 설계합니다.
PWA 오프라인 셸 구조 설계Service Worker 캐싱 전략과 매니페스트 구성으로 홈 화면 설치 및 오프라인 접근이 가능한 구조를 구현합니다.
Highlights
기술적 주안점
- 필터 rail과 카드 그리드를 조합한 갤러리 레이아웃을 PWA 구조 위에 구현해 모바일웹 우선 탐색 경험을 설계합니다
- 8단계 위저드 플로우와 규칙 기반 매칭 로직을 결합해 문진 결과에서 맞춤 상품과 구독가를 즉시 산출하는 화면을 구현합니다
- PG 표준 API 기반 정기결제와 큐 기반 재시도 로직을 결합해 구독 결제·정산 정책을 안정적으로 처리하는 구조를 구현합니다
