Project 04 · 2025.07 - 2025.10

Dragon Water 쇼핑몰 사이트

정수기 제품 판매와 기업 고객 관리를 위한 자체 쇼핑몰 풀스택 프로젝트입니다. React 기반 프론트엔드와 Spring Boot 기반 백엔드 서버를 분리하고, 상품 탐색부터 주문·결제·회원·관리자 운영까지 이어지는 커머스 흐름을 구축했습니다.

Frontend GitHub Backend GitHub 목록으로

개요

Dragon Water 쇼핑몰 사이트는 일반 고객과 기업 고객이 정수기 제품을 탐색하고 구매할 수 있는 쇼핑몰입니다. 프론트엔드는 React, TypeScript, Vite, React Query를 기반으로 상품 목록, 상세, 장바구니, 주문, 결제 결과, 마이페이지, 고객센터, 관리자 화면을 구성했습니다.

백엔드는 Spring Boot 3.5.4와 Java 21 기반으로 회원 인증, 상품/카테고리, 장바구니, 주문, 결제, 배송, 문의, 공지, FAQ, 통계, 관리자 API를 제공합니다. JWT 인증과 토큰 재발급 흐름을 두고, MySQL과 Redis를 Docker Compose로 함께 운영할 수 있도록 배포 구성을 잡았습니다.

핵심 기능

01

쇼핑몰 사용자 흐름

메인, 브랜드 소개, 상품 목록, 상품 상세, 장바구니, 주문, 결제 결과, 마이페이지까지 이어지는 구매 경험을 구성했습니다.

02

회원 인증

JWT access token과 refresh token을 사용하고, 401 응답 시 토큰 재발급 후 원 요청을 재시도하는 API 호출 흐름을 구성했습니다.

03

관리자 운영 기능

상품, 카테고리, 상품 이미지, 상세 콘텐츠, 공지, FAQ, 문의, 주문, 교환/환불, 기업 회원 승인, 통계 화면을 관리자 영역으로 분리했습니다.

04

기업 고객 관리

본사/지점 등 기업 고객 유형을 고려한 회원 가입, 기업 요청 승인, 본사 대시보드, 지점 주문 관리 흐름을 설계했습니다.

05

상품 콘텐츠 관리

상품 이미지 업로드, 썸네일 지정, 상세 콘텐츠 저장, 메인 페이지 노출 상품 관리 등 운영자가 직접 상품 정보를 갱신할 수 있게 했습니다.

06

고객센터

공지사항, FAQ, 일반 문의, 상품 문의, 클레임 기능을 구성해 구매 이후의 문의와 운영 대응 흐름을 함께 처리했습니다.

역할

  • React/TypeScript 기반 쇼핑몰 화면과 관리자 화면 구조 설계 및 구현
  • Spring Boot 기반 REST API 서버 설계와 도메인별 Controller, Service, Repository 구현
  • JWT 인증, refresh token 재발급, 인증 헤더 자동 주입, 인증 실패 처리 흐름 구성
  • 상품, 장바구니, 주문, 결제, 회원, 문의, 공지, FAQ, 통계 API 연동
  • MySQL, Redis, Spring Boot 애플리케이션을 Docker Compose로 실행하는 배포 구조 구성
  • NCP Object Storage 기반 이미지 업로드와 상품 이미지 관리 흐름 구현

기술 스택

영역 기술 적용 내용
Frontend React, TypeScript, Vite, React Query, React Router, Tailwind CSS, Radix UI 쇼핑몰 화면, 관리자 화면, 라우팅, 서버 상태 관리, UI 컴포넌트 구성
Backend Java 21, Spring Boot 3.5.4, Spring Web, Spring Security, JPA 도메인 API, 인증/인가, 상품·주문·회원·관리자 비즈니스 로직 구현
Database / Cache MySQL 8.0, Redis 7.2 주요 커머스 데이터 저장과 캐시/세션성 데이터 처리 기반 구성
Auth / Integration JWT, Mail, NICEPAY, NCP Object Storage 토큰 기반 인증, 이메일 인증/안내, 결제 연동, 상품 이미지 저장소 연동
Deploy Docker, Docker Compose, Gradle, Vercel 프론트엔드 배포와 백엔드 컨테이너 빌드/실행 환경 구성

시스템 구성

  • 프론트엔드는 Vercel 배포를 고려한 Vite React 앱으로 구성하고, API 기본 주소는 환경 변수 또는 https://api.dragonwater.co.kr로 분리했습니다.
  • 백엔드는 Gradle 멀티 스테이지 Dockerfile로 JAR를 빌드한 뒤 Java 21 JRE 컨테이너에서 실행되도록 구성했습니다.
  • 운영 컨테이너는 Spring Boot App, MySQL, Redis로 나뉘며, DB와 Redis의 healthcheck가 완료된 뒤 애플리케이션이 올라오도록 Docker Compose 의존성을 설정했습니다.
  • 상품 이미지와 상세 콘텐츠 이미지는 Object Storage에 업로드하고, 프론트엔드에서는 스토리지 URL 생성 헬퍼로 이미지 경로를 일관되게 다룹니다.

정리

이 프로젝트는 단순 소개 사이트가 아니라 상품 등록, 구매, 결제, 기업 고객 승인, 관리자 운영까지 포함한 커머스 서비스입니다. 프론트엔드와 백엔드를 분리해 책임을 명확히 나누고, 인증·주문·운영 기능이 실제 서비스 흐름 안에서 맞물리도록 설계한 점에 집중했습니다.