프로그래밍 개발일지 [웹 경매 플랫폼 1]

뭔가 이거저거 해본건 많은데 결과물이다 라고 보여줄만한 프로젝트도 없고, 공부했던 내용을 다시 점검해보며 만들어볼 프로젝트를 생각하다가 웹 경매 플랫폼이라는 주제로 프로젝트를 최대한 단기간에 부셔볼 생각이다. 타임어택에 도전 해보려고한다. 이번 일지에는 기본적인 구상을 브레인 스토밍한 내용을 정리해 보려고 한다. 학습 목표는 백엔드 설계 및 구현 + 리액트 를 목표로 두고 있다. 기본적인 설계는 다음과 같고, 약간의 변동사항은 생길 수 있다.

---

1. 프로젝트 개요

 

1.1. 프로젝트 목표

• 실시간 경매 시스템을 구축하여, 사용자가 포인트를 충전하고 경매에 참여할 수 있도록 함.

• WebSocket을 활용한 실시간 입찰 기능을 제공하여 원활한 경매 진행을 지원.

• 포인트 기반 결제 시스템을 적용하여, 별도의 외부 결제 서비스 없이도 경매가 운영될 수 있도록 함.

• 백엔드(Spring Boot)와 프론트엔드(React)를 병행 개발하며, 핵심 기능별로 연동.

 

---

2. 기술 스택 및 개발 환경

 

2.1. 백엔드 (Spring Boot)

• 프레임워크: Spring Boot 3.2.x

• DB: MySQL 8.x

• ORM: Spring Data JPA (Hibernate)

• 인증: Spring Security + JWT

• 실시간 기능: WebSocket + Redis 7.x

• 빌드 도구: Gradle

• API 문서화: Swagger (SpringDoc)

• 배포: Docker + AWS (EC2, RDS, S3)

 

2.2. 프론트엔드 (React)

• 프레임워크: React 18.x

• 언어: TypeScript 5.x

• 상태 관리: Redux Toolkit

• UI 라이브러리: Tailwind CSS

• API 통신: Axios

• 실시간 통신: WebSocket (react-use-websocket)

• 라우팅: React Router

• 배포: Vercel or AWS S3 + CloudFront

 

2.3. 개발 도구

• IDE: IntelliJ IDEA (백엔드), VS Code (프론트엔드)

• 버전 관리: Git + GitHub

• DB 관리: MySQL Workbench or DBeaver

• API 테스트: Postman

• Docker 컨테이너 사용 (개발 환경 통일)

---

 3. 프로젝트 구조

 

3.1. 백엔드 (Spring Boot) 프로젝트 구조

backend/
 ├── src/main/java/com/auction
 │   ├── config/          # 보안, CORS, WebSocket 설정
 │   ├── controller/      # REST API 컨트롤러
 │   ├── dto/             # DTO 객체 정의
 │   ├── entity/          # JPA 엔티티
 │   ├── repository/      # JPA Repository
 │   ├── service/         # 비즈니스 로직
 │   ├── security/        # JWT, Security 설정
 │   ├── websocket/       # WebSocket 핸들러
 │   ├── AuctionApplication.java  # Main Application
 ├── resources/
 │   ├── application.yml  # 환경 설정 파일
 ├── build.gradle         # Gradle 설정 파일

 

3.2. 프론트엔드 (React) 프로젝트 구조

frontend/
 ├── src/
 │   ├── components/      # 재사용 가능한 UI 컴포넌트
 │   ├── pages/           # 페이지 컴포넌트
 │   ├── store/           # Redux 상태 관리
 │   ├── services/        # API 호출 로직 (Axios)
 │   ├── websocket/       # WebSocket 관련 코드
 │   ├── App.tsx          # 메인 App 컴포넌트
 │   ├── index.tsx        # React 엔트리 포인트
 ├── public/
 │   ├── index.html       # 메인 HTML 파일
 ├── package.json         # NPM 패키지 관리
 ├── tailwind.config.js   # Tailwind 설정

 

---

4. 기능 및 API 설계

 

4.1. 사용자 (User)

기능	엔드포인트	설명
회원가입	POST  /api/users/signup	이메일, 비밀번호, 닉네임 입력
로그인	POST  /api/users/login	JWT 발급
사용자 정보 조회	GET  /api/users/me	현재 로그인한 사용자 정보 반환

기능	엔드포인트	설명
포인트 충전	POST  /api/points/charge	사용자가 포인트 충전
포인트 조회	GET  /api/points	현재 보유 포인트 확인
출금 요청	POST  /api/points/withdraw	판매자가 포인트를 출금 요청

기능	엔드포인트	설명
경매 등록	POST  /api/auctions	판매자가 경매 등록
경매 목록 조회	GET  /api/auctions	전체 경매 목록 조회
경매 상세 조회	GET  /api/auctions/{id}	특정 경매 정보 확인

 

 

기능	엔드포인트	설명
입찰 요청	POST  /api/bids	사용자가 입찰(포인트 차감)
최고 입찰가 조회	GET  /api/auctions/{id}/top-bid	현재 최고 입찰 금액 조회