도토리 창고는 사용자가 원하는 물건을 자유롭게 선택해 공동구매를 개설하고, 같은 지역의 이웃들과 함께 알뜰하게 구매할 수 있는 동네 기반 C2C 공동구매 플랫폼입니다.
기존 공동구매 서비스가 정해진 상품이나 판매자 중심으로 운영되는 경우가 많았다면, 도토리 창고는 사용자가 직접 주최자가 되어 필요한 물건의 공동구매를 열 수 있도록 구성했습니다.
또한 주소 기반으로 주변 동네까지 참여 범위를 확장하여, 한 동네에만 제한되지 않고 더 많은 이웃과 공동구매를 진행할 수 있도록 했습니다.
이를 통해 참여자는 필요한 물건을 함께 구매해 비용 부담을 줄일 수 있고, 주최자는 수량을 나누어 모집하며 공동구매 진행 부담을 줄일 수 있습니다.
📅 2026.04.23 - 2026.06.08
| 강민주 👩💻 | 이현석 👨💻 | 김윤우 👨💻 | 김민수 👨💻 |
|---|---|---|---|
 |
 |
 |
 |
- 공동구매 REST API 구현
- 공동구매 개설, 수정 및 삭제(CRUD) API 구현
- 공동구매 참여, 참여 취소 및 수량 변경 기능 구현
- 공동구매 진행 단계에 따른 비즈니스 상태 관리 로직 적용
- 공동구매 정산 기능 설계 및 협업 후 연동
- 공동구매 검색 및 필터링 구현
- 다양한 조건을 반영한 공동구매 목록 검색 및 필터링 API 구현
- Spring Security와 JWT를 활용한 API 인가(Authorization) 처리 구현
- 인증/인가 및 보안 처리
- API 요청 시 토큰 검증을 통한 사용자 식별 및 접근 권한 제어 적용
-
회원 기능 구현
- 회원가입 화면 UI 구성 및 입력값 상태 관리
- 아이디 중복확인 기능 구현
- 닉네임 중복확인 기능 구현
- 비밀번호 확인, 약관 동의 등 회원가입 입력 조건 처리
- 회원가입 요청 데이터 구성 및 백엔드 API 연동
- 회원가입 성공/실패 결과에 따른 사용자 피드백 처리
-
주소 기반 기능 구현
- 카카오 주소 검색 API 연동
- 사용자가 선택한 주소 정보를 회원가입 흐름과 연결
- 주소 기반 좌표 변환 흐름 구성
- 선택한 주소를 기준으로 주변주소 저장 기능과 연결
- 동네 기반 공동구매 참여 범위 확장을 위한 주소 데이터 처리
-
로그인 및 인증 기능 구현
- 세션 로그인 기능 구현
- JWT 로그인 기능 구현
- 로그인 요청 데이터 구성 및 백엔드 API 연동
- 로그인 성공 시 사용자 인증 상태 관리
- JWT 인증 헤더 기반 토큰 처리 흐름 구성
- 로그아웃 기능 구현
- 로그인 실패 및 인증 관련 응답에 대한 에러 처리
-
마이페이지 주소 기능 구현
- 마이페이지 내 사용자 주소 조회 기능 구현
- 사용자 주소 변경 흐름 구성
- 카카오 지도 API를 활용한 주소 확인 화면 구현
- 서버에서 받아온 주소 데이터를 화면에 렌더링
- 주소 변경 후 최신 사용자 정보가 반영되도록 프론트 흐름 처리
-
공통 UI 및 프론트엔드 구조 개선
- 공통 Input, Button, Modal 컴포넌트를 활용한 화면 구성
- 로그인, 회원가입, 주소 기능에서 공통 Modal을 활용한 사용자 피드백 처리
- 반복되는 API 요청 흐름을 정리하여 페이지별 API 연동 구조 개선
- Storybook을 활용한 공통 컴포넌트 확인 및 UI 상태 점검
-
채팅방 REST API 구현
- 채팅방 목록 조회 API 구현 (참여 중인 채팅방 전체 조회)
- N+1 문제 해결을 위한 JPQL fetch join 적용 (49→3 쿼리, 365ms→30ms)
- 채팅방 상세 조회 API 구현
- 채팅방 생성 및 참여/퇴장 API 구현
- 커서 기반 페이지네이션을 활용한 메시지 이력 조회 API 구현
-
WebSocket / STOMP 실시간 채팅 구현
- Spring WebSocket + STOMP 기반 실시간 메시지 송수신 구현
- WebSocket 연결 시 JWT 인증 처리를 위한 ‘JwtHandshakeInterceptor‘ 구현
- 구독 시점 권한 검증을 위한 ‘StompSubscriptionInterceptor‘ 구현 (2단계 보안)
- 채팅방별 구독 토픽 설계 및 메시지 브로드캐스트 흐름 구성
-
읽음 처리 및 안읽은 메시지 수 관리
- ‘lastReadMessageId‘ 기반 읽음 상태 추적 구현
- 채팅방 입장 시 읽음 처리 및 미읽음 카운트 초기화 로직 구현
- 미읽음 메시지 수 실시간 반영을 위한 프론트 상태 동기화 처리
-
프론트엔드 채팅 UI 구현
- Vite, React Query 기반 채팅 프론트엔드 구성
- 채팅방 목록 화면 구현 (참여자 수, 최근 메시지, 미읽음 뱃지 표시)
- 실시간 메시지 수신 시 채팅방 목록 자동 갱신 처리
- 호스트/참여자 역할 및 상태에 따른 UI 분기 처리
-
회원 기능 구현
- 마이페이지 화면 UI 구성 및 입력값 상태 관리
- 마이페이지 구성 및 백엔드 API 연동
-
공통 응답 구조 및 예외 처리 구현
- REST 구조와 공통 응답 바디 설계 및 아키텍처 구축
- 예외 처리 레이어를 분리한 공통 에러 처리 아키텍처 구축
-
주변 주소 인메모리 적재 리팩토링
- mysql + h2 멀티 데이터베이스 설계
- 서비스 기동 시 주변주소 저장 기능을 활용한 H2 적재 방식 구현
-
포인트 기능 구현
- 에스크로 결제 흐름 설계 후 주최자 정산 시 포인트 이전 로직 구현
- 카카오페이 테스트 API를 활용한 충전 로직 구현
- 회원가입
- 아이디 중복확인
- 닉네임 중복확인
- 로그인
- 로그아웃
- 카카오 주소 검색
- 주소 기반 좌표 변환
- 주변 주소 저장
- 마이페이지 주소 조회
- 공동구매 목록 조회
- 공동구매 상세 조회
- 공동구매 개설
- 공동구매 참여 신청
- 공동구매 진행 상태 확인
- 공동구매 시작 시 채팅방 생성
- 공동구매 참여자 간 메시지 송수신
- STOMP 기반 실시간 채팅 흐름 구성
- 내 정보 조회
- 내 주소 조회
- 내 주소 변경
- 내가 참여한 공동구매 조회
- 내가 개설한 공동구매 조회
- 포인트 충전
git clone https://github.com/AieBestUniverse/groupBuyingClient.git
cd groupBuyingClient
npm install
npm run devnpm run storybooknpm run build
.storybook/
dist/
node_modules/
public/
auth/
images/
landing/
favicon.svg
icons.svg
src/
api/
assets/
components/
config/
hooks/
layouts/
pages/
stories/
styles/
utils/
App.jsx
main.jsx
.env
.gitignore
debug-storybook.log
eslint.config.js
index.html
package-lock.json
package.json
README.md
vite.config.js
- Storybook 실행과 관련된 설정 파일들이 위치하는 폴더입니다.
- 공통 컴포넌트를 독립적으로 확인하고 문서화하기 위한 환경 설정을 관리합니다.
npm run build명령어 실행 시 생성되는 배포용 빌드 결과물이 저장되는 폴더입니다.- 실제 배포 환경에서 사용되는 정적 파일들이 포함됩니다.
- 프로젝트의 의존성 패키지들이 저장되는 디렉토리입니다.
npm install명령어를 통해 설치된 모든 라이브러리들이 이곳에 위치합니다.
- 애플리케이션에서 직접 참조하는 정적 파일들이 위치하는 폴더입니다.
- 이미지, 아이콘, 랜딩 페이지 관련 리소스 등 빌드 과정에서 그대로 유지되는 파일들이 포함됩니다.
- 애플리케이션의 주요 소스 코드들이 위치하는 디렉토리입니다.
- React 컴포넌트, 페이지, API 요청, 커스텀 훅, 스타일, 유틸 함수 등이 이곳에 포함됩니다.
- 서버와 통신하는 API 요청 관련 코드들이 위치하는 폴더입니다.
- 공통 요청 함수, API 클라이언트, 기능별 요청 로직 등을 관리합니다.
- 재사용 가능한 React 컴포넌트들이 위치하는 폴더입니다.
- 버튼, 인풋, 모달, 상태 배지 등 여러 페이지에서 공통으로 사용하는 UI 컴포넌트를 관리합니다.
- React 커스텀 훅들이 위치하는 폴더입니다.
- 주소 검색, 지도 처리, API 요청 등 반복되는 로직을 재사용 가능한 형태로 분리합니다.
- 페이지 공통 레이아웃을 구성하는 컴포넌트들이 위치하는 폴더입니다.
- Header, Footer, Outlet 구조 등 전체 화면 틀을 관리합니다.
- 라우터 경로와 연결되는 페이지 컴포넌트들이 위치하는 폴더입니다.
- 랜딩 페이지, 로그인, 회원가입, 마이페이지, 공동구매 관련 페이지 등을 관리합니다.
- Storybook에서 확인할 컴포넌트 스토리 파일들이 위치하는 폴더입니다.
- 공통 컴포넌트의 다양한 상태와 사용 예시를 문서화합니다.
- 전역 스타일, 공통 CSS, 변수, reset 스타일 등이 위치하는 폴더입니다.
- 프로젝트 전체의 UI 톤과 기본 스타일을 관리합니다.
- 여러 기능에서 공통으로 사용하는 유틸 함수들이 위치하는 폴더입니다.
- 데이터 가공, 값 변환, 공통 처리 로직 등을 분리하여 관리합니다.
- 애플리케이션의 루트 컴포넌트입니다.
- 전체 라우팅 구조와 페이지 렌더링 흐름을 정의합니다.
- React 애플리케이션의 진입점 파일입니다.
- App.jsx 컴포넌트를 브라우저 DOM에 렌더링합니다.
- 프로젝트에서 사용하는 환경변수 파일입니다.
- 서버 API 주소, 외부 API 키 등 노출되면 안 되는 설정값을 관리합니다.
- 코드 품질을 유지하기 위해 ESLint 규칙을 설정하는 파일입니다.
- 팀원 간 코드 스타일을 일정하게 유지하는 데 사용됩니다.
- 프로젝트의 의존성, 실행 스크립트, 설정 정보가 포함된 메타데이터 파일입니다.
npm run dev,npm run build,npm run storybook등의 명령어를 관리합니다.
- Vite의 빌드 및 개발 서버 설정을 정의하는 파일입니다.
- 플러그인, 경로 별칭, 개발 서버 옵션 등을 관리합니다.
.GIF)