본문으로 건너뛰기
DANBEE LEE
← 프로젝트 목록

field. — 3D 캠핑장 시뮬레이션 플랫폼

캠핑 장비를 3D로 배치하고 구매까지 이어지는 올인원 플랫폼. 기획부터 배포·운영까지 단독 수행

기간
2026.03 – 2026.06
역할
기획 · 디자인 · 프론트엔드 · 백엔드 · 배포 · 운영 (단독)
기여도
100%
ExpressPostgreSQLDockerAWS EC2JWTReact 18Three.jsZustand

성과

운영 중
배포 후 현재 서비스 상태
100%
기획 · 개발 · 배포 단독 수행
25종+
3D 배치 가능 장비

Overview

만든 것을 어디까지 책임져야 하는지 직접 겪어보고 싶었습니다. API 서버와 데이터베이스 스키마를 직접 설계하고, Docker로 환경을 구성해 Linux 서버에 배포한 뒤 지금까지 운영하고 있습니다.

Architecture

  1. Client
    React 18 (Vercel)Three.js 3D 에디터Zustand 상태관리
  2. API
    Express REST API (AWS EC2 · Linux)JWT 인증 미들웨어rate limit
  3. Data
    PostgreSQL (Supabase)이미지 스토리지
  4. DevOps
    Docker (개발 환경)서버 로그 모니터링

주요 기능

  • 사용자 · 상품 · 주문 · 커뮤니티를 다루는 API 서버와 PostgreSQL 스키마 직접 설계
  • JWT 인증 (access 15분 / refresh 7일) 및 자동 토큰 갱신 인터셉터
  • argon2 비밀번호 해싱 · rate limit · 이미지 업로드(multer · sharp) 처리
  • react-three-fiber 기반 3D 캠핑장 에디터 — 시간대별 태양·그림자 시뮬레이션, 1인칭 탐험 모드
  • 장바구니 → 주문서 → 결제 → 주문완료 체크아웃 플로우
  • Docker로 개발 환경 구성, Vercel(FE) · AWS EC2(API) · Supabase(DB) 배포

문제 해결

Problem

토큰이 만료되면 사용자가 작업 도중 갑자기 로그아웃됐습니다.

Cause

access token(15분) 만료 시 재발급 흐름이 없어, 만료 즉시 401이 그대로 노출됐습니다.

Solution

응답 인터셉터에서 401을 감지해 refresh token으로 자동 재발급하고 원래 요청을 재시도하도록 구현했습니다. 사용자는 만료를 인지하지 못한 채 작업을 이어갑니다.

결과

  • 기획부터 3D 프론트엔드 · 백엔드 · 클라우드 배포까지 단독으로 완성해 실제 운영 중
  • 배포 이후에야 드러나는 문제(토큰 만료, 이미지 용량, 응답 지연)를 직접 겪고 해결