농산물 직거래 중개 플랫폼
본 요구사항(농가별 상품 탐색, 즉시 구매와 예약 구매 두 가지 결제 흐름, 농가 팔로우, 주문·예약·배송 조회)을 PC와 모바일 반응형 웹으로 설계한 맞춤 구현한 프로젝트입니다.
프로젝트 개요
본 요구사항(농가별 상품 탐색, 즉시 구매와 예약 구매 두 가지 결제 흐름, 농가 팔로우, 주문·예약·배송 조회)을 PC와 모바일 반응형 웹으로 설계한 맞춤 구현한 프로젝트입니다. 첫 화면에서 판매 방식이 다른 상품과 팔로우한 농가 소식을 함께 보여 주며.
작업 범위
- 상품 탐색·판매 방식: 구매자가 첫 화면에서 지금 바로 살 수 있는 상품과 수확 일정에 맞춰 미리 주문하는 예약 상품을 나란히 보고, 카테고리와 판매 방식으로 걸러 상품 상세까지 이동합니다
- 장바구니·결제: 구매자가 즉시 구매 상품은 바로 결제하고, 예약 구매 상품은 사전 주문으로 결제하는 두 흐름을 한 장바구니에서 구분해 진행합니다
- 농가 팔로우: 구매자가 마음에 든 농가를 팔로우하고, 팔로우한 농가의 새 상품과 예약 오픈 소식을 모아 봅니다
- 마이페이지: 구매자가 주문 내역과 예약 내역을 탭으로 나눠 보고, 배송 상태와 예약 상품의 수확·발송 예정을 확인합니다
주요 업무
- 상품 탐색·판매 방식 화면: 농가 카드와 상품 카드를 한 화면에 구성하고, 판매 방식 칩 필터와 상품 상세의 농가 정보·판매 방식 표시 구조를 설계합니다
- 장바구니·결제 화면: 판매 방식별 주문서 분리, 결제 수단 선택, PG 결제창 연동 호출과 결제 승인 확인, 예약 주문의 결제 시점·환불 안내 표시 구조를 설계합니다
- 농가 팔로우 화면: 농가 프로필 화면, 팔로우·해제 토글, 팔로우 농가 목록과 농가별 신규 상품 묶음 구조를 설계합니다
- 마이페이지 화면: 주문·예약 탭, 상태별 알약, 배송 단계 표시, 취소 가능 여부 안내와 취소 확인 대화상자 구조를 설계합니다



프로젝트 핵심 과제
예약 구매의 결제 시점(사전 결제 또는 수확 확정 후 결제)과 환불 규정이 미확정이라 정책 값을 설정 테이블로 분리해 수정 범위를 줄이는 구조 설계
즉시 구매와 예약 구매가 한 장바구니에 섞일 때 주문서와 결제 승인을 나누는 기준을 농가·판매 방식 단위로 정하는 설계
농가마다 배송비와 묶음 배송 조건이 달라 장바구니 합계를 서버에서 일관되게 다시 계산하는 규칙 설계
PC와 모바일 폭 모두에서 상품 카드 목록과 결제 폼이 한 손 조작으로 쓰
반응형 배치 설계 필요
핵심 기능 상세
상품 탐색·판매 방식
구매자가 첫 화면에서 지금 바로 살 수 있는 상품과 수확 일정에 맞춰 미리 주문하는 예약 상품을 나란히 보고, 카테고리와 판매 방식으로 걸러 상품 상세까지 이동합니다.
- 판매 방식(즉시·예약)과 카테고리를 쿼리 파라미터로 저장해 새로고침과 공유 링크에서도 같은 목록을 복원하는 필터 구조 구현
- 상품과 농가를 한 번에 조회하는 Prisma 관계 쿼리와 커서 기반 목록 페이지네이션 설계
- 예약 상품의 수확 예정일과 마감일을 상품 상세에 계산해 표시하는 판매 방식 컴포넌트 구현
상품 단위로 판매 방식과 예약 마감 정보를 한 모델에 담아, 같은 상품 카드가 즉시 구매 버튼과 예약 구매 버튼 중 맞는 쪽으로 바뀌도록 구현합니다.


장바구니·결제
구매자가 즉시 구매 상품은 바로 결제하고, 예약 구매 상품은 사전 주문으로 결제하는 두 흐름을 한 장바구니에서 구분해 진행합니다.
- 장바구니를 농가·판매 방식 단위로 묶어 주문서를 나누고 합계와 배송비를 서버에서 다시 계산하는 구조 구현
- 토스페이먼츠 결제 승인 API를 서버에서 호출하고 금액 일치를 확인한 뒤 주문 상태를 확정하는 흐름 설계
- 예약 주문에 결제 시점과 환불 규정을 주문 레코드로 저장해 마이페이지와 관리 콘솔이 같은 값을 읽도록 모델링
클라이언트가 보낸 금액을 믿지 않고 승인 단계에서 서버 계산 금액과 대조하는 결제 확정 흐름을 구현해, 즉시 구매와 예약 구매가 같은 승인 로직을 공유하도록 설계합니다.


농가 팔로우
구매자가 마음에 든 농가를 팔로우하고, 팔로우한 농가의 새 상품과 예약 오픈 소식을 모아 봅니다. 농가 프로필 화면, 팔로우·해제 토글, 팔로우 농가 목록과 농가별 신규 상품 묶음 구조를 설계합니다.
- 구매자와 농가의 팔로우 관계를 별도 테이블로 두고 토글 요청을 낙관적 업데이트로 반영하는 구조 구현
- 팔로우한 농가의 신규 상품을 최근 등록순으로 묶어 조회하는 복합 인덱스 쿼리 설계
- 팔로우 해제는 묻지 않고 처리하고 되돌리기 토스트로 복구하는 흐름 구현
팔로우 관계 하나로 농가 프로필, 팔로우 목록, 신규 상품 묶음이 모두 갱신되도록 같은 상태를 공유하게 구현합니다.


마이페이지
구매자가 주문 내역과 예약 내역을 탭으로 나눠 보고, 배송 상태와 예약 상품의 수확·발송 예정을 확인합니다.
- 주문 상태를 결제 완료·상품 준비·출고·배송 완료로 정의하고 상태 전이 규칙을 서버에서 검증하는 모델 구현
- 주문과 예약을 하나의 주문 테이블에서 판매 방식 컬럼으로 구분해 탭별로 조회하는 쿼리 설계
- 취소 가능한 상태에서만 취소 버튼을 노출하고 취소 시 PG 취소 API 호출과 주문 상태 갱신을 한 흐름으로 처리
주문 상태 전이 규칙을 서버 한 곳에 두어, 구매자 화면의 취소 버튼 노출과 농가 오피스의 출고 처리가 같은 규칙을 따르도록 구현합니다.


프로젝트 진행 단계
요구사항 분석과 주문·결제 모델 설계 · 2026.11
구매자·농가·관리자 역할 정의, 상품·주문·예약·팔로우 테이블 설계, 즉시·예약 결제 시점 규칙 정리
상품 탐색과 판매 방식 화면 구현 · 2026.11
농가·상품 목록, 판매 방식 필터, 상품 상세와 예약 마감 표시, 반응형 레이아웃 구현
장바구니와 PG 결제 연동 · 2026.11
판매 방식별 주문서 분리, 결제 승인 API 연동, 서버 금액 대조와 주문 확정 흐름 구현
팔로우·마이페이지와 통합 점검 · 2026.11
팔로우 관계와 신규 상품 묶음, 주문·예약 조회, 취소 흐름, 모바일 폭 점검
개발 결과
기술적 주안점
- 상품 단위로 판매 방식과 예약 마감 정보를 한 모델에 담아, 같은 상품 카드가 즉시 구매 버튼과 예약 구매 버튼 중 맞는 쪽으로 바뀌도록 구현합니다
- 클라이언트가 보낸 금액을 믿지 않고 승인 단계에서 서버 계산 금액과 대조하는 결제 확정 흐름을 구현해, 즉시 구매와 예약 구매가 같은 승인 로직을 공유하도록 설계합니다
- 팔로우 관계 하나로 농가 프로필, 팔로우 목록, 신규 상품 묶음이 모두 갱신되도록 같은 상태를 공유하게 구현합니다