중고거래 플랫폼 프론트엔드

React + Vite 기반의 중고거래 플랫폼 프론트엔드 애플리케이션입니다.

기술 스택

• React 19.2.0
• React Router DOM 7.10.1
• Axios (HTTP 클라이언트)
• STOMP.js + SockJS (WebSocket 채팅)
• Vite (빌드 도구)

주요 기능

사용자 기능

• 회원가입 / 로그인 / 로그아웃
• 상품 목록 조회 (검색, 카테고리 필터)
• 상품 상세 조회
• 상품 등록 / 수정 / 삭제
• 찜하기 기능
• 실시간 채팅
• 마이페이지
  • 내 정보 관리
  • 비밀번호 변경
  • 판매 내역
  • 구매 내역
  • 찜한 목록
  • 차단 목록
• 공지사항 조회

관리자 기능

• 회원 관리 (조회, 삭제)
• 상품 관리 (조회, 삭제)
• 공지사항 관리 (등록, 수정, 삭제)

프로젝트 구조

frontend/
├── public/
├── src/
│   ├── assets/          # 이미지, 아이콘 등
│   ├── components/      # 재사용 가능한 컴포넌트
│   │   └── Navbar.jsx
│   ├── pages/           # 페이지 컴포넌트
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   ├── Register.jsx
│   │   ├── ProductList.jsx
│   │   ├── ProductDetail.jsx
│   │   ├── ProductCreate.jsx
│   │   ├── ProductEdit.jsx
│   │   ├── MyPage.jsx
│   │   ├── MySales.jsx
│   │   ├── MyPurchases.jsx
│   │   ├── MyLikes.jsx
│   │   ├── MyBlocks.jsx
│   │   ├── ChatList.jsx
│   │   ├── Chat.jsx
│   │   ├── NoticeList.jsx
│   │   ├── NoticeDetail.jsx
│   │   ├── Admin.jsx
│   │   ├── AdminUsers.jsx
│   │   ├── AdminProducts.jsx
│   │   ├── AdminNotices.jsx
│   │   └── AdminNoticeForm.jsx
│   ├── services/        # API 서비스
│   │   ├── api.js
│   │   ├── authService.js
│   │   ├── productService.js
│   │   ├── userService.js
│   │   ├── chatService.js
│   │   ├── noticeService.js
│   │   └── adminService.js
│   ├── styles/          # CSS 파일
│   │   ├── Auth.css
│   │   ├── Home.css
│   │   ├── MyPage.css
│   │   ├── Navbar.css
│   │   ├── Product.css
│   │   ├── Chat.css
│   │   ├── Notice.css
│   │   └── Admin.css
│   ├── utils/           # 유틸리티 함수
│   │   └── auth.js
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── package.json
└── vite.config.js

API 엔드포인트

인증

• POST /auth/login - 로그인
• GET /auth/check - 중복 체크

회원

• POST /users - 회원가입
• GET /users/info - 내 정보 조회
• GET /users/me - 마이페이지 정보
• PATCH /users/me - 회원 정보 수정
• PATCH /users/me/password - 비밀번호 변경
• DELETE /users/me - 회원 탈퇴
• GET /users/me/sales - 판매 내역
• GET /users/me/purchases - 구매 내역
• GET /users/me/likes - 찜한 목록
• DELETE /users/me/likes/:id - 찜 해제
• GET /users/me/blocks - 차단 목록
• POST /users/me/blocks/:id - 차단하기
• DELETE /users/me/blocks/:id - 차단 해제

상품

• GET /products - 상품 목록
• GET /products/:id - 상품 상세
• POST /products - 상품 등록
• PUT /products/:id - 상품 수정
• PATCH /products/:id - 상품 상태 수정
• DELETE /products/:id - 상품 삭제
• GET /products/categories - 카테고리 목록
• GET /products/status - 상태 목록

찜하기

• POST /likes/:productId - 찜하기
• GET /likes - 찜 목록
• DELETE /likes/:productId - 찜 해제

차단

• POST /blocks/:userId - 차단하기
• GET /blocks - 차단 목록
• DELETE /blocks/:userId - 차단 해제

채팅

• GET /api/chats/rooms - 채팅방 목록
• POST /api/chats/rooms - 채팅방 생성
• GET /api/chats/:roomId - 채팅방 정보
• GET /api/chats/:roomId/messages - 메시지 조회
• DELETE /api/chats/:roomId - 채팅방 삭제
• WebSocket: /ws - 실시간 채팅

공지사항

• GET /admin/notices - 공지사항 목록
• GET /admin/notices/:id - 공지사항 상세
• POST /admin/notices - 공지사항 등록 (관리자)
• PUT /admin/notices/:id - 공지사항 수정 (관리자)
• DELETE /admin/notices/:id - 공지사항 삭제 (관리자)

관리자

• GET /admin/users/page/:page/and/:size - 회원 목록 (페이징)
• DELETE /admin/users/:id - 회원 삭제
• GET /admin/products/page/:page/and/:size - 상품 목록 (페이징)
• DELETE /admin/products/:id - 상품 삭제

설치 및 실행

의존성 설치

npm install

개발 서버 실행

npm run dev

개발 서버는 http://localhost:5173에서 실행됩니다.

프로덕션 빌드

npm run build

빌드 미리보기

npm run preview

환경 설정

백엔드 API 서버 주소는 src/services/api.js에서 설정할 수 있습니다:

const API_BASE_URL = 'http://localhost:8080';

인증

JWT 토큰 기반 인증을 사용합니다:

• 로그인 시 받은 토큰을 localStorage에 저장
• API 요청 시 X-AUTH-TOKEN 헤더에 토큰 포함
• 토큰은 src/utils/auth.js에서 관리

주의사항

• 백엔드 서버가 http://localhost:8080에서 실행 중이어야 합니다
• WebSocket 연결을 위해 백엔드에서 CORS 설정이 필요합니다
• 이미지 업로드 기능은 FormData를 사용합니다