🍿 Snack - 기업용 간식 마켓플레이스

Snack은 기업 담당자가 사내 간식 및 음료를 관리하고 주문할 수 있는 마켓플레이스 플랫폼입니다!

최고관리자는 이메일 초대로 직원들을 플랫폼에 가입시키고, 유저 권한을 일반·관리자로 변경하거나 유저의 계정을 삭제할 수 있습니다. 월별 예산을 설정해 회사의 간식 지출을 관리하며, 예산은 매월 자동으로 초기화됩니다.

직원들은 원하는 상품을 직접 등록할 수 있으며, 장바구니에 담아 구매를 요청합니다. 관리자는 이를 승인하거나 반려합니다. 관리자는 즉시 구매가 가능하며, 장바구니에서 잔여 예산을 실시간으로 확인할 수 있습니다. 승인된 주문은 구매 내역에 기록되어 관리자가 전체 내역을 조회할 수 있습니다.

🔗 링크

서비스	URL
🌐 배포 사이트	https://marin-snack.store/
📄 API 문서	http://13.209.35.172/api-docs/
🖥️ FE 저장소	github.com/oh1marin/fs9team3-snack-fe
⚙️ BE 저장소	github.com/oh1marin/fs9team3-snack-be

📸 화면 미리보기

홈	로그인	상품 목록

상품 상세	상품 등록 모달	장바구니

주문 내역	관리자	관리자 승인/반려

🏗 시스템 아키텍처

🛠 기술 스택

Frontend

Backend

Database & Storage

Deploy & Infra

🗄 DB 스키마

🔌 API 문서

http://13.209.35.172/api-docs/

👤 담당 역할

개인 프로젝트로, 기획부터 배포까지 단독으로 진행했습니다.

분야	내용
Frontend	전 페이지 UI 구현, 상태 관리, 인증 흐름, 성능 최적화
Backend	REST API 설계 및 구현, JWT 인증·권한 미들웨어, 이메일 발송
Database	Prisma 스키마 설계, PostgreSQL 마이그레이션·시드
Infra	AWS EC2 배포, S3 이미지 업로드, Vercel, Cloudflare 도메인 연결

✨ 주요 기능

1. 인증

• 이메일 기반 회원가입 / 로그인 / 로그아웃
• JWT 토큰 기반 인증 (쿠키)
• 최고관리자 초대 메일 발송

2. 상품

• 상품 목록 (카테고리 필터, 정렬: 최신순 / 판매순 / 가격순)
• 상품 등록 · 수정 · 삭제
• AWS S3 이미지 업로드
• 누적 구매 횟수 배지

3. 장바구니 · 주문

• 장바구니 담기 · 수량 변경 · 삭제
• 구매 요청 (일반) / 즉시 구매 (관리자)
• 주문 목록 · 상세 조회 · 취소

4. 관리자

• 회원 관리: 초대, 권한 변경 (일반 / 관리자 / 최고관리자)
• 예산 관리: 월별 예산 설정 (node-cron 자동 초기화)
• 승인 대기: 구매 요청 승인 · 반려
• 상품 관리: 등록 상품 목록 · 수정
• 구매 내역: 승인 완료 주문 조회

📁 프로젝트 구조

🖥️ fs9team3-snack-fe/          # 프론트엔드
├── 📁 src/
│   ├── 📁 app/
│   │   ├── 🔐 (auth)/              # 로그인, 회원가입
│   │   ├── 🔒 (protected)/         # 인증 필요 페이지
│   │   │   ├── 📦 items/           # 상품 목록·상세
│   │   │   │   └── register/       # 상품 등록
│   │   │   ├── 🛒 cart/            # 장바구니
│   │   │   │   └── complete/       # 구매 완료
│   │   │   ├── 📋 orders/          # 주문 목록·상세
│   │   │   ├── 👤 profile/         # 프로필
│   │   │   └── ⚙️ admin/           # 관리자
│   │   │       ├── items/          # 상품 관리
│   │   │       ├── orders/         # 승인 대기
│   │   │       ├── purchase-history/ # 구매 내역
│   │   │       └── users/          # 회원 관리
│   │   ├── 📄 page.tsx             # 랜딩
│   │   └── ui/                     # AddProductBtn, SortButton 등
│   ├── 🧩 components/              # 공통 컴포넌트
│   │   └── icons/
│   ├── 🌐 contexts/                # AuthContext, CartContext, ModalContext
│   ├── 🔧 lib/
│   │   ├── api/                    # apiClient, auth, cart, items, orders, superAdmin
│   │   ├── actions/                # Server Actions
│   │   ├── service/                # authService, userService
│   │   └── utils/                  # image, purchaseBadge
│   └── layout/                     # NavBar

⚙️ fs9team3-snack-be/          # 백엔드
├── 📁 src/
│   ├── 📄 app.ts                   # Express 앱 진입점
│   ├── 🛣️ routes/                  # auth, items, cart, orders, users, admin, super-admin
│   ├── 📋 controllers/             # 각 도메인 비즈니스 로직
│   ├── 🛡️ middleware/              # JWT 인증, 권한 체크, 에러 핸들러
│   ├── 🗄️ prisma/                  # schema.prisma, migrations, seed
│   ├── ⏰ cron/                    # 월별 예산 초기화 스케줄러
│   ├── 🔧 config/                  # Swagger, S3 업로드 설정
│   ├── 📐 types/                   # 공통 타입 정의
│   └── 🔨 utils/                   # 에러 클래스, 이메일, 이미지 URL, Prisma 싱글톤

🐛 트러블슈팅

1. 헤더 로그인 상태 불안정 문제

로그인 상태임에도 새로고침하면 비로그인 헤더가 깜빡이거나, 토큰이 있는데도 비로그인으로 표시되는 현상이 복합적으로 발생했다.

원인은 세 가지였다.

• getMe() 호출 중 setUser()와 setIsLoading(false)가 서로 다른 타이밍에 반영되어, user === null이면서 isLoading === false인 프레임이 한 순간 렌더링됨
• 헤더가 user 값만으로 로그인 여부를 판단해, /api/auth/me 파싱 실패 시 토큰이 있어도 비로그인으로 인식
• 프론트·API 포트가 달라 Access-Control-Allow-Origin이 명확하지 않아 브라우저가 쿠키를 전송하지 않음

해결

• setUser()와 로딩 상태 변경을 같은 흐름에서 처리하고, finally에서 무조건 setIsLoading(false)를 호출하던 구조를 제거
• 서버에서 토큰 검증 결과를 hasToken으로 헤더에 전달해 로그인 판단 기준 추가, AuthInitializer로 user를 context에 미리 주입
• 백엔드 CORS origin을 명확히 지정하고 credentials: true 유지

---

2. 모달 컴포넌트 지연 로드 (Dynamic Import)

items/page.tsx, items/[id]/page.tsx에서 ProductModal, DeleteModal, AddToCartModal을 상단 import로 불러오고 있었다. 모달은 버튼을 눌러야만 열리는 컴포넌트인데, 페이지 진입 시점부터 번들에 포함되어 초기 로딩에 영향을 주고 있었다.

해결 모달을 여는 시점에 await import()로 동적 로드하도록 변경했다.

const { default: ProductModal } = await import("@/components/ProductModal");
const { default: DeleteModal } = await import("@/components/DeleteModal");
const { default: AddToCartModal } = await import("@/components/AddToCartModal");

초기 번들 크기가 줄었고, 모달처럼 조건부로만 필요한 컴포넌트는 dynamic import가 적합하다는 것을 확인했다.