← 포트폴리오 목록

농산물 직거래 중개 플랫폼

본 요구사항(농가별 상품 탐색, 즉시 구매와 예약 구매 두 가지 결제 흐름, 농가 팔로우, 주문·예약·배송 조회)을 PC와 모바일 반응형 웹으로 설계한 맞춤 구현한 프로젝트입니다.

프로젝트 납품 요약

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

서비스 타입Web
업종플랫폼
기술 스택
React 18TypeScriptTailwind CSSNode.js + ExpressPostgreSQL + Prisma토스페이먼츠 결제 API
주요 기능
  • 상품 탐색·판매 방식
  • 장바구니·결제
  • 농가 팔로우
  • 마이페이지

프로젝트 개요

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

본 요구사항(농가별 상품 탐색, 즉시 구매와 예약 구매 두 가지 결제 흐름, 농가 팔로우, 주문·예약·배송 조회)을 PC와 모바일 반응형 웹으로 설계한 맞춤 구현한 프로젝트입니다. 첫 화면에서 판매 방식이 다른 상품과 팔로우한 농가 소식을 함께 보여 주며.

작업 범위

  • 상품 탐색·판매 방식: 구매자가 첫 화면에서 지금 바로 살 수 있는 상품과 수확 일정에 맞춰 미리 주문하는 예약 상품을 나란히 보고, 카테고리와 판매 방식으로 걸러 상품 상세까지 이동합니다
  • 장바구니·결제: 구매자가 즉시 구매 상품은 바로 결제하고, 예약 구매 상품은 사전 주문으로 결제하는 두 흐름을 한 장바구니에서 구분해 진행합니다
  • 농가 팔로우: 구매자가 마음에 든 농가를 팔로우하고, 팔로우한 농가의 새 상품과 예약 오픈 소식을 모아 봅니다
  • 마이페이지: 구매자가 주문 내역과 예약 내역을 탭으로 나눠 보고, 배송 상태와 예약 상품의 수확·발송 예정을 확인합니다

주요 업무

  • 상품 탐색·판매 방식 화면: 농가 카드와 상품 카드를 한 화면에 구성하고, 판매 방식 칩 필터와 상품 상세의 농가 정보·판매 방식 표시 구조를 설계합니다
  • 장바구니·결제 화면: 판매 방식별 주문서 분리, 결제 수단 선택, PG 결제창 연동 호출과 결제 승인 확인, 예약 주문의 결제 시점·환불 안내 표시 구조를 설계합니다
  • 농가 팔로우 화면: 농가 프로필 화면, 팔로우·해제 토글, 팔로우 농가 목록과 농가별 신규 상품 묶음 구조를 설계합니다
  • 마이페이지 화면: 주문·예약 탭, 상태별 알약, 배송 단계 표시, 취소 가능 여부 안내와 취소 확인 대화상자 구조를 설계합니다
농산물 직거래 중개 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

예약 구매의 결제 시점(사전 결제 또는 수확 확정 후 결제)과 환불 규정이 미확정이라 정책 값을 설정 테이블로 분리해 수정 범위를 줄이는 구조 설계

즉시 구매와 예약 구매가 한 장바구니에 섞일 때 주문서와 결제 승인을 나누는 기준을 농가·판매 방식 단위로 정하는 설계

농가마다 배송비와 묶음 배송 조건이 달라 장바구니 합계를 서버에서 일관되게 다시 계산하는 규칙 설계

PC와 모바일 폭 모두에서 상품 카드 목록과 결제 폼이 한 손 조작으로 쓰

반응형 배치 설계 필요

구현 내용

핵심 기능 상세

핵심 기능 1

상품 탐색·판매 방식

구매자가 첫 화면에서 지금 바로 살 수 있는 상품과 수확 일정에 맞춰 미리 주문하는 예약 상품을 나란히 보고, 카테고리와 판매 방식으로 걸러 상품 상세까지 이동합니다.

  • 판매 방식(즉시·예약)과 카테고리를 쿼리 파라미터로 저장해 새로고침과 공유 링크에서도 같은 목록을 복원하는 필터 구조 구현
  • 상품과 농가를 한 번에 조회하는 Prisma 관계 쿼리와 커서 기반 목록 페이지네이션 설계
  • 예약 상품의 수확 예정일과 마감일을 상품 상세에 계산해 표시하는 판매 방식 컴포넌트 구현

상품 단위로 판매 방식과 예약 마감 정보를 한 모델에 담아, 같은 상품 카드가 즉시 구매 버튼과 예약 구매 버튼 중 맞는 쪽으로 바뀌도록 구현합니다.

상품 탐색·판매 방식
상품 탐색·판매 방식 실제 화면
핵심 기능 2

장바구니·결제

구매자가 즉시 구매 상품은 바로 결제하고, 예약 구매 상품은 사전 주문으로 결제하는 두 흐름을 한 장바구니에서 구분해 진행합니다.

  • 장바구니를 농가·판매 방식 단위로 묶어 주문서를 나누고 합계와 배송비를 서버에서 다시 계산하는 구조 구현
  • 토스페이먼츠 결제 승인 API를 서버에서 호출하고 금액 일치를 확인한 뒤 주문 상태를 확정하는 흐름 설계
  • 예약 주문에 결제 시점과 환불 규정을 주문 레코드로 저장해 마이페이지와 관리 콘솔이 같은 값을 읽도록 모델링

클라이언트가 보낸 금액을 믿지 않고 승인 단계에서 서버 계산 금액과 대조하는 결제 확정 흐름을 구현해, 즉시 구매와 예약 구매가 같은 승인 로직을 공유하도록 설계합니다.

장바구니·결제
장바구니·결제 실제 화면
핵심 기능 3

농가 팔로우

구매자가 마음에 든 농가를 팔로우하고, 팔로우한 농가의 새 상품과 예약 오픈 소식을 모아 봅니다. 농가 프로필 화면, 팔로우·해제 토글, 팔로우 농가 목록과 농가별 신규 상품 묶음 구조를 설계합니다.

  • 구매자와 농가의 팔로우 관계를 별도 테이블로 두고 토글 요청을 낙관적 업데이트로 반영하는 구조 구현
  • 팔로우한 농가의 신규 상품을 최근 등록순으로 묶어 조회하는 복합 인덱스 쿼리 설계
  • 팔로우 해제는 묻지 않고 처리하고 되돌리기 토스트로 복구하는 흐름 구현

팔로우 관계 하나로 농가 프로필, 팔로우 목록, 신규 상품 묶음이 모두 갱신되도록 같은 상태를 공유하게 구현합니다.

농가 팔로우
농가 팔로우 실제 화면
핵심 기능 4

마이페이지

구매자가 주문 내역과 예약 내역을 탭으로 나눠 보고, 배송 상태와 예약 상품의 수확·발송 예정을 확인합니다.

  • 주문 상태를 결제 완료·상품 준비·출고·배송 완료로 정의하고 상태 전이 규칙을 서버에서 검증하는 모델 구현
  • 주문과 예약을 하나의 주문 테이블에서 판매 방식 컬럼으로 구분해 탭별로 조회하는 쿼리 설계
  • 취소 가능한 상태에서만 취소 버튼을 노출하고 취소 시 PG 취소 API 호출과 주문 상태 갱신을 한 흐름으로 처리

주문 상태 전이 규칙을 서버 한 곳에 두어, 구매자 화면의 취소 버튼 노출과 농가 오피스의 출고 처리가 같은 규칙을 따르도록 구현합니다.

마이페이지
마이페이지 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

요구사항 분석과 주문·결제 모델 설계 · 2026.11

구매자·농가·관리자 역할 정의, 상품·주문·예약·팔로우 테이블 설계, 즉시·예약 결제 시점 규칙 정리

STEP 2

상품 탐색과 판매 방식 화면 구현 · 2026.11

농가·상품 목록, 판매 방식 필터, 상품 상세와 예약 마감 표시, 반응형 레이아웃 구현

STEP 3

장바구니와 PG 결제 연동 · 2026.11

판매 방식별 주문서 분리, 결제 승인 API 연동, 서버 금액 대조와 주문 확정 흐름 구현

STEP 4

팔로우·마이페이지와 통합 점검 · 2026.11

팔로우 관계와 신규 상품 묶음, 주문·예약 조회, 취소 흐름, 모바일 폭 점검

개발 결과

서버 금액 대조 결제 확정 흐름 구현결제 승인 단계에서 서버 계산 금액과 결제사 응답 금액을 대조해 주문을 확정하는 흐름을 설계합니다.
판매 방식 단일 상품 모델 설계즉시·예약 구매를 한 상품 모델의 판매 방식 필드로 구분해 카드·상세·주문서가 같은 값을 읽도록 구현합니다.
주문 상태 전이 규칙 서버 구축결제 완료부터 배송 완료까지 허용 전이를 서버 한 곳에서 검증해 화면 버튼 노출과 연결하는 구조를 구축합니다.
팔로우 기반 신규 상품 묶음 쿼리 설계팔로우 관계와 상품 등록일을 복합 인덱스로 묶어 팔로우 농가의 새 상품을 빠르게 조회하는 쿼리를 설계합니다.

기술적 주안점

  • 상품 단위로 판매 방식과 예약 마감 정보를 한 모델에 담아, 같은 상품 카드가 즉시 구매 버튼과 예약 구매 버튼 중 맞는 쪽으로 바뀌도록 구현합니다
  • 클라이언트가 보낸 금액을 믿지 않고 승인 단계에서 서버 계산 금액과 대조하는 결제 확정 흐름을 구현해, 즉시 구매와 예약 구매가 같은 승인 로직을 공유하도록 설계합니다
  • 팔로우 관계 하나로 농가 프로필, 팔로우 목록, 신규 상품 묶음이 모두 갱신되도록 같은 상태를 공유하게 구현합니다

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

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

프로젝트 문의