🍪 SNACK(스낵) - 원스톱 구매 관리 서비스

🔗 배포 사이트 바로가기

🔗 Back-end Repository 바로가기

📚 목차

1. 프로젝트 소개
2. 기능 구현 영상
3. 시스템 아키텍처
4. 기술 스택
5. 팀원 소개 및 문서
6. 개인별 주요 작업
7. 프로젝트 구조
8. 주요 기능

📑 프로젝트 소개

간식 대장, 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에 맞춘 어시스턴트로 고도화