feat: ESP32 DIY platform Phase 1 — marketplace with mock payment & flash token flow

- React+Vite frontend (dark theme, role-based routing: admin/seller/buyer)
- Express+Prisma+PostgreSQL backend with JWT auth and audit logging
- MinIO object storage with backend proxy for CORS-free firmware delivery
- Mock payment flow (order → mock-pay → FlashToken) for pre-business testing
- FlashToken lifecycle: issue → validate → esp-web-tools manifest → consume
- Admin approval workflow for project/product submissions
- Toss Payments integration guide (TOSS_PAYMENT_GUIDE.md) for live keys

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.env.example

@@ -0,0 +1,29 @@
+# ──────────────────────────────────────────────────────
+# ESP32 DIY 플랫폼 환경 변수
+# cp .env.example .env 후 각 값을 채워주세요
+# ──────────────────────────────────────────────────────
+
+# PostgreSQL
+DB_PASSWORD=change_this_strong_password
+
+# MinIO (로컬 S3 스토리지)
+MINIO_USER=minioadmin
+MINIO_PASSWORD=change_this_strong_password
+
+# JWT (openssl rand -hex 64 로 생성 권장)
+JWT_SECRET=change_this_very_long_random_secret_string
+
+# 서비스 외부 접근 URL (DNS 설정 후 변경, 파일 URL에 사용됨)
+# 로컬 테스트: http://localhost:3200
+# 실 서비스: https://your-domain.com
+BASE_URL=http://localhost:3200
+
+# ──────────────────────────────────────────────────────
+# 토스페이먼츠 (현재 테스트 모드 — 값 없어도 동작함)
+# 실결제 전환 시 TOSS_PAYMENT_GUIDE.md 참고
+# ──────────────────────────────────────────────────────
+TOSS_CLIENT_KEY=test_ck_placeholder
+TOSS_SECRET_KEY=test_sk_placeholder
+
+# webflash 연동 내부 토큰 (임의 UUID)
+WEBFLASH_INTERNAL_TOKEN=change_this_token

.gitignore

@@ -0,0 +1,5 @@
+.env
+node_modules/
+dist/
+.DS_Store
+*.log

README.md

@@ -0,0 +1,94 @@
+# ESP32 DIY 플랫폼
+
+ESP32 프로젝트 공유·판매 마켓플레이스. webflash(:3100)와 연동되는 별도 서비스입니다.
+
+## 포트
+
+| 서비스 | 포트 |
+|--------|------|
+| 웹 프론트엔드 | **3200** |
+| 백엔드 API | **3201** |
+| MinIO 관리 콘솔 | 9001 |
+
+## 빠른 시작
+
+### 1. 환경 변수 설정
+
+```bash
+cp .env.example .env
+# .env 파일을 편집하여 비밀번호, JWT_SECRET 등 설정
+```
+
+### 2. 실행
+
+```bash
+docker compose up -d --build
+```
+
+### 3. DB 마이그레이션 확인
+
+```bash
+docker compose logs platform-backend
+# "Platform Backend → http://localhost:3201" 메시지 확인
+```
+
+### 4. 관리자 계정 생성
+
+```bash
+docker compose exec platform-backend node src/scripts/createAdmin.js admin@example.com yourpassword 관리자
+```
+
+### 5. 브라우저 접속
+
+```
+http://localhost:3200
+```
+
+## 구조
+
+```
+platform/
+├── backend/
+│   ├── prisma/schema.prisma    DB 스키마
+│   └── src/
+│       ├── index.js            Express 서버
+│       ├── config/             DB / Redis / MinIO
+│       ├── middleware/         Auth / Audit
+│       ├── routes/             auth / projects / products / admin
+│       ├── services/           storage (MinIO + sharp)
+│       └── scripts/            createAdmin.js
+├── frontend/
+│   └── src/
+│       ├── pages/              React 페이지
+│       │   ├── Auth/           로그인, 회원가입
+│       │   ├── Dashboard/      판매자 대시보드
+│       │   └── Admin/          관리자 패널
+│       ├── hooks/useAuth.js    인증 컨텍스트
+│       └── api/client.js       Axios 인스턴스
+├── docker-compose.yml
+└── .env.example
+```
+
+## 1단계 구현 완료 기능
+
+- [x] 회원가입 / 로그인 / 로그아웃 (JWT)
+- [x] 프로젝트 생성 / 수정 / 삭제
+- [x] 파일 업로드 (이미지 WebP 자동 변환, MinIO 저장)
+- [x] 관리자 검토 요청 흐름
+- [x] 관리자 승인/반려 (가격·수수료 설정)
+- [x] 상품 자동 생성 (승인 시)
+- [x] 사용자 관리 (역할 변경, 계정 비활성화)
+- [x] 감사 로그 (모든 주요 행동 기록)
+
+## 2단계 예정
+
+- [ ] 토스페이먼츠 결제 연동
+- [ ] 환불 처리
+- [ ] FlashToken 발급 및 webflash 연동
+- [ ] 플래시 완료 로그
+
+## 3단계 예정
+
+- [ ] 리뷰 작성 (이미지/영상 업로드)
+- [ ] ffmpeg 영상 압축
+- [ ] 별점 집계

TOSS_PAYMENT_GUIDE.md

@@ -0,0 +1,267 @@
+# 토스페이먼츠 실전 적용 가이드
+
+> 현재 플랫폼은 **테스트(모의 결제) 모드**로 동작합니다.  
+> 사업자 등록 완료 후 아래 절차를 따라 실제 결제로 전환하세요.
+
+---
+
+## 1단계 — 사업자 등록
+
+토스페이먼츠는 사업자 등록증이 필요합니다.
+
+| 구분 | 내용 |
+|------|------|
+| 개인사업자 | 홈택스에서 사업자 등록 (즉시 발급 가능) |
+| 법인사업자 | 법인 설립 후 사업자 등록 |
+| 필요 서류 | 사업자등록증, 통장 사본, 신분증 |
+
+---
+
+## 2단계 — 토스페이먼츠 계정 및 API 키 발급
+
+### 2-1. 개발자 센터 가입
+
+1. [https://developers.tosspayments.com](https://developers.tosspayments.com) 접속
+2. 회원가입 후 **내 개발 정보** → **API 키** 탭
+3. **테스트 키** (무료, 사업자 없어도 사용 가능):
+   - `test_ck_...` — 클라이언트 키
+   - `test_sk_...` — 시크릿 키
+
+### 2-2. 실 결제 키 발급 (사업자 등록 후)
+
+1. 토스페이먼츠 파트너 신청: [https://www.tosspayments.com/contact](https://www.tosspayments.com/contact)
+2. 심사 완료 후 **라이브 키** 발급:
+   - `live_ck_...` — 클라이언트 키
+   - `live_sk_...` — 시크릿 키
+3. 수수료: 카드 기준 약 **2.2%** (매출 규모에 따라 협의 가능)
+
+---
+
+## 3단계 — 플랫폼에 토스 SDK 적용
+
+### 3-1. 환경 변수 업데이트
+
+```env
+# platform/.env
+TOSS_CLIENT_KEY=live_ck_YOUR_LIVE_KEY    # test_ck_ → live_ck_ 로 교체
+TOSS_SECRET_KEY=live_sk_YOUR_LIVE_KEY    # test_sk_ → live_sk_ 로 교체
+BASE_URL=https://your-domain.com         # 실제 도메인으로 변경
+```
+
+### 3-2. 프론트엔드 — 토스 SDK 로드 (`platform/frontend/index.html`)
+
+```html
+<!-- 기존 -->
+<!-- 없음 -->
+
+<!-- 추가 -->
+<script src="https://js.tosspayments.com/v2/standard"></script>
+```
+
+### 3-3. 프론트엔드 — 결제창 호출 (`ProductDetail.jsx`)
+
+현재 `handleBuy` 함수의 `mock-pay` 부분을 아래로 교체하세요:
+
+```javascript
+// ❌ 기존 모의 결제 코드
+const payRes = await api.post(`/orders/${orderId}/mock-pay`);
+navigate(`/flash/${payRes.data.flashToken}`);
+
+// ✅ 토스 실결제 코드로 교체
+const tossPayments = TossPayments(import.meta.env.VITE_TOSS_CLIENT_KEY);
+const payment = tossPayments.payment({ customerKey: user.id });
+
+await payment.requestPayment({
+  method: 'CARD',
+  amount: {
+    currency: 'KRW',
+    value: product.price,
+  },
+  orderId,                          // 서버에서 생성한 주문 ID
+  orderName: product.project.title,
+  successUrl: `${window.location.origin}/payment/success`,
+  failUrl:    `${window.location.origin}/payment/fail`,
+  customerEmail: user.email,
+  customerName:  user.nickname,
+});
+// 위 코드 실행 시 토스 결제창으로 리다이렉트됨
+```
+
+### 3-4. Vite 환경변수 추가 (`platform/frontend/.env`)
+
+```env
+VITE_TOSS_CLIENT_KEY=live_ck_YOUR_LIVE_KEY
+```
+
+### 3-5. 결제 성공 페이지 추가 (`pages/PaymentSuccess.jsx`)
+
+```javascript
+// platform/frontend/src/pages/PaymentSuccess.jsx
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import api from '../api/client';
+
+export default function PaymentSuccess() {
+  const [params] = useSearchParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const paymentKey = params.get('paymentKey');
+    const orderId    = params.get('orderId');
+    const amount     = params.get('amount');
+
+    // 서버에 결제 승인 요청
+    api.post('/payments/toss/confirm', { paymentKey, orderId, amount })
+      .then(r => navigate(`/flash/${r.data.flashToken}`))
+      .catch(() => navigate('/payment/fail'));
+  }, []);
+
+  return <div className="spinner" />;
+}
+```
+
+### 3-6. 백엔드 — 토스 결제 승인 라우트 추가 (`routes/payments.js`)
+
+```javascript
+// platform/backend/src/routes/payments.js
+const router = require('express').Router();
+const prisma  = require('../config/db');
+const { requireAuth } = require('../middleware/auth');
+const { v4: uuidv4 }  = require('uuid');
+
+// POST /api/payments/toss/confirm
+router.post('/toss/confirm', requireAuth, async (req, res) => {
+  const { paymentKey, orderId, amount } = req.body;
+
+  // 1. DB에서 주문 확인
+  const order = await prisma.order.findFirst({
+    where: { tossOrderId: orderId, buyerId: req.user.id, status: 'pending' },
+  });
+  if (!order || order.amount !== parseInt(amount)) {
+    return res.status(400).json({ error: '주문 정보가 일치하지 않습니다' });
+  }
+
+  // 2. 토스 서버에 결제 승인 요청
+  const tossRes = await fetch('https://api.tosspayments.com/v1/payments/confirm', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      // 시크릿 키를 Base64로 인코딩
+      Authorization: `Basic ${Buffer.from(process.env.TOSS_SECRET_KEY + ':').toString('base64')}`,
+    },
+    body: JSON.stringify({ paymentKey, orderId, amount }),
+  });
+
+  if (!tossRes.ok) {
+    const err = await tossRes.json();
+    return res.status(400).json({ error: err.message });
+  }
+
+  // 3. 주문 상태 업데이트 + FlashToken 발급
+  const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000);
+  const [, flashToken] = await prisma.$transaction([
+    prisma.order.update({
+      where: { id: order.id },
+      data: { status: 'paid', paidAt: new Date(), paymentKey },
+    }),
+    prisma.flashToken.create({
+      data: { orderId: order.id, expiresAt },
+    }),
+    prisma.product.update({
+      where: { id: order.productId },
+      data: { totalSales: { increment: 1 } },
+    }),
+  ]);
+
+  res.json({ flashToken: flashToken.token });
+});
+
+// POST /api/payments/toss/webhook — 토스 웹훅 (결제 상태 변경 알림)
+router.post('/toss/webhook', async (req, res) => {
+  // 웹훅 서명 검증 (토스 대시보드에서 시크릿 설정)
+  const signature = req.headers['toss-payments-signature'];
+  // TODO: HMAC-SHA256 서명 검증 구현
+
+  const { eventType, data } = req.body;
+  if (eventType === 'PAYMENT_STATUS_CHANGED' && data.status === 'CANCELED') {
+    await prisma.order.updateMany({
+      where: { paymentKey: data.paymentKey },
+      data: { status: 'cancelled' },
+    });
+  }
+  res.json({ success: true });
+});
+
+module.exports = router;
+```
+
+### 3-7. `index.js`에 payments 라우트 추가
+
+```javascript
+// platform/backend/src/index.js 에 추가
+app.use('/api/payments', require('./routes/payments'));
+```
+
+---
+
+## 4단계 — 환불 처리 (토스 API)
+
+현재 모의 환불은 DB만 변경합니다. 실결제 환불 시:
+
+```javascript
+// routes/orders.js refund 엔드포인트에 추가
+const tossRefundRes = await fetch(
+  `https://api.tosspayments.com/v1/payments/${order.paymentKey}/cancel`,
+  {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Basic ${Buffer.from(process.env.TOSS_SECRET_KEY + ':').toString('base64')}`,
+    },
+    body: JSON.stringify({ cancelReason: req.body.reason || '사용자 요청' }),
+  }
+);
+if (!tossRefundRes.ok) throw new Error('토스 환불 API 실패');
+```
+
+---
+
+## 5단계 — 토스 대시보드 설정
+
+실키 발급 후 [토스페이먼츠 대시보드](https://app.tosspayments.com)에서:
+
+| 설정 항목 | 값 |
+|----------|-----|
+| 결제 성공 URL | `https://your-domain.com/payment/success` |
+| 결제 실패 URL | `https://your-domain.com/payment/fail` |
+| 웹훅 URL | `https://your-domain.com/api/payments/toss/webhook` |
+| 허용 도메인 | `your-domain.com` |
+
+---
+
+## 테스트 → 운영 전환 요약
+
+| 항목 | 테스트 모드 (현재) | 운영 모드 (전환 후) |
+|------|-----------------|----------------|
+| 결제 처리 | mock-pay (즉시) | 토스 결제창 → confirm API |
+| API 키 | 없음 | live_ck_, live_sk_ |
+| 실제 청구 | 없음 | 있음 |
+| 환불 | DB만 변경 | 토스 cancel API 호출 |
+| 코드 변경 | - | ProductDetail.jsx, payments.js 추가, index.js 라우트 등록 |
+
+---
+
+## 해외 결제 (Stripe) — 차후 적용
+
+Stripe는 사업자 없이도 개인으로 가입 가능합니다.
+
+```bash
+npm install stripe
+```
+
+주요 차이점:
+- Stripe는 USD 기준 → 원화 환율 처리 필요
+- Payment Intent 방식 사용
+- 수수료: 약 2.9% + $0.30/건
+
+별도 가이드 예정.

backend/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:20-alpine
+
+RUN apk add --no-cache ffmpeg openssl
+
+WORKDIR /app
+
+COPY package*.json ./
+COPY prisma ./prisma
+
+RUN npm install --omit=dev
+
+COPY src ./src
+
+EXPOSE 3201
+
+CMD ["sh", "-c", "npx prisma db push --accept-data-loss && node src/index.js"]

backend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "platform-backend",
+  "version": "1.0.0",
+  "type": "commonjs",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "nodemon src/index.js",
+    "db:migrate": "prisma migrate deploy",
+    "db:generate": "prisma generate",
+    "db:push": "prisma db push",
+    "postinstall": "prisma generate"
+  },
+  "dependencies": {
+    "@prisma/client": "^5.14.0",
+    "bcryptjs": "^2.4.3",
+    "cors": "^2.8.5",
+    "express": "^4.19.2",
+    "express-rate-limit": "^7.3.1",
+    "express-validator": "^7.1.0",
+    "helmet": "^7.1.0",
+    "ioredis": "^5.4.1",
+    "jsonwebtoken": "^9.0.2",
+    "minio": "^8.0.0",
+    "multer": "^1.4.5-lts.1",
+    "sharp": "^0.33.4",
+    "uuid": "^10.0.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.4",
+    "prisma": "^5.14.0"
+  }
+}

backend/prisma/schema.prisma

@@ -0,0 +1,204 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+enum UserRole {
+  admin
+  seller
+  buyer
+}
+
+enum ProjectStatus {
+  draft
+  pending
+  approved
+  rejected
+  suspended
+}
+
+enum OrderStatus {
+  pending
+  paid
+  cancelled
+  refunded
+}
+
+enum PaymentGateway {
+  toss
+  stripe
+}
+
+model User {
+  id              String    @id @default(uuid())
+  email           String    @unique
+  passwordHash    String
+  nickname        String    @unique
+  role            UserRole  @default(buyer)
+  profileImageUrl String?
+  isEmailVerified Boolean   @default(false)
+  isActive        Boolean   @default(true)
+  createdAt       DateTime  @default(now())
+  updatedAt       DateTime  @updatedAt
+  lastLoginAt     DateTime?
+  lastLoginIp     String?
+
+  projects  Project[]
+  orders    Order[]
+  reviews   Review[]
+  auditLogs AuditLog[]
+}
+
+model Project {
+  id              String        @id @default(uuid())
+  userId          String
+  user            User          @relation(fields: [userId], references: [id])
+  title           String
+  description     String        @db.Text
+  difficultyLevel Int           @default(3)
+  chipFamily      String        @default("ESP32-S3")
+  requiredParts   Json?
+  status          ProjectStatus @default(draft)
+  adminNote       String?
+  commissionRate  Float         @default(0.1)
+  createdAt       DateTime      @default(now())
+  updatedAt       DateTime      @updatedAt
+
+  files   ProjectFile[]
+  product Product?
+}
+
+model ProjectFile {
+  id           String   @id @default(uuid())
+  projectId    String
+  project      Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
+  fileType     String
+  url          String
+  thumbnailUrl String?
+  fileSize     Int
+  mimeType     String
+  originalName String?
+  flashOffset  String   @default("0x0")
+  displayOrder Int      @default(0)
+  createdAt    DateTime @default(now())
+}
+
+model Product {
+  id         String   @id @default(uuid())
+  projectId  String   @unique
+  project    Project  @relation(fields: [projectId], references: [id])
+  price      Int
+  isOnSale   Boolean  @default(true)
+  totalSales Int      @default(0)
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+
+  orders  Order[]
+  reviews Review[]
+}
+
+model Order {
+  id               String         @id @default(uuid())
+  buyerId          String
+  buyer            User           @relation(fields: [buyerId], references: [id])
+  productId        String
+  product          Product        @relation(fields: [productId], references: [id])
+  amount           Int
+  commissionAmount Int
+  sellerAmount     Int
+  paymentGateway   PaymentGateway @default(toss)
+  paymentKey       String?
+  tossOrderId      String?        @unique
+  status           OrderStatus    @default(pending)
+  buyerInfo        Json
+  deviceInfo       Json?
+  orderedAt        DateTime       @default(now())
+  paidAt           DateTime?
+  refundedAt       DateTime?
+  refundReason     String?
+
+  flashToken FlashToken?
+  review     Review?
+}
+
+model FlashToken {
+  id         String    @id @default(uuid())
+  token      String    @unique @default(uuid())
+  orderId    String    @unique
+  order      Order     @relation(fields: [orderId], references: [id])
+  isUsed     Boolean   @default(false)
+  usedAt     DateTime?
+  macAddress String?
+  chipFamily String?
+  expiresAt  DateTime
+  createdAt  DateTime  @default(now())
+
+  flashLog FlashLog?
+}
+
+model FlashLog {
+  id           String     @id @default(uuid())
+  flashTokenId String     @unique
+  flashToken   FlashToken @relation(fields: [flashTokenId], references: [id])
+  macAddress   String
+  chipFamily   String
+  firmwareName String
+  firmwareId   String
+  success      Boolean
+  errorMessage String?
+  clientIp     String
+  userAgent    String?
+  flashedAt    DateTime   @default(now())
+}
+
+model Review {
+  id        String   @id @default(uuid())
+  orderId   String   @unique
+  order     Order    @relation(fields: [orderId], references: [id])
+  userId    String
+  user      User     @relation(fields: [userId], references: [id])
+  productId String
+  product   Product  @relation(fields: [productId], references: [id])
+  rating    Int
+  title     String
+  content   String   @db.Text
+  isVisible Boolean  @default(true)
+  createdAt DateTime @default(now())
+
+  media ReviewMedia[]
+}
+
+model ReviewMedia {
+  id           String   @id @default(uuid())
+  reviewId     String
+  review       Review   @relation(fields: [reviewId], references: [id], onDelete: Cascade)
+  mediaType    String
+  url          String
+  thumbnailUrl String?
+  createdAt    DateTime @default(now())
+}
+
+model AuditLog {
+  id             String   @id @default(uuid())
+  userId         String?
+  user           User?    @relation(fields: [userId], references: [id])
+  action         String
+  targetType     String?
+  targetId       String?
+  ipAddress      String
+  userAgent      String?
+  requestMethod  String?
+  requestPath    String?
+  requestBody    Json?
+  responseStatus Int?
+  metadata       Json?
+  createdAt      DateTime @default(now())
+
+  @@index([userId])
+  @@index([action])
+  @@index([createdAt])
+}

backend/src/config/db.js

@@ -0,0 +1,7 @@
+const { PrismaClient } = require('@prisma/client');
+
+const prisma = new PrismaClient({
+  log: process.env.NODE_ENV === 'development' ? ['query', 'error'] : ['error'],
+});
+
+module.exports = prisma;

backend/src/config/minio.js

@@ -0,0 +1,28 @@
+const Minio = require('minio');
+
+const client = new Minio.Client({
+  endPoint:  process.env.MINIO_ENDPOINT || 'localhost',
+  port:      parseInt(process.env.MINIO_PORT || '9000'),
+  useSSL:    process.env.MINIO_USE_SSL === 'true',
+  accessKey: process.env.MINIO_ACCESS_KEY,
+  secretKey: process.env.MINIO_SECRET_KEY,
+});
+
+const BUCKET = process.env.MINIO_BUCKET || 'platform';
+
+async function ensureBucket() {
+  const exists = await client.bucketExists(BUCKET);
+  if (!exists) {
+    await client.makeBucket(BUCKET);
+    console.log(`MinIO bucket "${BUCKET}" created`);
+  }
+}
+
+// 파일 URL — 플랫폼 백엔드 프록시를 통해 서빙 (CORS 문제 없음)
+// objectName: "images/uuid.webp" 형식
+function publicUrl(objectName) {
+  const base = (process.env.BASE_URL || 'http://localhost:3200').replace(/\/$/, '');
+  return `${base}/api/files/${objectName}`;
+}
+
+module.exports = { client, BUCKET, ensureBucket, publicUrl };

backend/src/config/redis.js

@@ -0,0 +1,10 @@
+const Redis = require('ioredis');
+
+const redis = new Redis(process.env.REDIS_URL || 'redis://localhost:6379', {
+  maxRetriesPerRequest: 3,
+  lazyConnect: true,
+});
+
+redis.on('error', (err) => console.error('Redis error:', err.message));
+
+module.exports = redis;

backend/src/index.js

@@ -0,0 +1,107 @@
+const express     = require('express');
+const cors        = require('cors');
+const helmet      = require('helmet');
+const path        = require('path');
+const rateLimit   = require('express-rate-limit');
+const { ensureBucket, client, BUCKET } = require('./config/minio');
+const prisma      = require('./config/db');
+
+const app  = express();
+const PORT = process.env.PORT || 3201;
+
+// ── 기본 미들웨어 ────────────────────────────────────────────────────────────
+app.set('trust proxy', 1);
+app.use(helmet({ crossOriginResourcePolicy: false }));
+app.use(cors({
+  origin: process.env.ALLOWED_ORIGIN || '*',
+  credentials: true,
+}));
+app.use(express.json({ limit: '2mb' }));
+app.use(express.urlencoded({ extended: true, limit: '2mb' }));
+
+// ── Rate Limiting ────────────────────────────────────────────────────────────
+const limiter = rateLimit({
+  windowMs: 15 * 60 * 1000,
+  max: 300,
+  standardHeaders: true,
+  legacyHeaders: false,
+  message: { error: '요청이 너무 많습니다. 잠시 후 다시 시도해주세요.' },
+});
+const authLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000,
+  max: 20,
+  message: { error: '로그인 시도가 너무 많습니다.' },
+});
+
+app.use('/api/', limiter);
+app.use('/api/auth/login',    authLimiter);
+app.use('/api/auth/register', authLimiter);
+
+// ── MinIO 파일 프록시 ─────────────────────────────────────────────────────────
+// /api/files/images/xxx.webp → MinIO BUCKET/images/xxx.webp 스트리밍
+// esp-web-tools가 bin 파일을 직접 fetch할 때 CORS 헤더 포함
+const MIME = {
+  '.webp': 'image/webp', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
+  '.png': 'image/png', '.gif': 'image/gif', '.svg': 'image/svg+xml',
+  '.bin': 'application/octet-stream', '.stl': 'model/stl',
+  '.pdf': 'application/pdf', '.mp4': 'video/mp4', '.webm': 'video/webm',
+};
+
+app.get('/api/files/*', async (req, res) => {
+  try {
+    const objectName = req.params[0];
+    if (!objectName) return res.status(400).end();
+
+    const ext         = path.extname(objectName).toLowerCase();
+    const contentType = MIME[ext] || 'application/octet-stream';
+
+    res.setHeader('Content-Type', contentType);
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Cache-Control', 'public, max-age=86400');
+
+    const stream = await client.getObject(BUCKET, objectName);
+    stream.pipe(res);
+    stream.on('error', () => res.status(404).end());
+  } catch {
+    res.status(404).end();
+  }
+});
+
+// ── 라우트 ───────────────────────────────────────────────────────────────────
+app.use('/api/auth',     require('./routes/auth'));
+app.use('/api/projects', require('./routes/projects'));
+app.use('/api/products', require('./routes/products'));
+app.use('/api/orders',   require('./routes/orders'));
+app.use('/api/flash',    require('./routes/flash'));
+app.use('/api/admin',    require('./routes/admin'));
+
+// 헬스 체크
+app.get('/api/health', (_req, res) => {
+  res.json({ status: 'ok', timestamp: new Date().toISOString() });
+});
+
+// ── 오류 핸들러 ─────────────────────────────────────────────────────────────
+app.use((err, _req, res, _next) => {
+  console.error(err);
+  res.status(err.status || 500).json({ error: err.message || '서버 오류' });
+});
+
+// ── 시작 ─────────────────────────────────────────────────────────────────────
+async function start() {
+  try {
+    await prisma.$connect();
+    console.log('PostgreSQL connected');
+
+    await ensureBucket();
+    console.log('MinIO ready');
+
+    app.listen(PORT, () => {
+      console.log(`Platform Backend → http://localhost:${PORT}`);
+    });
+  } catch (err) {
+    console.error('Startup error:', err);
+    process.exit(1);
+  }
+}
+
+start();

backend/src/middleware/audit.js

@@ -0,0 +1,37 @@
+const prisma = require('../config/db');
+
+const SENSITIVE = new Set(['password', 'passwordHash', 'token', 'paymentKey', 'secretKey']);
+
+function maskBody(body) {
+  if (!body || typeof body !== 'object') return body;
+  const masked = { ...body };
+  for (const key of Object.keys(masked)) {
+    if (SENSITIVE.has(key)) masked[key] = '***';
+  }
+  return masked;
+}
+
+// 중요 행동에 명시적으로 호출하는 감사 로그 저장 함수
+async function writeAuditLog({ userId, action, targetType, targetId, req, metadata, responseStatus }) {
+  try {
+    await prisma.auditLog.create({
+      data: {
+        userId:        userId || null,
+        action,
+        targetType:    targetType || null,
+        targetId:      targetId || null,
+        ipAddress:     req?.ip || req?.headers?.['x-forwarded-for'] || 'unknown',
+        userAgent:     req?.headers?.['user-agent'] || null,
+        requestMethod: req?.method || null,
+        requestPath:   req?.originalUrl || null,
+        requestBody:   req?.body ? maskBody(req.body) : null,
+        responseStatus: responseStatus || null,
+        metadata:      metadata || null,
+      },
+    });
+  } catch (err) {
+    console.error('AuditLog write failed:', err.message);
+  }
+}
+
+module.exports = { writeAuditLog };

backend/src/middleware/auth.js

@@ -0,0 +1,33 @@
+const jwt = require('jsonwebtoken');
+const redis = require('../config/redis');
+
+async function requireAuth(req, res, next) {
+  const header = req.headers.authorization;
+  if (!header?.startsWith('Bearer ')) {
+    return res.status(401).json({ error: '인증이 필요합니다' });
+  }
+  const token = header.slice(7);
+  try {
+    // 블랙리스트 확인 (로그아웃된 토큰)
+    const blocked = await redis.get(`bl:${token}`);
+    if (blocked) return res.status(401).json({ error: '만료된 토큰입니다' });
+
+    const payload = jwt.verify(token, process.env.JWT_SECRET);
+    req.user = payload;
+    req.token = token;
+    next();
+  } catch {
+    return res.status(401).json({ error: '유효하지 않은 토큰입니다' });
+  }
+}
+
+function requireRole(...roles) {
+  return (req, res, next) => {
+    if (!roles.includes(req.user?.role)) {
+      return res.status(403).json({ error: '권한이 없습니다' });
+    }
+    next();
+  };
+}
+
+module.exports = { requireAuth, requireRole };

backend/src/routes/admin.js

@@ -0,0 +1,245 @@
+const router = require('express').Router();
+const { body, validationResult } = require('express-validator');
+const prisma = require('../config/db');
+const { requireAuth, requireRole } = require('../middleware/auth');
+const { writeAuditLog } = require('../middleware/audit');
+
+// 모든 admin 라우트는 admin 역할 필요
+router.use(requireAuth, requireRole('admin'));
+
+// GET /api/admin/projects/pending
+router.get('/projects/pending', async (_req, res) => {
+  try {
+    const projects = await prisma.project.findMany({
+      where: { status: 'pending' },
+      orderBy: { updatedAt: 'asc' },
+      include: {
+        user: { select: { id: true, email: true, nickname: true } },
+        files: { where: { fileType: 'image' }, take: 1 },
+        _count: { select: { files: true } },
+      },
+    });
+    res.json(projects);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// GET /api/admin/projects — 전체 목록 (필터)
+router.get('/projects', async (req, res) => {
+  try {
+    const page   = Math.max(1, parseInt(req.query.page) || 1);
+    const limit  = Math.min(100, parseInt(req.query.limit) || 30);
+    const skip   = (page - 1) * limit;
+    const where  = {};
+    if (req.query.status) where.status = req.query.status;
+
+    const [projects, total] = await Promise.all([
+      prisma.project.findMany({
+        where, skip, take: limit,
+        orderBy: { updatedAt: 'desc' },
+        include: { user: { select: { id: true, email: true, nickname: true } } },
+      }),
+      prisma.project.count({ where }),
+    ]);
+    res.json({ projects, total, page, pages: Math.ceil(total / limit) });
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// POST /api/admin/projects/:id/approve
+router.post('/projects/:id/approve', [
+  body('commissionRate').optional().isFloat({ min: 0, max: 1 }),
+  body('price').isInt({ min: 100 }),
+], async (req, res) => {
+  const errors = validationResult(req);
+  if (!errors.isEmpty()) return res.status(400).json({ error: errors.array()[0].msg });
+
+  const { commissionRate = 0.1, price } = req.body;
+  try {
+    const project = await prisma.project.findUnique({ where: { id: req.params.id } });
+    if (!project) return res.status(404).json({ error: '프로젝트를 찾을 수 없습니다' });
+    if (project.status !== 'pending') return res.status(400).json({ error: '검토 대기 상태가 아닙니다' });
+
+    // 트랜잭션: 프로젝트 승인 + 상품 자동 생성
+    const [updated] = await prisma.$transaction([
+      prisma.project.update({
+        where: { id: req.params.id },
+        data: { status: 'approved', commissionRate: parseFloat(commissionRate), adminNote: null },
+      }),
+      prisma.product.upsert({
+        where: { projectId: req.params.id },
+        update: { price: parseInt(price), isOnSale: true },
+        create: { projectId: req.params.id, price: parseInt(price) },
+      }),
+    ]);
+
+    await writeAuditLog({
+      userId: req.user.id, action: 'ADMIN_APPROVE',
+      targetType: 'Project', targetId: req.params.id,
+      req, metadata: { commissionRate, price }, responseStatus: 200,
+    });
+    res.json(updated);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// POST /api/admin/projects/:id/reject
+router.post('/projects/:id/reject', [
+  body('adminNote').trim().isLength({ min: 5 }),
+], async (req, res) => {
+  const errors = validationResult(req);
+  if (!errors.isEmpty()) return res.status(400).json({ error: errors.array()[0].msg });
+
+  try {
+    const project = await prisma.project.findUnique({ where: { id: req.params.id } });
+    if (!project) return res.status(404).json({ error: '프로젝트를 찾을 수 없습니다' });
+
+    const updated = await prisma.project.update({
+      where: { id: req.params.id },
+      data: { status: 'rejected', adminNote: req.body.adminNote },
+    });
+
+    await writeAuditLog({
+      userId: req.user.id, action: 'ADMIN_REJECT',
+      targetType: 'Project', targetId: req.params.id,
+      req, responseStatus: 200,
+    });
+    res.json(updated);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// GET /api/admin/users
+router.get('/users', async (req, res) => {
+  try {
+    const page  = Math.max(1, parseInt(req.query.page) || 1);
+    const limit = Math.min(100, parseInt(req.query.limit) || 30);
+    const skip  = (page - 1) * limit;
+    const where = {};
+    if (req.query.role) where.role = req.query.role;
+    if (req.query.q) {
+      where.OR = [
+        { email: { contains: req.query.q, mode: 'insensitive' } },
+        { nickname: { contains: req.query.q, mode: 'insensitive' } },
+      ];
+    }
+
+    const [users, total] = await Promise.all([
+      prisma.user.findMany({
+        where, skip, take: limit,
+        orderBy: { createdAt: 'desc' },
+        select: { id: true, email: true, nickname: true, role: true, isActive: true, createdAt: true, lastLoginAt: true },
+      }),
+      prisma.user.count({ where }),
+    ]);
+    res.json({ users, total, page, pages: Math.ceil(total / limit) });
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// PUT /api/admin/users/:id/toggle — 활성/비활성
+router.put('/users/:id/toggle', async (req, res) => {
+  try {
+    const user = await prisma.user.findUnique({ where: { id: req.params.id } });
+    if (!user) return res.status(404).json({ error: '사용자를 찾을 수 없습니다' });
+    if (user.role === 'admin') return res.status(400).json({ error: '관리자 계정은 비활성화할 수 없습니다' });
+
+    const updated = await prisma.user.update({
+      where: { id: req.params.id },
+      data: { isActive: !user.isActive },
+      select: { id: true, email: true, isActive: true },
+    });
+    await writeAuditLog({
+      userId: req.user.id, action: updated.isActive ? 'ADMIN_USER_ACTIVATE' : 'ADMIN_USER_DEACTIVATE',
+      targetType: 'User', targetId: req.params.id, req, responseStatus: 200,
+    });
+    res.json(updated);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// PUT /api/admin/users/:id/role — 역할 변경
+router.put('/users/:id/role', [
+  body('role').isIn(['admin', 'seller', 'buyer']),
+], async (req, res) => {
+  const errors = validationResult(req);
+  if (!errors.isEmpty()) return res.status(400).json({ error: errors.array()[0].msg });
+
+  try {
+    const updated = await prisma.user.update({
+      where: { id: req.params.id },
+      data: { role: req.body.role },
+      select: { id: true, email: true, role: true },
+    });
+    await writeAuditLog({
+      userId: req.user.id, action: 'ADMIN_ROLE_CHANGE',
+      targetType: 'User', targetId: req.params.id,
+      req, metadata: { newRole: req.body.role }, responseStatus: 200,
+    });
+    res.json(updated);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// GET /api/admin/logs
+router.get('/logs', async (req, res) => {
+  try {
+    const page   = Math.max(1, parseInt(req.query.page) || 1);
+    const limit  = Math.min(200, parseInt(req.query.limit) || 50);
+    const skip   = (page - 1) * limit;
+    const where  = {};
+    if (req.query.action) where.action = req.query.action;
+    if (req.query.userId) where.userId = req.query.userId;
+    if (req.query.from || req.query.to) {
+      where.createdAt = {};
+      if (req.query.from) where.createdAt.gte = new Date(req.query.from);
+      if (req.query.to)   where.createdAt.lte = new Date(req.query.to);
+    }
+
+    const [logs, total] = await Promise.all([
+      prisma.auditLog.findMany({
+        where, skip, take: limit,
+        orderBy: { createdAt: 'desc' },
+        include: { user: { select: { email: true, nickname: true } } },
+      }),
+      prisma.auditLog.count({ where }),
+    ]);
+    res.json({ logs, total, page, pages: Math.ceil(total / limit) });
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// GET /api/admin/stats
+router.get('/stats', async (_req, res) => {
+  try {
+    const [
+      totalUsers, totalProjects, pendingProjects,
+      totalOrders, paidOrders,
+    ] = await Promise.all([
+      prisma.user.count(),
+      prisma.project.count(),
+      prisma.project.count({ where: { status: 'pending' } }),
+      prisma.order.count(),
+      prisma.order.aggregate({ where: { status: 'paid' }, _sum: { amount: true }, _count: true }),
+    ]);
+
+    res.json({
+      users:    totalUsers,
+      projects: { total: totalProjects, pending: pendingProjects },
+      revenue:  { total: paidOrders._sum.amount || 0, orders: paidOrders._count },
+    });
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+module.exports = router;

backend/src/routes/auth.js

@@ -0,0 +1,134 @@
+const router  = require('express').Router();
+const bcrypt  = require('bcryptjs');
+const jwt     = require('jsonwebtoken');
+const { body, validationResult } = require('express-validator');
+const prisma  = require('../config/db');
+const redis   = require('../config/redis');
+const { requireAuth } = require('../middleware/auth');
+const { writeAuditLog } = require('../middleware/audit');
+
+function signToken(user) {
+  return jwt.sign(
+    { id: user.id, email: user.email, role: user.role, nickname: user.nickname },
+    process.env.JWT_SECRET,
+    { expiresIn: process.env.JWT_EXPIRES_IN || '7d' }
+  );
+}
+
+// POST /api/auth/register
+router.post('/register', [
+  body('email').isEmail().normalizeEmail(),
+  body('password').isLength({ min: 8 }),
+  body('nickname').trim().isLength({ min: 2, max: 30 }),
+], async (req, res) => {
+  const errors = validationResult(req);
+  if (!errors.isEmpty()) return res.status(400).json({ error: errors.array()[0].msg });
+
+  const { email, password, nickname } = req.body;
+  try {
+    const exists = await prisma.user.findFirst({
+      where: { OR: [{ email }, { nickname }] },
+    });
+    if (exists) {
+      const field = exists.email === email ? '이메일' : '닉네임';
+      return res.status(409).json({ error: `이미 사용 중인 ${field}입니다` });
+    }
+
+    const passwordHash = await bcrypt.hash(password, 12);
+    const user = await prisma.user.create({
+      data: { email, passwordHash, nickname },
+    });
+
+    await writeAuditLog({ userId: user.id, action: 'REGISTER', req, responseStatus: 201 });
+    const token = signToken(user);
+    res.status(201).json({ token, user: { id: user.id, email: user.email, nickname: user.nickname, role: user.role } });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// POST /api/auth/login
+router.post('/login', [
+  body('email').isEmail().normalizeEmail(),
+  body('password').notEmpty(),
+], async (req, res) => {
+  const errors = validationResult(req);
+  if (!errors.isEmpty()) return res.status(400).json({ error: errors.array()[0].msg });
+
+  const { email, password } = req.body;
+  try {
+    const user = await prisma.user.findUnique({ where: { email } });
+    if (!user || !await bcrypt.compare(password, user.passwordHash)) {
+      await writeAuditLog({ action: 'LOGIN_FAIL', req, metadata: { email }, responseStatus: 401 });
+      return res.status(401).json({ error: '이메일 또는 비밀번호가 올바르지 않습니다' });
+    }
+    if (!user.isActive) return res.status(403).json({ error: '비활성화된 계정입니다' });
+
+    await prisma.user.update({
+      where: { id: user.id },
+      data: { lastLoginAt: new Date(), lastLoginIp: req.ip },
+    });
+
+    await writeAuditLog({ userId: user.id, action: 'LOGIN', req, responseStatus: 200 });
+    const token = signToken(user);
+    res.json({ token, user: { id: user.id, email: user.email, nickname: user.nickname, role: user.role } });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// POST /api/auth/logout
+router.post('/logout', requireAuth, async (req, res) => {
+  try {
+    // 토큰 남은 TTL만큼 블랙리스트에 등록
+    const decoded = jwt.decode(req.token);
+    const ttl = decoded.exp - Math.floor(Date.now() / 1000);
+    if (ttl > 0) await redis.set(`bl:${req.token}`, '1', 'EX', ttl);
+    await writeAuditLog({ userId: req.user.id, action: 'LOGOUT', req, responseStatus: 200 });
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// GET /api/auth/me
+router.get('/me', requireAuth, async (req, res) => {
+  try {
+    const user = await prisma.user.findUnique({
+      where: { id: req.user.id },
+      select: { id: true, email: true, nickname: true, role: true, profileImageUrl: true, createdAt: true },
+    });
+    if (!user) return res.status(404).json({ error: '사용자를 찾을 수 없습니다' });
+    res.json(user);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// PUT /api/auth/me (프로필 업데이트)
+router.put('/me', requireAuth, [
+  body('nickname').optional().trim().isLength({ min: 2, max: 30 }),
+], async (req, res) => {
+  const errors = validationResult(req);
+  if (!errors.isEmpty()) return res.status(400).json({ error: errors.array()[0].msg });
+
+  const { nickname } = req.body;
+  try {
+    if (nickname) {
+      const dup = await prisma.user.findFirst({ where: { nickname, NOT: { id: req.user.id } } });
+      if (dup) return res.status(409).json({ error: '이미 사용 중인 닉네임입니다' });
+    }
+    const updated = await prisma.user.update({
+      where: { id: req.user.id },
+      data: { ...(nickname && { nickname }) },
+      select: { id: true, email: true, nickname: true, role: true },
+    });
+    res.json(updated);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+module.exports = router;

backend/src/routes/flash.js

@@ -0,0 +1,142 @@
+const router = require('express').Router();
+const prisma  = require('../config/db');
+const { writeAuditLog } = require('../middleware/audit');
+
+// FlashToken 포함 조회 헬퍼
+async function findToken(token) {
+  return prisma.flashToken.findUnique({
+    where: { token },
+    include: {
+      order: {
+        include: {
+          product: {
+            include: {
+              project: {
+                select: {
+                  id: true, title: true, chipFamily: true,
+                  files: {
+                    where: { fileType: 'firmware' },
+                    orderBy: { displayOrder: 'asc' },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+}
+
+// GET /api/flash/:token — 토큰 유효성 확인 (Flash 페이지, webflash 둘 다 사용)
+router.get('/:token', async (req, res) => {
+  try {
+    const ft = await findToken(req.params.token);
+    if (!ft) return res.status(404).json({ error: '유효하지 않은 토큰입니다' });
+
+    const expired = new Date() > new Date(ft.expiresAt);
+    const project = ft.order.product.project;
+
+    res.json({
+      valid:       !expired && !ft.isUsed,
+      isUsed:      ft.isUsed,
+      expired,
+      expiresAt:   ft.expiresAt,
+      productName: project.title,
+      chipFamily:  project.chipFamily,
+      hasFirmware: project.files.length > 0,
+      usedAt:      ft.usedAt,
+    });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// GET /api/flash/:token/manifest — esp-web-tools 매니페스트 반환
+// 브라우저에서 직접 fetch하므로 CORS 허용
+router.get('/:token/manifest', async (req, res) => {
+  try {
+    const ft = await findToken(req.params.token);
+    if (!ft) return res.status(404).json({ error: '유효하지 않은 토큰입니다' });
+
+    if (ft.isUsed) {
+      return res.status(410).json({ error: '이미 플래시에 사용된 토큰입니다' });
+    }
+    if (new Date() > new Date(ft.expiresAt)) {
+      return res.status(410).json({ error: '만료된 토큰입니다' });
+    }
+
+    const project = ft.order.product.project;
+    if (!project.files.length) {
+      return res.status(404).json({ error: '펌웨어 파일이 없습니다. 판매자에게 문의하세요.' });
+    }
+
+    const manifest = {
+      name:                     project.title,
+      new_install_improv_wait_ms: 0,
+      builds: [{
+        chipFamily: project.chipFamily,
+        parts: project.files.map(f => ({
+          path:   f.url,
+          offset: parseInt(f.flashOffset || '0x0', 16),
+        })),
+      }],
+    };
+
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Content-Type', 'application/json');
+    res.json(manifest);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// POST /api/flash/:token/consume — 플래시 완료 기록
+// esp-web-tools 또는 플래시 페이지에서 호출
+router.post('/:token/consume', async (req, res) => {
+  try {
+    const ft = await findToken(req.params.token);
+    if (!ft) return res.status(404).json({ error: '유효하지 않은 토큰입니다' });
+    if (ft.isUsed)              return res.status(410).json({ error: '이미 사용된 토큰입니다' });
+    if (new Date() > new Date(ft.expiresAt)) return res.status(410).json({ error: '만료된 토큰입니다' });
+
+    const { mac = 'unknown', chipFamily, success = true, errorMessage } = req.body;
+    const project = ft.order.product.project;
+
+    await prisma.$transaction([
+      prisma.flashToken.update({
+        where: { id: ft.id },
+        data: { isUsed: true, usedAt: new Date(), macAddress: mac, chipFamily: chipFamily || project.chipFamily },
+      }),
+      prisma.flashLog.create({
+        data: {
+          flashTokenId: ft.id,
+          macAddress:   mac,
+          chipFamily:   chipFamily || project.chipFamily,
+          firmwareName: project.title,
+          firmwareId:   project.id,
+          success:      Boolean(success),
+          errorMessage: errorMessage || null,
+          clientIp:     req.ip || 'unknown',
+          userAgent:    req.headers['user-agent'] || null,
+        },
+      }),
+    ]);
+
+    await writeAuditLog({
+      userId: ft.order.buyerId,
+      action: success ? 'FLASH_SUCCESS' : 'FLASH_FAIL',
+      targetType: 'FlashToken', targetId: ft.id,
+      req, metadata: { mac, chipFamily, firmwareId: project.id }, responseStatus: 200,
+    });
+
+    res.json({ success: true, message: success ? '플래시 완료 기록됨' : '실패 기록됨' });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+module.exports = router;

backend/src/routes/orders.js

@@ -0,0 +1,195 @@
+const router = require('express').Router();
+const { v4: uuidv4 } = require('uuid');
+const prisma = require('../config/db');
+const { requireAuth, requireRole } = require('../middleware/auth');
+const { writeAuditLog } = require('../middleware/audit');
+
+// POST /api/orders — 주문 생성 (결제 전)
+router.post('/', requireAuth, async (req, res) => {
+  const { productId } = req.body;
+  if (!productId) return res.status(400).json({ error: 'productId가 필요합니다' });
+
+  try {
+    const product = await prisma.product.findUnique({
+      where: { id: productId },
+      include: { project: { select: { commissionRate: true, userId: true } } },
+    });
+    if (!product) return res.status(404).json({ error: '상품을 찾을 수 없습니다' });
+    if (!product.isOnSale) return res.status(400).json({ error: '판매 중지된 상품입니다' });
+    if (product.project.userId === req.user.id) return res.status(400).json({ error: '자신의 상품은 구매할 수 없습니다' });
+
+    // 이미 유효한 주문이 있는지 확인 (중복 구매 방지)
+    const existing = await prisma.order.findFirst({
+      where: { buyerId: req.user.id, productId, status: { in: ['pending', 'paid'] } },
+      include: { flashToken: true },
+    });
+    if (existing?.status === 'paid') {
+      return res.status(409).json({
+        error: '이미 구매한 상품입니다',
+        flashToken: existing.flashToken?.token,
+        orderId: existing.id,
+      });
+    }
+    if (existing?.status === 'pending') {
+      return res.json({ orderId: existing.id, amount: existing.amount, status: 'pending' });
+    }
+
+    const commissionAmount = Math.round(product.price * product.project.commissionRate);
+    const sellerAmount     = product.price - commissionAmount;
+
+    const order = await prisma.order.create({
+      data: {
+        buyerId:          req.user.id,
+        productId,
+        amount:           product.price,
+        commissionAmount,
+        sellerAmount,
+        paymentGateway:   'toss',
+        tossOrderId:      `mock_${uuidv4()}`,
+        buyerInfo:        { email: req.user.email, nickname: req.user.nickname },
+        deviceInfo:       { ip: req.ip, userAgent: req.headers['user-agent'] },
+      },
+    });
+
+    await writeAuditLog({ userId: req.user.id, action: 'ORDER_CREATE', targetType: 'Order', targetId: order.id, req, responseStatus: 201 });
+    res.status(201).json({ orderId: order.id, amount: order.amount, status: 'pending' });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// POST /api/orders/:id/mock-pay — 모의 결제 (사업자 등록 전 테스트용)
+// 실제 결제 없이 즉시 paid 처리하고 FlashToken 발급
+router.post('/:id/mock-pay', requireAuth, async (req, res) => {
+  try {
+    const order = await prisma.order.findUnique({
+      where: { id: req.params.id },
+      include: { flashToken: true },
+    });
+    if (!order) return res.status(404).json({ error: '주문을 찾을 수 없습니다' });
+    if (order.buyerId !== req.user.id) return res.status(403).json({ error: '권한이 없습니다' });
+    if (order.status === 'paid') {
+      return res.json({ flashToken: order.flashToken?.token, orderId: order.id, alreadyPaid: true });
+    }
+    if (order.status !== 'pending') {
+      return res.status(400).json({ error: `${order.status} 상태의 주문은 결제할 수 없습니다` });
+    }
+
+    const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000); // 30일
+
+    const [updatedOrder, flashToken] = await prisma.$transaction([
+      prisma.order.update({
+        where: { id: order.id },
+        data: { status: 'paid', paidAt: new Date(), paymentKey: `mock_${uuidv4()}` },
+      }),
+      prisma.flashToken.create({
+        data: { orderId: order.id, expiresAt },
+      }),
+      prisma.product.update({
+        where: { id: order.productId },
+        data: { totalSales: { increment: 1 } },
+      }),
+    ]);
+
+    await writeAuditLog({
+      userId: req.user.id, action: 'MOCK_PAYMENT',
+      targetType: 'Order', targetId: order.id,
+      req, metadata: { amount: order.amount, mode: 'mock' }, responseStatus: 200,
+    });
+
+    res.json({ flashToken: flashToken.token, orderId: order.id, expiresAt: flashToken.expiresAt });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// GET /api/orders/me — 내 주문 목록
+router.get('/me', requireAuth, async (req, res) => {
+  try {
+    const orders = await prisma.order.findMany({
+      where: { buyerId: req.user.id },
+      orderBy: { orderedAt: 'desc' },
+      include: {
+        product: {
+          select: {
+            id: true, price: true,
+            project: { select: { title: true, chipFamily: true, files: { where: { fileType: 'image' }, take: 1 } } },
+          },
+        },
+        flashToken: { select: { token: true, isUsed: true, expiresAt: true } },
+        review: { select: { id: true } },
+      },
+    });
+    res.json(orders);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// GET /api/orders/:id
+router.get('/:id', requireAuth, async (req, res) => {
+  try {
+    const order = await prisma.order.findUnique({
+      where: { id: req.params.id },
+      include: {
+        product: { include: { project: true } },
+        flashToken: true,
+      },
+    });
+    if (!order) return res.status(404).json({ error: '주문을 찾을 수 없습니다' });
+    if (order.buyerId !== req.user.id && req.user.role !== 'admin') {
+      return res.status(403).json({ error: '권한이 없습니다' });
+    }
+    res.json(order);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// POST /api/orders/:id/refund — 환불 (모의 / 플래시 미완료 시만)
+router.post('/:id/refund', requireAuth, async (req, res) => {
+  try {
+    const order = await prisma.order.findUnique({
+      where: { id: req.params.id },
+      include: { flashToken: true },
+    });
+    if (!order) return res.status(404).json({ error: '주문을 찾을 수 없습니다' });
+    if (order.buyerId !== req.user.id && req.user.role !== 'admin') {
+      return res.status(403).json({ error: '권한이 없습니다' });
+    }
+    if (order.status !== 'paid') return res.status(400).json({ error: '결제 완료 상태가 아닙니다' });
+    if (order.flashToken?.isUsed && req.user.role !== 'admin') {
+      return res.status(400).json({ error: '플래시가 완료된 주문은 환불할 수 없습니다' });
+    }
+
+    await prisma.$transaction([
+      prisma.order.update({
+        where: { id: order.id },
+        data: { status: 'refunded', refundedAt: new Date(), refundReason: req.body.reason || '사용자 요청' },
+      }),
+      // FlashToken 무효화
+      ...(order.flashToken ? [prisma.flashToken.update({
+        where: { id: order.flashToken.id },
+        data: { expiresAt: new Date() },
+      })] : []),
+      prisma.product.update({
+        where: { id: order.productId },
+        data: { totalSales: { decrement: 1 } },
+      }),
+    ]);
+
+    await writeAuditLog({
+      userId: req.user.id, action: 'REFUND',
+      targetType: 'Order', targetId: order.id,
+      req, responseStatus: 200,
+    });
+    res.json({ success: true });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+module.exports = router;

backend/src/routes/products.js

@@ -0,0 +1,114 @@
+const router = require('express').Router();
+const prisma = require('../config/db');
+const { requireAuth, requireRole } = require('../middleware/auth');
+
+// GET /api/products — 판매 중인 상품 목록
+router.get('/', async (req, res) => {
+  try {
+    const page  = Math.max(1, parseInt(req.query.page) || 1);
+    const limit = Math.min(50, parseInt(req.query.limit) || 20);
+    const skip  = (page - 1) * limit;
+
+    const sortMap = {
+      'newest':    { createdAt: 'desc' },
+      'popular':   { totalSales: 'desc' },
+      'price_asc': { price: 'asc' },
+      'price_desc':{ price: 'desc' },
+    };
+    const orderBy = sortMap[req.query.sort] || sortMap.newest;
+
+    const [products, total] = await Promise.all([
+      prisma.product.findMany({
+        where: { isOnSale: true, project: { status: 'approved' } },
+        skip, take: limit, orderBy,
+        include: {
+          project: {
+            select: {
+              id: true, title: true, description: true, difficultyLevel: true,
+              user: { select: { nickname: true } },
+              files: { where: { fileType: 'image' }, take: 1, orderBy: { displayOrder: 'asc' } },
+            },
+          },
+          reviews: { where: { isVisible: true }, select: { rating: true } },
+        },
+      }),
+      prisma.product.count({ where: { isOnSale: true, project: { status: 'approved' } } }),
+    ]);
+
+    // 평점 계산
+    const enriched = products.map(p => ({
+      ...p,
+      avgRating: p.reviews.length
+        ? +(p.reviews.reduce((s, r) => s + r.rating, 0) / p.reviews.length).toFixed(1)
+        : null,
+      reviewCount: p.reviews.length,
+      reviews: undefined,
+    }));
+
+    res.json({ products: enriched, total, page, pages: Math.ceil(total / limit) });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// GET /api/products/:id — 상품 상세
+router.get('/:id', async (req, res) => {
+  try {
+    const product = await prisma.product.findUnique({
+      where: { id: req.params.id },
+      include: {
+        project: {
+          include: {
+            user: { select: { nickname: true } },
+            files: { orderBy: { displayOrder: 'asc' } },
+          },
+        },
+        reviews: {
+          where: { isVisible: true },
+          orderBy: { createdAt: 'desc' },
+          take: 20,
+          include: {
+            user: { select: { nickname: true } },
+            media: true,
+          },
+        },
+      },
+    });
+    if (!product) return res.status(404).json({ error: '상품을 찾을 수 없습니다' });
+
+    const avgRating = product.reviews.length
+      ? +(product.reviews.reduce((s, r) => s + r.rating, 0) / product.reviews.length).toFixed(1)
+      : null;
+
+    res.json({ ...product, avgRating, reviewCount: product.reviews.length });
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// PUT /api/products/:id/toggle — 판매 일시중지/재개
+router.put('/:id/toggle', requireAuth, async (req, res) => {
+  try {
+    const product = await prisma.product.findUnique({
+      where: { id: req.params.id },
+      include: { project: { select: { userId: true } } },
+    });
+    if (!product) return res.status(404).json({ error: '상품을 찾을 수 없습니다' });
+
+    const isOwner = product.project.userId === req.user.id;
+    if (!isOwner && req.user.role !== 'admin') {
+      return res.status(403).json({ error: '권한이 없습니다' });
+    }
+
+    const updated = await prisma.product.update({
+      where: { id: req.params.id },
+      data: { isOnSale: !product.isOnSale },
+    });
+    res.json(updated);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+module.exports = router;

backend/src/routes/projects.js

@@ -0,0 +1,265 @@
+const router  = require('express').Router();
+const multer  = require('multer');
+const { body, validationResult } = require('express-validator');
+const prisma  = require('../config/db');
+const { requireAuth, requireRole } = require('../middleware/auth');
+const { writeAuditLog } = require('../middleware/audit');
+const { uploadImage, uploadRaw, deleteObject, IMAGE_TYPES } = require('../services/storage');
+
+const upload = multer({
+  storage: multer.memoryStorage(),
+  limits: { fileSize: 64 * 1024 * 1024 }, // 64 MB
+});
+
+const FILE_WHITELIST = new Set([
+  'image/jpeg', 'image/png', 'image/webp',
+  'application/octet-stream',
+  'application/pdf',
+  'model/stl', 'application/sla',
+  'video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/webm',
+]);
+
+// ── 공개 라우트 ─────────────────────────────────────────────────────────────
+
+// GET /api/projects — 승인된 프로젝트 목록
+router.get('/', async (req, res) => {
+  try {
+    const page  = Math.max(1, parseInt(req.query.page) || 1);
+    const limit = Math.min(50, parseInt(req.query.limit) || 20);
+    const skip  = (page - 1) * limit;
+
+    const where = { status: 'approved' };
+    if (req.query.difficulty) where.difficultyLevel = parseInt(req.query.difficulty);
+
+    const [projects, total] = await Promise.all([
+      prisma.project.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+        include: {
+          user: { select: { id: true, nickname: true } },
+          files: { where: { fileType: 'image' }, take: 1, orderBy: { displayOrder: 'asc' } },
+          product: { select: { id: true, price: true, isOnSale: true, totalSales: true } },
+        },
+      }),
+      prisma.project.count({ where }),
+    ]);
+
+    res.json({ projects, total, page, pages: Math.ceil(total / limit) });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// GET /api/projects/:id — 프로젝트 상세
+router.get('/:id', async (req, res) => {
+  try {
+    const project = await prisma.project.findUnique({
+      where: { id: req.params.id },
+      include: {
+        user: { select: { id: true, nickname: true } },
+        files: { orderBy: { displayOrder: 'asc' } },
+        product: {
+          select: {
+            id: true, price: true, isOnSale: true, totalSales: true,
+            reviews: {
+              where: { isVisible: true },
+              select: { rating: true },
+            },
+          },
+        },
+      },
+    });
+    if (!project) return res.status(404).json({ error: '프로젝트를 찾을 수 없습니다' });
+    if (project.status !== 'approved') return res.status(403).json({ error: '비공개 프로젝트입니다' });
+    res.json(project);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// ── 인증 필요 라우트 ────────────────────────────────────────────────────────
+
+// GET /api/projects/my — 내 프로젝트 목록
+router.get('/my/list', requireAuth, async (req, res) => {
+  try {
+    const projects = await prisma.project.findMany({
+      where: { userId: req.user.id },
+      orderBy: { createdAt: 'desc' },
+      include: {
+        files: { where: { fileType: 'image' }, take: 1 },
+        product: { select: { id: true, price: true, totalSales: true } },
+      },
+    });
+    res.json(projects);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// POST /api/projects — 새 프로젝트 생성
+router.post('/', requireAuth, [
+  body('title').trim().isLength({ min: 2, max: 100 }),
+  body('description').trim().isLength({ min: 10 }),
+  body('difficultyLevel').optional().isInt({ min: 1, max: 5 }),
+], async (req, res) => {
+  const errors = validationResult(req);
+  if (!errors.isEmpty()) return res.status(400).json({ error: errors.array()[0].msg });
+
+  const { title, description, difficultyLevel, chipFamily, requiredParts } = req.body;
+  try {
+    const project = await prisma.project.create({
+      data: {
+        userId: req.user.id,
+        title,
+        description,
+        difficultyLevel: difficultyLevel ? parseInt(difficultyLevel) : 3,
+        chipFamily:      chipFamily || 'ESP32-S3',
+        requiredParts:   requiredParts || [],
+      },
+    });
+    await writeAuditLog({ userId: req.user.id, action: 'PROJECT_CREATE', targetType: 'Project', targetId: project.id, req, responseStatus: 201 });
+    res.status(201).json(project);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// PUT /api/projects/:id — 프로젝트 수정 (draft 상태만)
+router.put('/:id', requireAuth, async (req, res) => {
+  try {
+    const project = await prisma.project.findUnique({ where: { id: req.params.id } });
+    if (!project) return res.status(404).json({ error: '프로젝트를 찾을 수 없습니다' });
+    if (project.userId !== req.user.id && req.user.role !== 'admin') {
+      return res.status(403).json({ error: '권한이 없습니다' });
+    }
+    if (!['draft', 'rejected'].includes(project.status)) {
+      return res.status(400).json({ error: '승인 대기/완료 상태에서는 수정할 수 없습니다' });
+    }
+
+    const { title, description, difficultyLevel, chipFamily, requiredParts } = req.body;
+    const updated = await prisma.project.update({
+      where: { id: req.params.id },
+      data: {
+        ...(title && { title }),
+        ...(description && { description }),
+        ...(difficultyLevel && { difficultyLevel: parseInt(difficultyLevel) }),
+        ...(chipFamily && { chipFamily }),
+        ...(requiredParts !== undefined && { requiredParts }),
+      },
+    });
+    res.json(updated);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// DELETE /api/projects/:id
+router.delete('/:id', requireAuth, async (req, res) => {
+  try {
+    const project = await prisma.project.findUnique({
+      where: { id: req.params.id },
+      include: { files: true },
+    });
+    if (!project) return res.status(404).json({ error: '프로젝트를 찾을 수 없습니다' });
+    if (project.userId !== req.user.id && req.user.role !== 'admin') {
+      return res.status(403).json({ error: '권한이 없습니다' });
+    }
+
+    // MinIO 파일 삭제
+    await Promise.all(project.files.map(f => deleteObject(f.url)));
+    await prisma.project.delete({ where: { id: req.params.id } });
+    await writeAuditLog({ userId: req.user.id, action: 'PROJECT_DELETE', targetType: 'Project', targetId: req.params.id, req, responseStatus: 200 });
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// POST /api/projects/:id/submit — 검토 요청
+router.post('/:id/submit', requireAuth, async (req, res) => {
+  try {
+    const project = await prisma.project.findUnique({ where: { id: req.params.id } });
+    if (!project) return res.status(404).json({ error: '프로젝트를 찾을 수 없습니다' });
+    if (project.userId !== req.user.id) return res.status(403).json({ error: '권한이 없습니다' });
+    if (!['draft', 'rejected'].includes(project.status)) {
+      return res.status(400).json({ error: '이미 검토 요청 중이거나 승인된 프로젝트입니다' });
+    }
+
+    const updated = await prisma.project.update({
+      where: { id: req.params.id },
+      data: { status: 'pending', adminNote: null },
+    });
+    await writeAuditLog({ userId: req.user.id, action: 'PROJECT_SUBMIT', targetType: 'Project', targetId: project.id, req, responseStatus: 200 });
+    res.json(updated);
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+// POST /api/projects/:id/files — 파일 업로드
+router.post('/:id/files', requireAuth, upload.array('files', 10), async (req, res) => {
+  try {
+    const project = await prisma.project.findUnique({ where: { id: req.params.id } });
+    if (!project) return res.status(404).json({ error: '프로젝트를 찾을 수 없습니다' });
+    if (project.userId !== req.user.id) return res.status(403).json({ error: '권한이 없습니다' });
+    if (!req.files?.length) return res.status(400).json({ error: '파일이 없습니다' });
+
+    const fileType    = req.body.fileType    || 'image'; // image|video|stl|wiring|firmware
+    const flashOffset = req.body.flashOffset || '0x0';
+    const results  = [];
+
+    for (const file of req.files) {
+      let stored;
+      if (IMAGE_TYPES.has(file.mimetype)) {
+        stored = await uploadImage(file.buffer, file.originalname, `projects/${project.id}`);
+      } else {
+        stored = await uploadRaw(file.buffer, file.originalname, file.mimetype, `projects/${project.id}`);
+      }
+
+      const pf = await prisma.projectFile.create({
+        data: {
+          projectId:    project.id,
+          fileType,
+          url:          stored.url,
+          thumbnailUrl: stored.thumbnailUrl || null,
+          fileSize:     stored.fileSize,
+          mimeType:     stored.mimeType,
+          originalName: file.originalname,
+          flashOffset:  fileType === 'firmware' ? flashOffset : '0x0',
+          displayOrder: results.length,
+        },
+      });
+      results.push(pf);
+    }
+
+    res.status(201).json(results);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: '파일 업로드 실패: ' + err.message });
+  }
+});
+
+// DELETE /api/projects/:id/files/:fileId
+router.delete('/:id/files/:fileId', requireAuth, async (req, res) => {
+  try {
+    const file = await prisma.projectFile.findUnique({ where: { id: req.params.fileId } });
+    if (!file || file.projectId !== req.params.id) return res.status(404).json({ error: '파일을 찾을 수 없습니다' });
+
+    const project = await prisma.project.findUnique({ where: { id: req.params.id } });
+    if (project.userId !== req.user.id && req.user.role !== 'admin') {
+      return res.status(403).json({ error: '권한이 없습니다' });
+    }
+
+    await deleteObject(file.url);
+    if (file.thumbnailUrl) await deleteObject(file.thumbnailUrl);
+    await prisma.projectFile.delete({ where: { id: req.params.fileId } });
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: '서버 오류' });
+  }
+});
+
+module.exports = router;

backend/src/scripts/createAdmin.js

@@ -0,0 +1,22 @@
+// 관리자 계정 초기 생성 스크립트
+// 사용: node src/scripts/createAdmin.js admin@example.com password123 관리자
+const bcrypt = require('bcryptjs');
+const prisma  = require('../config/db');
+
+async function main() {
+  const [,, email, password, nickname] = process.argv;
+  if (!email || !password || !nickname) {
+    console.error('사용법: node src/scripts/createAdmin.js <email> <password> <nickname>');
+    process.exit(1);
+  }
+  const passwordHash = await bcrypt.hash(password, 12);
+  const user = await prisma.user.upsert({
+    where: { email },
+    update: { passwordHash, role: 'admin', nickname },
+    create: { email, passwordHash, nickname, role: 'admin', isEmailVerified: true },
+  });
+  console.log(`관리자 계정 생성/업데이트: ${user.email} (${user.id})`);
+  await prisma.$disconnect();
+}
+
+main().catch(e => { console.error(e); process.exit(1); });

backend/src/services/storage.js

@@ -0,0 +1,68 @@
+const { client, BUCKET, publicUrl } = require('../config/minio');
+const sharp = require('sharp');
+const { v4: uuidv4 } = require('uuid');
+const path = require('path');
+
+const IMAGE_TYPES = new Set(['image/jpeg', 'image/png', 'image/webp', 'image/gif']);
+const BIN_TYPES   = new Set(['application/octet-stream']);
+
+// 이미지 업로드: WebP 변환 + 리사이즈
+async function uploadImage(buffer, originalName, folder = 'images') {
+  const id = uuidv4();
+  const objectName = `${folder}/${id}.webp`;
+  const thumbName  = `${folder}/${id}_thumb.webp`;
+
+  const [main, thumb] = await Promise.all([
+    sharp(buffer)
+      .resize(1920, 1080, { fit: 'inside', withoutEnlargement: true })
+      .webp({ quality: 82 })
+      .toBuffer(),
+    sharp(buffer)
+      .resize(400, 300, { fit: 'cover' })
+      .webp({ quality: 70 })
+      .toBuffer(),
+  ]);
+
+  await Promise.all([
+    client.putObject(BUCKET, objectName, main, main.length, { 'Content-Type': 'image/webp' }),
+    client.putObject(BUCKET, thumbName, thumb, thumb.length, { 'Content-Type': 'image/webp' }),
+  ]);
+
+  return {
+    url:          publicUrl(objectName),
+    thumbnailUrl: publicUrl(thumbName),
+    fileSize:     main.length,
+    mimeType:     'image/webp',
+  };
+}
+
+// 일반 파일 업로드 (bin, stl, pdf 등)
+async function uploadRaw(buffer, originalName, mimeType, folder = 'files') {
+  const ext        = path.extname(originalName).toLowerCase();
+  const id         = uuidv4();
+  const objectName = `${folder}/${id}${ext}`;
+
+  await client.putObject(BUCKET, objectName, buffer, buffer.length, {
+    'Content-Type': mimeType || 'application/octet-stream',
+  });
+
+  return {
+    url:      publicUrl(objectName),
+    fileSize: buffer.length,
+    mimeType: mimeType || 'application/octet-stream',
+  };
+}
+
+// 오브젝트 삭제
+async function deleteObject(url) {
+  try {
+    // URL에서 object name 추출: http://host:port/bucket/path/to/file
+    const parts = new URL(url).pathname.split('/').slice(2); // bucket 이후
+    const objectName = parts.join('/');
+    await client.removeObject(BUCKET, objectName);
+  } catch (err) {
+    console.error('MinIO delete error:', err.message);
+  }
+}
+
+module.exports = { uploadImage, uploadRaw, deleteObject, IMAGE_TYPES };

docker-compose.yml

@@ -0,0 +1,80 @@
+services:
+  platform-db:
+    image: postgres:16-alpine
+    restart: unless-stopped
+    volumes:
+      - platform-db-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_DB: platform
+      POSTGRES_USER: platform
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U platform"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  platform-redis:
+    image: redis:7-alpine
+    restart: unless-stopped
+    volumes:
+      - platform-redis-data:/data
+    command: redis-server --appendonly yes
+
+  platform-minio:
+    image: minio/minio:latest
+    restart: unless-stopped
+    volumes:
+      - platform-storage:/data
+    environment:
+      MINIO_ROOT_USER: ${MINIO_USER}
+      MINIO_ROOT_PASSWORD: ${MINIO_PASSWORD}
+    command: server /data --console-address ":9001"
+    healthcheck:
+      test: ["CMD", "mc", "ready", "local"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  platform-backend:
+    build: ./backend
+    restart: unless-stopped
+    ports:
+      - "3201:3201"
+    depends_on:
+      platform-db:
+        condition: service_healthy
+      platform-redis:
+        condition: service_started
+      platform-minio:
+        condition: service_started
+    environment:
+      PORT: 3201
+      DATABASE_URL: postgresql://platform:${DB_PASSWORD}@platform-db:5432/platform
+      REDIS_URL: redis://platform-redis:6379
+      MINIO_ENDPOINT: platform-minio
+      MINIO_PORT: "9000"
+      MINIO_ACCESS_KEY: ${MINIO_USER}
+      MINIO_SECRET_KEY: ${MINIO_PASSWORD}
+      MINIO_BUCKET: platform
+      MINIO_USE_SSL: "false"
+      JWT_SECRET: ${JWT_SECRET}
+      JWT_EXPIRES_IN: 7d
+      TOSS_CLIENT_KEY: ${TOSS_CLIENT_KEY:-test_ck_placeholder}
+      TOSS_SECRET_KEY: ${TOSS_SECRET_KEY:-test_sk_placeholder}
+      BASE_URL: ${BASE_URL:-http://localhost:3200}
+      WEBFLASH_INTERNAL_TOKEN: ${WEBFLASH_INTERNAL_TOKEN}
+      NODE_ENV: production
+
+  platform-frontend:
+    build: ./frontend
+    restart: unless-stopped
+    ports:
+      - "3200:80"
+    depends_on:
+      - platform-backend
+
+volumes:
+  platform-db-data:
+  platform-redis-data:
+  platform-storage:

frontend/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ESP32 DIY 플랫폼</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/nginx.conf

@@ -0,0 +1,36 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    client_max_body_size 512M;
+
+    # React SPA — 모든 경로를 index.html로 fallback
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # 백엔드 API 프록시
+    location /api/ {
+        proxy_pass         http://platform-backend:3201/api/;
+        proxy_set_header   Host              $host;
+        proxy_set_header   X-Real-IP         $remote_addr;
+        proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
+        proxy_set_header   X-Forwarded-Proto $scheme;
+        proxy_read_timeout 300s;
+        proxy_send_timeout 300s;
+    }
+
+    # 정적 에셋 캐시
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp|woff2?)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # gzip 압축
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
+    gzip_min_length 1000;
+}

frontend/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "platform-frontend",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.1"
+  }
+}

frontend/src/App.jsx

@@ -0,0 +1,76 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './hooks/useAuth';
+import Navbar from './components/Navbar';
+
+import Home            from './pages/Home';
+import Flash           from './pages/Flash';
+import Projects        from './pages/Projects';
+import ProjectDetail   from './pages/ProjectDetail';
+import Shop            from './pages/Shop';
+import ProductDetail   from './pages/ProductDetail';
+import Login           from './pages/Auth/Login';
+import Register        from './pages/Auth/Register';
+import Dashboard       from './pages/Dashboard/Index';
+import ProjectNew      from './pages/Dashboard/ProjectNew';
+import ProjectEdit     from './pages/Dashboard/ProjectEdit';
+import MyOrders        from './pages/Dashboard/MyOrders';
+import MySales         from './pages/Dashboard/MySales';
+import AdminIndex      from './pages/Admin/Index';
+import AdminProjects   from './pages/Admin/Projects';
+import AdminUsers      from './pages/Admin/Users';
+import AdminLogs       from './pages/Admin/Logs';
+
+function RequireAuth({ children }) {
+  const { user, loading } = useAuth();
+  if (loading) return <div className="spinner" />;
+  if (!user) return <Navigate to="/auth/login" replace />;
+  return children;
+}
+
+function RequireAdmin({ children }) {
+  const { user, loading } = useAuth();
+  if (loading) return <div className="spinner" />;
+  if (!user || user.role !== 'admin') return <Navigate to="/" replace />;
+  return children;
+}
+
+function AppRoutes() {
+  return (
+    <>
+      <Navbar />
+      <Routes>
+        <Route path="/"                  element={<Home />} />
+        <Route path="/projects"          element={<Projects />} />
+        <Route path="/projects/:id"      element={<ProjectDetail />} />
+        <Route path="/shop"              element={<Shop />} />
+        <Route path="/shop/:id"          element={<ProductDetail />} />
+        <Route path="/auth/login"        element={<Login />} />
+        <Route path="/auth/register"     element={<Register />} />
+
+        <Route path="/dashboard" element={<RequireAuth><Dashboard /></RequireAuth>} />
+        <Route path="/dashboard/projects/new"  element={<RequireAuth><ProjectNew /></RequireAuth>} />
+        <Route path="/dashboard/projects/:id"  element={<RequireAuth><ProjectEdit /></RequireAuth>} />
+        <Route path="/dashboard/orders"        element={<RequireAuth><MyOrders /></RequireAuth>} />
+        <Route path="/dashboard/sales"         element={<RequireAuth><MySales /></RequireAuth>} />
+        <Route path="/flash/:token"            element={<RequireAuth><Flash /></RequireAuth>} />
+
+        <Route path="/admin"          element={<RequireAdmin><AdminIndex /></RequireAdmin>} />
+        <Route path="/admin/projects" element={<RequireAdmin><AdminProjects /></RequireAdmin>} />
+        <Route path="/admin/users"    element={<RequireAdmin><AdminUsers /></RequireAdmin>} />
+        <Route path="/admin/logs"     element={<RequireAdmin><AdminLogs /></RequireAdmin>} />
+
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </>
+  );
+}
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <BrowserRouter>
+        <AppRoutes />
+      </BrowserRouter>
+    </AuthProvider>
+  );
+}

frontend/src/api/client.js

@@ -0,0 +1,28 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: '/api',
+  timeout: 30000,
+});
+
+// 요청마다 JWT 토큰 자동 첨부
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) config.headers.Authorization = `Bearer ${token}`;
+  return config;
+});
+
+// 401 응답 시 로그아웃 처리
+api.interceptors.response.use(
+  (res) => res,
+  (err) => {
+    if (err.response?.status === 401) {
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      window.location.href = '/auth/login';
+    }
+    return Promise.reject(err);
+  }
+);
+
+export default api;

frontend/src/components/Navbar.jsx

@@ -0,0 +1,43 @@
+import { NavLink, useNavigate } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+
+export default function Navbar() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  async function handleLogout() {
+    await logout();
+    navigate('/');
+  }
+
+  return (
+    <nav className="navbar">
+      <div className="navbar-inner">
+        <NavLink to="/" className="navbar-brand">
+          ESP32 DIY <span>플랫폼</span>
+        </NavLink>
+        <div className="navbar-links">
+          <NavLink to="/projects">프로젝트</NavLink>
+          <NavLink to="/shop">상점</NavLink>
+          {user && <NavLink to="/dashboard">대시보드</NavLink>}
+          {user?.role === 'admin' && <NavLink to="/admin">관리자</NavLink>}
+        </div>
+        <div className="navbar-right">
+          {user ? (
+            <>
+              <span style={{ color: 'var(--text2)', fontSize: 13, alignSelf: 'center' }}>
+                {user.nickname}
+              </span>
+              <button className="btn btn-outline btn-sm" onClick={handleLogout}>로그아웃</button>
+            </>
+          ) : (
+            <>
+              <NavLink to="/auth/login" className="btn btn-outline btn-sm">로그인</NavLink>
+              <NavLink to="/auth/register" className="btn btn-primary btn-sm">회원가입</NavLink>
+            </>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}

frontend/src/hooks/useAuth.js

@@ -0,0 +1,2 @@
+// JSX가 없는 순수 re-export — Vite build-import-analysis 통과용
+export { AuthProvider, useAuth } from './useAuth.jsx';

frontend/src/hooks/useAuth.jsx

@@ -0,0 +1,53 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import api from '../api/client';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser]       = useState(() => {
+    try { return JSON.parse(localStorage.getItem('user')); } catch { return null; }
+  });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (!token) { setLoading(false); return; }
+    api.get('/auth/me')
+      .then(r => { setUser(r.data); localStorage.setItem('user', JSON.stringify(r.data)); })
+      .catch(() => { localStorage.removeItem('token'); localStorage.removeItem('user'); setUser(null); })
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function login(email, password) {
+    const { data } = await api.post('/auth/login', { email, password });
+    localStorage.setItem('token', data.token);
+    localStorage.setItem('user', JSON.stringify(data.user));
+    setUser(data.user);
+    return data.user;
+  }
+
+  async function register(email, password, nickname) {
+    const { data } = await api.post('/auth/register', { email, password, nickname });
+    localStorage.setItem('token', data.token);
+    localStorage.setItem('user', JSON.stringify(data.user));
+    setUser(data.user);
+    return data.user;
+  }
+
+  async function logout() {
+    try { await api.post('/auth/logout'); } catch {}
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    setUser(null);
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

frontend/src/index.css

@@ -0,0 +1,237 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:       #0f1117;
+  --bg2:      #1a1d2e;
+  --bg3:      #252840;
+  --border:   #2e3150;
+  --text:     #e2e8f0;
+  --text2:    #94a3b8;
+  --accent:   #6366f1;
+  --accent2:  #818cf8;
+  --success:  #22c55e;
+  --warn:     #f59e0b;
+  --danger:   #ef4444;
+  --radius:   8px;
+  --shadow:   0 2px 12px rgba(0,0,0,.4);
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+a { color: var(--accent2); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* Layout */
+.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
+.page { padding: 32px 0; }
+
+/* Navbar */
+.navbar {
+  background: var(--bg2);
+  border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; z-index: 100;
+}
+.navbar-inner {
+  display: flex; align-items: center; gap: 24px;
+  max-width: 1100px; margin: 0 auto; padding: 0 16px;
+  height: 56px;
+}
+.navbar-brand { font-weight: 700; font-size: 18px; color: var(--accent2); }
+.navbar-brand span { color: var(--text2); font-weight: 400; font-size: 13px; }
+.navbar-links { display: flex; gap: 8px; flex: 1; }
+.navbar-links a {
+  padding: 6px 12px; border-radius: var(--radius);
+  color: var(--text2); font-size: 14px;
+  transition: background .15s, color .15s;
+}
+.navbar-links a:hover, .navbar-links a.active {
+  background: var(--bg3); color: var(--text); text-decoration: none;
+}
+.navbar-right { display: flex; gap: 8px; margin-left: auto; }
+
+/* Buttons */
+.btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px; border-radius: var(--radius);
+  font-size: 14px; font-weight: 500; border: none;
+  cursor: pointer; transition: opacity .15s, transform .1s;
+  white-space: nowrap;
+}
+.btn:hover { opacity: .85; }
+.btn:active { transform: scale(.97); }
+.btn-primary  { background: var(--accent); color: #fff; }
+.btn-outline  { background: transparent; border: 1px solid var(--border); color: var(--text); }
+.btn-danger   { background: var(--danger); color: #fff; }
+.btn-success  { background: var(--success); color: #fff; }
+.btn-sm { padding: 4px 10px; font-size: 13px; }
+.btn:disabled { opacity: .4; cursor: not-allowed; }
+
+/* Cards */
+.card {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+}
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+.project-card {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  transition: border-color .2s, transform .2s;
+  cursor: pointer;
+}
+.project-card:hover { border-color: var(--accent); transform: translateY(-2px); }
+.project-card img {
+  width: 100%; height: 180px; object-fit: cover;
+  background: var(--bg3);
+}
+.project-card-body { padding: 16px; }
+.project-card-title { font-weight: 600; margin-bottom: 6px; }
+.project-card-meta { color: var(--text2); font-size: 13px; display: flex; gap: 12px; }
+
+/* Forms */
+.form-group { margin-bottom: 16px; }
+label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text2); }
+input, textarea, select {
+  width: 100%;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  padding: 9px 12px;
+  font-size: 14px;
+  transition: border-color .15s;
+}
+input:focus, textarea:focus, select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+textarea { resize: vertical; min-height: 100px; }
+
+/* Alerts */
+.alert {
+  padding: 12px 16px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+.alert-error   { background: rgba(239,68,68,.15); border: 1px solid var(--danger); color: #fca5a5; }
+.alert-success { background: rgba(34,197,94,.15); border: 1px solid var(--success); color: #86efac; }
+.alert-warn    { background: rgba(245,158,11,.15); border: 1px solid var(--warn); color: #fcd34d; }
+.alert-info    { background: rgba(99,102,241,.15); border: 1px solid var(--accent); color: var(--accent2); }
+
+/* Badge */
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 99px;
+  font-size: 12px;
+  font-weight: 500;
+}
+.badge-pending   { background: rgba(245,158,11,.2); color: var(--warn); }
+.badge-approved  { background: rgba(34,197,94,.2); color: var(--success); }
+.badge-rejected  { background: rgba(239,68,68,.2); color: var(--danger); }
+.badge-draft     { background: rgba(148,163,184,.2); color: var(--text2); }
+.badge-suspended { background: rgba(239,68,68,.2); color: var(--danger); }
+
+/* Table */
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; }
+th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
+th { color: var(--text2); font-weight: 500; background: var(--bg3); }
+tr:hover td { background: rgba(255,255,255,.02); }
+
+/* Pagination */
+.pagination { display: flex; gap: 6px; margin-top: 24px; justify-content: center; }
+.pagination button {
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  background: var(--bg2);
+  border-radius: var(--radius);
+  color: var(--text);
+  cursor: pointer;
+  font-size: 13px;
+}
+.pagination button.active { background: var(--accent); border-color: var(--accent); }
+.pagination button:disabled { opacity: .4; cursor: not-allowed; }
+
+/* Misc */
+.stars { color: var(--warn); letter-spacing: 2px; }
+.divider { height: 1px; background: var(--border); margin: 20px 0; }
+.text-muted { color: var(--text2); }
+.text-center { text-align: center; }
+.mt-8 { margin-top: 8px; }
+.mt-16 { margin-top: 16px; }
+.mt-24 { margin-top: 24px; }
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.gap-8 { gap: 8px; }
+.gap-16 { gap: 16px; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+
+/* Loading spinner */
+.spinner {
+  width: 36px; height: 36px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin .7s linear infinite;
+  margin: 40px auto;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* File Drop Zone */
+.dropzone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius);
+  padding: 32px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color .2s;
+}
+.dropzone:hover, .dropzone.over { border-color: var(--accent); }
+.dropzone p { color: var(--text2); margin-top: 8px; font-size: 13px; }
+
+/* Sidebar layout */
+.layout-2col { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
+.sidebar {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 0;
+  height: fit-content;
+  position: sticky;
+  top: 72px;
+}
+.sidebar a {
+  display: block;
+  padding: 10px 20px;
+  color: var(--text2);
+  font-size: 14px;
+  transition: background .15s, color .15s;
+}
+.sidebar a:hover, .sidebar a.active {
+  background: var(--bg3);
+  color: var(--text);
+  text-decoration: none;
+}
+
+@media (max-width: 768px) {
+  .layout-2col { grid-template-columns: 1fr; }
+  .sidebar { position: static; display: flex; flex-wrap: wrap; }
+  .card-grid { grid-template-columns: 1fr; }
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/src/pages/Admin/Index.jsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import api from '../../api/client';
+
+export default function AdminIndex() {
+  const [stats, setStats] = useState(null);
+
+  useEffect(() => {
+    api.get('/admin/stats').then(r => setStats(r.data)).catch(() => {});
+  }, []);
+
+  const cards = stats ? [
+    { label: '총 사용자', value: stats.users.toLocaleString(), icon: '👤' },
+    { label: '전체 프로젝트', value: stats.projects.total.toLocaleString(), icon: '📁' },
+    { label: '승인 대기', value: stats.projects.pending.toLocaleString(), icon: '⏳', warn: stats.projects.pending > 0 },
+    { label: '총 매출', value: `₩${(stats.revenue.total || 0).toLocaleString()}`, icon: '💰' },
+    { label: '총 주문', value: stats.revenue.orders.toLocaleString(), icon: '🛒' },
+  ] : [];
+
+  return (
+    <div className="container page">
+      <h2 style={{ marginBottom: 24 }}>관리자 대시보드</h2>
+
+      {/* 통계 카드 */}
+      {stats && (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 16, marginBottom: 32 }}>
+          {cards.map(c => (
+            <div key={c.label} className="card" style={{ borderColor: c.warn ? 'var(--warn)' : undefined }}>
+              <div style={{ fontSize: 28, marginBottom: 8 }}>{c.icon}</div>
+              <div style={{ fontSize: 22, fontWeight: 700, color: c.warn ? 'var(--warn)' : 'var(--text)' }}>{c.value}</div>
+              <div className="text-muted" style={{ fontSize: 13 }}>{c.label}</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 빠른 메뉴 */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 }}>
+        {[
+          { to: '/admin/projects', icon: '📋', title: '프로젝트 승인', desc: '검토 대기 중인 프로젝트를 승인/반려' },
+          { to: '/admin/users', icon: '👥', title: '사용자 관리', desc: '사용자 목록, 역할 변경, 계정 비활성화' },
+          { to: '/admin/logs', icon: '📜', title: '감사 로그', desc: '모든 주요 행동 기록 조회' },
+        ].map(m => (
+          <Link key={m.to} to={m.to} style={{ textDecoration: 'none' }}>
+            <div className="card" style={{ cursor: 'pointer', transition: 'border-color .2s' }}
+              onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent)'}
+              onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
+              <div style={{ fontSize: 32, marginBottom: 8 }}>{m.icon}</div>
+              <div style={{ fontWeight: 600, marginBottom: 4 }}>{m.title}</div>
+              <div className="text-muted" style={{ fontSize: 13 }}>{m.desc}</div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Admin/Logs.jsx

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+import api from '../../api/client';
+
+const ACTION_COLORS = {
+  REGISTER: 'var(--success)', LOGIN: 'var(--success)', LOGIN_FAIL: 'var(--danger)',
+  LOGOUT: 'var(--text2)', PROJECT_CREATE: 'var(--accent2)', PROJECT_SUBMIT: 'var(--warn)',
+  PROJECT_DELETE: 'var(--danger)', ADMIN_APPROVE: 'var(--success)', ADMIN_REJECT: 'var(--danger)',
+  ADMIN_USER_DEACTIVATE: 'var(--danger)', ORDER_CREATE: 'var(--accent2)', PAYMENT_CONFIRM: 'var(--success)',
+};
+
+export default function AdminLogs() {
+  const [data, setData]   = useState({ logs: [], total: 0, pages: 1 });
+  const [page, setPage]   = useState(1);
+  const [filter, setFilter] = useState({ action: '', userId: '' });
+  const [loading, setLoading] = useState(true);
+
+  function load() {
+    setLoading(true);
+    const params = new URLSearchParams({ page, limit: 50 });
+    if (filter.action) params.set('action', filter.action);
+    if (filter.userId) params.set('userId', filter.userId);
+    api.get(`/admin/logs?${params}`)
+      .then(r => setData(r.data))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }
+
+  useEffect(() => { load(); }, [page]);
+
+  return (
+    <div className="container page">
+      <div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
+        <h2>감사 로그</h2>
+        <span className="text-muted" style={{ fontSize: 13 }}>총 {data.total.toLocaleString()}건</span>
+      </div>
+
+      <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
+        <input placeholder="Action 필터 (예: LOGIN)" value={filter.action}
+          onChange={e => setFilter(f => ({ ...f, action: e.target.value }))} style={{ maxWidth: 200 }} />
+        <input placeholder="User ID" value={filter.userId}
+          onChange={e => setFilter(f => ({ ...f, userId: e.target.value }))} style={{ maxWidth: 200 }} />
+        <button className="btn btn-outline" onClick={() => { setPage(1); load(); }}>검색</button>
+      </div>
+
+      {loading ? <div className="spinner" /> : (
+        <>
+          <div className="table-wrap">
+            <table>
+              <thead>
+                <tr><th>시간</th><th>Action</th><th>사용자</th><th>대상</th><th>IP</th><th>상태</th></tr>
+              </thead>
+              <tbody>
+                {data.logs.map(log => (
+                  <tr key={log.id}>
+                    <td style={{ fontSize: 12, color: 'var(--text2)', whiteSpace: 'nowrap' }}>
+                      {new Date(log.createdAt).toLocaleString('ko-KR')}
+                    </td>
+                    <td>
+                      <code style={{ fontSize: 12, color: ACTION_COLORS[log.action] || 'var(--text)', background: 'var(--bg3)', padding: '2px 6px', borderRadius: 4 }}>
+                        {log.action}
+                      </code>
+                    </td>
+                    <td style={{ fontSize: 12 }}>
+                      {log.user ? `${log.user.nickname} (${log.user.email})` : '-'}
+                    </td>
+                    <td style={{ fontSize: 12, color: 'var(--text2)' }}>
+                      {log.targetType ? `${log.targetType} ${log.targetId?.slice(0, 8)}...` : '-'}
+                    </td>
+                    <td style={{ fontSize: 12, color: 'var(--text2)' }}>{log.ipAddress}</td>
+                    <td>
+                      {log.responseStatus && (
+                        <span style={{ fontSize: 12, color: log.responseStatus < 400 ? 'var(--success)' : 'var(--danger)' }}>
+                          {log.responseStatus}
+                        </span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          {data.pages > 1 && (
+            <div className="pagination">
+              <button disabled={page <= 1} onClick={() => setPage(p => p - 1)}>이전</button>
+              {Array.from({ length: Math.min(data.pages, 10) }, (_, i) => (
+                <button key={i + 1} className={page === i + 1 ? 'active' : ''} onClick={() => setPage(i + 1)}>{i + 1}</button>
+              ))}
+              <button disabled={page >= data.pages} onClick={() => setPage(p => p + 1)}>다음</button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Admin/Projects.jsx

@@ -0,0 +1,132 @@
+import { useEffect, useState } from 'react';
+import api from '../../api/client';
+
+export default function AdminProjects() {
+  const [pending, setPending]     = useState([]);
+  const [selected, setSelected]   = useState(null);
+  const [approveForm, setApproveForm] = useState({ price: '', commissionRate: '0.1' });
+  const [rejectNote, setRejectNote] = useState('');
+  const [loading, setLoading]     = useState(true);
+  const [saving, setSaving]       = useState(false);
+  const [msg, setMsg]             = useState('');
+
+  useEffect(() => {
+    api.get('/admin/projects/pending')
+      .then(r => setPending(r.data))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function handleApprove() {
+    if (!approveForm.price) { setMsg('판매가를 입력해주세요'); return; }
+    setSaving(true);
+    try {
+      await api.post(`/admin/projects/${selected.id}/approve`, {
+        price: parseInt(approveForm.price),
+        commissionRate: parseFloat(approveForm.commissionRate),
+      });
+      setPending(p => p.filter(x => x.id !== selected.id));
+      setSelected(null);
+      setMsg('승인되었습니다');
+    } catch (err) {
+      setMsg(err.response?.data?.error || '오류 발생');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleReject() {
+    if (!rejectNote.trim()) { setMsg('반려 사유를 입력해주세요'); return; }
+    setSaving(true);
+    try {
+      await api.post(`/admin/projects/${selected.id}/reject`, { adminNote: rejectNote });
+      setPending(p => p.filter(x => x.id !== selected.id));
+      setSelected(null);
+      setRejectNote('');
+      setMsg('반려 처리되었습니다');
+    } catch (err) {
+      setMsg(err.response?.data?.error || '오류 발생');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) return <div className="spinner" />;
+
+  return (
+    <div className="container page">
+      <h2 style={{ marginBottom: 8 }}>프로젝트 승인 관리</h2>
+      <p className="text-muted" style={{ marginBottom: 24 }}>검토 대기 중인 프로젝트: {pending.length}건</p>
+
+      {msg && <div className="alert alert-info" onClick={() => setMsg('')}>{msg}</div>}
+
+      {pending.length === 0 ? (
+        <div className="card text-center" style={{ padding: 48 }}>
+          <p className="text-muted">검토 대기 중인 프로젝트가 없습니다.</p>
+        </div>
+      ) : (
+        <div style={{ display: 'grid', gridTemplateColumns: selected ? '1fr 1fr' : '1fr', gap: 20 }}>
+          {/* 목록 */}
+          <div>
+            {pending.map(p => (
+              <div key={p.id} className="card" style={{ marginBottom: 12, cursor: 'pointer', borderColor: selected?.id === p.id ? 'var(--accent)' : 'var(--border)' }}
+                onClick={() => { setSelected(p); setApproveForm({ price: '', commissionRate: '0.1' }); setRejectNote(''); }}>
+                <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
+                  {p.files[0] && (
+                    <img src={p.files[0].thumbnailUrl || p.files[0].url} alt=""
+                      style={{ width: 80, height: 60, objectFit: 'cover', borderRadius: 4, flexShrink: 0 }} />
+                  )}
+                  <div>
+                    <div style={{ fontWeight: 600 }}>{p.title}</div>
+                    <div className="text-muted" style={{ fontSize: 12 }}>
+                      by {p.user.nickname} · 파일 {p._count.files}개 ·{' '}
+                      {new Date(p.updatedAt).toLocaleDateString('ko-KR')}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* 상세 / 승인 패널 */}
+          {selected && (
+            <div className="card" style={{ height: 'fit-content', position: 'sticky', top: 80 }}>
+              <h3 style={{ marginBottom: 16 }}>{selected.title}</h3>
+              <p className="text-muted" style={{ fontSize: 13, marginBottom: 16, maxHeight: 120, overflow: 'auto' }}>
+                {selected.description}
+              </p>
+
+              <div className="divider" />
+              <h4 style={{ marginBottom: 12 }}>승인</h4>
+              <div className="form-group">
+                <label>판매가 (원)</label>
+                <input type="number" min="100" placeholder="예: 9900"
+                  value={approveForm.price} onChange={e => setApproveForm(f => ({ ...f, price: e.target.value }))} />
+              </div>
+              <div className="form-group">
+                <label>수수료율 (0.0 ~ 1.0)</label>
+                <input type="number" min="0" max="1" step="0.01"
+                  value={approveForm.commissionRate}
+                  onChange={e => setApproveForm(f => ({ ...f, commissionRate: e.target.value }))} />
+              </div>
+              <button className="btn btn-success" onClick={handleApprove} disabled={saving} style={{ width: '100%', marginBottom: 12, justifyContent: 'center' }}>
+                {saving ? '처리 중...' : '✓ 승인하기'}
+              </button>
+
+              <div className="divider" />
+              <h4 style={{ marginBottom: 12 }}>반려</h4>
+              <div className="form-group">
+                <label>반려 사유</label>
+                <textarea value={rejectNote} onChange={e => setRejectNote(e.target.value)} rows={3}
+                  placeholder="수정이 필요한 내용을 구체적으로 작성해주세요" />
+              </div>
+              <button className="btn btn-danger" onClick={handleReject} disabled={saving} style={{ width: '100%', justifyContent: 'center' }}>
+                {saving ? '처리 중...' : '✕ 반려하기'}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Admin/Users.jsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+import api from '../../api/client';
+
+export default function AdminUsers() {
+  const [data, setData]     = useState({ users: [], total: 0, pages: 1 });
+  const [page, setPage]     = useState(1);
+  const [q, setQ]           = useState('');
+  const [loading, setLoading] = useState(true);
+
+  function load() {
+    setLoading(true);
+    const params = new URLSearchParams({ page, limit: 30 });
+    if (q) params.set('q', q);
+    api.get(`/admin/users?${params}`)
+      .then(r => setData(r.data))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }
+
+  useEffect(() => { load(); }, [page]);
+
+  async function toggleActive(userId) {
+    await api.put(`/admin/users/${userId}/toggle`);
+    load();
+  }
+
+  async function changeRole(userId, role) {
+    if (!confirm(`역할을 "${role}"로 변경하시겠습니까?`)) return;
+    await api.put(`/admin/users/${userId}/role`, { role });
+    load();
+  }
+
+  return (
+    <div className="container page">
+      <h2 style={{ marginBottom: 20 }}>사용자 관리</h2>
+      <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
+        <input placeholder="이메일 또는 닉네임 검색" value={q}
+          onChange={e => setQ(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter') { setPage(1); load(); } }}
+          style={{ maxWidth: 280 }} />
+        <button className="btn btn-outline" onClick={() => { setPage(1); load(); }}>검색</button>
+      </div>
+
+      {loading ? <div className="spinner" /> : (
+        <>
+          <div className="table-wrap">
+            <table>
+              <thead>
+                <tr><th>이메일</th><th>닉네임</th><th>역할</th><th>상태</th><th>가입일</th><th>최근 로그인</th><th>역할 변경</th><th></th></tr>
+              </thead>
+              <tbody>
+                {data.users.map(u => (
+                  <tr key={u.id}>
+                    <td style={{ fontSize: 12 }}>{u.email}</td>
+                    <td>{u.nickname}</td>
+                    <td>
+                      <span className={`badge badge-${u.role === 'admin' ? 'approved' : u.role === 'seller' ? 'pending' : 'draft'}`}>
+                        {u.role}
+                      </span>
+                    </td>
+                    <td>
+                      <span style={{ color: u.isActive ? 'var(--success)' : 'var(--danger)', fontSize: 12 }}>
+                        {u.isActive ? '활성' : '비활성'}
+                      </span>
+                    </td>
+                    <td className="text-muted" style={{ fontSize: 12 }}>{new Date(u.createdAt).toLocaleDateString('ko-KR')}</td>
+                    <td className="text-muted" style={{ fontSize: 12 }}>
+                      {u.lastLoginAt ? new Date(u.lastLoginAt).toLocaleDateString('ko-KR') : '-'}
+                    </td>
+                    <td>
+                      <select defaultValue={u.role} onChange={e => changeRole(u.id, e.target.value)}
+                        style={{ width: 90, padding: '4px 8px', fontSize: 12 }}>
+                        <option value="buyer">buyer</option>
+                        <option value="seller">seller</option>
+                        <option value="admin">admin</option>
+                      </select>
+                    </td>
+                    <td>
+                      {u.role !== 'admin' && (
+                        <button className={`btn btn-sm ${u.isActive ? 'btn-danger' : 'btn-success'}`}
+                          onClick={() => toggleActive(u.id)}>
+                          {u.isActive ? '비활성화' : '활성화'}
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          {data.pages > 1 && (
+            <div className="pagination">
+              <button disabled={page <= 1} onClick={() => setPage(p => p - 1)}>이전</button>
+              {Array.from({ length: data.pages }, (_, i) => (
+                <button key={i + 1} className={page === i + 1 ? 'active' : ''} onClick={() => setPage(i + 1)}>{i + 1}</button>
+              ))}
+              <button disabled={page >= data.pages} onClick={() => setPage(p => p + 1)}>다음</button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Auth/Login.jsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+
+export default function Login() {
+  const [form, setForm]   = useState({ email: '', password: '' });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = location.state?.from || '/dashboard';
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login(form.email, form.password);
+      navigate(from, { replace: true });
+    } catch (err) {
+      setError(err.response?.data?.error || '로그인에 실패했습니다');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="container page" style={{ maxWidth: 400 }}>
+      <div className="card">
+        <h2 style={{ marginBottom: 24 }}>로그인</h2>
+        {error && <div className="alert alert-error">{error}</div>}
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label>이메일</label>
+            <input type="email" required value={form.email}
+              onChange={e => setForm(f => ({ ...f, email: e.target.value }))} />
+          </div>
+          <div className="form-group">
+            <label>비밀번호</label>
+            <input type="password" required value={form.password}
+              onChange={e => setForm(f => ({ ...f, password: e.target.value }))} />
+          </div>
+          <button className="btn btn-primary" style={{ width: '100%' }} disabled={loading}>
+            {loading ? '로그인 중...' : '로그인'}
+          </button>
+        </form>
+        <p className="text-muted mt-16 text-center" style={{ fontSize: 13 }}>
+          계정이 없으신가요? <Link to="/auth/register">회원가입</Link>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Auth/Register.jsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+
+export default function Register() {
+  const [form, setForm]   = useState({ email: '', password: '', nickname: '' });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { register } = useAuth();
+  const navigate = useNavigate();
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    if (form.password.length < 8) {
+      setError('비밀번호는 8자 이상이어야 합니다');
+      return;
+    }
+    setLoading(true);
+    try {
+      await register(form.email, form.password, form.nickname);
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.error || '회원가입에 실패했습니다');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="container page" style={{ maxWidth: 400 }}>
+      <div className="card">
+        <h2 style={{ marginBottom: 24 }}>회원가입</h2>
+        {error && <div className="alert alert-error">{error}</div>}
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label>이메일</label>
+            <input type="email" required value={form.email}
+              onChange={e => setForm(f => ({ ...f, email: e.target.value }))} />
+          </div>
+          <div className="form-group">
+            <label>닉네임 (2~30자)</label>
+            <input type="text" required minLength={2} maxLength={30} value={form.nickname}
+              onChange={e => setForm(f => ({ ...f, nickname: e.target.value }))} />
+          </div>
+          <div className="form-group">
+            <label>비밀번호 (8자 이상)</label>
+            <input type="password" required minLength={8} value={form.password}
+              onChange={e => setForm(f => ({ ...f, password: e.target.value }))} />
+          </div>
+          <button className="btn btn-primary" style={{ width: '100%' }} disabled={loading}>
+            {loading ? '처리 중...' : '회원가입'}
+          </button>
+        </form>
+        <p className="text-muted mt-16 text-center" style={{ fontSize: 13 }}>
+          이미 계정이 있으신가요? <Link to="/auth/login">로그인</Link>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Dashboard/Index.jsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+import api from '../../api/client';
+
+const STATUS_BADGE = {
+  draft:     <span className="badge badge-draft">임시저장</span>,
+  pending:   <span className="badge badge-pending">검토 대기</span>,
+  approved:  <span className="badge badge-approved">승인됨</span>,
+  rejected:  <span className="badge badge-rejected">반려됨</span>,
+  suspended: <span className="badge badge-suspended">정지됨</span>,
+};
+
+export default function Dashboard() {
+  const { user } = useAuth();
+  const [projects, setProjects] = useState([]);
+  const [loading, setLoading]   = useState(true);
+
+  useEffect(() => {
+    api.get('/projects/my/list')
+      .then(r => setProjects(r.data))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="container page">
+      <div className="flex items-center justify-between" style={{ marginBottom: 24 }}>
+        <div>
+          <h2 style={{ fontSize: 22 }}>내 대시보드</h2>
+          <p className="text-muted" style={{ marginTop: 4 }}>안녕하세요, {user?.nickname}님</p>
+        </div>
+        <Link to="/dashboard/projects/new" className="btn btn-primary">+ 새 프로젝트</Link>
+      </div>
+
+      <div style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
+        <Link to="/dashboard/projects/new" className="btn btn-outline btn-sm">프로젝트 등록</Link>
+        <Link to="/dashboard/orders" className="btn btn-outline btn-sm">구매 내역</Link>
+        <Link to="/dashboard/sales" className="btn btn-outline btn-sm">판매 내역</Link>
+      </div>
+
+      <h3 style={{ marginBottom: 16 }}>내 프로젝트</h3>
+      {loading ? <div className="spinner" /> : (
+        projects.length === 0 ? (
+          <div className="card text-center" style={{ padding: 48 }}>
+            <p className="text-muted">등록한 프로젝트가 없습니다.</p>
+            <Link to="/dashboard/projects/new" className="btn btn-primary" style={{ marginTop: 16 }}>첫 프로젝트 등록</Link>
+          </div>
+        ) : (
+          <div className="table-wrap">
+            <table>
+              <thead>
+                <tr><th>제목</th><th>상태</th><th>판매가</th><th>판매수</th><th>날짜</th><th></th></tr>
+              </thead>
+              <tbody>
+                {projects.map(p => (
+                  <tr key={p.id}>
+                    <td>{p.title}</td>
+                    <td>{STATUS_BADGE[p.status] || p.status}</td>
+                    <td>{p.product ? `₩${p.product.price.toLocaleString()}` : '-'}</td>
+                    <td>{p.product?.totalSales ?? '-'}</td>
+                    <td className="text-muted">{new Date(p.createdAt).toLocaleDateString('ko-KR')}</td>
+                    <td>
+                      <Link to={`/dashboard/projects/${p.id}`} className="btn btn-outline btn-sm">관리</Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )
+      )}
+    </div>
+  );
+}

frontend/src/pages/Dashboard/MyOrders.jsx

@@ -0,0 +1,103 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import api from '../../api/client';
+
+const STATUS_LABEL = {
+  pending:  { label: '결제 대기', color: 'var(--warn)' },
+  paid:     { label: '결제 완료', color: 'var(--success)' },
+  refunded: { label: '환불됨',   color: 'var(--text2)' },
+  cancelled:{ label: '취소됨',   color: 'var(--text2)' },
+};
+
+export default function MyOrders() {
+  const [orders, setOrders]   = useState([]);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    api.get('/orders/me')
+      .then(r => setOrders(r.data))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function handleRefund(orderId) {
+    if (!confirm('환불 요청하시겠습니까?\n플래시 완료 후에는 환불이 불가능합니다.')) return;
+    try {
+      await api.post(`/orders/${orderId}/refund`, { reason: '사용자 요청' });
+      setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: 'refunded' } : o));
+    } catch (err) {
+      alert(err.response?.data?.error || '환불 처리 실패');
+    }
+  }
+
+  if (loading) return <div className="spinner" />;
+
+  return (
+    <div className="container page">
+      <h2 style={{ marginBottom: 24 }}>구매 내역</h2>
+
+      {orders.length === 0 ? (
+        <div className="card text-center" style={{ padding: 48 }}>
+          <p className="text-muted">구매 내역이 없습니다.</p>
+          <Link to="/shop" className="btn btn-primary" style={{ marginTop: 16 }}>상점 둘러보기</Link>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {orders.map(order => {
+            const st = STATUS_LABEL[order.status] || { label: order.status, color: 'var(--text2)' };
+            const thumb = order.product?.project?.files?.[0];
+            const ft    = order.flashToken;
+
+            return (
+              <div key={order.id} className="card" style={{ display: 'grid', gridTemplateColumns: '60px 1fr auto', gap: 16, alignItems: 'center' }}>
+                {/* 썸네일 */}
+                {thumb
+                  ? <img src={thumb.thumbnailUrl || thumb.url} alt="" style={{ width: 60, height: 60, objectFit: 'cover', borderRadius: 4 }} />
+                  : <div style={{ width: 60, height: 60, background: 'var(--bg3)', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>📦</div>
+                }
+
+                {/* 정보 */}
+                <div>
+                  <div style={{ fontWeight: 600, marginBottom: 2 }}>
+                    {order.product?.project?.title || '상품'}
+                  </div>
+                  <div className="text-muted" style={{ fontSize: 12, marginBottom: 4 }}>
+                    ₩{order.amount.toLocaleString()} · {new Date(order.orderedAt).toLocaleDateString('ko-KR')}
+                    {' · '}<span style={{ color: st.color }}>{st.label}</span>
+                  </div>
+                  {ft && (
+                    <div style={{ fontSize: 12 }}>
+                      {ft.isUsed
+                        ? <span style={{ color: 'var(--text2)' }}>✅ 플래시 완료</span>
+                        : new Date() > new Date(ft.expiresAt)
+                          ? <span style={{ color: 'var(--danger)' }}>⏰ 토큰 만료</span>
+                          : <span style={{ color: 'var(--success)' }}>
+                              🔑 토큰 유효 · 만료: {new Date(ft.expiresAt).toLocaleDateString('ko-KR')}
+                            </span>
+                      }
+                    </div>
+                  )}
+                </div>
+
+                {/* 액션 버튼 */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
+                  {ft && !ft.isUsed && order.status === 'paid' && new Date() <= new Date(ft.expiresAt) && (
+                    <Link to={`/flash/${ft.token}`} className="btn btn-primary btn-sm">
+                      ⚡ 플래시
+                    </Link>
+                  )}
+                  {order.status === 'paid' && !ft?.isUsed && (
+                    <button className="btn btn-outline btn-sm" onClick={() => handleRefund(order.id)}>
+                      환불
+                    </button>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Dashboard/MySales.jsx

@@ -0,0 +1,10 @@
+export default function MySales() {
+  return (
+    <div className="container page">
+      <h2 style={{ marginBottom: 24 }}>판매 내역</h2>
+      <div className="card text-center" style={{ padding: 48 }}>
+        <p className="text-muted">결제 기능은 2단계에서 구현됩니다.</p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Dashboard/ProjectEdit.jsx

@@ -0,0 +1,175 @@
+import { useEffect, useState, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import api from '../../api/client';
+
+const STATUS_LABEL = {
+  draft: '임시저장', pending: '검토 대기', approved: '승인됨',
+  rejected: '반려됨', suspended: '정지됨',
+};
+
+export default function ProjectEdit() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [project, setProject] = useState(null);
+  const [form, setForm]       = useState({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving]   = useState(false);
+  const [error, setError]     = useState('');
+  const [msg, setMsg]         = useState('');
+  const [files, setFiles]     = useState([]);
+  const [fileType, setFileType] = useState('image');
+  const fileRef = useRef();
+
+  useEffect(() => {
+    api.get(`/projects/${id}`)
+      .then(r => {
+        setProject(r.data);
+        setForm({ title: r.data.title, description: r.data.description, difficultyLevel: r.data.difficultyLevel });
+      })
+      .catch(() => navigate('/dashboard'))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  async function handleSave(e) {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      await api.put(`/projects/${id}`, form);
+      setMsg('저장되었습니다');
+    } catch (err) {
+      setError(err.response?.data?.error || '저장 실패');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleUpload() {
+    if (!files.length) return;
+    setSaving(true);
+    try {
+      const fd = new FormData();
+      fd.append('fileType', fileType);
+      files.forEach(f => fd.append('files', f));
+      const { data } = await api.post(`/projects/${id}/files`, fd, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+      setProject(p => ({ ...p, files: [...(p.files || []), ...data] }));
+      setFiles([]);
+      setMsg('파일이 업로드되었습니다');
+    } catch (err) {
+      setError(err.response?.data?.error || '업로드 실패');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDeleteFile(fileId) {
+    if (!confirm('파일을 삭제하시겠습니까?')) return;
+    await api.delete(`/projects/${id}/files/${fileId}`);
+    setProject(p => ({ ...p, files: p.files.filter(f => f.id !== fileId) }));
+  }
+
+  async function handleSubmit() {
+    setSaving(true);
+    try {
+      await api.post(`/projects/${id}/submit`);
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.error || '제출 실패');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) return <div className="spinner" />;
+  const canEdit = ['draft', 'rejected'].includes(project?.status);
+
+  return (
+    <div className="container page" style={{ maxWidth: 700 }}>
+      <div className="flex items-center justify-between" style={{ marginBottom: 24 }}>
+        <h2>프로젝트 관리</h2>
+        <span className={`badge badge-${project.status}`}>{STATUS_LABEL[project.status]}</span>
+      </div>
+
+      {project.adminNote && (
+        <div className="alert alert-warn">
+          <strong>관리자 메모:</strong> {project.adminNote}
+        </div>
+      )}
+      {error && <div className="alert alert-error">{error}</div>}
+      {msg   && <div className="alert alert-success">{msg}</div>}
+
+      {/* 기본 정보 수정 */}
+      <form className="card" onSubmit={handleSave} style={{ marginBottom: 20 }}>
+        <h3 style={{ marginBottom: 16 }}>기본 정보</h3>
+        <div className="form-group">
+          <label>제목</label>
+          <input required disabled={!canEdit} value={form.title || ''}
+            onChange={e => setForm(f => ({ ...f, title: e.target.value }))} />
+        </div>
+        <div className="form-group">
+          <label>설명</label>
+          <textarea disabled={!canEdit} value={form.description || ''}
+            onChange={e => setForm(f => ({ ...f, description: e.target.value }))} rows={6} />
+        </div>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button className="btn btn-primary" disabled={!canEdit || saving}>
+            {saving ? '저장 중...' : '저장'}
+          </button>
+          {['draft', 'rejected'].includes(project.status) && (
+            <button type="button" className="btn btn-success" onClick={handleSubmit} disabled={saving}>
+              검토 요청
+            </button>
+          )}
+        </div>
+      </form>
+
+      {/* 파일 관리 */}
+      <div className="card">
+        <h3 style={{ marginBottom: 16 }}>파일 관리</h3>
+        {project.files?.length > 0 && (
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: 8, marginBottom: 20 }}>
+            {project.files.map(f => (
+              <div key={f.id} style={{ position: 'relative', borderRadius: 4, overflow: 'hidden', background: 'var(--bg3)' }}>
+                {f.fileType === 'image'
+                  ? <img src={f.thumbnailUrl || f.url} alt="" style={{ width: '100%', height: 80, objectFit: 'cover' }} />
+                  : <div style={{ height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }}>
+                      {f.fileType === 'stl' ? '🖨️' : f.fileType === 'firmware' ? '💾' : '📄'}
+                    </div>
+                }
+                <button onClick={() => handleDeleteFile(f.id)}
+                  style={{ position: 'absolute', top: 2, right: 2, background: 'var(--danger)', border: 'none',
+                    borderRadius: 4, color: '#fff', cursor: 'pointer', fontSize: 11, padding: '2px 5px' }}>
+                  ✕
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
+          <select value={fileType} onChange={e => setFileType(e.target.value)} style={{ width: 160 }}>
+            <option value="image">이미지</option>
+            <option value="video">영상</option>
+            <option value="wiring">배선도</option>
+            <option value="stl">STL</option>
+            <option value="firmware">펌웨어</option>
+          </select>
+          <button className="btn btn-outline" onClick={() => fileRef.current.click()}>파일 선택</button>
+          <input ref={fileRef} type="file" multiple hidden
+            onChange={e => setFiles(Array.from(e.target.files))} />
+          {files.length > 0 && (
+            <button className="btn btn-primary" onClick={handleUpload} disabled={saving}>
+              {saving ? '업로드 중...' : `${files.length}개 업로드`}
+            </button>
+          )}
+        </div>
+        {files.length > 0 && (
+          <div className="text-muted" style={{ fontSize: 12 }}>
+            {files.map(f => f.name).join(', ')}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Dashboard/ProjectNew.jsx

@@ -0,0 +1,242 @@
+import { useState, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import api from '../../api/client';
+
+export default function ProjectNew() {
+  const navigate = useNavigate();
+  const [form, setForm] = useState({
+    title: '', description: '', difficultyLevel: 3, chipFamily: 'ESP32-S3', requiredParts: [],
+  });
+  const [partRow, setPartRow]     = useState({ name: '', quantity: '', link: '' });
+  const [files, setFiles]         = useState([]);
+  const [fileType, setFileType]   = useState('image');
+  const [flashOffset, setOffset]  = useState('0x0');
+  const [dragging, setDragging]   = useState(false);
+  const [error, setError]         = useState('');
+  const [step, setStep]           = useState(1); // 1:기본정보, 2:파일, 3:완료
+  const [saving, setSaving]       = useState(false);
+  const [projectId, setProjectId] = useState(null);
+  const fileRef = useRef();
+
+  function addPart() {
+    if (!partRow.name) return;
+    setForm(f => ({ ...f, requiredParts: [...f.requiredParts, { ...partRow }] }));
+    setPartRow({ name: '', quantity: '', link: '' });
+  }
+  function removePart(i) {
+    setForm(f => ({ ...f, requiredParts: f.requiredParts.filter((_, idx) => idx !== i) }));
+  }
+
+  async function handleStep1(e) {
+    e.preventDefault();
+    setError('');
+    setSaving(true);
+    try {
+      const { data } = await api.post('/projects', {
+        title: form.title,
+        description: form.description,
+        difficultyLevel: form.difficultyLevel,
+        chipFamily: form.chipFamily,
+        requiredParts: form.requiredParts,
+      });
+      setProjectId(data.id);
+      setStep(2);
+    } catch (err) {
+      setError(err.response?.data?.error || '저장 실패');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleUpload() {
+    if (!files.length) { setStep(3); return; }
+    setError('');
+    setSaving(true);
+    try {
+      const fd = new FormData();
+      fd.append('fileType', fileType);
+      if (fileType === 'firmware') fd.append('flashOffset', flashOffset);
+      files.forEach(f => fd.append('files', f));
+      await api.post(`/projects/${projectId}/files`, fd, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+      setFiles([]);
+      setStep(3);
+    } catch (err) {
+      setError(err.response?.data?.error || '업로드 실패');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function submitForReview() {
+    setSaving(true);
+    try {
+      await api.post(`/projects/${projectId}/submit`);
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.error || '제출 실패');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function onDrop(e) {
+    e.preventDefault();
+    setDragging(false);
+    setFiles(prev => [...prev, ...Array.from(e.dataTransfer.files)]);
+  }
+
+  return (
+    <div className="container page" style={{ maxWidth: 700 }}>
+      {/* 스텝 표시 */}
+      <div style={{ display: 'flex', gap: 8, marginBottom: 32 }}>
+        {['기본 정보', '파일 업로드', '검토 제출'].map((label, i) => (
+          <div key={i} style={{ flex: 1, textAlign: 'center', padding: '8px 0', borderRadius: 'var(--radius)',
+            background: step === i + 1 ? 'var(--accent)' : step > i + 1 ? 'var(--bg3)' : 'var(--bg2)',
+            border: '1px solid var(--border)', color: step === i + 1 ? '#fff' : 'var(--text2)', fontSize: 13 }}>
+            {i + 1}. {label}
+          </div>
+        ))}
+      </div>
+
+      {error && <div className="alert alert-error">{error}</div>}
+
+      {/* 스텝 1 */}
+      {step === 1 && (
+        <form className="card" onSubmit={handleStep1}>
+          <h3 style={{ marginBottom: 20 }}>기본 정보</h3>
+          <div className="form-group">
+            <label>프로젝트 제목 *</label>
+            <input required value={form.title} onChange={e => setForm(f => ({ ...f, title: e.target.value }))}
+              placeholder="예: ESP32-S3 CAN FD 로거" />
+          </div>
+          <div className="form-group">
+            <label>설명 *</label>
+            <textarea required value={form.description}
+              onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
+              placeholder="프로젝트 목적, 기능, 특징을 설명해주세요" rows={6} />
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+            <div className="form-group">
+              <label>난이도</label>
+              <select value={form.difficultyLevel} onChange={e => setForm(f => ({ ...f, difficultyLevel: parseInt(e.target.value) }))}>
+                {[1,2,3,4,5].map(d => <option key={d} value={d}>{d} — {['입문','초급','중급','고급','전문가'][d-1]}</option>)}
+              </select>
+            </div>
+            <div className="form-group">
+              <label>ESP 칩 패밀리</label>
+              <select value={form.chipFamily} onChange={e => setForm(f => ({ ...f, chipFamily: e.target.value }))}>
+                <option value="ESP32-S3">ESP32-S3 (권장)</option>
+                <option value="ESP32-S2">ESP32-S2</option>
+                <option value="ESP32-C3">ESP32-C3</option>
+                <option value="ESP32-C6">ESP32-C6</option>
+                <option value="ESP32-H2">ESP32-H2</option>
+                <option value="ESP32">ESP32</option>
+              </select>
+            </div>
+          </div>
+
+          {/* 필요 부품 */}
+          <div className="form-group">
+            <label>필요 부품 (선택)</label>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 80px 1fr auto', gap: 8, marginBottom: 8 }}>
+              <input placeholder="부품명" value={partRow.name} onChange={e => setPartRow(p => ({ ...p, name: e.target.value }))} />
+              <input placeholder="수량" value={partRow.quantity} onChange={e => setPartRow(p => ({ ...p, quantity: e.target.value }))} />
+              <input placeholder="알리/쿠팡 링크" value={partRow.link} onChange={e => setPartRow(p => ({ ...p, link: e.target.value }))} />
+              <button type="button" className="btn btn-outline btn-sm" onClick={addPart}>추가</button>
+            </div>
+            {form.requiredParts.map((p, i) => (
+              <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 13, padding: '4px 0' }}>
+                <span style={{ flex: 1 }}>{p.name}</span>
+                <span className="text-muted">{p.quantity}</span>
+                {p.link && <a href={p.link} target="_blank" rel="noreferrer" style={{ fontSize: 12 }}>링크</a>}
+                <button type="button" className="btn btn-danger btn-sm" onClick={() => removePart(i)}>✕</button>
+              </div>
+            ))}
+          </div>
+
+          <button className="btn btn-primary" disabled={saving}>
+            {saving ? '저장 중...' : '다음 단계 →'}
+          </button>
+        </form>
+      )}
+
+      {/* 스텝 2 */}
+      {step === 2 && (
+        <div className="card">
+          <h3 style={{ marginBottom: 20 }}>파일 업로드</h3>
+          <div style={{ display: 'grid', gridTemplateColumns: fileType === 'firmware' ? '1fr 1fr' : '1fr', gap: 12 }}>
+            <div className="form-group">
+              <label>파일 종류</label>
+              <select value={fileType} onChange={e => setFileType(e.target.value)}>
+                <option value="image">이미지 (jpg, png, webp)</option>
+                <option value="video">영상 (mp4, mov)</option>
+                <option value="wiring">배선도 (jpg, png, pdf)</option>
+                <option value="stl">3D 케이스 STL</option>
+                <option value="firmware">펌웨어 (.bin)</option>
+              </select>
+            </div>
+            {fileType === 'firmware' && (
+              <div className="form-group">
+                <label>플래시 오프셋</label>
+                <select value={flashOffset} onChange={e => setOffset(e.target.value)}>
+                  <option value="0x0">0x0 — merged.bin (권장)</option>
+                  <option value="0x10000">0x10000 — app.bin만</option>
+                  <option value="0x0000">0x0000 — bootloader</option>
+                  <option value="0x8000">0x8000 — partition table</option>
+                  <option value="0xe000">0xe000 — boot_app0</option>
+                </select>
+              </div>
+            )}
+          </div>
+          <div className={`dropzone${dragging ? ' over' : ''}`}
+            onDragOver={e => { e.preventDefault(); setDragging(true); }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={onDrop}
+            onClick={() => fileRef.current.click()}>
+            <input ref={fileRef} type="file" multiple hidden
+              onChange={e => setFiles(prev => [...prev, ...Array.from(e.target.files)])} />
+            <p>파일을 드래그하거나 클릭하여 선택</p>
+            <p>이미지 최대 20MB · 영상 최대 500MB · 펌웨어 최대 64MB</p>
+          </div>
+          {files.length > 0 && (
+            <ul style={{ marginTop: 12, fontSize: 13, color: 'var(--text2)' }}>
+              {files.map((f, i) => (
+                <li key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
+                  <span>{f.name}</span>
+                  <span>{(f.size / 1024 / 1024).toFixed(1)} MB</span>
+                </li>
+              ))}
+            </ul>
+          )}
+          <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
+            <button className="btn btn-outline" onClick={() => setStep(1)}>← 이전</button>
+            <button className="btn btn-primary" onClick={handleUpload} disabled={saving}>
+              {saving ? '업로드 중...' : files.length > 0 ? '업로드 후 다음 →' : '건너뛰기 →'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* 스텝 3 */}
+      {step === 3 && (
+        <div className="card text-center" style={{ padding: 48 }}>
+          <div style={{ fontSize: 48, marginBottom: 16 }}>📋</div>
+          <h3 style={{ marginBottom: 12 }}>관리자 검토 요청</h3>
+          <p className="text-muted" style={{ marginBottom: 24 }}>
+            프로젝트 정보와 파일이 저장되었습니다.<br />
+            관리자 검토 요청을 보내면 승인 후 판매가 시작됩니다.
+          </p>
+          <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
+            <button className="btn btn-outline" onClick={() => navigate('/dashboard')}>나중에</button>
+            <button className="btn btn-primary" onClick={submitForReview} disabled={saving}>
+              {saving ? '제출 중...' : '검토 요청 제출'}
+            </button>
+          </div>
+          {error && <div className="alert alert-error" style={{ marginTop: 16 }}>{error}</div>}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Flash.jsx

@@ -0,0 +1,184 @@
+import { useEffect, useRef, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import api from '../api/client';
+
+const CHIP_LABELS = {
+  'ESP32-S3': 'ESP32-S3', 'ESP32-S2': 'ESP32-S2', 'ESP32-C3': 'ESP32-C3',
+  'ESP32-C6': 'ESP32-C6', 'ESP32-H2': 'ESP32-H2', 'ESP32': 'ESP32',
+};
+
+export default function Flash() {
+  const { token }       = useParams();
+  const [info, setInfo] = useState(null);
+  const [loading, setLoading]     = useState(true);
+  const [flashDone, setFlashDone] = useState(false);
+  const installRef = useRef(null);
+
+  const manifestUrl = `${window.location.origin}/api/flash/${token}/manifest`;
+
+  useEffect(() => {
+    api.get(`/flash/${token}`)
+      .then(r => setInfo(r.data))
+      .catch(() => setInfo(null))
+      .finally(() => setLoading(false));
+  }, [token]);
+
+  // esp-web-tools 이벤트 — 플래시 완료/실패 시 서버에 기록
+  useEffect(() => {
+    const btn = installRef.current;
+    if (!btn) return;
+
+    function onSuccess(e) {
+      const mac = e.detail?.device?.macAddress || 'unknown';
+      api.post(`/flash/${token}/consume`, {
+        mac, chipFamily: info?.chipFamily, success: true,
+      }).catch(() => {});
+      setFlashDone(true);
+    }
+    function onFail(e) {
+      api.post(`/flash/${token}/consume`, {
+        mac: 'unknown', chipFamily: info?.chipFamily,
+        success: false, errorMessage: e.detail?.message,
+      }).catch(() => {});
+    }
+
+    btn.addEventListener('state-changed', (e) => {
+      if (e.detail?.state === 'finished') onSuccess(e);
+      if (e.detail?.state === 'error')    onFail(e);
+    });
+  }, [info, token]);
+
+  if (loading) return <div className="spinner" />;
+
+  // 유효하지 않은 토큰
+  if (!info) {
+    return (
+      <div className="container page" style={{ maxWidth: 500 }}>
+        <div className="card text-center" style={{ padding: 48 }}>
+          <div style={{ fontSize: 48, marginBottom: 16 }}>❌</div>
+          <h2 style={{ marginBottom: 8 }}>유효하지 않은 토큰</h2>
+          <p className="text-muted">토큰을 찾을 수 없습니다.</p>
+          <Link to="/dashboard/orders" className="btn btn-outline" style={{ marginTop: 20 }}>
+            구매 내역으로
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // 이미 사용된 토큰
+  if (info.isUsed) {
+    return (
+      <div className="container page" style={{ maxWidth: 500 }}>
+        <div className="card text-center" style={{ padding: 48 }}>
+          <div style={{ fontSize: 48, marginBottom: 16 }}>✅</div>
+          <h2 style={{ marginBottom: 8 }}>이미 플래시됨</h2>
+          <p className="text-muted" style={{ marginBottom: 8 }}>
+            이 토큰은 {info.usedAt ? new Date(info.usedAt).toLocaleString('ko-KR') : ''}에 사용되었습니다.
+          </p>
+          <p className="text-muted" style={{ fontSize: 13 }}>1회용 토큰은 재사용할 수 없습니다.</p>
+          <Link to="/dashboard/orders" className="btn btn-outline" style={{ marginTop: 20 }}>
+            구매 내역으로
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // 만료된 토큰
+  if (info.expired) {
+    return (
+      <div className="container page" style={{ maxWidth: 500 }}>
+        <div className="card text-center" style={{ padding: 48 }}>
+          <div style={{ fontSize: 48, marginBottom: 16 }}>⏰</div>
+          <h2 style={{ marginBottom: 8 }}>만료된 토큰</h2>
+          <p className="text-muted">토큰 유효기간이 지났습니다.</p>
+          <p className="text-muted" style={{ fontSize: 13 }}>고객센터에 문의해주세요.</p>
+          <Link to="/dashboard/orders" className="btn btn-outline" style={{ marginTop: 20 }}>
+            구매 내역으로
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // 펌웨어 없음
+  if (!info.hasFirmware) {
+    return (
+      <div className="container page" style={{ maxWidth: 500 }}>
+        <div className="card text-center" style={{ padding: 48 }}>
+          <div style={{ fontSize: 48, marginBottom: 16 }}>⚠️</div>
+          <h2 style={{ marginBottom: 8 }}>펌웨어 파일 없음</h2>
+          <p className="text-muted">판매자가 아직 펌웨어를 업로드하지 않았습니다.</p>
+          <p className="text-muted" style={{ fontSize: 13 }}>판매자에게 문의하거나 환불을 요청하세요.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container page" style={{ maxWidth: 600 }}>
+      <div className="card">
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
+          <div style={{ fontSize: 36 }}>⚡</div>
+          <div>
+            <h2 style={{ marginBottom: 2 }}>{info.productName}</h2>
+            <span className="text-muted" style={{ fontSize: 13 }}>
+              {CHIP_LABELS[info.chipFamily] || info.chipFamily} · 만료: {new Date(info.expiresAt).toLocaleDateString('ko-KR')}
+            </span>
+          </div>
+        </div>
+
+        {flashDone ? (
+          <div className="alert alert-success" style={{ textAlign: 'center', padding: 24 }}>
+            <div style={{ fontSize: 32, marginBottom: 8 }}>🎉</div>
+            <strong>플래시 완료!</strong>
+            <p style={{ marginTop: 8, fontSize: 13 }}>펌웨어가 성공적으로 ESP32에 기록되었습니다.</p>
+            <div style={{ marginTop: 16, display: 'flex', gap: 8, justifyContent: 'center' }}>
+              <Link to="/dashboard/orders" className="btn btn-outline btn-sm">구매 내역</Link>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="alert alert-info" style={{ marginBottom: 20 }}>
+              <strong>플래시 전 확인사항</strong>
+              <ul style={{ marginTop: 8, paddingLeft: 16, fontSize: 13, lineHeight: 2 }}>
+                <li>Chrome 또는 Edge 브라우저를 사용하고 있나요?</li>
+                <li>ESP32를 USB 케이블로 PC에 연결했나요?</li>
+                <li>이 토큰은 <strong>1회만</strong> 사용 가능합니다</li>
+              </ul>
+            </div>
+
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, padding: '24px 0' }}>
+              <esp-web-install-button
+                ref={installRef}
+                manifest={manifestUrl}
+                style={{ '--esp-tools-button-color': '#6366f1', '--esp-tools-button-text-color': '#fff' }}
+              >
+                <button slot="activate" className="btn btn-primary"
+                  style={{ fontSize: 16, padding: '12px 32px' }}>
+                  ⚡ ESP32 플래시 시작
+                </button>
+                <span slot="unsupported" style={{ color: 'var(--danger)', fontSize: 14 }}>
+                  Chrome 또는 Edge 브라우저가 필요합니다
+                </span>
+              </esp-web-install-button>
+              <p className="text-muted" style={{ fontSize: 12, textAlign: 'center' }}>
+                버튼 클릭 후 팝업에서 ESP32 포트를 선택하세요
+              </p>
+            </div>
+
+            <div className="divider" />
+            <details style={{ fontSize: 13, color: 'var(--text2)' }}>
+              <summary style={{ cursor: 'pointer', marginBottom: 8 }}>토큰 정보 (고급)</summary>
+              <code style={{ wordBreak: 'break-all', display: 'block', background: 'var(--bg3)', padding: 8, borderRadius: 4 }}>
+                {token}
+              </code>
+              <p style={{ marginTop: 8 }}>매니페스트 URL: <code style={{ fontSize: 11 }}>{manifestUrl}</code></p>
+            </details>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Home.jsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import api from '../api/client';
+
+function Stars({ rating }) {
+  if (!rating) return <span className="text-muted">리뷰 없음</span>;
+  return <span className="stars">{'★'.repeat(Math.round(rating))}{'☆'.repeat(5 - Math.round(rating))}</span>;
+}
+
+export default function Home() {
+  const [products, setProducts] = useState([]);
+  const [loading, setLoading]   = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    api.get('/products?sort=popular&limit=6')
+      .then(r => setProducts(r.data.products || []))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div>
+      {/* Hero */}
+      <div style={{ background: 'var(--bg2)', borderBottom: '1px solid var(--border)', padding: '60px 0' }}>
+        <div className="container text-center">
+          <h1 style={{ fontSize: 36, marginBottom: 16, color: 'var(--accent2)' }}>
+            ESP32 DIY 플랫폼
+          </h1>
+          <p style={{ color: 'var(--text2)', fontSize: 16, marginBottom: 32, maxWidth: 500, margin: '0 auto 32px' }}>
+            직접 만든 ESP32 프로젝트를 공유하고 판매하세요.<br />
+            펌웨어 구매 후 브라우저에서 바로 플래시까지.
+          </p>
+          <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
+            <Link to="/shop" className="btn btn-primary">상점 둘러보기</Link>
+            <Link to="/projects" className="btn btn-outline">프로젝트 탐색</Link>
+          </div>
+        </div>
+      </div>
+
+      {/* 인기 상품 */}
+      <div className="container page">
+        <div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
+          <h2 style={{ fontSize: 20 }}>인기 상품</h2>
+          <Link to="/shop" className="text-muted" style={{ fontSize: 13 }}>전체 보기 →</Link>
+        </div>
+
+        {loading ? <div className="spinner" /> : (
+          <div className="card-grid">
+            {products.map(p => (
+              <div key={p.id} className="project-card" onClick={() => navigate(`/shop/${p.id}`)}>
+                {p.project.files[0]
+                  ? <img src={p.project.files[0].thumbnailUrl || p.project.files[0].url} alt={p.project.title} />
+                  : <div style={{ height: 180, background: 'var(--bg3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text2)' }}>이미지 없음</div>
+                }
+                <div className="project-card-body">
+                  <div className="project-card-title">{p.project.title}</div>
+                  <div className="project-card-meta">
+                    <span>{p.project.user.nickname}</span>
+                    <Stars rating={p.avgRating} />
+                    <span style={{ marginLeft: 'auto', color: 'var(--accent2)', fontWeight: 600 }}>
+                      ₩{p.price.toLocaleString()}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {products.length === 0 && !loading && (
+          <div className="card text-center" style={{ padding: 48 }}>
+            <p className="text-muted">아직 등록된 상품이 없습니다.</p>
+            <Link to="/dashboard/projects/new" className="btn btn-primary" style={{ marginTop: 16 }}>
+              첫 프로젝트 등록하기
+            </Link>
+          </div>
+        )}
+      </div>
+
+      {/* 특징 소개 */}
+      <div style={{ background: 'var(--bg2)', borderTop: '1px solid var(--border)', padding: '48px 0' }}>
+        <div className="container">
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 24 }}>
+            {[
+              { icon: '🔧', title: '프로젝트 공유', desc: '회로도, STL, 부품 목록을 함께 공유' },
+              { icon: '💸', title: '수익화', desc: '내 프로젝트에서 펌웨어 판매 수익 창출' },
+              { icon: '⚡', title: '브라우저 플래시', desc: '구매 후 USB 연결만으로 즉시 플래시' },
+              { icon: '⭐', title: '리뷰 시스템', desc: '완성품 사진·영상으로 제품 평가' },
+            ].map(f => (
+              <div key={f.title} className="card" style={{ textAlign: 'center' }}>
+                <div style={{ fontSize: 32, marginBottom: 12 }}>{f.icon}</div>
+                <div style={{ fontWeight: 600, marginBottom: 6 }}>{f.title}</div>
+                <div className="text-muted" style={{ fontSize: 13 }}>{f.desc}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/ProductDetail.jsx

@@ -0,0 +1,192 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+import api from '../api/client';
+
+function Stars({ rating }) {
+  return <span className="stars">{'★'.repeat(rating)}{'☆'.repeat(5 - rating)}</span>;
+}
+
+export default function ProductDetail() {
+  const { id }    = useParams();
+  const navigate  = useNavigate();
+  const { user }  = useAuth();
+  const [product, setProduct]   = useState(null);
+  const [loading, setLoading]   = useState(true);
+  const [buying, setBuying]     = useState(false);
+  const [buyError, setBuyError] = useState('');
+  const [imgIdx, setImgIdx]     = useState(0);
+
+  useEffect(() => {
+    api.get(`/products/${id}`)
+      .then(r => setProduct(r.data))
+      .catch(() => navigate('/shop'))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  async function handleBuy() {
+    if (!user) {
+      navigate('/auth/login', { state: { from: `/shop/${id}` } });
+      return;
+    }
+    setBuyError('');
+    setBuying(true);
+    try {
+      // 1. 주문 생성
+      let orderId, flashToken;
+      try {
+        const res = await api.post('/orders', { productId: product.id });
+        orderId = res.data.orderId;
+        // 이미 구매한 경우 바로 Flash 페이지로
+        if (res.data.flashToken) {
+          navigate(`/flash/${res.data.flashToken}`);
+          return;
+        }
+      } catch (err) {
+        // 이미 결제 완료된 주문
+        if (err.response?.data?.flashToken) {
+          navigate(`/flash/${err.response.data.flashToken}`);
+          return;
+        }
+        throw err;
+      }
+
+      // 2. 모의 결제 처리
+      const payRes = await api.post(`/orders/${orderId}/mock-pay`);
+      flashToken = payRes.data.flashToken;
+
+      // 3. Flash 페이지로 이동
+      navigate(`/flash/${flashToken}`);
+    } catch (err) {
+      setBuyError(err.response?.data?.error || '구매 처리 중 오류가 발생했습니다');
+    } finally {
+      setBuying(false);
+    }
+  }
+
+  if (loading) return <div className="spinner" />;
+  if (!product) return null;
+
+  const images  = product.project.files.filter(f => f.fileType === 'image');
+  const reviews = product.reviews || [];
+  const avgRating = product.avgRating;
+
+  return (
+    <div className="container page">
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 32, alignItems: 'start' }}>
+        {/* 왼쪽 */}
+        <div>
+          {images.length > 0 && (
+            <div style={{ marginBottom: 24 }}>
+              <img src={images[imgIdx].url} alt="" style={{ width: '100%', maxHeight: 480, objectFit: 'cover', borderRadius: 'var(--radius)', background: 'var(--bg3)' }} />
+              {images.length > 1 && (
+                <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
+                  {images.map((img, i) => (
+                    <img key={img.id} src={img.thumbnailUrl || img.url} alt=""
+                      onClick={() => setImgIdx(i)}
+                      style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 4, cursor: 'pointer', border: i === imgIdx ? '2px solid var(--accent)' : '2px solid transparent' }}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          <h1 style={{ fontSize: 24, marginBottom: 8 }}>{product.project.title}</h1>
+          <div className="text-muted" style={{ fontSize: 13, marginBottom: 8 }}>
+            by {product.project.user.nickname} · 칩: {product.project.chipFamily}
+          </div>
+          {avgRating && (
+            <div style={{ marginBottom: 16 }}>
+              <Stars rating={Math.round(avgRating)} />
+              <span className="text-muted" style={{ fontSize: 13 }}> {avgRating} ({product.reviewCount}개 리뷰)</span>
+            </div>
+          )}
+
+          <div className="divider" />
+          <p style={{ color: 'var(--text2)', lineHeight: 1.8, whiteSpace: 'pre-wrap' }}>
+            {product.project.description}
+          </p>
+
+          {/* 리뷰 */}
+          {reviews.length > 0 && (
+            <>
+              <div className="divider" />
+              <h3 style={{ marginBottom: 16 }}>구매자 리뷰</h3>
+              {reviews.map(r => (
+                <div key={r.id} className="card" style={{ marginBottom: 12 }}>
+                  <div className="flex items-center gap-8" style={{ marginBottom: 8 }}>
+                    <strong style={{ fontSize: 13 }}>{r.user.nickname}</strong>
+                    <Stars rating={r.rating} />
+                    <span className="text-muted" style={{ fontSize: 12, marginLeft: 'auto' }}>
+                      {new Date(r.createdAt).toLocaleDateString('ko-KR')}
+                    </span>
+                  </div>
+                  <div style={{ fontWeight: 600, marginBottom: 4 }}>{r.title}</div>
+                  <p className="text-muted" style={{ fontSize: 13 }}>{r.content}</p>
+                  {r.media?.length > 0 && (
+                    <div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
+                      {r.media.map(m => (
+                        m.mediaType === 'image'
+                          ? <img key={m.id} src={m.thumbnailUrl || m.url} alt="" style={{ width: 80, height: 80, objectFit: 'cover', borderRadius: 4 }} />
+                          : <a key={m.id} href={m.url} target="_blank" rel="noreferrer" className="btn btn-outline btn-sm">영상 보기</a>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+
+        {/* 오른쪽 — 구매 패널 */}
+        <div style={{ position: 'sticky', top: 80 }}>
+          <div className="card">
+            <div style={{ fontSize: 30, fontWeight: 700, color: 'var(--accent2)', marginBottom: 4 }}>
+              ₩{product.price.toLocaleString()}
+            </div>
+            <div className="text-muted" style={{ fontSize: 13, marginBottom: 20 }}>
+              총 판매 {product.totalSales.toLocaleString()}건
+            </div>
+
+            {product.isOnSale ? (
+              <>
+                {buyError && <div className="alert alert-error" style={{ fontSize: 13 }}>{buyError}</div>}
+
+                <button
+                  className="btn btn-primary"
+                  style={{ width: '100%', justifyContent: 'center', fontSize: 16, padding: '12px' }}
+                  onClick={handleBuy}
+                  disabled={buying}
+                >
+                  {buying ? '처리 중...' : user ? '지금 구매하기' : '로그인 후 구매'}
+                </button>
+
+                <div className="divider" />
+
+                {/* 테스트 모드 안내 */}
+                <div style={{ background: 'rgba(245,158,11,.1)', border: '1px solid rgba(245,158,11,.3)', borderRadius: 'var(--radius)', padding: '10px 12px', marginBottom: 12 }}>
+                  <div style={{ fontSize: 12, color: 'var(--warn)', fontWeight: 600, marginBottom: 4 }}>
+                    🧪 테스트 모드
+                  </div>
+                  <div style={{ fontSize: 12, color: 'var(--text2)' }}>
+                    현재 모의 결제로 동작합니다. 실제 요금이 청구되지 않습니다.
+                  </div>
+                </div>
+
+                <ul style={{ color: 'var(--text2)', fontSize: 13, paddingLeft: 16 }}>
+                  <li>구매 즉시 1회용 플래시 토큰 발급</li>
+                  <li>USB 연결 후 브라우저에서 직접 플래시</li>
+                  <li>플래시 완료 후 환불 불가</li>
+                  <li>토큰 유효기간: 30일</li>
+                </ul>
+              </>
+            ) : (
+              <div className="alert alert-warn">현재 판매 중지 상태입니다</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/ProjectDetail.jsx

@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import api from '../api/client';
+
+const FILE_LABELS = { image: '이미지', video: '영상', stl: 'STL', wiring: '배선도', firmware: '펌웨어' };
+
+export default function ProjectDetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [project, setProject] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [imgIdx, setImgIdx]   = useState(0);
+
+  useEffect(() => {
+    api.get(`/projects/${id}`)
+      .then(r => setProject(r.data))
+      .catch(() => navigate('/projects'))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) return <div className="spinner" />;
+  if (!project) return null;
+
+  const images   = project.files.filter(f => f.fileType === 'image');
+  const others   = project.files.filter(f => f.fileType !== 'image');
+  const product  = project.product;
+
+  return (
+    <div className="container page">
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 32 }}>
+        {/* 왼쪽 */}
+        <div>
+          {/* 이미지 갤러리 */}
+          {images.length > 0 && (
+            <div style={{ marginBottom: 24 }}>
+              <img src={images[imgIdx].url} alt="" style={{ width: '100%', maxHeight: 480, objectFit: 'cover', borderRadius: 'var(--radius)', background: 'var(--bg3)' }} />
+              {images.length > 1 && (
+                <div style={{ display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
+                  {images.map((img, i) => (
+                    <img key={img.id} src={img.thumbnailUrl || img.url} alt=""
+                      onClick={() => setImgIdx(i)}
+                      style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 4, cursor: 'pointer', border: i === imgIdx ? '2px solid var(--accent)' : '2px solid transparent' }}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          <h1 style={{ fontSize: 24, marginBottom: 8 }}>{project.title}</h1>
+          <div className="text-muted" style={{ fontSize: 13, marginBottom: 20 }}>
+            by {project.user.nickname} · 난이도 {'⭐'.repeat(project.difficultyLevel)}
+          </div>
+
+          <div className="divider" />
+          <h3 style={{ marginBottom: 12 }}>프로젝트 설명</h3>
+          <p style={{ color: 'var(--text2)', lineHeight: 1.8, whiteSpace: 'pre-wrap' }}>{project.description}</p>
+
+          {/* 필요 부품 */}
+          {project.requiredParts?.length > 0 && (
+            <>
+              <div className="divider" />
+              <h3 style={{ marginBottom: 12 }}>필요 부품</h3>
+              <div className="table-wrap">
+                <table>
+                  <thead><tr><th>부품명</th><th>수량</th><th>구매처</th></tr></thead>
+                  <tbody>
+                    {project.requiredParts.map((p, i) => (
+                      <tr key={i}>
+                        <td>{p.name}</td>
+                        <td>{p.quantity || '-'}</td>
+                        <td>{p.link ? <a href={p.link} target="_blank" rel="noreferrer">링크</a> : '-'}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </>
+          )}
+
+          {/* 첨부 파일 */}
+          {others.length > 0 && (
+            <>
+              <div className="divider" />
+              <h3 style={{ marginBottom: 12 }}>첨부 파일</h3>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                {others.map(f => (
+                  <a key={f.id} href={f.url} target="_blank" rel="noreferrer"
+                    className="card" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px' }}>
+                    <span style={{ fontSize: 20 }}>
+                      {f.fileType === 'stl' ? '🖨️' : f.fileType === 'wiring' ? '🔌' : f.fileType === 'video' ? '🎬' : '📄'}
+                    </span>
+                    <div>
+                      <div style={{ fontSize: 13 }}>{f.originalName || FILE_LABELS[f.fileType] || f.fileType}</div>
+                      <div className="text-muted" style={{ fontSize: 12 }}>{(f.fileSize / 1024).toFixed(1)} KB</div>
+                    </div>
+                  </a>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* 오른쪽 — 구매 */}
+        <div>
+          {product && product.isOnSale ? (
+            <div className="card" style={{ position: 'sticky', top: 80 }}>
+              <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--accent2)', marginBottom: 8 }}>
+                ₩{product.price.toLocaleString()}
+              </div>
+              <div className="text-muted" style={{ fontSize: 13, marginBottom: 20 }}>
+                판매 {product.totalSales.toLocaleString()}건
+              </div>
+              <Link to={`/shop/${product.id}`} className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>
+                구매하기 →
+              </Link>
+              <p className="text-muted mt-8" style={{ fontSize: 12, textAlign: 'center' }}>
+                구매 후 브라우저에서 바로 플래시 가능
+              </p>
+            </div>
+          ) : (
+            <div className="card">
+              <p className="text-muted text-center">이 프로젝트는 현재 판매 중이 아닙니다.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Projects.jsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import api from '../api/client';
+
+const DIFFICULTY = ['', '⭐ 입문', '⭐⭐ 초급', '⭐⭐⭐ 중급', '⭐⭐⭐⭐ 고급', '⭐⭐⭐⭐⭐ 전문가'];
+
+export default function Projects() {
+  const [data, setData]         = useState({ projects: [], total: 0, pages: 1 });
+  const [page, setPage]         = useState(1);
+  const [difficulty, setDiff]   = useState('');
+  const [loading, setLoading]   = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setLoading(true);
+    const params = new URLSearchParams({ page, limit: 18 });
+    if (difficulty) params.set('difficulty', difficulty);
+    api.get(`/projects?${params}`)
+      .then(r => setData(r.data))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [page, difficulty]);
+
+  return (
+    <div className="container page">
+      <div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
+        <h2 style={{ fontSize: 20 }}>ESP32 프로젝트</h2>
+        <select style={{ width: 160 }} value={difficulty} onChange={e => { setDiff(e.target.value); setPage(1); }}>
+          <option value="">난이도 전체</option>
+          {[1,2,3,4,5].map(d => <option key={d} value={d}>{DIFFICULTY[d]}</option>)}
+        </select>
+      </div>
+
+      {loading ? <div className="spinner" /> : (
+        <>
+          <div className="card-grid">
+            {data.projects.map(p => (
+              <div key={p.id} className="project-card" onClick={() => navigate(`/projects/${p.id}`)}>
+                {p.files[0]
+                  ? <img src={p.files[0].thumbnailUrl || p.files[0].url} alt={p.title} />
+                  : <div style={{ height: 180, background: 'var(--bg3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text2)' }}>이미지 없음</div>
+                }
+                <div className="project-card-body">
+                  <div className="project-card-title">{p.title}</div>
+                  <div className="project-card-meta">
+                    <span>{p.user.nickname}</span>
+                    <span>{DIFFICULTY[p.difficultyLevel]}</span>
+                    {p.product && (
+                      <span style={{ marginLeft: 'auto', color: 'var(--accent2)', fontWeight: 600 }}>
+                        ₩{p.product.price.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {data.projects.length === 0 && (
+            <div className="card text-center" style={{ padding: 48 }}>
+              <p className="text-muted">등록된 프로젝트가 없습니다.</p>
+            </div>
+          )}
+
+          {data.pages > 1 && (
+            <div className="pagination">
+              <button disabled={page <= 1} onClick={() => setPage(p => p - 1)}>이전</button>
+              {Array.from({ length: data.pages }, (_, i) => (
+                <button key={i + 1} className={page === i + 1 ? 'active' : ''} onClick={() => setPage(i + 1)}>
+                  {i + 1}
+                </button>
+              ))}
+              <button disabled={page >= data.pages} onClick={() => setPage(p => p + 1)}>다음</button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Shop.jsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import api from '../api/client';
+
+function Stars({ rating, count }) {
+  if (!rating) return <span className="text-muted" style={{ fontSize: 12 }}>리뷰 없음</span>;
+  return (
+    <span style={{ fontSize: 12 }}>
+      <span className="stars">{'★'.repeat(Math.round(rating))}</span>
+      <span className="text-muted"> {rating} ({count})</span>
+    </span>
+  );
+}
+
+export default function Shop() {
+  const [data, setData]   = useState({ products: [], total: 0, pages: 1 });
+  const [page, setPage]   = useState(1);
+  const [sort, setSort]   = useState('popular');
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setLoading(true);
+    api.get(`/products?page=${page}&limit=18&sort=${sort}`)
+      .then(r => setData(r.data))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [page, sort]);
+
+  return (
+    <div className="container page">
+      <div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
+        <h2 style={{ fontSize: 20 }}>ESP32 상점</h2>
+        <select style={{ width: 160 }} value={sort} onChange={e => { setSort(e.target.value); setPage(1); }}>
+          <option value="popular">인기순</option>
+          <option value="newest">최신순</option>
+          <option value="price_asc">가격 낮은순</option>
+          <option value="price_desc">가격 높은순</option>
+        </select>
+      </div>
+
+      {loading ? <div className="spinner" /> : (
+        <>
+          <div className="card-grid">
+            {data.products.map(p => (
+              <div key={p.id} className="project-card" onClick={() => navigate(`/shop/${p.id}`)}>
+                {p.project.files[0]
+                  ? <img src={p.project.files[0].thumbnailUrl || p.project.files[0].url} alt={p.project.title} />
+                  : <div style={{ height: 180, background: 'var(--bg3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text2)' }}>이미지 없음</div>
+                }
+                <div className="project-card-body">
+                  <div className="project-card-title">{p.project.title}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 8 }}>
+                    by {p.project.user.nickname}
+                  </div>
+                  <div className="project-card-meta">
+                    <Stars rating={p.avgRating} count={p.reviewCount} />
+                    <span style={{ marginLeft: 'auto', color: 'var(--accent2)', fontWeight: 700, fontSize: 15 }}>
+                      ₩{p.price.toLocaleString()}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {data.products.length === 0 && (
+            <div className="card text-center" style={{ padding: 48 }}>
+              <p className="text-muted">등록된 상품이 없습니다.</p>
+            </div>
+          )}
+
+          {data.pages > 1 && (
+            <div className="pagination">
+              <button disabled={page <= 1} onClick={() => setPage(p => p - 1)}>이전</button>
+              {Array.from({ length: data.pages }, (_, i) => (
+                <button key={i + 1} className={page === i + 1 ? 'active' : ''} onClick={() => setPage(i + 1)}>
+                  {i + 1}
+                </button>
+              ))}
+              <button disabled={page >= data.pages} onClick={() => setPage(p => p + 1)}>다음</button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

frontend/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react({
+      include: /\.(jsx|js|tsx|ts)$/,
+    }),
+  ],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3201',
+    },
+  },
+});