← 포트폴리오 목록

포근펫 반려동물 맞춤 쇼핑·정기배송 몰

반려동물 등록, 품종·연령 맞춤 추천, 정기배송 구성과 할인 구간 미리 계산, 결제·적립금 사용까지 이어지는 고객용 쇼핑몰을 React + Node.js 기반으로 설계·구현하는 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종물류 시스템
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrisma토스페이먼츠
주요 기능
  • 반려동물 등록·나이 자동 계산
  • 품종·연령 맞춤 추천
  • 정기배송 구성·할인 미리 계산
  • 결제·적립금 사용

프로젝트 개요

범위: 개발, 디자인, 기획

반려동물 등록, 품종·연령 맞춤 추천, 정기배송 구성과 할인 구간 미리 계산, 결제·적립금 사용까지 이어지는 고객용 쇼핑몰을 React + Node.js 기반으로 설계·구현하는 프로젝트입니다.

작업 범위

  • 반려동물 등록·나이 자동 계산: 반려동물을 등록하면 표준 품종과 별칭이 정리되고, 생년월일만 저장해도 현재 나이가 자동으로 표시됩니다
  • 품종·연령 맞춤 추천: 대표 반려동물의 품종·연령에 맞는 상품을 우선 노출하고, 알레르기 조건에 해당하는 상품은 제외합니다
  • 정기배송 구성·할인 미리 계산: 고정 상품과 30·45·60일 주기를 고르면 합계 금액에 따른 할인 구간을 바로 미리 계산해 보여줍니다
  • 결제·적립금 사용: 주문서에서 배송지와 적립금을 확인하고 카드로 결제하며, 정기배송은 빌링 키 등록으로 이어집니다

주요 업무

  • 반려동물 등록·나이 자동 계산 화면: 생년월일 원천 저장 + 조회 시점 나이 계산, 품종 사전과 별칭 매핑
  • 품종·연령 맞춤 추천 화면: 태그 일치 점수 + 노출 우선순위 규칙 + 같은 브랜드 연속 노출 제한
  • 정기배송 구성·할인 미리 계산 화면: 금액 구간별 할인율 계산기 + 영양제 제외 옵션 + 서버 재산정
  • 결제·적립금 사용 화면: 토스페이먼츠 결제 승인 + 웹훅 서명 검증 + 적립금 원장
포근펫 반려동물 맞춤 쇼핑·정기배송 몰
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

월말·윤년 경계에서 생년월일 기준 나이를 정확히 계산하고 대표 반려동물 전환 시 추천이 일관되게 갱신되는 구조 설계가 필요하며

단위 테스트로 대응합니다

알레르기 제외와 브랜드 연속 노출 제한이 동시에 걸릴 때 추천 후보가 부족해지는 경우의 대체 정렬 규칙 설계가 필요합니다

화면 미리 계산과 서버 재산정 결과가 어긋나지 않

할인 구간 계산 모듈을 공유하는 구조가 필요합니다

카드 결제 승인과 웹훅이 중복·지연

도착할 때 주문 상태를 한 번만 확정하는 멱등 처리 설계가 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

반려동물 등록·나이 자동 계산

반려동물을 등록하면 표준 품종과 별칭이 정리되고, 생년월일만 저장해도 현재 나이가 자동으로 표시됩니다. 생년월일 원천 저장 + 조회 시점 나이 계산, 품종 사전과 별칭 매핑.

  • React Hook Form + Zod로 반려동물 등록 폼의 단계별 검증 스키마 설계
  • 생년월일 원천 저장 후 월말·윤년 경계를 반영한 나이 계산 유틸을 서버·클라이언트 공용으로 구현
  • 품종 표준 사전과 별칭 테이블을 Prisma 모델로 분리하고 자동완성 검색 API 구현

나이를 저장하지 않고 생년월일에서 계산하는 구조로 데이터 정합성을 유지하고, 대표 반려동물 전환 시 추천 영역이 즉시 갱신되도록 설계합니다.

반려동물 등록·나이 자동 계산
반려동물 등록·나이 자동 계산 실제 화면
핵심 기능 2

품종·연령 맞춤 추천

대표 반려동물의 품종·연령에 맞는 상품을 우선 노출하고, 알레르기 조건에 해당하는 상품은 제외합니다. 태그 일치 점수 + 노출 우선순위 규칙 + 같은 브랜드 연속 노출 제한.

  • 상품 맞춤 해시태그와 반려동물 프로필의 일치 점수를 계산하는 규칙 기반 추천 모듈 구현
  • 알레르기·질병 제외 조건을 SQL 필터 단계에서 적용해 추천 후보를 먼저 좁히는 쿼리 설계
  • 같은 브랜드 연속 노출 제한을 정렬 후처리 단계에서 처리하는 재배열 로직 구현

규칙 기반 추천을 먼저 구현하고, 구매·행동 데이터가 쌓이면 점수 항목을 추가할 수 있도록 점수 계산부를 교체 가능한 구조로 설계합니다.

품종·연령 맞춤 추천
품종·연령 맞춤 추천 실제 화면
핵심 기능 3

정기배송 구성·할인 미리 계산

고정 상품과 30·45·60일 주기를 고르면 합계 금액에 따른 할인 구간을 바로 미리 계산해 보여줍니다. 금액 구간별 할인율 계산기 + 영양제 제외 옵션 + 서버 재산정.

  • 5만·8만·15만원 초과 구간별 7·10·12% 할인을 테이블 기반으로 계산하는 순수 함수 구현
  • 화면 미리 계산과 주문 시 서버 재산정을 같은 계산 모듈로 공유해 금액 불일치 방지
  • 주기 변경과 고정 상품 추가·제외를 Zustand 상태로 관리하고 즉시 요약 반영

할인 구간 경계값을 단위 테스트로 고정하고, 클라이언트 계산값과 서버 재산정 값이 다르면 서버 값을 기준으로 안내하도록 설계합니다.

정기배송 구성·할인 미리 계산
정기배송 구성·할인 미리 계산 실제 화면
핵심 기능 4

결제·적립금 사용

주문서에서 배송지와 적립금을 확인하고 카드로 결제하며, 정기배송은 빌링 키 등록으로 이어집니다. 토스페이먼츠 결제 승인 + 웹훅 서명 검증 + 적립금 원장.

  • 토스페이먼츠 결제 승인 API 연동과 웹훅 서명 검증, 주문 번호 기반 중복 요청 방지 구현
  • 적립금 지급·사용·회수를 원장 테이블에 기록하고 잔액을 원장 합계로 계산하는 구조 설계
  • 결제 완료 후 서버가 금액을 다시 확인하는 승인 전 검증 단계 구현

결제 금액을 서버에서 재산정해 확인한 뒤 승인하고, 적립금 사용분은 원장에 사용 내역으로 남겨 환불 시 회수·복원이 가능하도록 설계합니다.

결제·적립금 사용
결제·적립금 사용 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

반려동물·품종 데이터 모델 설계 · 2026.10

Prisma로 반려동물·품종 사전·별칭·맞춤 태그 모델을 설계하고 나이 계산 규칙을 정의합니다

STEP 2

맞춤 추천·탐색 API 개발 · 2026.10

태그 일치 점수와 제외 조건을 반영한 추천 API, 필터·정렬·통합 검색 API를 구현합니다

STEP 3

정기배송 구성·결제 연동 · 2026.10

할인 구간 계산 모듈과 토스페이먼츠 승인·웹훅 검증, 적립금 원장을 구현합니다

STEP 4

쇼핑몰 UI 구현 및 통합 점검 · 2026.10

검색 그리드와 퀵뷰, 주문서 화면을 구현하고 모바일 360~1440px 반응형을 점검합니다

개발 결과

품종·연령 규칙 기반 추천 모듈 구현태그 일치 점수, 알레르기 제외, 브랜드 연속 노출 제한을 단계별 파이프라인으로 구성하고 점수 계산부를 교체 가능하게 설계합니다
정기배송 할인 구간 계산기 설계3개 금액 구간 테이블 기반 순수 함수로 구현하고 경계값 단위 테스트를 작성해 화면·서버 계산을 공유합니다
적립금 원장 구조 구축지급·사용·회수를 원장 행으로 기록하고 잔액을 합계로 산출해 환불 시 복원이 가능한 구조를 설계합니다
결제 승인 안전장치 적용웹훅 서명 검증과 주문 번호 기반 중복 방지, 서버 금액 재확인을 승인 단계에 적용합니다

기술적 주안점

  • 나이를 저장하지 않고 생년월일에서 계산하는 구조로 데이터 정합성을 유지하고, 대표 반려동물 전환 시 추천 영역이 즉시 갱신되도록 설계합니다
  • 규칙 기반 추천을 먼저 구현하고, 구매·행동 데이터가 쌓이면 점수 항목을 추가할 수 있도록 점수 계산부를 교체 가능한 구조로 설계합니다
  • 할인 구간 경계값을 단위 테스트로 고정하고, 클라이언트 계산값과 서버 재산정 값이 다르면 서버 값을 기준으로 안내하도록 설계합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의