🍪 SNACK(스낵) - 원스톱 구매 관리 서비스
📚 목차
- 프로젝트 소개
- 기능 구현 영상
- 시스템 아키텍처
- 기술 스택
- 팀원 소개 및 문서
- 개인별 주요 작업
- 프로젝트 구조
- 주요 기능
📑 프로젝트 소개
간식 대장, SNACK
흩어져 있던 회사 간식·비품 구매를 요청 → 승인 → 예산 관리 하나의 흐름으로 묶은 원스톱 구매 관리 서비스입니다.
- 프로젝트 기간: 2026.08.26 ~ 2026.10.16
- API 문서 (Swagger): 바로가기
🔑 테스트 계정
추후 로그인 화면에서 역할별 게스트 모드로 바로 둘러볼 수 있도록 개선할 예정입니다.
📱 기능 구현 영상
이미지를 클릭하면 유튜브에서 영상이 재생됩니다. (바로가기)
🧱 시스템 아키텍처
🧰 기술 스택
✔️ Framework & Language
✔️ State & Data
✔️ UI & Styling
✔️ Test & Tools
✔️ Security
✔️ Deploy & Collaboration
👨👩👧👦 팀원 소개 및 문서
팀원 소개
| 팀장 (FS) | BE Dev | 부팀장 (FS) | FS Dev |
|---|
| 🦖 박지선 | 🐧 최훈민 | 💨 하성휘 | 🦴 정민주 |
| FS Dev | FS Dev | FE Dev |
|---|
| 🐯 이진태 | 🙉 채지훈 | 🐼 김서윤 |
팀 문서
협업 방식
- 데일리 스크럼: 매일 진행 상황과 막힌 부분 공유
- 페어 리뷰: 2인 1조로 서로의 PR을 확인하고 리뷰
- 브랜치 전략: Merge 권한은 팀장·부팀장,
dev로는 Squash merge, dev → main은 Merge
- GitHub Projects: 이슈와 작업 진행 상태를 한 보드에서 관리
🧑💻 개인별 주요 작업
- 랜딩
- 로그인
- 초대
- 회원가입
- 비밀번호 찾기
- 프로필
- 최고관리자 회원관리
- 모달 컴포넌트
- Snacky (AI 어시스턴트) 화면
- Vercel 배포
- README
- 공통 컴포넌트 (MenuItem, TabMenu, SubCategoryItem, SideMenu)
- 상품 리스트·상세 퍼블리싱 및 등록·수정·삭제 API 연동
- 찜 기능 연결
- 찜 목록 QA (찜 직후 누락, 에러 안내, 다시 시도, 카드 링크 구조)
- 상품 리스트·상세 성능 개선 (서버 선조회)
- 카테고리 상수 및 시드 이미지 정리
- 공통 컴포넌트 (Button, Toast, Badge)
- 내 구매 요청 내역·상세
- 기업 구매 내역·상세
- 기업 예산 관리 페이지
- 공통 컴포넌트 (SearchBar, TextField, TextArea, GNB, Profile)
- GNB·Profile 라우트·로그아웃 연동 및 상단 고정
- 장바구니 페이지
- 관리자 예산 잔액 연동
- GNB 장바구니 개수 갱신
- 장바구니 웹 접근성 향상
- ProductDetail 컴포넌트
- Dropdown 컴포넌트
- 찜 목록 페이지
- 상품 등록 페이지
- 구매 요청 관리·상세
- 구매 요청 승인/반려
- 디자인 시스템 (Typography, Colors, Icon, Image, 레이아웃)
- 공통 컴포넌트 (ProductList, RequestList, MemberList, Pagination, SubCategoryMenu)
📂 프로젝트 구조
src/
├── app/
│ ├── (auth)/ # 로그인, 회원가입, 초대 가입, 비밀번호 찾기
│ ├── (protected)/ # 로그인 사용자 공통 페이지 (상품, 찜, 장바구니 등)
│ ├── (admin)/ # 관리자 페이지
│ ├── (super-admin)/ # 최고 관리자 페이지
│ ├── layout.tsx
│ └── providers.tsx
├── components/
│ ├── auth/ # RoleGuard 등 권한 컴포넌트
│ ├── icons/
│ └── ui/ # 공통 UI 컴포넌트
├── hooks/ # auth, members, purchase-requests, wishlist, common
├── lib/
│ ├── auth/
│ └── services/ # fetchClient + 도메인별 API 서비스
├── providers/ # Auth, Modal, Query, Toast, Wishlist
├── constants/
├── utils/
└── assets/
✨ 주요 기능
기능 소개
회원가입 및 로그인
- 초대 이메일을 통해 회원가입을 진행하고, 이메일과 비밀번호를 이용해 로그인
상품 조회 및 관리
- 등록된 간식 상품을 카테고리와 정렬 기준에 따라 조회하고, 상품을 등록 및 관리
장바구니
- 구매할 상품을 선택하고 삭제하며, 선택한 상품의 총 주문 금액을 확인
간식 구매 요청
- 장바구니를 통해 간식 구매를 요청하고, 구매 요청의 상태 및 상세 내역을 확인
구매 내역 관리
- 내가 요청하거나 구매한 간식 내역을 조회하고, 구매 요청을 취소
구매 요청 관리
- 관리자가 전체 구매 요청을 조회하고, 구매 요청을 승인하거나 반려
예산 및 지출 관리
- 조직 전체의 구매 지출액과 예산을 조회하고, 최고 관리자가 월별 예산을 관리
회원 관리
- 최고 관리자가 회원을 조회하고, 이메일 초대 및 회원 권한 변경 등을 관리
프로필 관리
- 기업명, 이름, 이메일, 권한 등 내 정보를 확인하고 비밀번호를 변경
역할별 기능
| 역할 | 주요 기능 |
|---|
| 일반 사용자 | 상품 조회·등록, 찜하기, 장바구니, 구매 요청 및 내역 확인 |
| 관리자 | 구매 요청 승인·반려, 즉시 구매, 기업 구매 내역, 예산 확인 |
| 최고 관리자 | 회원 초대·권한 관리, 월 예산 설정 |
- 관리자·최고 관리자 페이지는
RoleGuard로 접근을 막고, 서버에서도 권한을 한 번 더 확인합니다.
🚀 심화 기능
1. 찜하기
- 상품 상세에서 찜/해제, 찜 목록 페이지에서 모아 보기
- 찜 여부(하트)를 화면에서 먼저 반영하는 낙관적 업데이트 적용, 찜 수는 서버 응답 후 갱신
2. 회원 초대
- 최고 관리자가 이메일로 팀원 초대, 받은 사람은 초대 링크로 가입 (유효기간 7일)
3. 비밀번호 찾기
- 가입한 이메일로 재설정 링크 발송 (유효기간 30분), 링크에서 새 비밀번호 설정
4. 매달 예산 자동 생성
- 매월 1일 서버가 조직별 예산을 자동으로 만들고, 예산 관리 페이지에서 확인
5. 봇 차단 (Cloudflare Turnstile + Rate Limit)
- 로그인 실패가 반복되면 로그인 화면에 Turnstile 위젯을 띄워 인증 요구
- 로그인·회원가입·비밀번호 재설정 요청·Snacky에 요청 횟수 제한
- 다음 단계: 실제 사용자 IP 기준 카운트와 카운트 reset 구현
6. Snacky (AI 어시스턴트)
- 서비스 가이드 문서를 근거로 답하는 RAG 기반 채팅 어시스턴트
- 서버는 답변과 함께 참고한 문서 섹션(
sources)을 반환 (화면 표시는 다음 단계)
- 다음 단계: 읽기 전용 Tool Calling, Vector DB 확장 등 추가 보완 기능을 통해 SNACK에 맞춘 어시스턴트로 고도화
