Snack(스낵) - 원스톱 구매 내역 관리 서비스

📑 프로젝트 소개

• 간식 대장

  Snack은 쿠팡, 네이버 쇼핑 등 다양한 온라인 플랫폼에서 이루어진 간식 구매 내역을 통합 관리할 수 있는 원스톱 솔루션입니다.
  구매처와 상관없이, 간식 품목, 수량, 금액 등의 정보를 일괄적으로 등록 및 관리할 수 있어,
  산발적으로 흩어진 데이터를 체계적으로 정리할 수 있습니다.
  또한, 비용 분석 리포트, 기간별 통계, 품목별 정렬 등의 기능을 통해 기업은 간식 운영에 대한 인사이트를 확보하고,
  불필요한 지출을 줄이며 합리적인 소비 패턴을 도출할 수 있습니다.
  복잡한 총무 업무를 줄이고, 기업 복지 운영의 효율성을 극대화하는 도구, 바로 Snack입니다.

📗 팀 문서

• Notion 링크 바로가기

🔧 백엔드 Git 저장소

• GitHub Repository 보러가기

🧾 API 명세서

• Swagger API 보러가기

🖼️ Snack(스낵) 미리보기

AI 챗봇 도우미	결제 모듈	모바일 구매 내역 확인	상품 상세와 담기
스낵 예산 관리	찜하기 해제 기능	카테고리 정렬 둘러보기	회원 관리 모바일

📱 기능 구현 영상

🚧 프론트엔드 시스템 아키텍쳐

⚙️ 기술 스택

FE 기술 스택 한눈에 보기

📌 프레임워크 & 언어

🎨 UI & 스타일링

📊 상태 & 데이터 관리

🛠 개발 도구

🔧 유틸리티

🚀 배포 & 협업 도구

👨‍👩‍👧‍👦 팀원 소개

팀장	부팀장	팀원	팀원	팀원	팀원
이태빈	이지수	김우주	김홍섭	장원빈	조성빈

🏗️ 프로젝트 구조

프로젝트 구조 보기

src/
├── app/                 # 앱 엔트리포인트 및 주요 페이지 구조
├── assets/              # 정적 자원 (이미지, 폰트 등)
├── components/          # 공용 UI 컴포넌트
├── hooks/               # 커스텀 훅 정의
├── lib/                 # 외부 라이브러리 설정 및 유틸 함수
├── providers/           # 전역 상태/컨텍스트 제공자
├── stores/              # 상태 관리
├── types/               # TypeScript 타입 정의
├── instrumentation-client.ts # 클라이언트 측 계측 로직
├── instrumentation.ts   # 서버/공용 계측 로직
└── middleware.ts        # 서버 미들웨어 (인증, 로깅 등)

✨ 주요 기능

1. 사내 간식 주문 플랫폼

• 상품 카테고리 : 카테고리별 간식 상품 조회
• 장바구니 시스템 : 상품 선택, 수량 조절, 주문 전 확인
• 주문 프로세스 : 결제 연동, 주문 상태 추적

2. 예산 관리 시스템

• 월별 예산 설정 : 관리자가 회사 예산 한도 설정
• 지출 현황 모니터링 : 실시간 예산 사용량 추적
• 예산 초과 알림 : 한도 초과 시 경고 시스템

3. 사용자 권한 관리

• 역할 기반 접근 제어 : USER, ADMIN, SUPER_ADMIN 권한 체계
• 회원 초대 시스템 : 이메일 초대 링크 발송
• 회사별 사용자 그룹 관리

4. 주문 관리 대시보드

• 주문 현황 모니터링 : 전체 주문 상태 실시간 확인
• 승인 워크플로우 : 관리자 주문 승인/거절 프로세스
• 주문 이력 관리 : 과거 주문 내역 조회 및 분석

5. 결제 시스템 연동

• 토스페이먼츠 연동 : 안전한 결제 처리
• 결제 성공/실패 처리 : 사용자 피드백 및 에러 핸들링
• 영수증 관리 : 주문 완료 후 상세 내역 제공

6. 개인 맞춤형 시스템

• 찜 기능 : 자주 주문하는 상품 즐겨찾기
• 판매 통계 : 주문량 기반 상품 표시

💣 트러블 슈팅

기획 의도 관련 문제

1.문제점 (Problem)

이번 프로젝트에서 가장 크게 부딪힌 문제는 기획 의도 문제였습니다.

• 구매 횟수 집계 오류

  • '코카콜라' 상품이 등록되어 총 29회 구매된 상태에서, 상품명을 '환타 오렌지'로 수정하면, 시스템에서는 '환타 오렌지'에 기존 구매 기록이 잘못 누적됩니다.

  • 기존 '코카콜라'의 구매 이력은 사라지고, 다른 상품에 기존 구매 데이터가 섞이는 현상이 발생합니다.

    

• 장바구니 동기화 문제
  • 사용자가 '자일리톨 껌'을 장바구니에 담아두었는데, 판매자가 상품명을 '단백질 바'로 수정하면 문제가 발생합니다.
  • 장바구니에 담긴 상품과 실제 상품 정보가 달라지며, 사용자가 선택한 상품과 다른 결과를 확인하게 됩니다.

2.원인 (Cause)

• 문제의 근본 원인은 상품 수정 기능이었습니다.
• 초기에는 상품 정보 중 가격만 수정 가능하도록 제한하는 방안을 고려했습니다.
• 그러나 플랫폼이 이미 존재하는 상품을 공유하는 구조였기 때문에, 사용자가 임의로 가격을 변경하는 방식은 기획 의도와 맞지 않는 비자연스러운 로직이었습니다.

3. 해결 과정 (Solution)

• 벤치마킹 대상으로 AirSupply 플랫폼을 참고했습니다.
  • 해당 서비스는 상품 정보를 직접 수정하지 않고, URL 입력 시 자동으로 상품 정보를 가져오는 구조를 사용하고 있었습니다.
• 저희도 같은 방식으로 기획을 재조정:
  • 상품 수정 기능 제거
  • URL 기반 자동 상품 등록 구조 도입
• 이를 통해 데이터 흐름을 명확하게 하고, 일관된 사용자 경험을 확보했습니다.

4. 결과 및 배운 점 (Result & Learnings)

• 실제 개발 과정에서 발생하는 다양한 오류와 문제 상황을 해결하며 트러블슈팅 능력을 키울 수 있었습니다.
• 단순히 기능을 구현하는 개발자가 아니라, 실제 서비스 운영을 고려한 기획과 설계의 중요성을 체감했습니다.
• 이번 경험을 통해, 앞으로의 기능 설계에서도 기획 의도와 기술 구현 간의 일관성을 항상 점검해야 한다는 교훈을 얻었습니다.